diff --git a/.stylelintrc.js b/.stylelintrc.js
index 357ec17..a3cfdc1 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -9,6 +9,7 @@ module.exports = {
     "stylelint-scss",
   ],
   rules: {
+    "scss/operator-no-newline-after": [true, { "severity": "warning" }],
     "scss/at-extend-no-missing-placeholder": null,
     "no-duplicate-selectors": [true, { "severity": "warning" }],
     "no-descending-specificity": [true, { "severity": "warning" }],
diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss
index ffc06a4..aa399b4 100644
--- a/src/assets/scss/components/_autocomplete.scss
+++ b/src/assets/scss/components/_autocomplete.scss
@@ -1,68 +1,15 @@
 /* @docs */
-$autocomplete-item-color: #000000 !default;
-$autocomplete-item-disabled-opacity: $base-disabled-opacity !default;
-$autocomplete-item-font-size: $base-font-size !default;
-$autocomplete-item-hover-background-color: #f5f5f5 !default;
-$autocomplete-item-hover-color: #000000 !default;
-$autocomplete-item-line-height: $base-line-height !default;
-$autocomplete-item-padding: 0.375rem 1rem !default;
 /* @docs */
 
 .o-acp {
-  position: relative;
-
   &__item {
-    display: block;
-    position: relative;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    cursor: pointer;
-
-    @include avariable(
-      "color",
-      "autocomplete-item-color",
-      $autocomplete-item-color
-    );
-    @include avariable(
-      "font-size",
-      "autocomplete-item-font-size",
-      $autocomplete-item-font-size
-    );
-    @include avariable(
-      "line-height",
-      "autocomplete-item-line-height",
-      $autocomplete-item-line-height
-    );
-    @include avariable(
-      "padding",
-      "autocomplete-item-padding",
-      $autocomplete-item-padding
-    );
 
     &-group-title,
     &--empty {
-      pointer-events: none;
-
-      @include avariable(
-        "opacity",
-        "autocomplete-item-disabled-opacity",
-        $autocomplete-item-disabled-opacity
-      );
-    }
-
-    &--hover,
-    &:hover {
-      @include avariable(
-        "background",
-        "autocomplete-item-hover-background-color",
-        $autocomplete-item-hover-background-color
-      );
-      @include avariable(
-        "color",
-        "autocomplete-item-hover-color",
-        $autocomplete-item-hover-color
-      );
+      @extend .o-drop--disabled;
     }
   }
 }
diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss
index fe676dd..e1600fd 100644
--- a/src/assets/scss/components/_button.scss
+++ b/src/assets/scss/components/_button.scss
@@ -1,19 +1,19 @@
 @use "sass:list";
 
 /* @docs */
-$button-background-color: $primary !default;
-$button-color: $primary-invert !default;
-$button-border-radius: $base-border-radius !default;
+$button-background-color: var(--#{$prefix}primary) !default;
+$button-color: var(--#{$prefix}primary-invert) !default;
+$button-border-radius: var(--#{$prefix}base-border-radius) !default;
 $button-border: 1px solid $button-background-color !default;
 $button-box-shadow: none !default;
 $button-font-weight: 400 !default;
-$button-line-height: $base-line-height !default;
+$button-line-height: var(--#{$prefix}base-line-height) !default;
 $button-margin-icon-to-text: 0.1875em !default;
 $button-margin: 0 !default;
 $button-height: $control-height !default;
 $button-padding: $control-padding-vertical 0.75em !default;
-$button-rounded-border-radius: $base-rounded-border-radius !default;
-$button-disabled-opacity: $base-disabled-opacity !default;
+$button-rounded-border-radius: #{base-rounded-border-radius} !default;
+$button-disabled-opacity: #{base-disabled-opacity} !default;
 $button-outlined-background-color: transparent !default;
 /* @docs */
 
@@ -28,8 +28,6 @@ $button-outlined-background-color: transparent !default;
 }
 
 .o-btn {
-  -moz-appearance: none;
-  -webkit-appearance: none;
   position: relative;
   display: inline-flex;
   cursor: pointer;
@@ -41,25 +39,23 @@ $button-outlined-background-color: transparent !default;
   text-decoration: none;
 
   @include unselectable;
-  @include avariable(
-    "background-color",
-    "button-background-color",
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  background-color: var(
+    --#{$prefix}button-background-color,
     $button-background-color
   );
-  @include avariable("color", "button-color", $button-color);
-  @include avariable("padding", "button-padding", $button-padding);
-  @include avariable("border", "button-border", $button-border);
-  @include avariable(
-    "border-radius",
-    "button-border-radius",
-    $button-border-radius
-  );
-  @include avariable("box-shadow", "button-box-shadow", $button-box-shadow);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("font-weight", "button-font-weight", $button-font-weight);
-  @include avariable("line-height", "button-line-height", $button-line-height);
-  @include avariable("margin", "button-margin", $button-margin);
-  @include avariable("height", "button-height", $button-height);
+  color: var(--#{$prefix}button-color, $button-color);
+  padding: var(--#{$prefix}button-padding, $button-padding);
+  border: var(--#{$prefix}button-border, $button-border);
+  border-radius: var(--#{$prefix}button-border-radius, $button-border-radius);
+  box-shadow: var(--#{$prefix}button-box-shadow, $button-box-shadow);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  font-weight: var(--#{$prefix}button-font-weight, $button-font-weight);
+  line-height: var(--#{$prefix}button-line-height, $button-line-height);
+  margin: var(--#{$prefix}button-margin, $button-margin);
+  height: var(--#{$prefix}button-height, $button-height);
 
   &__wrapper {
     @include side-flex-gap($button-margin-icon-to-text);
@@ -79,40 +75,34 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "button-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}button-rounded-border-radius,
       $button-rounded-border-radius
     );
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "button-disabled-opacity",
-      $button-disabled-opacity
-    );
+    opacity: var(--#{$prefix}button-disabled-opacity, $button-disabled-opacity);
     cursor: not-allowed;
     pointer-events: none;
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("button-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
+
     &--#{$name} {
       border-color: transparent;
-
-      @include avariable("background-color", ("variant-" + #{$name}), $color);
-      @include avariable(
-        "color",
-        ("variant-invert-" + #{$name}),
-        $color-invert
-      );
+      background-color: var(--#{$prefix}variant-#{$name}, $color);
+      color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
 
       &:hover {
         // background-color: darken($color, 2.5%)
@@ -123,58 +113,42 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--outlined {
-    @include avariable(
-      "background-color",
-      "button-outlined-background-color",
+    background-color: var(
+      --#{$prefix}button-outlined-background-color,
       $button-outlined-background-color
     );
-    @include avariable(
-      "border-color",
-      "button-background-color",
-      $button-background-color
-    );
-    @include avariable(
-      "color",
-      "button-background-color",
+    border-color: var(
+      --#{$prefix}button-background-color,
       $button-background-color
     );
+    color: var(--#{$prefix}button-background-color, $button-background-color);
 
     &:hover {
       border-color: transparent;
 
-      @include avariable(
-        "background-color",
-        "button-background-color",
+      background-color: var(
+        --#{$prefix}button-background-color,
         $button-background-color
       );
-      @include avariable("color", "button-color", $button-color);
+      color: var(--#{$prefix}button-color, $button-color);
     }
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &-#{$name} {
-        @include avariable(
-          "background-color",
-          "button-outlined-background-color",
+        background-color: var(
+          --#{$prefix}button-outlined-background-color,
           $button-outlined-background-color
         );
-        @include avariable("border-color", ("variant-" + #{$name}), $color);
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
 
         &:hover {
           border-color: transparent;
-
-          @include avariable(
-            "background-color",
-            ("variant-" + #{$name}),
-            $color
-          );
-          @include avariable(
-            "color",
-            ("variant-invert-" + #{$name}),
-            $color-invert
-          );
+          background-color: var(--#{$prefix}variant-#{$name}, $color);
+          color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
         }
       }
     }
@@ -201,13 +175,9 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--inverted {
-    @include avariable("background-color", "button-color", $button-color);
-    @include avariable("border-color", "button-color", $button-color);
-    @include avariable(
-      "color",
-      "button-background-color",
-      $button-background-color
-    );
+    background-color: var(--#{$prefix}button-color, $button-color);
+    border-color: var(--#{$prefix}button-color, $button-color);
+    color: var(--#{$prefix}button-background-color, $button-background-color);
 
     &:hover {
       // background-color: darken($color-invert, 5%)
@@ -218,18 +188,14 @@ $button-outlined-background-color: transparent !default;
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &-#{$name} {
-        @include avariable(
-          "background-color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
-        @include avariable(
-          "border-color",
-          ("variant-invert-" + #{$name}),
+        background-color: var(
+          --#{$prefix}variant-invert-#{$name},
           $color-invert
         );
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+        color: var(--#{$prefix}variant-#{$name}, $color);
 
         &:hover {
           // background-color: darken($color-invert, 5%)
diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
index 2dc9d66..cf990c7 100644
--- a/src/assets/scss/components/_carousel.scss
+++ b/src/assets/scss/components/_carousel.scss
@@ -1,23 +1,27 @@
 /* @docs */
-$carousel-arrow-background: $white !default;
-$carousel-arrow-color: $primary !default;
+$carousel-arrow-background: var(--#{$prefix}white) !default;
+$carousel-arrow-color: var(--#{$prefix}primary) !default;
 $carousel-arrow-icon-spaced: 1.5rem !default;
 $carousel-arrow-top: 50% !default;
 $carousel-arrow-size: 1.5rem !default;
-$carousel-arrow-border-radius: $base-rounded-border-radius !default;
+$carousel-arrow-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $carousel-arrow-border: 1px solid $carousel-arrow-background !default;
 $carousel-arrow-transition: $speed-slow $easing !default;
-$carousel-indicators-background: rgba($white, 0.5) !default;
+$carousel-indicators-background: rgba(var(--#{$prefix}white), 0.5) !default;
 $carousel-indicators-padding: 0.5rem !default;
 $carousel-indicator-margin: 0 0.5rem 0 0 !default;
-$carousel-indicator-color: $primary !default;
-$carousel-indicator-background: $white !default;
+$carousel-indicator-color: var(--#{$prefix}primary) !default;
+$carousel-indicator-background: var(--#{$prefix}white) !default;
 $carousel-indicator-border: 1px solid $carousel-indicator-color !default;
 $carousel-indicator-active-background: $carousel-indicator-color !default;
 $carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;
 $carousel-indicator-transition: $speed-slow $easing !default;
 $carousel-indicator-size: 10px !default;
-$carousel-indicator-dots-border-radius: $base-border-radius !default;
+$carousel-indicator-dots-border-radius: var(
+  --#{$prefix}base-border-radius
+) !default;
 $carousel-indicator-lines-height: 5px !default;
 $carousel-indicator-lines-width: 25px !default;
 $carousel-items-transition: all $speed-slower ease-out 0s !default;
@@ -44,16 +48,11 @@ $carousel-overlay-zindex: 40 !default;
     max-height: 100vh;
     position: fixed;
 
-    @include avariable(
-      "background-color",
-      "carousel-overlay-background",
+    background-color: var(
+      --#{$prefix}carousel-overlay-background,
       $carousel-overlay-background
     );
-    @include avariable(
-      "z-index",
-      "carousel-overlay-zindex",
-      $carousel-overlay-zindex
-    );
+    z-index: var(--#{$prefix}carousel-overlay-zindex, $carousel-overlay-zindex);
   }
 
   &__wrapper {
@@ -66,16 +65,15 @@ $carousel-overlay-zindex: 40 !default;
     width: 100%;
 
     &:not(&--dragging) {
-      @include avariable(
-        "transition",
-        "carousel-items-transition",
+      transition: var(
+        --#{$prefix}carousel-items-transition,
         $carousel-items-transition
       );
     }
   }
 
   &__item {
-    @include avariable("border", "carousel-item-border", $carousel-item-border);
+    border: var(--#{$prefix}carousel-item-border, $carousel-item-border);
     flex-shrink: 0;
 
     &--clickable {
@@ -89,14 +87,12 @@ $carousel-overlay-zindex: 40 !default;
     align-items: center;
     justify-content: center;
 
-    @include avariable(
-      "padding",
-      "carousel-indicators-padding",
+    padding: var(
+      --#{$prefix}carousel-indicators-padding,
       $carousel-indicators-padding
     );
-    @include avariable(
-      "background",
-      "carousel-indicators-background",
+    background: var(
+      --#{$prefix}carousel-indicators-background,
       $carousel-indicators-background
     );
 
@@ -115,9 +111,8 @@ $carousel-overlay-zindex: 40 !default;
 
   &__indicator {
     &:not(:last-child) {
-      @include avariable(
-        "margin",
-        "carousel-indicator-margin",
+      margin: var(
+        --#{$prefix}carousel-indicator-margin,
         $carousel-indicator-margin
       );
     }
@@ -125,76 +120,64 @@ $carousel-overlay-zindex: 40 !default;
     &__item {
       display: block;
 
-      @include avariable(
-        "border",
-        "carousel-indicator-border",
+      border: var(
+        --#{$prefix}carousel-indicator-border,
         $carousel-indicator-border
       );
-      @include avariable(
-        "background",
-        "carousel-indicator-background",
+      background: var(
+        --#{$prefix}carousel-indicator-background,
         $carousel-indicator-background
       );
-      @include avariable(
-        "transition",
-        "carousel-indicator-transition",
+      transition: var(
+        --#{$prefix}carousel-indicator-transition,
         $carousel-indicator-transition
       );
 
       &--active,
       :hover {
-        @include avariable(
-          "background",
-          "carousel-indicator-active-background",
+        background: var(
+          --#{$prefix}carousel-indicator-active-background,
           $carousel-indicator-active-background
         );
-        @include avariable(
-          "border",
-          "carousel-indicator-active-border",
+        border: var(
+          --#{$prefix}carousel-indicator-active-border,
           $carousel-indicator-active-border
         );
       }
 
       &--boxes {
-        @include avariable(
-          "width",
-          "carousel-indicator-size",
+        width: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-size",
+        height: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
       }
 
       &--dots {
-        @include avariable(
-          "border-radius",
-          "carousel-indicator-dots-border-radius",
+        border-radius: var(
+          --#{$prefix}carousel-indicator-dots-border-radius,
           $carousel-indicator-dots-border-radius
         );
-        @include avariable(
-          "width",
-          "carousel-indicator-size",
+        width: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-size",
+        height: var(
+          --#{$prefix}carousel-indicator-size,
           $carousel-indicator-size
         );
       }
 
       &--lines {
-        @include avariable(
-          "width",
-          "carousel-indicator-lines-width",
+        width: var(
+          --#{$prefix}carousel-indicator-lines-width,
           $carousel-indicator-lines-width
         );
-        @include avariable(
-          "height",
-          "carousel-indicator-lines-height",
+        height: var(
+          --#{$prefix}carousel-indicator-lines-height,
           $carousel-indicator-lines-height
         );
       }
@@ -203,28 +186,20 @@ $carousel-overlay-zindex: 40 !default;
 
   &__arrow__icon {
     cursor: pointer;
-
-    @include avariable(
-      "background",
-      "carousel-arrow-background",
+    background: var(
+      --#{$prefix}carousel-arrow-background,
       $carousel-arrow-background
     );
-    @include avariable("color", "carousel-arrow-color", $carousel-arrow-color);
-    @include avariable("width", "carousel-arrow-size", $carousel-arrow-size);
-    @include avariable("height", "carousel-arrow-size", $carousel-arrow-size);
-    @include avariable(
-      "border-radius",
-      "carousel-arrow-border-radius",
+    color: var(--#{$prefix}carousel-arrow-color, $carousel-arrow-color);
+    width: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
+    height: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
+    border-radius: var(
+      --#{$prefix}carousel-arrow-border-radius,
       $carousel-arrow-border-radius
     );
-    @include avariable(
-      "border",
-      "carousel-arrow-border",
-      $carousel-arrow-border
-    );
-    @include avariable(
-      "transition",
-      "carousel-arrow-transition",
+    border: var(--#{$prefix}carousel-arrow-border, $carousel-arrow-border);
+    transition: var(
+      --#{$prefix}carousel-arrow-transition,
       $carousel-arrow-transition
     );
   }
@@ -232,28 +207,23 @@ $carousel-overlay-zindex: 40 !default;
   &__arrow__icon-prev,
   &__arrow__icon-next {
     position: absolute;
-
-    @include avariable("top", "carousel-arrow-top", $carousel-arrow-top);
-    @include evariable(
-      "transform",
-      "translateY($length)",
-      eparam("$length", variable("carousel-arrow-top", -$carousel-arrow-top))
+    top: var(--#{$prefix}carousel-arrow-top, $carousel-arrow-top);
+    transform: translateY(
+      var(--#{$prefix}carousel-arrow-top, -$carousel-arrow-top)
     );
     z-index: 1;
   }
 
   &__arrow__icon-prev {
-    @include avariable(
-      "left",
-      "carousel-arrow-icon-spaced",
+    left: var(
+      --#{$prefix}carousel-arrow-icon-spaced,
       $carousel-arrow-icon-spaced
     );
   }
 
   &__arrow__icon-next {
-    @include avariable(
-      "right",
-      "carousel-arrow-icon-spaced",
+    right: var(
+      --#{$prefix}carousel-arrow-icon-spaced,
       $carousel-arrow-icon-spaced
     );
   }
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index 58e513d..de177bb 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -1,21 +1,22 @@
 @use "sass:list";
 
 /* @docs */
-$checkbox-active-background-color: $primary !default;
-$checkbox-background-color: $primary !default;
-$checkbox-border-color: $primary !default;
-$checkbox-border-radius: $base-border-radius !default;
+$checkbox-active-background-color: var(--#{$prefix}primary) !default;
+$checkbox-background-color: var(--#{$prefix}primary) !default;
+$checkbox-border-color: var(--#{$prefix}primary) !default;
+$checkbox-border-radius: var(--#{$prefix}base-border-radius) !default;
 $checkbox-border-width: 2px !default;
 $checkbox-checked-box-shadow-length: 0 0 0.5em !default;
 $checkbox-checked-box-shadow-opacity: 0.8 !default;
 $checkbox-checkmark-color: $primary-invert !default;
-$checkbox-disabled-opacity: $base-disabled-opacity !default;
+$checkbox-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $checkbox-label-padding: 0 0 0 0.5em !default;
 $checkbox-margin-sibiling: 0.5em !default;
 $checkbox-size: 1rem !default;
 $checkbox-line-height: 1.5 !default;
 /* @docs */
 
+// checkmark svg calculation
 @function svg_checkmark($color) {
   $start: '<svg width="100%" height="100%" viewBox="0 0 234 225" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
   $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)"><path style="fill:#{$color}" d="M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z"></path></g></g>';
@@ -23,6 +24,8 @@ $checkbox-line-height: 1.5 !default;
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
+
+// indeterminate svg calculation
 @function svg_indeterminate($color) {
   $start: '<svg width="100%" height="100%" viewBox="0 0 417 417" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
   $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(6.96176,0,0,20.5682,-118.661,-806.753)"><path style="fill:#{$color}" d="M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z"/></g></g>';
@@ -32,26 +35,21 @@ $checkbox-line-height: 1.5 !default;
 }
 
 .o-chk {
+  @include unselectable;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   position: relative;
 
-  @include unselectable;
-  @include avariable(
-    "line-height",
-    "checkbox-line-height",
-    $checkbox-line-height
-  );
-  @include avariable(
-    "margin-right",
-    "checkbox-margin-sibiling",
+  line-height: var(--#{$prefix}checkbox-line-height, $checkbox-line-height);
+  margin-right: var(
+    --#{$prefix}checkbox-margin-sibiling,
     $checkbox-margin-sibiling
   );
 
   &__input {
-    @include avariable("width", "checkbox-size", $checkbox-size);
-    @include avariable("height", "checkbox-size", $checkbox-size);
+    width: var(--#{$prefix}checkbox-size, $checkbox-size);
+    height: var(--#{$prefix}checkbox-size, $checkbox-size);
     outline: none;
     margin: 0;
     vertical-align: top;
@@ -66,117 +64,86 @@ $checkbox-line-height: 1.5 !default;
     cursor: pointer;
     background-repeat: no-repeat;
 
-    @include avariable(
-      "background-color",
-      "checkbox-background-color",
+    background-color: var(
+      --#{$prefix}checkbox-background-color,
       $checkbox-background-color
     );
-    @include avariable(
-      "border-radius",
-      "checkbox-border-radius",
+    border-radius: var(
+      --#{$prefix}checkbox-border-radius,
       $checkbox-border-radius
     );
-    @include avariable(
-      "border-width",
-      "checkbox-border-width",
+    border-width: var(
+      --#{$prefix}checkbox-border-width,
       $checkbox-border-width
     );
-    @include avariable(
-      "border-color",
-      "checkbox-border-color",
+    border-color: var(
+      --#{$prefix}checkbox-border-color,
       $checkbox-border-color
     );
     border-style: solid;
     transition-property: background;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
+    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
 
     &--checked {
-      @include avariable(
-        "background-color",
-        "checkbox-active-background-color",
+      background-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      @include avariable(
-        "border-color",
-        "checkbox-active-background-color",
+      border-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      background-image: url(svg_checkmark(
-        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
-      ));
+      background-image: url(svg_checkmark($checkbox-checkmark-color));
     }
 
     &--indeterminate {
-      @include avariable(
-        "background-color",
-        "checkbox-active-background-color",
+      background-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      @include avariable(
-        "border-color",
-        "checkbox-active-background-color",
+      border-color: var(
+        --#{$prefix}checkbox-active-background-color,
         $checkbox-active-background-color
       );
-      background-image: url(svg_indeterminate(
-        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
-      ));
+      background-image: url(svg_indeterminate($checkbox-checkmark-color));
     }
   }
 
   &__label {
-    @include avariable(
-      "padding",
-      "checkbox-label-padding",
-      $checkbox-label-padding
-    );
+    padding: var(--#{$prefix}checkbox-label-padding, $checkbox-label-padding);
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "checkbox-disabled-opacity",
+    opacity: var(
+      --#{$prefix}checkbox-disabled-opacity,
       $checkbox-disabled-opacity
     );
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("checkbox-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
       .o-chk__input {
-        @include avariable("border-color", ("variant-" + #{$name}), $color);
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-#{$name}, $color);
+        background-color: var(--#{$prefix}variant-#{$name}, $color);
       }
 
       .o-chk__input--checked {
-        background-image: url(svg_checkmark(
-          variable(("variant-invert-" + #{$name}), $color-invert)
-        ));
+        background-image: url(svg_checkmark($color-invert));
       }
 
       .o-chk__input--indeterminate {
-        background-image: url(svg_indeterminate(
-          variable(("variant-invert-" + #{$name}), $color-invert)
-        ));
+        background-image: url(svg_indeterminate($color-invert));
       }
     }
   }
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
index a9eddd8..d75c1ef 100644
--- a/src/assets/scss/components/_datepicker.scss
+++ b/src/assets/scss/components/_datepicker.scss
@@ -1,72 +1,65 @@
 @use "sass:list";
 
 /* @docs */
-$datepicker-font-size: $base-font-size !default;
-$datepicker-box-line-height: $base-line-height !default;
+$datepicker-font-size: var(--#{$prefix}base-font-size) !default;
+$datepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
 $datepicker-box-padding: 0.375rem 1rem !default;
 $datepicker-header-padding: 0 0 0.875rem 0 !default;
 $datepicker-header-margin: 0 0 0.875rem 0 !default;
-$datepicker-header-border-bottom: 1px solid $grey-lighter !default;
+$datepicker-header-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
 $datepicker-footer-padding: 0.875rem 0.5rem 0 0.5rem !default;
 $datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
-$datepicker-footer-border-top: 1px solid $grey-lighter !default;
+$datepicker-footer-border-top: 1px solid var(--#{$prefix}grey-lighter) !default;
 $datepicker-table-head-padding: 0 0 0.875rem 0 !default;
 $datepicker-table-head-margin: 0 0 0.875rem 0 !default;
-$datepicker-table-head-border-bottom: 1px solid $grey-lighter !default;
-$datepicker-table-head-item-color: $grey !default;
+$datepicker-table-head-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
+$datepicker-table-head-item-color: var(--#{$prefix}grey) !default;
 $datepicker-table-head-item-font-weight: 600 !default;
-$datepicker-item-today-border: solid 1px rgba($primary, 0.5) !default;
-$datepicker-item-selectable-color: $grey-dark !default;
-$datepicker-item-disabled-color: $grey-light !default;
-$datepicker-item-border-radius: $base-border-radius !default;
+$datepicker-item-today-border: solid 1px rgba(var(--#{$prefix}primary), 0.5) !default;
+$datepicker-item-selectable-color: var(--#{$prefix}grey-dark) !default;
+$datepicker-item-disabled-color: var(--#{$prefix}grey-light) !default;
+$datepicker-item-border-radius: var(--#{$prefix}base-border-radius) !default;
 $datepicker-item-padding: 0.5rem 0.75rem !default;
-$datepicker-item-selected-color: $primary-invert !default;
-$datepicker-item-selected-background-color: $primary !default;
+$datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
+$datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
 $datepicker-item-selected-border-radius: 0 !default;
 $datepicker-item-selected-within-background-color: rgba(
   $datepicker-item-selected-background-color,
   0.5
 ) !default;
-$datepicker-item-hovered-background-color: $grey !default;
-$datepicker-item-hovered-color: $grey-lighter !default;
+$datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
+$datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
 $datepicker-item-hovered-background-color: #f5f5f5 !default;
 $datepicker-item-hovered-within-background-color: rgba(
   $datepicker-item-hovered-background-color,
   0.5
 ) !default;
-$datepicker-item-nearby-color: $grey-light !default;
+$datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
 $datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
-$datepicker-event-background-color: $grey-light !default;
+$datepicker-event-background-color: var(--#{$prefix}grey-light) !default;
 $datepicker-event-dots-size: 0.35em !default;
 $datepicker-event-dots-margin: 0 0.1em !default;
 $datepicker-event-bars-height: 0.25em !default;
-$datepicker-btn-border-color: $grey-lighter !default;
-$datepicker-btn-border-radius: $base-border-radius !default;
+$datepicker-btn-border-color: var(--#{$prefix}grey-lighter) !default;
+$datepicker-btn-border-radius: var(--#{$prefix}base-border-radius) !default;
 $datepicker-btn-border: 1px solid transparent !default;
 $datepicker-btn-color: #363636 !default;
 $datepicker-btn-height: 2.25em !default;
-$datepicker-btn-hover-border-color: $grey-light !default;
+$datepicker-btn-hover-border-color: var(--#{$prefix}grey-light) !default;
 $datepicker-btn-hover-color: #363636 !default;
-$datepicker-btn-line-height: $base-line-height !default;
+$datepicker-btn-line-height: var(--#{$prefix}base-line-height) !default;
 $datepicker-btn-margin: 0.25rem !default;
 $datepicker-btn-min-width: 2.25em !default;
 $datepicker-btn-padding: 0.5em 0.5em !default;
 /* @docs */
 
 .o-dpck {
-  @include avariable(
-    "font-size",
-    "datepicker-font-size",
-    $datepicker-font-size
-  );
+  font-size: var(--#{$prefix}datepicker-font-size, $datepicker-font-size);
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("datepicker-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}datepicker-font-size-#{$name}, $value);
     }
   }
 
@@ -77,33 +70,24 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   &__box {
     display: block;
     position: relative;
-
-    @include avariable(
-      "line-height",
-      "datepicker-box-line-height",
+    line-height: var(
+      --#{$prefix}datepicker-box-line-height,
       $datepicker-box-line-height
     );
-    @include avariable(
-      "padding",
-      "datepicker-box-padding",
-      $datepicker-box-padding
-    );
+    padding: var(--#{$prefix}datepicker-box-padding, $datepicker-box-padding);
   }
 
   &__header {
-    @include avariable(
-      "padding",
-      "datepicker-header-padding",
+    padding: var(
+      --#{$prefix}datepicker-header-padding,
       $datepicker-header-padding
     );
-    @include avariable(
-      "margin",
-      "datepicker-header-margin",
+    margin: var(
+      --#{$prefix}datepicker-header-margin,
       $datepicker-header-margin
     );
-    @include avariable(
-      "border-bottom",
-      "datepicker-header-border-bottom",
+    border-bottom: var(
+      --#{$prefix}datepicker-header-border-bottom,
       $datepicker-header-border-bottom
     );
 
@@ -113,13 +97,10 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       justify-content: center;
       text-align: center;
 
+      // size variants
       @each $name, $value in $sizes {
         &--#{$name} {
-          @include avariable(
-            "font-size",
-            ("datepicker-font-size-" + #{$name}),
-            $value
-          );
+          font-size: var(--#{$prefix}datepicker-font-size-#{$name}, $value);
         }
       }
     }
@@ -134,6 +115,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
 
     &__previous,
     &__next {
+      @include unselectable;
       justify-content: center;
       text-align: center;
       text-decoration: none;
@@ -145,65 +127,36 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       display: inline-flex;
       position: relative;
       vertical-align: top;
-
-      @include unselectable;
-      @include avariable(
-        "line-height",
-        "datepicker-btn-line-height",
+      line-height: var(
+        --#{$prefix}datepicker-btn-line-height,
         $datepicker-btn-line-height
       );
-      @include avariable(
-        "border",
-        "datepicker-btn-border",
-        $datepicker-btn-border
-      );
-      @include avariable(
-        "border-radius",
-        "datepicker-btn-border-radius",
+      border: var(--#{$prefix}datepicker-btn-border, $datepicker-btn-border);
+      border-radius: var(
+        --#{$prefix}datepicker-btn-border-radius,
         $datepicker-btn-border-radius
       );
-      @include avariable(
-        "border-color",
-        "datepicker-btn-border-color",
+      border-color: var(
+        --#{$prefix}datepicker-btn-border-color,
         $datepicker-btn-border-color
       );
-      @include avariable(
-        "color",
-        "datepicker-btn-color",
-        $datepicker-btn-color
-      );
-      @include avariable(
-        "min-width",
-        "datepicker-btn-min-width",
+      color: var(--#{$prefix}datepicker-btn-color, $datepicker-btn-color);
+      min-width: var(
+        --#{$prefix}datepicker-btn-min-width,
         $datepicker-btn-min-width
       );
-      @include avariable(
-        "height",
-        "datepicker-btn-height",
-        $datepicker-btn-height
-      );
-      @include avariable(
-        "padding",
-        "datepicker-btn-padding",
-        $datepicker-btn-padding
-      );
-      @include avariable(
-        "margin",
-        "datepicker-btn-margin",
-        $datepicker-btn-margin
-      );
+      height: var(--#{$prefix}datepicker-btn-height, $datepicker-btn-height);
+      padding: var(--#{$prefix}datepicker-btn-padding, $datepicker-btn-padding);
+      margin: var(--#{$prefix}datepicker-btn-margin, $datepicker-btn-margin);
 
       &:hover {
         text-decoration: none;
-
-        @include avariable(
-          "border-color",
-          "datepicker-btn-hover-border-color",
+        border-color: var(
+          --#{$prefix}datepicker-btn-hover-border-color,
           $datepicker-btn-hover-border-color
         );
-        @include avariable(
-          "color",
-          "datepicker-btn-hover-color",
+        color: var(
+          --#{$prefix}datepicker-btn-hover-color,
           $datepicker-btn-hover-color
         );
       }
@@ -225,19 +178,16 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   }
 
   &__footer {
-    @include avariable(
-      "padding",
-      "datepicker-header-padding",
+    padding: var(
+      --#{$prefix}datepicker-header-padding,
       $datepicker-footer-padding
     );
-    @include avariable(
-      "margin",
-      "datepicker-header-margin",
+    margin: var(
+      --#{$prefix}datepicker-header-margin,
       $datepicker-footer-margin
     );
-    @include avariable(
-      "border-top",
-      "datepicker-header-border-top",
+    border-top: var(
+      --#{$prefix}datepicker-header-border-top,
       $datepicker-footer-border-top
     );
   }
@@ -249,20 +199,16 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
 
     &__head {
       display: table-header-group;
-
-      @include avariable(
-        "padding",
-        "datepicker-table-head-padding",
+      padding: var(
+        --#{$prefix}datepicker-table-head-padding,
         $datepicker-table-head-padding
       );
-      @include avariable(
-        "margin",
-        "datepicker-table-head-margin",
+      margin: var(
+        --#{$prefix}datepicker-table-head-margin,
         $datepicker-table-head-margin
       );
-      @include avariable(
-        "border-bottom",
-        "datepicker-table-head-border-bottom",
+      border-bottom: var(
+        --#{$prefix}datepicker-table-head-border-bottom,
         $datepicker-table-head-border-bottom
       );
     }
@@ -276,14 +222,12 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
     }
 
     &__head-cell {
-      @include avariable(
-        "padding",
-        "datepicker-table-head-item-padding",
+      padding: var(
+        --#{$prefix}datepicker-table-head-item-padding,
         $datepicker-table-head-item-color
       );
-      @include avariable(
-        "font-weight",
-        "datepicker-table-head-item-font-weight",
+      font-weight: var(
+        --#{$prefix}datepicker-table-head-item-font-weight,
         $datepicker-table-head-item-font-weight
       );
     }
@@ -293,102 +237,85 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       vertical-align: middle;
       display: table-cell;
       text-decoration: none;
-
-      @include avariable(
-        "border-radius",
-        "datepicker-item-border-radius",
+      border-radius: var(
+        --#{$prefix}datepicker-item-border-radius,
         $datepicker-item-border-radius
       );
-      @include avariable(
-        "padding",
-        "datepicker-item-padding",
+      padding: var(
+        --#{$prefix}datepicker-item-padding,
         $datepicker-item-padding
       );
 
       &--unselectable {
-        @include avariable(
-          "color",
-          "datepicker-item-disabled-color",
+        color: var(
+          --#{$prefix}datepicker-item-disabled-color,
           $datepicker-item-disabled-color
         );
       }
 
       &--today {
-        @include avariable(
-          "border",
-          "datepicker-item-today-border",
+        border: var(
+          --#{$prefix}datepicker-item-today-border,
           $datepicker-item-today-border
         );
       }
 
       &--selectable {
-        @include avariable(
-          "color",
-          "datepicker-item-selectable-color",
+        color: var(
+          --#{$prefix}datepicker-item-selectable-color,
           $datepicker-item-selectable-color
         );
       }
 
       &--first-hovered {
-        @include avariable(
-          "background-color",
-          "datepicker-item-hovered-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-hovered-background-color,
           $datepicker-item-hovered-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-hovered-color",
+        color: var(
+          --#{$prefix}datepicker-item-hovered-color,
           $datepicker-item-hovered-color
         );
-        @include avariable(
-          "border-bottom-right-radius",
-          "datepicker-item-selected-border-radius",
+        border-bottom-right-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
-        @include avariable(
-          "border-top-right-radius",
-          "datepicker-item-selected-border-radius",
+        border-top-right-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
 
       &--within-hovered {
-        @include avariable(
-          "background-color",
-          "datepicker-item-hovered-within-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-hovered-within-background-color,
           $datepicker-item-hovered-within-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-hovered-color",
+        color: var(
+          --#{$prefix}datepicker-item-hovered-color,
           $datepicker-item-hovered-color
         );
-        @include avariable(
-          "border-radius",
-          "datepicker-item-selected-border-radius",
+        border-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
 
       &--last-hovered {
-        @include avariable(
-          "background-color",
-          "datepicker-item-hovered-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-hovered-background-color,
           $datepicker-item-hovered-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-hovered-color",
+        color: var(
+          --#{$prefix}datepicker-item-hovered-color,
           $datepicker-item-hovered-color
         );
-        @include avariable(
-          "border-bottom-left-radius",
-          "datepicker-item-selected-border-radius",
+        border-bottom-left-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
-        @include avariable(
-          "border-top-left-radius",
-          "datepicker-item-selected-border-radius",
+        border-top-left-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
@@ -396,14 +323,12 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       &--selected:not(&--first-hovered):not(&--within-hovered):not(
           &--last-hovered
         ) {
-        @include avariable(
-          "background-color",
-          "datepicker-item-selected-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-selected-background-color,
           $datepicker-item-selected-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-selected-color",
+        color: var(
+          --#{$prefix}datepicker-item-selected-color,
           $datepicker-item-selected-color
         );
       }
@@ -411,24 +336,20 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       &--first-selected:not(&--first-hovered):not(&--within-hovered):not(
           &--last-hovered
         ) {
-        @include avariable(
-          "background-color",
-          "datepicker-item-selected-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-selected-background-color,
           $datepicker-item-selected-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-selected-color",
+        color: var(
+          --#{$prefix}datepicker-item-selected-color,
           $datepicker-item-selected-color
         );
-        @include avariable(
-          "border-bottom-right-radius",
-          "datepicker-item-selected-border-radius",
+        border-bottom-right-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
-        @include avariable(
-          "border-top-right-radius",
-          "datepicker-item-selected-border-radius",
+        border-top-right-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
@@ -436,14 +357,12 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       &--within-selected:not(&--first-hovered):not(&--within-hovered):not(
           &--last-hovered
         ) {
-        @include avariable(
-          "background-color",
-          "datepicker-item-selected-within-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-selected-within-background-color,
           $datepicker-item-selected-within-background-color
         );
-        @include avariable(
-          "border-radius",
-          "datepicker-item-selected-border-radius",
+        border-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
@@ -451,32 +370,27 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       &--last-selected:not(&--first-hovered):not(&--within-hovered):not(
           &--last-hovered
         ) {
-        @include avariable(
-          "background-color",
-          "datepicker-item-selected-background-color",
+        background-color: var(
+          --#{$prefix}datepicker-item-selected-background-color,
           $datepicker-item-selected-background-color
         );
-        @include avariable(
-          "color",
-          "datepicker-item-selected-color",
+        color: var(
+          --#{$prefix}datepicker-item-selected-color,
           $datepicker-item-selected-color
         );
-        @include avariable(
-          "border-bottom-left-radius",
-          "datepicker-item-selected-border-radius",
+        border-bottom-left-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
-        @include avariable(
-          "border-top-left-radius",
-          "datepicker-item-selected-border-radius",
+        border-top-left-radius: var(
+          --#{$prefix}datepicker-item-selected-border-radius,
           $datepicker-item-selected-border-radius
         );
       }
 
       &--nearby:not(&--selected) {
-        @include avariable(
-          "color",
-          "datepicker-item-nearby-color",
+        color: var(
+          --#{$prefix}datepicker-item-nearby-color,
           $datepicker-item-nearby-color
         );
       }
@@ -486,12 +400,11 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       }
 
       &--events {
-        @include avariable(
-          "padding",
-          "datepicker-events-item-padding",
+        position: relative;
+        padding: var(
+          --#{$prefix}datepicker-events-item-padding,
           $datepicker-events-item-padding
         );
-        position: relative;
       }
     }
 
@@ -505,49 +418,39 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
     }
 
     &__event {
-      @include avariable(
-        "background-color",
-        "datepicker-event-background-color",
+      background-color: var(
+        --#{$prefix}datepicker-event-background-color,
         $datepicker-event-background-color
       );
 
+      // color variants
       @each $name, $pair in $colors {
         $color: list.nth($pair, 1);
         &--#{$name} {
           background-color: $color;
-
-          @include avariable(
-            "background-color",
-            ("variant-" + #{$name}),
-            $color
-          );
+          background-color: var(--#{$prefix}variant-#{$name}, $color);
         }
       }
 
       &--dots {
         border-radius: 50%;
-
-        @include avariable(
-          "margin",
-          "datepicker-event-dots-margin",
+        margin: var(
+          --#{$prefix}datepicker-event-dots-margin,
           $datepicker-event-dots-margin
         );
-        @include avariable(
-          "height",
-          "datepicker-event-dots-size",
+        height: var(
+          --#{$prefix}datepicker-event-dots-size,
           $datepicker-event-dots-size
         );
-        @include avariable(
-          "width",
-          "datepicker-event-dots-size",
+        width: var(
+          --#{$prefix}datepicker-event-dots-size,
           $datepicker-event-dots-size
         );
       }
 
       &--bars {
-        @include avariable(
-          "height",
-          "datepicker-event-bars-height",
+        height: var(
+          --#{$prefix}datepicker-event-bars-height,
           $datepicker-event-bars-height
         );
         width: 100%;
diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
index 081913a..53cc003 100644
--- a/src/assets/scss/components/_dropdown.scss
+++ b/src/assets/scss/components/_dropdown.scss
@@ -1,17 +1,19 @@
 /* @docs */
-$dropdown-disabled-opacity: $base-disabled-opacity !default;
-$dropdown-item-active-background-color: $primary !default;
-$dropdown-item-active-color: $primary-invert !default;
+$dropdown-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$dropdown-item-active-background-color: var(--#{$prefix}primary) !default;
+$dropdown-item-active-color: var(--#{$prefix}primary-invert) !default;
 $dropdown-item-color: #000000 !default;
-$dropdown-item-disabled-opacity: $base-disabled-opacity !default;
-$dropdown-item-font-size: $base-font-size !default;
+$dropdown-item-disabled-opacity: var(
+  --#{$prefix}base-disabled-opacity
+) !default;
+$dropdown-item-font-size: var(--#{$prefix}base-font-size) !default;
 $dropdown-item-hover-background-color: #f5f5f5 !default;
 $dropdown-item-hover-color: #000000 !default;
-$dropdown-item-line-height: $base-line-height !default;
+$dropdown-item-line-height: var(--#{$prefix}base-line-height) !default;
 $dropdown-item-padding: 0.375rem 1rem !default;
 $dropdown-item-font-weight: 400 !default;
 $dropdown-menu-background: #ffffff !default;
-$dropdown-menu-border-radius: $base-border-radius !default;
+$dropdown-menu-border-radius: var(--#{$prefix}base-border-radius) !default;
 $dropdown-menu-box-shadow:
   0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
   0 0 0 1px rgba(10, 10, 10, 0.02) !default;
@@ -42,14 +44,12 @@ $dropdown-mobile-zindex: 50 !default;
     cursor: pointer;
     display: none;
 
-    @include avariable(
-      "background-color",
-      "dropdown-mobile-overlay-color",
+    background-color: var(
+      --#{$prefix}dropdown-mobile-overlay-color,
       $dropdown-mobile-overlay-color
     );
-    @include avariable(
-      "z-index",
-      "dropdown-mobile-overlay-zindex",
+    z-index: var(
+      --#{$prefix}dropdown-mobile-overlay-zindex,
       $dropdown-mobile-overlay-zindex
     );
   }
@@ -62,49 +62,28 @@ $dropdown-mobile-zindex: 50 !default;
     position: absolute;
     display: block;
 
-    @include avariable(
-      "min-width",
-      "dropdown-menu-width",
-      $dropdown-menu-width
-    );
-    @include avariable(
-      "z-index",
-      "dropdown-menu-zindex",
-      $dropdown-menu-zindex
-    );
-    @include avariable(
-      "background-color",
-      "dropdown-menu-background",
+    min-width: var(--#{$prefix}dropdown-menu-width, $dropdown-menu-width);
+    z-index: var(--#{$prefix}dropdown-menu-zindex, $dropdown-menu-zindex);
+    background-color: var(
+      --#{$prefix}dropdown-menu-background,
       $dropdown-menu-background
     );
-    @include avariable(
-      "border-radius",
-      "dropdown-menu-border-radius",
+    border-radius: var(
+      --#{$prefix}dropdown-menu-border-radius,
       $dropdown-menu-border-radius
     );
-    @include avariable(
-      "box-shadow",
-      "dropdown-menu-box-shadow",
+    box-shadow: var(
+      --#{$prefix}dropdown-menu-box-shadow,
       $dropdown-menu-box-shadow
     );
-    @include avariable(
-      "padding",
-      "dropdown-menu-padding",
-      $dropdown-menu-padding
-    );
-    @include avariable("margin", "dropdown-menu-margin", $dropdown-menu-margin);
+    padding: var(--#{$prefix}dropdown-menu-padding, $dropdown-menu-padding);
+    margin: var(--#{$prefix}dropdown-menu-margin, $dropdown-menu-margin);
 
     &--bottom {
       left: 50%;
       right: auto;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       bottom: auto;
       transform: translateX(-50%);
@@ -114,26 +93,15 @@ $dropdown-mobile-zindex: 50 !default;
       left: 50%;
       right: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       transform: translateX(-50%);
     }
 
     &--left {
-      @include evariable(
-        "right",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      right: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       left: auto;
       top: 50%;
@@ -143,14 +111,8 @@ $dropdown-mobile-zindex: 50 !default;
 
     &--right {
       right: auto;
-
-      @include evariable(
-        "left",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      left: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       top: 50%;
       bottom: auto;
@@ -161,14 +123,8 @@ $dropdown-mobile-zindex: 50 !default;
       right: 0;
       left: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
     }
 
@@ -176,28 +132,16 @@ $dropdown-mobile-zindex: 50 !default;
       right: auto;
       left: 0;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      bottom: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
     }
 
     &--bottom-right {
       right: 0;
       left: auto;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}"dropdown-menu-spacer", $dropdown-menu-spacer)
       );
       bottom: auto;
     }
@@ -205,14 +149,8 @@ $dropdown-mobile-zindex: 50 !default;
     &--bottom-left {
       right: auto;
       left: 0;
-
-      @include evariable(
-        "top",
-        "calc(100% + $param)",
-        eparam(
-          "$param",
-          variable("dropdown-menu-spacer", $dropdown-menu-spacer)
-        )
+      top: calc(
+        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
       );
       bottom: auto;
     }
@@ -222,65 +160,53 @@ $dropdown-mobile-zindex: 50 !default;
     display: block;
     position: relative;
 
-    @include avariable("color", "dropdown-item-color", $dropdown-item-color);
-    @include avariable(
-      "font-size",
-      "dropdown-item-font-size",
+    color: var(--#{$prefix}dropdown-item-color, $dropdown-item-color);
+    font-size: var(
+      --#{$prefix}dropdown-item-font-size,
       $dropdown-item-font-size
     );
-    @include avariable(
-      "font-weight",
-      "dropdown-item-font-weight",
+    font-weight: var(
+      --#{$prefix}dropdown-item-font-weight,
       $dropdown-item-font-weight
     );
-    @include avariable(
-      "line-height",
-      "dropdown-item-line-height",
+    line-height: var(
+      --#{$prefix}dropdown-item-line-height,
       $dropdown-item-line-height
     );
-    @include avariable(
-      "padding",
-      "dropdown-item-padding",
-      $dropdown-item-padding
-    );
+    padding: var(--#{$prefix}dropdown-item-padding, $dropdown-item-padding);
 
     &--disabled {
-      @include avariable(
-        "opacity",
-        "dropdown-item-disabled-opacity",
+      opacity: var(
+        --#{$prefix}dropdown-item-disabled-opacity,
         $dropdown-item-disabled-opacity
       );
       pointer-events: none;
     }
 
     &--active {
-      @include avariable(
-        "background-color",
-        "dropdown-item-active-background-color",
+      background-color: var(
+        --#{$prefix}dropdown-item-active-background-color,
         $dropdown-item-active-background-color
       );
-      @include avariable(
-        "color",
-        "dropdown-item-active-color",
+      color: var(
+        --#{$prefix}dropdown-item-active-color,
         $dropdown-item-active-color
       );
     }
 
     &--clickable {
       cursor: pointer;
+    }
 
-      &:hover:not(&--active) {
-        @include avariable(
-          "background-color",
-          "dropdown-item-hover-background-color",
-          $dropdown-item-hover-background-color
-        );
-        @include avariable(
-          "color",
-          "dropdown-item-hover-color",
-          $dropdown-item-hover-color
-        );
-      }
+    &--clickable:not(&--active):hover {
+      background-color: var(
+        --#{$prefix}dropdown-item-hover-background-color,
+        $dropdown-item-hover-background-color
+      );
+      color: var(
+        --#{$prefix}dropdown-item-hover-color,
+        $dropdown-item-hover-color
+      );
     }
   }
 
@@ -303,9 +229,8 @@ $dropdown-mobile-zindex: 50 !default;
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "dropdown-disabled-opacity",
+    opacity: var(
+      --#{$prefix}dropdown-disabled-opacity,
       $dropdown-disabled-opacity
     );
     pointer-events: none;
@@ -320,27 +245,16 @@ $dropdown-mobile-zindex: 50 !default;
       right: auto;
       transform: translate3d(-50%, -25%, 0);
       overflow-y: auto;
-
-      @include avariable(
-        "width",
-        "dropdown-mobile-width",
-        $dropdown-mobile-width
-      );
-      @include avariable(
-        "max-width",
-        "dropdown-mobile-max-width",
+      width: var(--#{$prefix}dropdown-mobile-width, $dropdown-mobile-width);
+      max-width: var(
+        --#{$prefix}dropdown-mobile-max-width,
         $dropdown-mobile-max-width
       );
-      @include avariable(
-        "max-height",
-        "dropdown-mobile-max-height",
+      max-height: var(
+        --#{$prefix}dropdown-mobile-max-height,
         $dropdown-mobile-max-height
       );
-      @include avariable(
-        "z-index",
-        "dropdown-mobile-zindex",
-        $dropdown-mobile-zindex
-      );
+      z-index: var(--#{$prefix}dropdown-mobile-zindex, $dropdown-mobile-zindex);
     }
 
     > .o-drop__overlay {
diff --git a/src/assets/scss/components/_field.scss b/src/assets/scss/components/_field.scss
index c6e781e..ea68745 100644
--- a/src/assets/scss/components/_field.scss
+++ b/src/assets/scss/components/_field.scss
@@ -14,53 +14,40 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
   flex-grow: 1;
 
   &:not(:last-child) {
-    @include avariable(
-      "margin-bottom",
-      "field-margin-bottom",
-      $field-margin-bottom
-    );
+    margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
   }
 
   &__label {
     display: block;
-
-    @include avariable("color", "field-label-color", $field-label-color);
-    @include avariable("font-size", "base-font-size", $base-font-size);
-    @include avariable(
-      "font-weight",
-      "field-label-font-weight",
+    color: var(--#{$prefix}field-label-color, $field-label-color);
+    font-size: var(--#{$prefix}base-font-size, $base-font-size);
+    font-weight: var(
+      --#{$prefix}field-label-font-weight,
       $field-label-font-weight
     );
 
     @each $name, $value in $sizes {
       &-#{$name} {
-        @include avariable(
-          "font-size",
-          ("field-font-size-" + #{$name}),
-          $value
-        );
+        font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
       }
     }
   }
 
   &__message {
     display: block;
-
-    @include avariable(
-      "font-size",
-      "field-message-font-size",
+    font-size: var(
+      --#{$prefix}field-message-font-size,
       $field-message-font-size
     );
-    @include avariable(
-      "margin-top",
-      "field-message-margin-top",
+    margin-top: var(
+      --#{$prefix}field-message-margin-top,
       $field-message-margin-top
     );
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       &-#{$name} {
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
   }
@@ -109,11 +96,7 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
     flex-wrap: wrap;
 
     &:last-child {
-      @include avariable(
-        "margin-bottom",
-        "field-margin-bottom",
-        -$field-margin-bottom
-      );
+      margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
     }
   }
 
diff --git a/src/assets/scss/components/_icon.scss b/src/assets/scss/components/_icon.scss
index 9269a32..d9c57b4 100644
--- a/src/assets/scss/components/_icon.scss
+++ b/src/assets/scss/components/_icon.scss
@@ -26,13 +26,13 @@ $icon-spin-duration: 2s !default;
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("icon-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
     }
   }
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
-      @include avariable("color", ("variant-" + #{$name}), $color);
+      color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
 
@@ -45,10 +45,8 @@ $icon-spin-duration: 2s !default;
     animation-name: icon-spin;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
-
-    @include avariable(
-      "animation-duration",
-      "icon-spin-duration",
+    animation-duration: var(
+      --#{$prefix}icon-spin-duration,
       $icon-spin-duration
     );
   }
diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss
index 20c4a58..f06f821 100644
--- a/src/assets/scss/components/_input.scss
+++ b/src/assets/scss/components/_input.scss
@@ -2,18 +2,20 @@
 
 /* @docs */
 $input-background-color: #ffffff !default;
-$input-border-color: $grey-lighter !default;
+$input-border-color: var(--#{$prefix}grey-lighter) !default;
 $input-border-style: solid !default;
 $input-border-width: 1px !default;
-$input-border-radius: $base-border-radius !default;
-$input-rounded-border-radius: $base-rounded-border-radius !default;
+$input-border-radius: var(--#{$prefix}base-border-radius) !default;
+$input-rounded-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
 $input-color: #363636 !default;
 $input-icon-zindex: 4 !default;
 $input-counter-font-size: 0.75rem !default;
 $input-counter-margin: 0.25rem 0 0 0.5rem !default;
 $input-height: $control-height !default;
-$input-line-height: $base-line-height !default;
+$input-line-height: var(--#{$prefix}base-line-height) !default;
 $input-margin: 0 !default;
 $input-padding: $control-padding-vertical $control-padding-horizontal !default;
 $input-textarea-max-height: 600px !default;
@@ -28,26 +30,21 @@ $input-textarea-padding: 0.625em !default;
   position: relative;
   vertical-align: top;
 
-  @include avariable("box-shadow", "input-box-shadow", $input-box-shadow);
-  @include avariable(
-    "background-color",
-    "input-background-color",
+  box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
+  background-color: var(
+    --#{$prefix}input-background-color,
     $input-background-color
   );
-  @include avariable("border-color", "input-border-color", $input-border-color);
-  @include avariable("border-style", "input-border-style", $input-border-style);
-  @include avariable("border-width", "input-border-width", $input-border-width);
-  @include avariable(
-    "border-radius",
-    "input-border-radius",
-    $input-border-radius
-  );
-  @include avariable("color", "input-color", $input-color);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("height", "input-height", $input-height);
-  @include avariable("line-height", "input-line-height", $input-line-height);
-  @include avariable("padding", "input-padding", $input-padding);
-  @include avariable("margin", "input-margin", $input-margin);
+  border-color: var(--#{$prefix}input-border-color, $input-border-color);
+  border-style: var(--#{$prefix}input-border-style, $input-border-style);
+  border-width: var(--#{$prefix}input-border-width, $input-border-width);
+  border-radius: var(--#{$prefix}input-border-radius, $input-border-radius);
+  color: var(--#{$prefix}input-color, $input-color);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  height: var(--#{$prefix}input-height, $input-height);
+  line-height: var(--#{$prefix}input-line-height, $input-line-height);
+  padding: var(--#{$prefix}input-padding, $input-padding);
+  margin: var(--#{$prefix}input-margin, $input-margin);
 
   &__wrapper {
     display: inline-block;
@@ -70,22 +67,15 @@ $input-textarea-padding: 0.625em !default;
     min-width: 100%;
     height: auto;
     resize: vertical;
-
-    @include avariable(
-      "padding",
-      "input-textarea-padding",
-      $input-textarea-padding
-    );
+    padding: var(--#{$prefix}input-textarea-padding, $input-textarea-padding);
 
     &:not([rows]) {
-      @include avariable(
-        "max-height",
-        "input-textarea-max-height",
+      max-height: var(
+        --#{$prefix}input-textarea-max-height,
         $input-textarea-max-height
       );
-      @include avariable(
-        "min-height",
-        "input-textarea-min-height",
+      min-height: var(
+        --#{$prefix}input-textarea-min-height,
         $input-textarea-min-height
       );
     }
@@ -94,13 +84,11 @@ $input-textarea-padding: 0.625em !default;
   &__counter {
     display: block;
     float: right;
-
-    @include avariable(
-      "font-size",
-      "input-counter-font-size",
+    font-size: var(
+      --#{$prefix}input-counter-font-size,
       $input-counter-font-size
     );
-    @include avariable("margin", "input-counter-margin", $input-counter-margin);
+    margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
   }
 
   &__icon-left,
@@ -108,9 +96,8 @@ $input-textarea-padding: 0.625em !default;
     position: absolute;
     top: 0;
     height: 100%;
-
-    @include avariable("width", "input-height", $input-height);
-    @include avariable("z-index", "input-icon-zindex", $input-icon-zindex);
+    width: var(--#{$prefix}input-height, $input-height);
+    z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
   }
 
   &__icon-right {
@@ -122,30 +109,32 @@ $input-textarea-padding: 0.625em !default;
   }
 
   &--iconspace-left {
-    @include avariable("padding-left", "input-height", $input-height);
+    padding-left: var(--#{$prefix}input-height, $input-height);
   }
 
   &--iconspace-right {
-    @include avariable("padding-right", "input-height", $input-height);
+    padding-right: var(--#{$prefix}input-height, $input-height);
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "input-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}input-rounded-border-radius,
       $input-rounded-border-radius
     );
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("input-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
     }
   }
+
+  // colar variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
-      @include avariable("border-color", ("variant-" + #{$name}), $color);
+      border-color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
 }
diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss
index a33b437..a30e82e 100644
--- a/src/assets/scss/components/_loading.scss
+++ b/src/assets/scss/components/_loading.scss
@@ -15,17 +15,11 @@ $loading-fullpage-zindex: 999 !default;
   display: flex;
   justify-content: center;
   overflow: hidden;
-
-  @include avariable("z-index", "loading-zindex", $loading-zindex);
+  z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
 
   &--fullpage {
     position: fixed;
-
-    @include avariable(
-      "z-index",
-      "loading-fullpage-zindex",
-      $loading-fullpage-zindex
-    );
+    z-index: var(--#{$prefix}loading-fullpage-zindex, $loading-fullpage-zindex);
   }
 
   &__overlay {
@@ -34,12 +28,10 @@ $loading-fullpage-zindex: 999 !default;
     left: 0;
     right: 0;
     top: 0;
-
-    @include avariable(
-      "background",
-      "loading-overlay-legacy",
+    background: var(
+      --#{$prefix}loading-overlay-legacy,
       $loading-overlay-legacy
     );
-    @include avariable("background", "loading-overlay", $loading-overlay);
+    background: var(--#{$prefix}loading-overlay, $loading-overlay);
   }
 }
diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss
index 49555ff..fc524fb 100644
--- a/src/assets/scss/components/_menu.scss
+++ b/src/assets/scss/components/_menu.scss
@@ -1,11 +1,11 @@
 /* @docs */
-$menu-item-color: $grey-dark !default;
-$menu-item-hover-color: $black !default;
-$menu-item-hover-background-color: $grey-light !default;
-$menu-item-active-color: $primary-invert !default;
-$menu-item-active-background-color: $primary !default;
-$menu-item-disabled-color: $grey-light !default;
-$menu-list-border-left: 1px solid $primary !default;
+$menu-item-color: var(--#{$prefix}grey-dark) !default;
+$menu-item-hover-color: var(--#{$prefix}black) !default;
+$menu-item-hover-background-color: var(--#{$prefix}grey-light) !default;
+$menu-item-active-color: var(--#{$prefix}primary-invert) !default;
+$menu-item-active-background-color: var(--#{$prefix}primary) !default;
+$menu-item-disabled-color: var(--#{$prefix}grey-light) !default;
+$menu-list-border-left: 1px solid var(--#{$prefix}primary) !default;
 $menu-list-line-height: 1.25em !default;
 $menu-item-padding: 0.5em 0.75em !default;
 $menu-nested-list-margin: 0.75em !default;
@@ -16,11 +16,11 @@ $menu-label-spacing: 1em !default;
 /* @docs */
 
 .o-menu {
-  @include avariable("font-size", "base-font-size", $base-font-size);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("menu-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
     }
   }
 
@@ -30,93 +30,57 @@ $menu-label-spacing: 1em !default;
   }
 
   &__list {
-    @include avariable(
-      "line-height",
-      ("menu-list-line-height"),
-      $menu-list-line-height
-    );
+    line-height: var(--#{$prefix}menu-list-line-height, $menu-list-line-height);
   }
 
   &__item__submenu {
-    @include avariable(
-      "border-left",
-      ("menu-list-border-left"),
-      $menu-list-border-left
-    );
-    @include avariable(
-      "padding-left",
-      ("menu-nested-list-padding-left"),
+    border-left: var(--#{$prefix}menu-list-border-left, $menu-list-border-left);
+    padding-left: var(
+      --#{$prefix}menu-nested-list-padding-left,
       $menu-nested-list-padding-left
     );
-    @include avariable(
-      "margin",
-      ("menu-nested-list-margin"),
-      $menu-nested-list-margin
-    );
+    margin: var(--#{$prefix}menu-nested-list-margin, $menu-nested-list-margin);
   }
 
   &__label {
-    @include avariable("color", ("menu-label-color"), $menu-label-color);
-    @include avariable(
-      "font-size",
-      ("menu-label-font-size"),
-      $menu-label-font-size
-    );
     text-transform: uppercase;
+    color: var(--#{$prefix}menu-label-color, $menu-label-color);
+    font-size: var(--#{$prefix}menu-label-font-size, $menu-label-font-size);
 
     &:not(:first-child) {
-      @include avariable(
-        "margin-top",
-        ("menu-label-spacing"),
-        $menu-label-spacing
-      );
+      margin-top: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
     }
 
     &:not(:last-child) {
-      @include avariable(
-        "margin-bottom",
-        ("menu-label-spacing"),
-        $menu-label-spacing
-      );
+      margin-bottom: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
     }
   }
 
   &__item {
-    @include avariable("color", ("menu-item-color"), $menu-item-color);
-    @include avariable("padding", ("menu-item-padding"), $menu-item-padding);
     display: block;
     list-style: none;
+    color: var(--#{$prefix}menu-item-color, $menu-item-color);
+    padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
 
     &:hover:not(&--active):not(&--disabled) {
-      @include avariable(
-        "color",
-        ("menu-item-hover-color"),
-        $menu-item-hover-color
-      );
-      @include avariable(
-        "background-color",
-        ("menu-item-hover-background-color"),
+      color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
+      background-color: var(
+        --#{$prefix}menu-item-hover-background-color,
         $menu-item-hover-background-color
       );
     }
 
     &--active {
-      @include avariable(
-        "color",
-        ("menu-item-active-color"),
-        $menu-item-active-color
-      );
-      @include avariable(
-        "background-color",
-        ("menu-item-active-background-color"),
+      color: var(--#{$prefix}menu-item-active-color, $menu-item-active-color);
+      background-color: var(
+        --#{$prefix}menu-item-active-background-color,
         $menu-item-active-background-color
       );
     }
 
     &--disabled {
-      @include avariable(
-        "color",
-        ("menu-item-disabled-color"),
+      color: var(
+        --#{$prefix}menu-item-disabled-color,
         $menu-item-disabled-color
       );
     }
diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
index 83ea769..b49658c 100644
--- a/src/assets/scss/components/_modal.scss
+++ b/src/assets/scss/components/_modal.scss
@@ -1,12 +1,14 @@
 /* @docs */
-$modal-content-background-color: $white !default;
-$modal-content-border-radius: $base-border-radius !default;
+$modal-content-background-color: var(--#{$prefix}white) !default;
+$modal-content-border-radius: var(--#{$prefix}base-border-radius) !default;
 $modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
-$modal-close-border-radius: $base-rounded-border-radius !default;
+$modal-close-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $modal-close-right: 20px !default;
 $modal-close-top: 20px !default;
 $modal-close-size: 32px !default;
-$modal-close-color: $white !default;
+$modal-close-color: var(--#{$prefix}white) !default;
 $modal-content-fullscreen-background-color: #f5f5f5 !default;
 $modal-content-max-height: calc(100vh - 160px) !default;
 $modal-content-margin: 0 auto !default;
@@ -24,8 +26,7 @@ $modal-zindex: 40 !default;
   left: 0;
   right: 0;
   top: 0;
-
-  @include avariable("z-index", "modal-zindex", $modal-zindex);
+  z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
 
   &__overlay {
     bottom: 0;
@@ -33,10 +34,8 @@ $modal-zindex: 40 !default;
     position: absolute;
     right: 0;
     top: 0;
-
-    @include avariable(
-      "background-color",
-      "modal-overlay-background-color",
+    background-color: var(
+      --#{$prefix}modal-overlay-background-color,
       $modal-overlay-background-color
     );
   }
@@ -44,21 +43,17 @@ $modal-zindex: 40 !default;
   &__content {
     overflow: auto;
     position: relative;
-
-    @include avariable("margin", "modal-content-margin", $modal-content-margin);
-    @include avariable(
-      "max-height",
-      "modal-content-max-height",
+    margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
+    max-height: var(
+      --#{$prefix}modal-content-max-height,
       $modal-content-max-height
     );
-    @include avariable(
-      "background-color",
-      "modal-content-background-color",
+    background-color: var(
+      --#{$prefix}modal-content-background-color,
       $modal-content-background-color
     );
-    @include avariable(
-      "border-radius",
-      "modal-content-border-radius",
+    border-radius: var(
+      --#{$prefix}modal-content-border-radius,
       $modal-content-border-radius
     );
 
@@ -67,10 +62,8 @@ $modal-zindex: 40 !default;
       height: 100%;
       max-height: 100vh;
       margin: 0;
-
-      @include avariable(
-        "background-color",
-        "modal-content-fullscreen-background-color",
+      background-color: var(
+        --#{$prefix}modal-content-fullscreen-background-color,
         $modal-content-fullscreen-background-color
       );
     }
@@ -82,17 +75,15 @@ $modal-zindex: 40 !default;
     border: none;
     display: inline-block;
     vertical-align: top;
-
-    @include avariable(
-      "border-radius",
-      "modal-close-border-radius",
+    border-radius: var(
+      --#{$prefix}modal-close-border-radius,
       $modal-close-border-radius
     );
-    @include avariable("right", "modal-close-right", $modal-close-right);
-    @include avariable("top", "modal-close-top", $modal-close-top);
-    @include avariable("height", "modal-close-size", $modal-close-size);
-    @include avariable("width", "modal-close-size", $modal-close-size);
-    @include avariable("color", "modal-close-color", $modal-close-color);
+    right: var(--#{$prefix}modal-close-right, $modal-close-right);
+    top: var(--#{$prefix}modal-close-top, $modal-close-top);
+    height: var(--#{$prefix}modal-close-size, $modal-close-size);
+    width: var(--#{$prefix}modal-close-size, $modal-close-size);
+    color: var(--#{$prefix}modal-close-color, $modal-close-color);
   }
 
   &--mobile {
diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss
index 2dd5a6d..cf2cbb3 100644
--- a/src/assets/scss/components/_notification.scss
+++ b/src/assets/scss/components/_notification.scss
@@ -1,17 +1,19 @@
 @use "sass:list";
 
 /* @docs */
-$notification-background-color: $primary !default;
+$notification-background-color: var(--#{$prefix}primary) !default;
 $notification-border-radius: 4px !default;
 $notification-padding: 1.75em 1.75em !default;
 $notification-margin-bottom: 1.5rem !default;
 $notification-animantion: append-animate 0.3s linear !default;
-$notification-color: $white !default;
-$notification-close-border-radius: $base-rounded-border-radius !default;
+$notification-color: var(--#{$prefix}white) !default;
+$notification-close-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $notification-close-right: 0.5rem !default;
 $notification-close-top: 0.5rem !default;
 $notification-close-size: 20px !default;
-$notification-close-color: $white !default;
+$notification-close-color: var(--#{$prefix}white) !default;
 $notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
 $notification-icon-margin-right: 1rem !default;
 $notification-notices-padding: 2em !default;
@@ -19,28 +21,24 @@ $notification-notices-zindex: 1000 !default;
 /* @docs */
 
 .o-notification {
+  position: relative;
+  transform-origin: 50% 0;
   // Modifiers
-  @include avariable(
-    "background-color",
-    "notification-background-color",
+  background-color: var(
+    --#{$prefix}notification-background-color,
     $notification-background-color
   );
-  @include avariable("color", "notification-color", $notification-color);
-  @include avariable(
-    "border-radius",
-    "notification-border-radius",
+  color: var(--#{$prefix}notification-color, $notification-color);
+  border-radius: var(
+    --#{$prefix}notification-border-radius,
     $notification-border-radius
   );
-  @include avariable("padding", "notification-padding", $notification-padding);
-  @include avariable(
-    "margin-bottom",
-    "notification-margin-bottom",
+  padding: var(--#{$prefix}notification-padding, $notification-padding);
+  margin-bottom: var(
+    --#{$prefix}notification-margin-bottom,
     $notification-margin-bottom
   );
 
-  position: relative;
-  transform-origin: 50% 0;
-
   &__content {
     flex-basis: auto;
     flex-grow: 1;
@@ -62,10 +60,8 @@ $notification-notices-zindex: 1000 !default;
     flex-basis: auto;
     flex-grow: 0;
     flex-shrink: 0;
-
-    @include avariable(
-      "margin-right",
-      "notification-icon-margin-right",
+    margin-right: var(
+      --#{$prefix}notification-icon-margin-right,
       $notification-icon-margin-right
     );
   }
@@ -81,42 +77,19 @@ $notification-notices-zindex: 1000 !default;
     flex-grow: 0;
     flex-shrink: 0;
     vertical-align: top;
-
-    @include avariable(
-      "background-color",
-      "notification-close-background-color",
+    background-color: var(
+      --#{$prefix}notification-close-background-color,
       $notification-close-background-color
     );
-    @include avariable(
-      "border-radius",
-      "notification-close-border-radius",
+    border-radius: var(
+      --#{$prefix}notification-close-border-radius,
       $notification-close-border-radius
     );
-    @include avariable(
-      "right",
-      "notification-close-right",
-      $notification-close-right
-    );
-    @include avariable(
-      "top",
-      "notification-close-top",
-      $notification-close-top
-    );
-    @include avariable(
-      "height",
-      "notification-close-size",
-      $notification-close-size
-    );
-    @include avariable(
-      "width",
-      "notification-close-size",
-      $notification-close-size
-    );
-    @include avariable(
-      "color",
-      "notification-close-color",
-      $notification-close-color
-    );
+    right: var(--#{$prefix}notification-close-right, $notification-close-right);
+    top: var(--#{$prefix}notification-close-top, $notification-close-top);
+    height: var(--#{$prefix}notification-close-size, $notification-close-size);
+    width: var(--#{$prefix}notification-close-size, $notification-close-size);
+    color: var(--#{$prefix}notification-close-color, $notification-close-color);
   }
 
   @each $name, $pair in $colors {
@@ -124,13 +97,8 @@ $notification-notices-zindex: 1000 !default;
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
       border-color: transparent;
-
-      @include avariable("background-color", ("variant-" + #{$name}), $color);
-      @include avariable(
-        "color",
-        ("variant-invert-" + #{$name}),
-        $color-invert
-      );
+      background-color: var(--#{$prefix}variant-#{$name}, $color);
+      color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
 
       &:hover {
         // background-color: darken($color, 2.5%)
@@ -150,25 +118,20 @@ $notification-notices-zindex: 1000 !default;
   right: 0;
   overflow: hidden;
   pointer-events: none;
-
-  @include avariable(
-    "padding",
-    "notification-notices-padding",
+  padding: var(
+    --#{$prefix}notification-notices-padding,
     $notification-notices-padding
   );
-  @include avariable(
-    "z-index",
-    "notification-notices-zindex",
+  z-index: var(
+    --#{$prefix}notification-notices-zindex,
     $notification-notices-zindex
   );
 
   .o-notification {
     pointer-events: stroke;
     max-width: 600px;
-
-    @include avariable(
-      "animation",
-      "notification-animantion",
+    animation: var(
+      --#{$prefix}notification-animantion,
       $notification-animantion
     );
 
diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss
index 7703add..ab96677 100644
--- a/src/assets/scss/components/_pagination.scss
+++ b/src/assets/scss/components/_pagination.scss
@@ -1,21 +1,23 @@
 /* @docs */
-$pagination-disabled-opacity: $base-disabled-opacity !default;
-$pagination-ellipsis-color: $grey-light !default;
-$pagination-link-border-color: $grey-lighter !default;
-$pagination-link-border-radius: $base-border-radius !default;
+$pagination-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$pagination-ellipsis-color: var(--#{$prefix}grey-light) !default;
+$pagination-link-border-color: var(--#{$prefix}grey-lighter) !default;
+$pagination-link-border-radius: var(--#{$prefix}base-border-radius) !default;
 $pagination-link-border: 1px solid transparent !default;
 $pagination-link-color: #363636 !default;
-$pagination-link-current-background-color: $primary !default;
-$pagination-link-current-border-color: $primary !default; // !!!
+$pagination-link-current-background-color: var(--#{$prefix}primary) !default;
+$pagination-link-current-border-color: var(--#{$prefix}primary) !default;
 $pagination-link-current-color: #fff !default;
 $pagination-link-height: 2.25em !default;
-$pagination-link-hover-border-color: $grey-light !default;
-$pagination-link-line-height: $base-line-height !default;
+$pagination-link-hover-border-color: var(--#{$prefix}grey-light) !default;
+$pagination-link-line-height: var(--#{$prefix}base-line-height) !default;
 $pagination-link-margin: 0.25rem !default;
 $pagination-link-min-width: 2.25em !default;
 $pagination-link-padding: 0.5em 0.5em !default;
 $pagination-margin: -0.25rem !default;
-$pagination-rounded-border-radius: $base-rounded-border-radius !default;
+$pagination-rounded-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 /* @docs */
 
 .o-pag {
@@ -23,21 +25,17 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
   display: flex;
   text-align: center;
   justify-content: space-between;
-
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("margin", "pagination-margin", $pagination-margin);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  margin: var(--#{$prefix}pagination-margin, $pagination-margin);
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("pagination-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}pagination-font-size-#{$name}, $value);
     }
   }
 
   &__link {
+    @include unselectable;
     -moz-appearance: none;
     -webkit-appearance: none;
     align-items: center;
@@ -49,98 +47,63 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
-
-    @include unselectable;
-    @include avariable(
-      "line-height",
-      "pagination-link-line-height",
+    line-height: var(
+      --#{$prefix}pagination-link-line-height,
       $pagination-link-line-height
     );
-    @include avariable(
-      "border",
-      "pagination-link-border",
-      $pagination-link-border
-    );
-    @include avariable(
-      "border-radius",
-      "pagination-link-border-radius",
+    border: var(--#{$prefix}pagination-link-border, $pagination-link-border);
+    border-radius: var(
+      --#{$prefix}pagination-link-border-radius,
       $pagination-link-border-radius
     );
-    @include avariable(
-      "border-color",
-      "pagination-link-border-color",
+    border-color: var(
+      --#{$prefix}pagination-link-border-color,
       $pagination-link-border-color
     );
-    @include avariable(
-      "color",
-      "pagination-link-color",
-      $pagination-link-color
-    );
-    @include avariable(
-      "min-width",
-      "pagination-link-min-width",
+    color: var(--#{$prefix}pagination-link-color, $pagination-link-color);
+    min-width: var(
+      --#{$prefix}pagination-link-min-width,
       $pagination-link-min-width
     );
-    @include avariable(
-      "height",
-      "pagination-link-height",
-      $pagination-link-height
-    );
-    @include avariable(
-      "padding",
-      "pagination-link-padding",
-      $pagination-link-padding
-    );
-    @include avariable(
-      "margin",
-      "pagination-link-margin",
-      $pagination-link-margin
-    );
+    height: var(--#{$prefix}pagination-link-height, $pagination-link-height);
+    padding: var(--#{$prefix}pagination-link-padding, $pagination-link-padding);
+    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
 
     &:hover {
       text-decoration: none;
-
-      @include avariable(
-        "border-color",
-        "pagination-link-hover-border-color",
+      border-color: var(
+        --#{$prefix}pagination-link-hover-border-color,
         $pagination-link-hover-border-color
       );
     }
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "pagination-rounded-border-radius",
+      border-radius: var(
+        --#{$prefix}pagination-rounded-border-radius,
         $pagination-rounded-border-radius
       );
     }
 
     &--disabled {
       pointer-events: none;
-
-      @include avariable(
-        "opacity",
-        "pagination-disabled-opacity",
+      opacity: var(
+        --#{$prefix}pagination-disabled-opacity,
         $pagination-disabled-opacity
       );
     }
 
     &--current {
       pointer-events: none;
-
-      @include avariable(
-        "background-color",
-        "pagination-link-current-background-color",
+      background-color: var(
+        --#{$prefix}pagination-link-current-background-color,
         $pagination-link-current-background-color
       );
-      @include avariable(
-        "border-color",
-        "pagination-link-current-border-color",
+      border-color: var(
+        --#{$prefix}pagination-link-current-border-color,
         $pagination-link-current-border-color
       );
-      @include avariable(
-        "color",
-        "pagination-link-current-color",
+      color: var(
+        --#{$prefix}pagination-link-current-color,
         $pagination-link-current-color
       );
     }
@@ -150,15 +113,9 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     justify-content: center;
     text-align: center;
     pointer-events: none;
-
-    @include avariable(
-      "margin",
-      "pagination-link-margin",
-      $pagination-link-margin
-    );
-    @include avariable(
-      "color",
-      "pagination-ellipsis-color",
+    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
+    color: var(
+      --#{$prefix}pagination-ellipsis-color,
       $pagination-ellipsis-color
     );
   }
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index db1313e..eed5ab3 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -1,16 +1,17 @@
 @use "sass:list";
 
 /* @docs */
-$radio-active-background-color: $primary !default;
+$radio-active-background-color: var(--#{$prefix}primary) !default;
 $radio-checked-box-shadow-length: 0 0 0.5em !default;
 $radio-checked-box-shadow-opacity: 0.8 !default;
-$radio-disabled-opacity: $base-disabled-opacity !default;
+$radio-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $radio-label-padding: 0 0 0 0.5em !default;
 $radio-margin-sibiling: 0.5em !default;
 $radio-size: 1rem !default;
 $radio-line-height: 1.25 !default;
 /* @docs */
 
+// filled svg calculation
 @function svg_radio_fill($color, $background-color: "transparent") {
   $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
   $content: '<g transform="matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
@@ -18,6 +19,8 @@ $radio-line-height: 1.25 !default;
 
   @return svg-encode("#{$start}#{$content}#{$end}");
 }
+
+// empty svg calculation
 @function svg_radio_empty($color) {
   $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
   $content: '<g transform="matrix(10.1032,0,0,10.1032,-255.068,-313.298)"><circle cx="30.195" cy="35.959" r="4.85" style="fill:#{$color};"/></g>';
@@ -27,21 +30,16 @@ $radio-line-height: 1.25 !default;
 }
 
 .o-radio {
+  @include unselectable;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-
-  @include unselectable;
-  @include avariable("line-height", "radio-line-height", $radio-line-height);
-  @include avariable(
-    "margin-right",
-    "radio-margin-sibiling",
-    $radio-margin-sibiling
-  );
+  line-height: var(--#{$prefix}radio-line-height, $radio-line-height);
+  margin-right: var(--#{$prefix}radio-margin-sibiling, $radio-margin-sibiling);
 
   &__input {
-    @include avariable("width", "radio-size", $radio-size);
-    @include avariable("height", "radio-size", $radio-size);
+    width: var(--#{$prefix}radio-size, $radio-size);
+    height: var(--#{$prefix}radio-size, $radio-size);
     margin: 0;
     vertical-align: top;
     background-position: center;
@@ -55,47 +53,26 @@ $radio-line-height: 1.25 !default;
     cursor: pointer;
     background-repeat: no-repeat;
     transition-property: background;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
-
-    background-image: url(svg_radio_empty(
-      variable("radio-active-background-color", $radio-active-background-color)
-    ));
+    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+    background-image: url(svg_radio_empty($radio-active-background-color));
 
     &--checked {
-      background-image: url(svg_radio_fill(
-        variable(
-          "radio-active-background-color",
-          $radio-active-background-color
-        )
-      ));
+      background-image: url(svg_radio_fill($radio-active-background-color));
     }
   }
 
   &__label {
-    @include avariable("padding", "radio-label-padding", $radio-label-padding);
+    padding: var(--#{$prefix}radio-label-padding, $radio-label-padding);
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "radio-disabled-opacity",
-      $radio-disabled-opacity
-    );
+    opacity: var(--#{$prefix}radio-disabled-opacity, $radio-disabled-opacity);
   }
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("radio-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}radio-font-size-#{$name}, $value);
     }
   }
   @each $name, $pair in $colors {
@@ -103,15 +80,10 @@ $radio-line-height: 1.25 !default;
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
       .o-radio__input {
-        background-image: url(svg_radio_empty(
-          variable(("variant-" + #{$name}), $color)
-        ));
+        background-image: url(svg_radio_empty($color));
 
         &--checked {
-          background-image: url(svg_radio_fill(
-            variable(("variant-" + #{$name}), $color),
-            variable(("variant-invert-" + #{$name}), $color-invert)
-          ));
+          background-image: url(svg_radio_fill($color, $color-invert));
         }
       }
     }
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
index d7d7024..107733d 100644
--- a/src/assets/scss/components/_select.scss
+++ b/src/assets/scss/components/_select.scss
@@ -2,21 +2,23 @@
 
 /* @docs */
 $select-background-color: #fff !default;
-$select-border-color: $grey-lighter !default;
+$select-border-color: var(--#{$prefix}grey-lighter) !default;
 $select-border-width: 1px !default;
 $select-border-style: solid !default;
-$select-border-radius: $base-border-radius !default;
-$select-rounded-border-radius: $base-rounded-border-radius !default;
+$select-border-radius: var(--#{$prefix}base-border-radius) !default;
+$select-rounded-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $select-box-shadow: none !default;
 $select-color: #363636 !default;
 $select-icon-zindex: 4 !default;
 $select-height: $control-height !default;
 $select-arrow-size: 1rem !default;
-$select-line-height: $base-line-height !default;
+$select-line-height: var(--#{$prefix}base-line-height) !default;
 $select-margin: 0 !default;
 $select-max-width: 100% !default;
 $select-width: 100% !default;
-$select-placeholder-opacity: $base-disabled-opacity !default;
+$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $select-padding: $control-padding-vertical $control-padding-horizontal !default;
 /* @docs */
 
@@ -48,89 +50,63 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
   cursor: pointer;
   justify-content: flex-start;
   align-items: center;
-
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("max-width", "select-max-width", $select-max-width);
-  @include avariable("width", "select-width", $select-width);
-  @include avariable(
-    "background-color",
-    "select-background-color",
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  max-width: var(--#{$prefix}select-max-width, $select-max-width);
+  width: var(--#{$prefix}select-width, $select-width);
+  background-color: var(
+    --#{$prefix}select-background-color,
     $select-background-color
   );
-  @include avariable(
-    "border-color",
-    "select-border-color",
-    $select-border-color
-  );
-  @include avariable(
-    "border-width",
-    "select-border-width",
-    $select-border-width
-  );
-  @include avariable(
-    "border-style",
-    "select-border-style",
-    $select-border-style
-  );
-  @include avariable(
-    "border-radius",
-    "select-border-radius",
-    $select-border-radius
-  );
-  @include avariable("color", "select-color", $select-color);
-  @include avariable("margin", "select-margin", $select-margin);
-  @include avariable("box-shadow", "select-box-shadow", $select-box-shadow);
-  @include avariable("line-height", "select-line-height", $select-line-height);
-  @include avariable("padding", "select-padding", $select-padding);
-  @include avariable("height", "select-height", $select-height);
+  border-color: var(--#{$prefix}select-border-color, $select-border-color);
+  border-width: var(--#{$prefix}select-border-width, $select-border-width);
+  border-style: var(--#{$prefix}select-border-style, $select-border-style);
+  border-radius: var(--#{$prefix}select-border-radius, $select-border-radius);
+  color: var(--#{$prefix}select-color, $select-color);
+  margin: var(--#{$prefix}select-margin, $select-margin);
+  box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
+  line-height: var(--#{$prefix}select-line-height, $select-line-height);
+  padding: var(--#{$prefix}select-padding, $select-padding);
+  height: var(--#{$prefix}select-height, $select-height);
 
   &-arrow {
-    background-image: url(svg_arrow(
-      variable("select-arrow-color", $select-color)
-    ));
+    background-image: url(svg_arrow($select-color));
     background-repeat: no-repeat;
-
-    @include avariable(
-      "background-size",
-      "select-arrow-size",
-      $select-arrow-size
-    );
-    @include evariable(
-      "background-position",
-      "calc(100% - $param * 0.5) center",
-      eparam("$param", variable("select-arrow-size", $select-arrow-size))
-    );
-    @include evariable(
-      "padding-right",
-      "calc($param * 2)",
-      eparam("$param", variable("select-arrow-size", $select-arrow-size))
+    background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
+    background-position: calc(
+        100% - var(--#{$prefix}select-arrow-size, $select-arrow-size) * 0.5
+      )
+      center;
+    padding-right: calc(
+      var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
     );
   }
 
   &-iconspace-left {
-    @include avariable("padding-left", "select-height", $select-height);
+    padding-left: var(--#{$prefix}select-height, $select-height);
   }
 
   &-iconspace-right {
-    @include avariable("padding-right", "select-height", $select-height);
+    padding-right: var(--#{$prefix}select-height, $select-height);
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("select-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
-      @include avariable("border-color", ("variant-" + #{$name}), $color);
+      border-color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "select-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}select-rounded-border-radius,
       $select-rounded-border-radius
     );
   }
@@ -141,9 +117,8 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
   }
 
   &--placeholder {
-    @include avariable(
-      "opacity",
-      "select-placeholder-opacity",
+    opacity: var(
+      --#{$prefix}select-placeholder-opacity,
       $select-placeholder-opacity
     );
   }
@@ -153,9 +128,8 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
     position: absolute;
     top: 0;
     height: 100%;
-
-    @include avariable("width", "select-height", $select-height);
-    @include avariable("z-index", "select-icon-zindex", $select-icon-zindex);
+    width: var(--#{$prefix}select-height, $select-height);
+    z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
   }
 
   &__icon-right {
diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss
index 452230c..0487c5b 100644
--- a/src/assets/scss/components/_sidebar.scss
+++ b/src/assets/scss/components/_sidebar.scss
@@ -2,9 +2,9 @@
 
 /* @docs */
 $sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
-$sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
-$sidebar-content-background-color: $grey-lighter !default;
-$sidebar-border-radius: $base-border-radius !default;
+$sidebar-box-shadow: 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) !default;
+$sidebar-content-background-color: var(--#{$prefix}grey-lighter) !default;
+$sidebar-border-radius: var(--#{$prefix}base-border-radius) !default;
 $sidebar-border-width: 1px !default;
 $sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
 $sidebar-reduced-width: 80px !default;
@@ -22,152 +22,86 @@ $sidebar-zindex: 100 !default;
 
   &__content {
     position: absolute;
-
-    @include avariable(
-      "background-color",
-      "sidebar-content-background-color",
+    background-color: var(
+      --#{$prefix}sidebar-content-background-color,
       $sidebar-content-background-color
     );
-    @include avariable(
-      "border-radius",
-      "sidebar-border-radius",
+    border-radius: var(
+      --#{$prefix}sidebar-border-radius,
       $sidebar-border-radius
     );
-    @include avariable("box-shadow", "sidebar-box-shadow", $sidebar-box-shadow);
+    box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       &--#{$name} {
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        background-color: var(--#{$prefix}variant-#{$name}), $color;
       }
     }
 
     // position
     &--right,
     &--left {
-      @include avariable(
-        "transition-duration",
-        "transition-duration",
-        $speed-slow
-      );
-      @include avariable(
-        "transition-timing-function",
-        "transition-timing",
-        $easing
-      );
-      @include avariable("width", "sidebar-width", $sidebar-width);
       transition: width;
+      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+      width: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
     &--top,
     &--bottom {
-      @include avariable(
-        "transition-duration",
-        "transition-duration",
-        $speed-slow
-      );
-      @include avariable(
-        "transition-timing-function",
-        "transition-timing",
-        $easing
-      );
-      @include avariable("height", "sidebar-width", $sidebar-width);
       transition: height;
+      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+      height: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
     &--right {
       left: auto;
       right: 0;
-
-      @include evariable(
-        "border-left",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-left: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--left {
       left: 0;
       right: auto;
-
-      @include evariable(
-        "border-right",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-right: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--top {
       top: 0;
       bottom: auto;
-
-      @include evariable(
-        "border-bottom",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
+      border-bottom: var(
+          --#{$prefix}sidebar-border-width,
+          $sidebar-border-width
         )
-      );
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--bottom {
       top: auto;
       bottom: 0;
-
-      @include evariable(
-        "border-top",
-        "$width solid $color",
-        eparam(
-          "$width",
-          variable("sidebar-border-width", $sidebar-border-width)
-        ),
-        eparam(
-          "$color",
-          variable("sidebar-border-color", $sidebar-border-color)
-        )
-      );
+      border-top: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
+        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
     }
 
     &--reduced {
-      @include avariable(
-        "width",
-        "sidebar-reduced-width",
-        $sidebar-reduced-width
-      );
+      width: var(--#{$prefix}sidebar-reduced-width, $sidebar-reduced-width);
 
       &-expand {
         &:hover {
-          @include avariable(
-            "transition-duration",
-            "transition-duration",
+          transition: width;
+          transition-duration: var(
+            --#{$prefix}transition-duration,
             $speed-slow
           );
-          @include avariable(
-            "transition-timing-function",
-            "transition-timing",
+          transition-timing-function: var(
+            --#{$prefix}transition-timing,
             $easing
           );
-          @include avariable("width", "sidebar-width", $sidebar-width);
-          transition: width;
+          width: var(--#{$prefix}sidebar-width, $sidebar-width);
         }
       }
     }
@@ -189,8 +123,7 @@ $sidebar-zindex: 100 !default;
     left: 0;
     right: 0;
     top: 0;
-
-    @include avariable("background", "sidebar-overlay", $sidebar-overlay);
+    background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
   }
 
   &--active {
@@ -210,6 +143,6 @@ $sidebar-zindex: 100 !default;
   }
 
   &:not(&--inline) {
-    @include avariable("z-index", "sidebar-zindex", $sidebar-zindex);
+    z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
   }
 }
diff --git a/src/assets/scss/components/_skeleton.scss b/src/assets/scss/components/_skeleton.scss
index 09c4820..dddc828 100644
--- a/src/assets/scss/components/_skeleton.scss
+++ b/src/assets/scss/components/_skeleton.scss
@@ -5,7 +5,7 @@ $skeleton-background: linear-gradient(
   rgba($grey-lighter, 0.5) 50%,
   $grey-lighter 75%
 ) !default;
-$skeleton-border-radius: $base-border-radius !default;
+$skeleton-border-radius: var(--#{$prefix}base-border-radius) !default;
 $skeleton-duration: 1.5s !default;
 $skeleton-margin: 0.5rem 0 0 0 !default;
 /* @docs */
@@ -22,13 +22,9 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
 @mixin steps-size($size, $name: null) {
   @if $name {
-    @include avariable(
-      "line-height",
-      ("skeleton-font-size-" + #{$name}),
-      $size
-    );
+    line-height: var(--#{$prefix}skeleton-font-size-#{$name}, $size);
   } @else {
-    @include avariable("line-height", "skeleton-font-size", $size);
+    line-height: var(--#{$prefix}skeleton-font-size, $size);
   }
 }
 
@@ -40,17 +36,12 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
   &__item {
     width: 100%;
-
-    @include avariable(
-      "background",
-      "skeleton-background",
-      $skeleton-background
-    );
+    background: var(--#{$prefix}skeleton-background, $skeleton-background);
+    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "skeleton-border-radius",
+      border-radius: var(
+        --#{$prefix}skeleton-border-radius,
         $skeleton-border-radius
       );
     }
@@ -59,10 +50,8 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
       background-size: 400% 100%;
       animation-name: skeleton-loading;
       animation-iteration-count: infinite;
-
-      @include avariable(
-        "animation-duration",
-        "skeleton-duration",
+      animation-duration: var(
+        --#{$prefix}skeleton-duration,
         $skeleton-duration
       );
     }
@@ -71,7 +60,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
       content: "\00a0";
     }
 
-    @include avariable("margin", "skeleton-margin", $skeleton-margin);
     @include steps-size($base-font-size);
 
     @each $name, $value in $sizes {
@@ -87,7 +75,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
 
   &--right {
     align-items: flex-end;
-
-    @include avariable("margin", "skeleton-margin", $skeleton-margin);
+    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
   }
 }
diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss
index 1580f27..7384c99 100644
--- a/src/assets/scss/components/_slider.scss
+++ b/src/assets/scss/components/_slider.scss
@@ -4,89 +4,70 @@
 $slider-background: transparent !default;
 $slider-margin: 1em 0 !default;
 $slider-mark-size: 0.75rem !default;
-$slider-font-size: $base-font-size !default;
-$slider-rounded-borded-radius: $base-rounded-border-radius !default;
-$slider-thumb-background: $white !default;
-$slider-thumb-border: 1px solid $grey-light !default;
-$slider-thumb-radius: $base-border-radius !default;
+$slider-font-size: var(--#{$prefix}base-font-size) !default;
+$slider-rounded-borded-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
+$slider-thumb-background: var(--#{$prefix}white) !default;
+$slider-thumb-border: 1px solid var(--#{$prefix}grey-light) !default;
+$slider-thumb-radius: var(--#{$prefix}base-border-radius) !default;
 $slider-thumb-shadow: none !default;
 $slider-thumb-to-track-ratio: 2 !default;
 $slider-thumb-transform: scale(1.25) !default;
-$slider-tick-background: $primary !default;
-$slider-tick-radius: $base-border-radius !default;
+$slider-tick-background: var(--#{$prefix}primary) !default;
+$slider-tick-radius: var(--#{$prefix}base-border-radius) !default;
 $slider-tick-to-track-ratio: 0.5 !default;
 $slider-tick-width: 3px !default;
-$slider-track-background: $grey-lighter !default;
-$slider-fill-background: $primary !default;
-$slider-track-border-radius: $base-border-radius !default;
-$slider-track-border: 0px solid $grey !default;
+$slider-track-background: var(--#{$prefix}grey-lighter) !default;
+$slider-fill-background: var(--#{$prefix}primary) !default;
+$slider-track-border-radius: var(--#{$prefix}base-border-radius) !default;
+$slider-track-border: 0px solid var(--#{$prefix}grey) !default;
 $slider-track-disabled: 0.5 !default;
-$slider-track-radius: $base-border-radius !default;
-$slider-track-shadow: 0px 0px 0px $grey !default;
+$slider-track-radius: var(--#{$prefix}base-border-radius) !default;
+$slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
 /* @docs */
 
 @mixin slider-size($size, $name: null) {
-  $track-height: divide($size, $slider-thumb-to-track-ratio);
-  $tick-height: $track-height * $slider-tick-to-track-ratio;
+  $track-height: calc($size / $slider-thumb-to-track-ratio);
+  $tick-height: calc($track-height * $slider-tick-to-track-ratio);
   $thumb-size: $size;
 
   .o-slide__track {
     @if $name {
-      @include avariable(
-        "height",
-        ("slider-track-height-" + #{$name}),
-        $track-height
-      );
+      height: var(--#{$prefix}slider-track-height-#{$name}, $track-height);
     } @else {
-      @include avariable("height", "slider-track-height", $track-height);
+      height: var(--#{$prefix}slider-track-height, $track-height);
     }
   }
 
   .o-slide__thumb {
     @if $name {
-      @include avariable(
-        "height",
-        "slider-thumb-size-" + #{$name},
-        $thumb-size
-      );
-      @include avariable("width", "slider-thumb-size-" + #{$name}, $thumb-size);
+      height: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
+      width: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
     } @else {
-      @include avariable("height", "slider-thumb-size", $thumb-size);
-      @include avariable("width", "slider-thumb-size", $thumb-size);
+      height: var(--#{$prefix}slider-thumb-size, $thumb-size);
+      width: var(--#{$prefix}slider-thumb-size, $thumb-size);
     }
   }
 
   .o-slide__tick {
     @if $name {
-      @include avariable(
-        "height",
-        "slider-tick-height-" + #{$name},
-        $tick-height
-      );
+      height: var(--#{$prefix}slider-tick-height-#{$name}, $tick-height);
     } @else {
-      @include avariable("height", "slider-tick-height", $tick-height);
+      height: var(--#{$prefix}slider-tick-height, $tick-height);
     }
   }
 
   .o-slide__tick-label {
     @if $name {
-      @include avariable(
-        "font-size",
-        "slider-mark-size-" + #{$name},
-        $slider-mark-size
-      );
+      font-size: var(--#{$prefix}slider-mark-size-#{$name}, $slider-mark-size);
     } @else {
-      @include avariable("font-size", "slider-mark-size", $slider-mark-size);
+      font-size: var(--#{$prefix}slider-mark-size $slider-mark-size);
     }
-    position: absolute;
 
-    @include evariable(
-      "top",
-      "calc($label-top * 0.5 + 2px)",
-      eparam(
-        "$label-top",
-        variable("slider-tick-label-top-" + #{$name}, $track-height)
-      )
+    position: absolute;
+    top: calc(
+      var(--#{$prefix}slider-tick-label-top-#{$name}, $track-height) * 0.5 + 2px
     );
     left: 50%;
     transform: translateX(-50%);
@@ -94,40 +75,29 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
 }
 
 .o-slide {
-  @include avariable("margin", "slider-margin", $slider-margin);
-  @include avariable("background", "slider-background", $slider-background);
   width: 100%;
+  margin: var(--#{$prefix}slider-margin, $slider-margin);
+  background: var(--#{$prefix}slider-background, $slider-background);
 
   &__thumb {
-    @include avariable(
-      "box-shadow",
-      "slider-thumb-shadow",
-      $slider-thumb-shadow
-    );
-    @include avariable("border", "slider-thumb-border", $slider-thumb-border);
-    @include avariable(
-      "border-radius",
-      "slider-thumb-radius",
-      $slider-thumb-radius
-    );
-    @include avariable(
-      "background",
-      "slider-thumb-background",
+    box-shadow: var(--#{$prefix}slider-thumb-shadow, $slider-thumb-shadow);
+    border: var(--#{$prefix}slider-thumb-border, $slider-thumb-border);
+    border-radius: var(--#{$prefix}slider-thumb-radius, $slider-thumb-radius);
+    background: var(
+      --#{$prefix}slider-thumb-background,
       $slider-thumb-background
     );
 
     &:focus {
-      @include avariable(
-        "transform",
-        "slider-thumb-transform",
+      transform: var(
+        --#{$prefix}slider-thumb-transform,
         $slider-thumb-transform
       );
     }
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "slider-rounded-borded-radius",
+      border-radius: var(
+        --#{$prefix}slider-rounded-borded-radius,
         $slider-rounded-borded-radius
       );
     }
@@ -143,15 +113,12 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
     align-items: center;
     position: relative;
     cursor: pointer;
-
-    @include avariable(
-      "background",
-      "slider-track-background",
+    background: var(
+      --#{$prefix}slider-track-background,
       $slider-track-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-track-border-radius",
+    border-radius: var(
+      --#{$prefix}slider-track-border-radius,
       $slider-track-border-radius
     );
   }
@@ -159,23 +126,13 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
   &__fill {
     position: absolute;
     height: 100%;
-
-    @include avariable(
-      "box-shadow",
-      "slider-track-shadow",
-      $slider-track-shadow
-    );
-    @include avariable(
-      "background",
-      "slider-fill-background",
+    box-shadow: var(--#{$prefix}slider-track-shadow, $slider-track-shadow);
+    background: var(
+      --#{$prefix}slider-fill-background,
       $slider-fill-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-track-radius",
-      $slider-track-radius
-    );
-    @include avariable("border", "slider-track-border", $slider-track-border);
+    border-radius: var(--#{$prefix}slider-track-radius $slider-track-radius);
+    border: var(--#{$prefix}slider-track-border, $slider-track-border);
     // Fix alignment in IE 11. Cancel out for others
     top: 50%;
     transform: translateY(-50%);
@@ -183,7 +140,7 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       &--#{$name} {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
   }
@@ -200,18 +157,12 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
-
-    @include avariable("width", "slider-tick-width", $slider-tick-width);
-    @include avariable(
-      "background",
-      "slider-tick-background",
+    width: var(--#{$prefix}slider-tick-width, $slider-tick-width);
+    background: var(
+      --#{$prefix}slider-tick-background,
       $slider-tick-background
     );
-    @include avariable(
-      "border-radius",
-      "slider-tick-radius",
-      $slider-tick-radius
-    );
+    border-radius: var(--#{$prefix}slider-tick-radius, $slider-tick-radius);
 
     &--hidden {
       background: transparent;
@@ -231,11 +182,6 @@ $slider-track-shadow: 0px 0px 0px $grey !default;
   &--disabled {
     cursor: not-allowed;
     pointer-events: none;
-
-    @include avariable(
-      "opacity",
-      "slider-track-disabled",
-      $slider-track-disabled
-    );
+    opacity: var(--#{$prefix}slider-track-disabled, $slider-track-disabled);
   }
 }
diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
index 355de77..d359074 100644
--- a/src/assets/scss/components/_steps.scss
+++ b/src/assets/scss/components/_steps.scss
@@ -3,125 +3,67 @@
 /* @docs */
 $steps-details-background-color: hsl(0, 0%, 100%) !default;
 $steps-details-padding: 0.2em !default;
-$steps-marker-background: $grey-light !default;
-$steps-marker-color: $primary-invert !default;
+$steps-marker-background: var(--#{$prefix}grey-light) !default;
+$steps-marker-color: var(--#{$prefix}primary-invert) !default;
 $steps-marker-border: 0.2em solid #fff !default;
 $steps-marker-font-weight: 700 !default;
-$steps-marker-rounded-border-radius: $base-rounded-border-radius !default;
-$steps-color: $grey-lighter !default;
-$steps-previous-color: $primary !default;
-$steps-active-color: $primary !default;
+$steps-marker-rounded-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
+$steps-color: var(--#{$prefix}grey-lighter) !default;
+$steps-previous-color: var(--#{$prefix}primary) !default;
+$steps-active-color: var(--#{$prefix}primary) !default;
 $steps-divider-height: 0.2em !default;
 $steps-vertical-padding: 1em 0 !default;
-$steps-item-line-height: $base-line-height !default;
+$steps-item-line-height: var(--#{$prefix}base-line-height) !default;
 $steps-link-color: hsl(0, 0%, 29%) !default;
 $steps-content-padding: 1rem !default;
-$steps-font-size: $base-font-size !default;
+$steps-font-size: var(--#{$prefix}base-font-size) !default;
 $steps-details-title-font-weight: 600 !default;
 /* @docs */
 
-$LR_CALC_EXPRESSION: "calc(($size - $divider-height) * 0.5)";
-$GRADIENT_EXPRESSION: "linear-gradient(to left, $param1 50%, $param2 50%)";
-$MULTIPLY_EXPRESSION: "calc($param * $factor)";
-
 @mixin steps-size($size, $name: null) {
-  @include avariable(
-    "font-size",
-    if($name != null, ("size-" + #{$name}), "steps-size"),
-    $size
-  );
-  @include evariable(
-    "min-height",
-    $MULTIPLY_EXPRESSION,
-    eparam(
-      "$param",
-      variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
-    ),
-    eparam("$factor", 2)
-  );
+  $sizeVarName: if($name != null, "size-" + #{$name}, "steps-size");
+
+  font-size: var(--#{$prefix}#{$sizeVarName}, $size);
+  min-height: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
 
   .o-steps__divider {
-    @include avariable("height", "steps-divider-height", $steps-divider-height);
-    @include avariable(
-      "top",
-      if($name != null, ("size-" + #{$name}), "steps-size"),
-      $size
-    );
+    height: var(--#{$prefix}steps-divider-height, $steps-divider-height);
+    top: var(--#{$prefix}#{$sizeVarName}, $size);
   }
 
   .o-steps__marker {
-    @include evariable(
-      "height",
-      $MULTIPLY_EXPRESSION,
-      eparam(
-        "$param",
-        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
-      ),
-      eparam("$factor", 2)
-    );
-    @include evariable(
-      "width",
-      $MULTIPLY_EXPRESSION,
-      eparam(
-        "$param",
-        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
-      ),
-      eparam("$factor", 2)
-    );
+    height: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
+    width: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 2);
   }
 
   .o-steps__title {
-    @include avariable(
-      "background-color",
-      "steps-details-background-color",
-      $steps-details-background-color
-    );
     text-align: center;
     z-index: 1;
-
-    @include avariable(
-      "padding",
-      "steps-details-padding",
-      $steps-details-padding
-    );
-    @include evariable(
-      "font-size",
-      $MULTIPLY_EXPRESSION,
-      eparam(
-        "$param",
-        variable(if($name != null, ("size-" + #{$name}), "steps-size"), $size)
-      ),
-      eparam("$factor", 1.2)
+    background-color: var(
+      --#{$prefix}steps-details-background-color,
+      $steps-details-background-color
     );
-    @include avariable(
-      "height",
-      "steps-details-title-font-weight",
+    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
+    font-size: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 1.2);
+    height: var(
+      --#{$prefix}steps-details-title-font-weight,
       $steps-details-title-font-weight
     );
-    @include avariable(
-      "line-height",
-      if($name != null, ("size-" + #{$name}), "steps-size"),
-      $size
-    );
+    line-height: var(--#{$prefix}#{$sizeVarName}, $size);
   }
 
   .o-steps__wrapper-vertical {
     .o-steps--label-right {
       .o-steps__divider {
-        @include evariable(
-          "left",
-          $LR_CALC_EXPRESSION,
-          eparam(
-            "$size",
-            variable(
-              if($name != null, ("size-" + #{$name}), "steps-size"),
-              $size
-            )
-          ),
-          eparam(
-            "$divider-height",
-            variable("steps-divider-height", $steps-divider-height)
-          )
+        left: calc(
+          (
+              var(--#{$prefix}#{$sizeVarName}, $size) - var(
+                  --#{$prefix}steps-divider-height,
+                  $steps-divider-height
+                )
+            ) * 0.5
         );
       }
     }
@@ -129,21 +71,13 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     .o-steps--label-left {
       .o-steps__divider {
         left: auto;
-
-        @include evariable(
-          "right",
-          $LR_CALC_EXPRESSION,
-          eparam(
-            "$size",
-            variable(
-              if($name != null, ("size-" + #{$name}), "steps-size"),
-              $size
-            )
-          ),
-          eparam(
-            "$divider-height",
-            variable("steps-divider-height", $steps-divider-height)
-          )
+        right: calc(
+          (
+              var(--#{$prefix}#{$sizeVarName}, $size) - var(
+                  --#{$prefix}steps-divider-height,
+                  $steps-divider-height
+                )
+            ) * 0.5
         );
       }
     }
@@ -151,20 +85,13 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     &.o-steps__wrapper-position-right {
       .o-steps--label-right {
         .o-steps__divider {
-          @include evariable(
-            "left",
-            $LR_CALC_EXPRESSION,
-            eparam(
-              "$size",
-              variable(
-                if($name != null, ("size-" + #{$name}), "steps-size"),
-                $size
-              )
-            ),
-            eparam(
-              "$divider-height",
-              variable("steps-divider-height", $steps-divider-height)
-            )
+          left: calc(
+            (
+                var(--#{$prefix}#{$sizeVarName}, $size) - var(
+                    --#{$prefix}steps-divider-height,
+                    $steps-divider-height
+                  )
+              ) * 0.5
           );
         }
       }
@@ -172,21 +99,13 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
       .o-steps--label-left {
         .o-steps__divider {
           left: auto;
-
-          @include evariable(
-            "right",
-            $LR_CALC_EXPRESSION,
-            eparam(
-              "$size",
-              variable(
-                if($name != null, ("size-" + #{$name}), "steps-size"),
-                $size
-              )
-            ),
-            eparam(
-              "$divider-height",
-              variable("steps-divider-height", $steps-divider-height)
-            )
+          right: calc(
+            (
+                var(--#{$prefix}#{$sizeVarName}, $size) - var(
+                    --#{$prefix}steps-divider-height,
+                    $steps-divider-height
+                  )
+              ) * 0.5
           );
         }
       }
@@ -209,63 +128,50 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
   }
 
   &__nav-item {
+    position: relative;
     display: flex;
+    flex-grow: 1;
+    flex-basis: 1em;
     justify-content: center;
     list-style: none;
     margin: 0;
     padding: 0;
-
-    @include avariable(
-      "line-height",
-      "steps-item-line-height",
+    margin-top: 0;
+    line-height: var(
+      --#{$prefix}steps-item-line-height,
       $steps-item-line-height
     );
-    margin-top: 0;
-    position: relative;
-    flex-grow: 1;
-    flex-basis: 1em;
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+      $bgVarName: if(
+        $name != null,
+        "steps-divider-color-bg-" + #{$name},
+        "steps-divider-color-bg"
+      );
+      $colorVarName: if(
+        $name != null,
+        "steps-divider-color-" + #{$name},
+        "steps-divider-color"
+      );
+
       &--#{$name} {
         &.o-steps__nav-item-active {
           .o-steps__marker {
-            @include avariable(
-              "background-color",
-              ("variant-invert-" + #{$name}),
+            background-color: var(
+              --#{$prefix}variant-invert-#{$name},
               $color-invert
             );
-            @include avariable("border-color", ("variant-" + #{$name}), $color);
-            @include avariable("color", ("variant-" + #{$name}), $color);
+            border-color: var(--#{$prefix}variant-#{$name}, $color);
+            color: var(--#{$prefix}variant-#{$name}, $color);
           }
 
           .o-steps__divider {
-            @include evariable(
-              "background",
-              $GRADIENT_EXPRESSION,
-              eparam(
-                "$param1",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-bg-" + #{$name}),
-                    "steps-divider-color-bg"
-                  ),
-                  $steps-color
-                )
-              ),
-              eparam(
-                "$param2",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-" + #{$name}),
-                    "steps-divider-color"
-                  ),
-                  $color
-                )
-              )
+            background: linear-gradient(
+              to left,
+              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
+              var(--#{$prefix}#{$colorVarName}, $color) 50%
             );
             background-size: 200% 100%;
           }
@@ -273,44 +179,15 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
 
         &.o-steps__nav-item-previous {
           .o-steps__marker {
-            @include avariable(
-              "color",
-              ("variant-invert-" + #{$name}),
-              $color-invert
-            );
-            @include avariable(
-              "background-color",
-              ("variant-" + #{$name}),
-              $color
-            );
+            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+            background-color: var(--#{$prefix}variant-#{$name}, $color);
           }
 
           .o-steps__divider {
-            @include evariable(
-              "background",
-              $GRADIENT_EXPRESSION,
-              eparam(
-                "$param1",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-bg-" + #{$name}),
-                    "steps-divider-color-bg"
-                  ),
-                  $steps-color
-                )
-              ),
-              eparam(
-                "$param2",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-" + #{$name}),
-                    "steps-divider-color"
-                  ),
-                  $color
-                )
-              )
+            background: linear-gradient(
+              to left,
+              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
+              var(--#{$prefix}#{$colorVarName}, $color) 50%
             );
             background-size: 200% 100%;
           }
@@ -322,8 +199,8 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
   &__divider {
     background: linear-gradient(
       to left,
-      variable("steps-divider-color-bg", $steps-color) 50%,
-      variable("steps-divider-color", $primary) 50%
+      var(--#{$prefix}steps-divider-color-bg, $steps-color) 50%,
+      var(--#{$prefix}steps-divider-color, var(--#{$prefix}primary)) 50%
     );
     background-size: 200% 100%;
     background-position: right bottom;
@@ -341,12 +218,7 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     overflow: visible;
     display: flex;
     flex-direction: column;
-
-    @include avariable(
-      "padding",
-      "steps-content-padding",
-      $steps-content-padding
-    );
+    padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
 
     &-transitioning {
       overflow: hidden;
@@ -356,17 +228,8 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
   &--animated {
     .o-steps__divider {
       transition-property: background;
-
-      @include avariable(
-        "transition-duration",
-        "transition-duration",
-        $speed-slow
-      );
-      @include avariable(
-        "transition-timing-function",
-        "transition-timing",
-        $easing
-      );
+      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
     }
   }
 
@@ -377,10 +240,9 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     flex-direction: column;
     background: transparent;
     border: transparent;
-
-    @include avariable("color", "steps-link-color", $steps-link-color);
     cursor: pointer;
     text-decoration: none;
+    color: var(--#{$prefix}steps-link-color, $steps-link-color);
 
     &-label-right {
       flex-direction: row;
@@ -403,44 +265,34 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     align-items: center;
     display: flex;
     justify-content: center;
-
-    @include avariable(
-      "font-weight",
-      "steps-marker-font-weight",
+    overflow: hidden;
+    z-index: 1;
+    font-weight: var(
+      --#{$prefix}steps-marker-font-weight,
       $steps-marker-font-weight
     );
-    @include avariable(
-      "background",
-      "steps-marker-background",
+    background: var(
+      --#{$prefix}steps-marker-background,
       $steps-marker-background
     );
-    @include avariable("color", "steps-marker-color", $steps-marker-color);
-    @include avariable("border", "steps-marker-border", $steps-marker-border);
-    z-index: 1;
-    overflow: hidden;
+    color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
+    border: var(--#{$prefix}steps-marker-border, $steps-marker-border);
 
     &--rounded {
-      @include avariable(
-        "border-radius",
-        "steps-marker-rounded-border-radius",
+      border-radius: var(
+        --#{$prefix}steps-marker-rounded-border-radius,
         $steps-marker-rounded-border-radius
       );
     }
   }
 
   &__details {
-    @include avariable(
-      "background-color",
-      "steps-details-background-color",
-      $steps-details-background-color
-    );
     text-align: center;
     z-index: 1;
-
-    @include avariable(
-      "padding",
-      "steps-details-padding",
-      $steps-details-padding
+    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
+    background-color: var(
+      --#{$prefix}steps-details-background-color,
+      $steps-details-background-color
     );
   }
 
@@ -450,17 +302,12 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     }
 
     .o-steps__marker {
-      @include avariable(
-        "background-color",
-        "steps-marker-color",
+      background-color: var(
+        --#{$prefix}steps-marker-color,
         $steps-marker-color
       );
-      @include avariable(
-        "border-color",
-        "steps-active-color",
-        $steps-active-color
-      );
-      @include avariable("color", "steps-active-color", $steps-active-color);
+      border-color: var(--#{$prefix}steps-active-color, $steps-active-color);
+      color: var(--#{$prefix}steps-active-color, $steps-active-color);
     }
 
     .o-steps__divider {
@@ -470,10 +317,9 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
 
   &__nav-item-previous {
     .o-steps__marker {
-      @include avariable("color", "steps-marker-color", $steps-marker-color);
-      @include avariable(
-        "background-color",
-        "steps-previous-color",
+      color: var(--#{$prefix}steps-marker-color, $steps-marker-color);
+      background-color: var(
+        --#{$prefix}steps-previous-color,
         $steps-previous-color
       );
     }
@@ -500,12 +346,7 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
 
     .o-steps__divider {
       height: 100%;
-
-      @include avariable(
-        "width",
-        "steps-divider-height",
-        $steps-divider-height
-      );
+      width: var(--#{$prefix}steps-divider-height, $steps-divider-height);
       top: -50%;
       left: calc(50% - #{$steps-divider-height * 0.5});
     }
@@ -523,41 +364,28 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
       align-items: center;
       justify-content: center;
 
-      @include avariable(
-        "padding",
-        "steps-vertical-padding",
-        $steps-vertical-padding
-      );
+      padding: var(--#{$prefix}steps-vertical-padding, $steps-vertical-padding);
+
       // Override marker connector color per step
       @each $name, $pair in $colors {
         $color: list.nth($pair, 1);
+        $bgVarName: if(
+          $name != null,
+          "steps-divider-color-bg-" + #{$name},
+          "steps-divider-color-bg"
+        );
+        $colorVarName: if(
+          $name != null,
+          "steps-divider-color-" + #{$name},
+          "steps-divider-color"
+        );
+
         &--#{$name} {
           .o-steps__divider {
-            @include evariable(
-              "background",
-              $GRADIENT_EXPRESSION,
-              eparam(
-                "$param1",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-bg-" + #{$name}),
-                    "steps-divider-color-bg"
-                  ),
-                  $steps-color
-                )
-              ),
-              eparam(
-                "$param2",
-                variable(
-                  if(
-                    $name != null,
-                    ("steps-divider-color-" + #{$name}),
-                    "steps-divider-color"
-                  ),
-                  $color
-                )
-              )
+            background: linear-gradient(
+              to left,
+              var(--#{$prefix}#{$bgVarName}, $steps-color) 50%,
+              var(--#{$prefix}#{$colorVarName}, $color) 50%
             );
             background-size: 100% 200%;
             background-position: left bottom;
@@ -587,16 +415,12 @@ $MULTIPLY_EXPRESSION: "calc($param * $factor)";
     }
 
     .o-steps__divider {
-      @include avariable(
-        "height",
-        "steps-divider-height",
-        $steps-divider-height
-      );
-      @include avariable("top", "steps-divider-top", $steps-font-size);
+      height: var(--#{$prefix}steps-divider-height, $steps-divider-height);
+      top: var(--#{$prefix}steps-divider-top, $steps-font-size);
 
       @each $name, $value in $sizes {
         .o-steps--#{$name} {
-          @include avariable("top", "size-" + #{$name}, $value);
+          top: var(--#{$prefix}size-#{$name}, $value);
         }
       }
     }
diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss
index 7998933..75232c8 100644
--- a/src/assets/scss/components/_switch.scss
+++ b/src/assets/scss/components/_switch.scss
@@ -1,54 +1,54 @@
 @use "sass:list";
 
 /* @docs */
-$switch-active-background-color: $primary !default;
+$switch-active-background-color: var(--#{$prefix}primary) !default;
 $switch-action-background: #f5f5f5 !default;
-$switch-background: $grey-light !default;
-$switch-border-radius: $base-border-radius !default;
+$switch-background: var(--#{$prefix}grey-light) !default;
+$switch-border-radius: var(--#{$prefix}base-border-radius) !default;
 $switch-box-shadow:
   0 3px 1px 0 rgba(0, 0, 0, 0.05),
   0 2px 2px 0 rgba(0, 0, 0, 0.1),
   0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
-$switch-disabled-opacity: $base-disabled-opacity !default;
+$switch-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $switch-margin-label: 0.5em !default;
 $switch-padding: 0.2em !default;
-$switch-rounded-border-radius: $base-rounded-border-radius !default;
+$switch-rounded-border-radius: var(
+  --#{$prefix}base-rounded-border-radius
+) !default;
 $switch-width: 2.75 * 1em !default;
 /* @docs */
 
 .o-switch {
+  @include unselectable;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   position: relative;
 
-  @include unselectable;
+  // size variants
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      font-size: var(--#{$prefix}font-size-#{name}, $value);
+    }
+  }
 
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     &--#{$name} {
       .o-switch__check--checked {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
     &--#{$name}-passive {
       .o-switch__check:not(.o-switch__check--checked) {
-        @include avariable("background", ("variant-" + #{$name}), $color);
+        background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
   }
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      @include avariable("font-size", ("font-size-" + #{name}), $value);
-    }
-  }
 
   &__label {
-    @include avariable(
-      "margin-left",
-      "switch-margin-label",
-      $switch-margin-label
-    );
+    margin-left: var(--#{$prefix}switch-margin-label, $switch-margin-label);
   }
 
   &--left {
@@ -56,49 +56,37 @@ $switch-width: 2.75 * 1em !default;
 
     .o-switch__label {
       margin-left: 0;
-
-      @include avariable(
-        "margin-right",
-        "switch-margin-label",
-        $switch-margin-label
-      );
+      margin-right: var(--#{$prefix}switch-margin-label, $switch-margin-label);
     }
   }
 
   &__check-switch {
     content: "";
     display: block;
-
-    @include evariable(
-      "height",
-      "calc(($width - $padding * 2) * 0.5)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    height: calc(
+      (
+          var(--#{$prefix}switch-width, $switch-width) - var(
+              --#{$prefix}switch-padding,
+              $switch-padding
+            ) * 2
+        ) * 0.5
     );
-    @include evariable(
-      "width",
-      "calc(($width - $padding * 2) * 0.5)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    width: calc(
+      (
+          var(--#{$prefix}switch-width, $switch-width) - var(
+              --#{$prefix}switch-padding,
+              $switch-padding
+            ) * 2
+        ) * 0.5
     );
-    @include avariable(
-      "background",
-      "switch-action-background",
+    background: var(
+      --#{$prefix}switch-action-background,
       $switch-action-background
     );
-    @include avariable("box-shadow", "switch-box-shadow", $switch-box-shadow);
+    box-shadow: var(--#{$prefix}switch-box-shadow, $switch-box-shadow);
     transition-property: transform;
-
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
+    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
     will-change: transform;
     transform-origin: left;
   }
@@ -107,38 +95,22 @@ $switch-width: 2.75 * 1em !default;
     display: flex;
     align-items: center;
     flex-shrink: 0;
-
-    @include avariable("width", "switch-width", $switch-width);
-    @include evariable(
-      "height",
-      "calc($width * 0.5 + $padding)",
-      eparam("$width", variable("switch-width", $switch-width)),
-      eparam("$padding", variable("switch-padding", $switch-padding))
+    width: var(--#{$prefix}switch-width, $switch-width);
+    height: calc(
+      var(--#{$prefix}switch-width, $switch-width) * 0.5 +
+        var(--#{$prefix}switch-padding, $switch-padding)
     );
-    @include avariable("padding", "switch-padding", $switch-padding);
-    @include avariable("background", "switch-background", $switch-background);
-    @include avariable(
-      "border-radius",
-      "switch-border-radius",
-      $switch-border-radius
-    );
-    transition-property: background;
 
-    @include avariable(
-      "transition-duration",
-      "transition-duration",
-      $speed-slow
-    );
-    @include avariable(
-      "transition-timing-function",
-      "transition-timing",
-      $easing
-    );
+    padding: var(--#{$prefix}switch-padding, $switch-padding);
+    background: var(--#{$prefix}switch-background, $switch-background);
+    border-radius: var(--#{$prefix}switch-border-radius, $switch-border-radius);
+    transition-property: background;
+    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
+    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
 
     &--checked {
-      @include avariable(
-        "background",
-        "switch-active-background-color",
+      background: var(
+        --#{$prefix}switch-active-background-color,
         $switch-active-background-color
       );
 
@@ -156,18 +128,13 @@ $switch-width: 2.75 * 1em !default;
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "switch-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}switch-rounded-border-radius,
       $switch-rounded-border-radius
     );
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "switch-disabled-opacity",
-      $switch-disabled-opacity
-    );
+    opacity: var(--#{$prefix}switch-disabled-opacity, $switch-disabled-opacity);
   }
 }
diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss
index 98ad7e5..039a61b 100644
--- a/src/assets/scss/components/_table.scss
+++ b/src/assets/scss/components/_table.scss
@@ -4,36 +4,36 @@
 $table-background-color: #fff !default;
 $table-background: #f5f5f5 !default;
 $table-boder: 1px solid transparent !default;
-$table-border-radius: $base-border-radius !default;
+$table-border-radius: var(--#{$prefix}base-border-radius) !default;
 $table-card-box-shadow:
-  0 2px 3px rgba($black, 0.1),
-  0 0 0 1px rgba($black, 0.1) !default;
+  0 2px 3px rgba(var(--#{$prefix}black), 0.1),
+  0 0 0 1px rgba(var(--#{$prefix}black), 0.1) !default;
 $table-card-cell-font-weight: 600 !default;
 $table-card-cell-padding: 0 0.5em 0 0 !default;
 $table-card-cell-text-align: left !default;
 $table-card-detail-margin: -1rem 0 0 0;
 $table-card-margin: 0 0 1rem 0;
 $table-color: black !default;
-$table-current-sort-border-color: $grey !default;
+$table-current-sort-border-color: var(--#{$prefix}grey) !default;
 $table-current-sort-font-weight: 700 !default;
-$table-current-sort-hover-border-color: $grey !default;
+$table-current-sort-hover-border-color: var(--#{$prefix}grey) !default;
 $table-detail-background: #fafafa !default;
-$table-detail-box-shadow: inset 0 1px 3px $grey !default;
-$table-detail-chevron-color: $primary !default;
+$table-detail-box-shadow: inset 0 1px 3px var(--#{$prefix}grey) !default;
+$table-detail-chevron-color: var(--#{$prefix}primary) !default;
 $table-detail-chevron-width: 40px !default;
 $table-detail-padding: 1rem !default;
-$table-focus-border-color: $primary !default;
-$table-focus-box-shadow: 0 0 0 0.125em rgba($primary, 0.25) !default;
+$table-focus-border-color: var(--#{$prefix}primary) !default;
+$table-focus-box-shadow: 0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25) !default;
 $table-hoverable-background-color: #fafafa !default;
 $table-narrow-padding: 0.25em 0.5em !default;
-$table-row-active-background-color: $primary !default;
-$table-row-active-color: $primary-invert !default;
+$table-row-active-background-color: var(--#{$prefix}primary) !default;
+$table-row-active-color: var(--#{$prefix}primary-invert) !default;
 $table-sticky-header-height: 300px !default;
 $table-sticky-zindex: 1 !default;
 $table-striped-background-color: #fafafa !default;
-$table-td-border: 1px solid $grey-lighter !default;
+$table-td-border: 1px solid var(--#{$prefix}grey-lighter) !default;
 $table-td-padding: 0.5em 0.75em !default;
-$table-th-border: 2px solid $grey-lighter !default;
+$table-th-border: 2px solid var(--#{$prefix}grey-lighter) !default;
 $table-th-checkbox-width: 40px !default;
 $table-th-color: #363636 !default;
 $table-th-detail-width: 14px !default;
@@ -46,19 +46,13 @@ $table-th-padding: 0.5em 0.75em !default;
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-
-  @include avariable("border", "table-boder", $table-boder);
-  @include avariable(
-    "border-radius",
-    "table-border-radius",
-    $table-border-radius
-  );
-  @include avariable(
-    "background-color",
-    "table-background-color",
+  border: var(--#{$prefix}table-boder, $table-boder);
+  border-radius: var(--#{$prefix}table-border-radius, $table-border-radius);
+  background-color: var(
+    --#{$prefix}table-background-color,
     $table-background-color
   );
-  @include avariable("color", "table-color", $table-color);
+  color: var(--#{$prefix}table-color, $table-color);
 
   &__root {
     position: relative;
@@ -69,9 +63,8 @@ $table-th-padding: 0.5em 0.75em !default;
     position: relative;
 
     &--sticky-header {
-      @include avariable(
-        "height",
-        "table-sticky-header-height",
+      height: var(
+        --#{$prefix}table-sticky-header-height,
         $table-sticky-header-height
       );
       overflow-y: auto;
@@ -81,10 +74,8 @@ $table-th-padding: 0.5em 0.75em !default;
         position: sticky;
         left: 0;
         top: 0;
-
-        @include avariable(
-          "background",
-          "table-background-color",
+        background: var(
+          --#{$prefix}table-background-color,
           $table-background-color
         );
       }
@@ -134,9 +125,8 @@ $table-th-padding: 0.5em 0.75em !default;
       }
 
       tr {
-        @include avariable(
-          "box-shadow",
-          "table-card-box-shadow",
+        box-shadow: var(
+          --#{$prefix}table-card-box-shadow,
           $table-card-box-shadow
         );
         max-width: 100%;
@@ -153,7 +143,7 @@ $table-th-padding: 0.5em 0.75em !default;
         }
 
         &:not(:last-child) {
-          @include avariable("margin", "table-card-margin", $table-card-margin);
+          margin: var(--#{$prefix}table-card-margin, $table-card-margin);
         }
 
         &:not(.o-table__tr--selected) {
@@ -167,9 +157,8 @@ $table-th-padding: 0.5em 0.75em !default;
         }
 
         &.o-table--detailed {
-          @include avariable(
-            "margin",
-            "table-card-detail-margin",
+          margin: var(
+            --#{$prefix}table-card-detail-margin,
             $table-card-detail-margin
           );
         }
@@ -181,29 +170,23 @@ $table-th-padding: 0.5em 0.75em !default;
           width: auto;
           justify-content: space-between;
           text-align: right;
-
-          @include avariable(
-            "border-bottom",
-            "table-background",
+          border-bottom: var(
+            --#{$prefix}table-background,
             ($table-background 1px solid)
           );
 
           &:before {
             content: attr(data-label);
-
-            @include avariable(
-              "font-weight",
-              "table-card-cell-font-weight",
+            font-weight: var(
+              --#{$prefix}table-card-cell-font-weight,
               $table-card-cell-font-weight
             );
-            @include avariable(
-              "padding-right",
-              "table-card-cell-padding",
+            padding-right: var(
+              --#{$prefix}table-card-cell-padding,
               $table-card-cell-padding
             );
-            @include avariable(
-              "text-align",
-              "table-card-cell-text-align",
+            text-align: var(
+              --#{$prefix}table-card-cell-text-align,
               $table-card-cell-text-align
             );
           }
@@ -220,15 +203,10 @@ $table-th-padding: 0.5em 0.75em !default;
     vertical-align: top;
     text-align: left;
     position: relative;
-
-    @include avariable(
-      "font-weight",
-      "table-th-font-weight",
-      $table-th-font-weight
-    );
-    @include avariable("color", "table-th-color", $table-th-color);
-    @include avariable("border-bottom", "table-th-border", $table-th-border);
-    @include avariable("padding", "table-th-padding", $table-th-padding);
+    font-weight: var(--#{$prefix}table-th-font-weight, $table-th-font-weight);
+    color: var(--#{$prefix}table-th-color, $table-th-color);
+    border-bottom: var(--#{$prefix}table-th-border, $table-th-border);
+    padding: var(--#{$prefix}table-th-padding, $table-th-padding);
 
     &--centered {
       text-align: center;
@@ -244,22 +222,16 @@ $table-th-padding: 0.5em 0.75em !default;
     }
 
     &-checkbox {
-      @include avariable(
-        "width",
-        "table-th-checkbox-width",
-        $table-th-checkbox-width
-      );
+      width: var(--#{$prefix}table-th-checkbox-width, $table-th-checkbox-width);
     }
 
     &-current-sort {
-      @include avariable(
-        "border-color",
-        "table-current-sort-border-color",
+      border-color: var(
+        --#{$prefix}table-current-sort-border-color,
         $table-current-sort-border-color
       );
-      @include avariable(
-        "font-weight",
-        "table-current-sort-font-weight",
+      font-weight: var(
+        --#{$prefix}table-current-sort-font-weight,
         $table-current-sort-font-weight
       );
     }
@@ -268,9 +240,8 @@ $table-th-padding: 0.5em 0.75em !default;
       cursor: pointer;
 
       &:hover {
-        @include avariable(
-          "border-color",
-          "table-current-sort-hover-border-color",
+        border-color: var(
+          --#{$prefix}table-current-sort-hover-border-color,
           $table-current-sort-hover-border-color
         );
       }
@@ -281,16 +252,11 @@ $table-th-padding: 0.5em 0.75em !default;
       position: sticky;
       left: 0;
       top: 0;
-
-      @include evariable(
-        "z-index",
-        "calc($param + $factor)",
-        eparam("$param", variable("table-sticky-zindex", $table-sticky-zindex)),
-        eparam("$factor", 2)
+      z-index: calc(
+        var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex) + 0
       );
-      @include avariable(
-        "background",
-        "table-background-color",
+      background: var(
+        --#{$prefix}table-background-color,
         $table-background-color
       );
     }
@@ -300,34 +266,23 @@ $table-th-padding: 0.5em 0.75em !default;
     }
 
     &--detailed {
-      @include avariable(
-        "width",
-        "table-th-detail-width",
-        $table-th-detail-width
-      );
+      width: var(--#{$prefix}table-th-detail-width, $table-th-detail-width);
     }
   }
 
   &__td {
     vertical-align: top;
     text-align: left;
-
-    @include avariable("border-bottom", "table-td-border", $table-td-border);
-    @include avariable("padding", "table-td-padding", $table-td-padding);
+    border-bottom: var(--#{$prefix}table-td-border, $table-td-border);
+    padding: var(--#{$prefix}table-td-padding, $table-td-padding);
 
     &--sticky {
       position: -webkit-sticky;
       position: sticky;
       left: 0;
-
-      @include avariable(
-        "z-index",
-        "table-sticky-zindex",
-        $table-sticky-zindex
-      );
-      @include avariable(
-        "background",
-        "table-background-color",
+      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
+      background: var(
+        --#{$prefix}table-background-color,
         $table-background-color
       );
     }
@@ -342,29 +297,24 @@ $table-th-padding: 0.5em 0.75em !default;
 
     &-chevron {
       vertical-align: middle;
-
-      @include avariable(
-        "width",
-        "table-detail-chevron-width",
+      width: var(
+        --#{$prefix}table-detail-chevron-width,
         $table-detail-chevron-width
       );
-      @include avariable(
-        "color",
-        "table-detail-chevron-color",
+      color: var(
+        --#{$prefix}table-detail-chevron-color,
         $table-detail-chevron-color
       );
     }
   }
 
   &:focus {
-    @include avariable(
-      "border-color",
-      "table-focus-border-color",
+    border-color: var(
+      --#{$prefix}table-focus-border-color,
       $table-focus-border-color
     );
-    @include avariable(
-      "box-shadow",
-      "table-focus-box-shadow",
+    box-shadow: var(
+      --#{$prefix}table-focus-box-shadow,
       $table-focus-box-shadow
     );
   }
@@ -373,21 +323,20 @@ $table-th-padding: 0.5em 0.75em !default;
     tr:last-child {
       td,
       th {
-        @include avariable("border", "table-td-border", $table-td-border);
+        border: var(--#{$prefix}table-td-border, $table-td-border);
       }
     }
 
     td,
     th {
-      @include avariable("border", "table-td-border", $table-td-border);
+      border: var(--#{$prefix}table-td-border, $table-td-border);
     }
   }
 
   &--striped {
     tbody tr:not(.o-table__tr--selected):nth-child(2n) {
-      @include avariable(
-        "background-color",
-        "table-striped-background-color",
+      background-color: var(
+        --#{$prefix}table-striped-background-color,
         $table-striped-background-color
       );
     }
@@ -396,42 +345,31 @@ $table-th-padding: 0.5em 0.75em !default;
   &--narrowed {
     td,
     th {
-      @include avariable(
-        "padding",
-        "table-narrow-padding",
-        $table-narrow-padding
-      );
+      padding: var(--#{$prefix}table-narrow-padding, $table-narrow-padding);
     }
   }
 
   &--hoverable {
     tbody tr:not(.o-table__tr--selected):hover {
-      @include avariable(
-        "background-color",
-        "table-hoverable-background-color",
+      background-color: var(
+        --#{$prefix}table-hoverable-background-color,
         $table-hoverable-background-color
       );
     }
   }
 
   &__detail {
-    @include avariable(
-      "box-shadow",
-      "table-detail-box-shadow",
+    box-shadow: var(
+      --#{$prefix}table-detail-box-shadow,
       $table-detail-box-shadow
     );
-    @include avariable(
-      "background",
-      "table-detail-background",
+    background: var(
+      --#{$prefix}table-detail-background,
       $table-detail-background
     );
 
     td {
-      @include avariable(
-        "padding",
-        "table-detail-padding",
-        $table-detail-padding
-      );
+      padding: var(--#{$prefix}table-detail-padding, $table-detail-padding);
     }
   }
 
diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss
index a54b84a..7533215 100644
--- a/src/assets/scss/components/_tabs.scss
+++ b/src/assets/scss/components/_tabs.scss
@@ -1,18 +1,18 @@
 /* @docs */
-$tabs-disabled-opacity: $base-disabled-opacity !default;
-$tabs-font-size: $base-font-size !default;
+$tabs-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
+$tabs-font-size: var(--#{$prefix}base-font-size) !default;
 $tabs-icon-margin: 0.5em !default;
 $tabs-content-padding: 1rem !default;
 $tabs-margin-bottom: 1.5rem !default;
-$tabs-border-bottom-color: $grey-lighter !default;
+$tabs-border-bottom-color: var(--#{$prefix}grey-lighter) !default;
 $tabs-border-bottom-style: solid !default;
 $tabs-border-bottom-width: 1px !default;
 $tabs-link-color: hsl(0, 0%, 29%) !default;
-$tabs-link-active-border-bottom-color: $primary !default;
-$tabs-link-active-color: $primary !default;
-$tabs-link-line-height: $base-line-height !default;
+$tabs-link-active-border-bottom-color: var(--#{$prefix}primary) !default;
+$tabs-link-active-color: var(--#{$prefix}primary) !default;
+$tabs-link-line-height: var(--#{$prefix}base-line-height) !default;
 $tabs-link-padding: 0.5em 1em !default;
-$tabs-boxed-link-radius: $base-border-radius !default;
+$tabs-boxed-link-radius: var(--#{$prefix}base-border-radius) !default;
 $tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
 $tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
 $tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
@@ -23,10 +23,10 @@ $tabs-toggle-link-border-style: solid !default;
 $tabs-toggle-link-border-width: 1px !default;
 $tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
 $tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
-$tabs-toggle-link-radius: $base-border-radius !default;
-$tabs-toggle-link-active-background-color: $primary !default;
-$tabs-toggle-link-active-border-color: $primary !default;
-$tabs-toggle-link-active-color: $primary-invert !default;
+$tabs-toggle-link-radius: var(--#{$prefix}base-border-radius) !default;
+$tabs-toggle-link-active-background-color: var(--#{$prefix}primary) !default;
+$tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
+$tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
 /* @docs */
 
 @mixin item {
@@ -34,37 +34,31 @@ $tabs-toggle-link-active-color: $primary-invert !default;
   -webkit-appearance: none;
   width: 100%;
   margin: 0;
-  padding: 0;
   border: 1px solid transparent;
   background-color: transparent;
   align-items: center;
   line-height: $tabs-link-line-height;
-
-  @include avariable("font-size", "tabs-font-size", $tabs-font-size);
-  @include avariable(
-    "border-bottom-color",
-    "tabs-border-bottom-color",
-    $tabs-border-bottom-color
-  );
-  @include avariable(
-    "border-bottom-style",
-    "tabs-border-bottom-style",
-    $tabs-border-bottom-style
-  );
-  @include avariable(
-    "border-bottom-width",
-    "tabs-border-bottom-width",
-    $tabs-border-bottom-width
-  );
-  @include avariable("color", "tabs-link-color", $tabs-link-color);
   display: flex;
   justify-content: center;
   margin-bottom: -1px;
-
-  @include avariable("padding", "tabs-link-padding", $tabs-link-padding);
   vertical-align: top;
   cursor: pointer;
   text-decoration: none;
+  font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
+  border-bottom-color: var(
+    --#{$prefix}tabs-border-bottom-color,
+    $tabs-border-bottom-color
+  );
+  border-bottom-style: var(
+    --#{$prefix}tabs-border-bottom-style,
+    $tabs-border-bottom-style
+  );
+  border-bottom-width: var(
+    --#{$prefix}tabs-border-bottom-width,
+    $tabs-border-bottom-width
+  );
+  color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
+  padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
 }
 
 .o-tabs {
@@ -96,25 +90,21 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
     .o-tabs__nav-item-boxed {
       border-bottom-color: transparent;
-
-      @include avariable(
-        "border-right-color",
-        "tabs-border-bottom-color",
+      border-right-color: var(
+        --#{$prefix}tabs-border-bottom-color,
         $tabs-border-bottom-color
       );
-      @include avariable(
-        "border-radius",
-        "tabs-border-bottom-color",
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
         #{$tabs-toggle-link-radius} 0 0 #{$tabs-toggle-link-radius}
       );
 
       &--active {
-        @include avariable(
-          "border-bottom-color",
-          "tabs-border-bottom-color",
+        border-right-color: transparent;
+        border-bottom-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        border-right-color: transparent;
       }
     }
   }
@@ -125,30 +115,25 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     .o-tabs__nav-item-boxed {
       border-bottom-color: transparent;
       border-right-color: transparent;
-
-      @include avariable(
-        "border-left-color",
-        "tabs-border-bottom-color",
+      border-left-color: var(
+        --#{$prefix}tabs-border-bottom-color,
         $tabs-border-bottom-color
       );
-      @include avariable(
-        "border-radius",
-        "tabs-border-bottom-color",
+      border-radius: var(
+        --#{$prefix}tabs-border-bottom-color,
         0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
       );
 
       &--active {
-        @include avariable(
-          "border-bottom-color",
-          "tabs-border-bottom-color",
+        border-left-color: transparent;
+        border-right-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        @include avariable(
-          "border-right-color",
-          "tabs-border-bottom-color",
+        border-bottom-color: var(
+          --#{$prefix}tabs-border-bottom-color,
           $tabs-border-bottom-color
         );
-        border-left-color: transparent;
       }
     }
   }
@@ -164,16 +149,15 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     justify-content: flex-start;
     overflow-x: auto;
     // padding bottom to keep showing the border-bottom
-    @include avariable(
-      "padding-bottom",
-      "tabs-border-bottom-width",
+    padding-bottom: var(
+      --#{$prefix}tabs-border-bottom-width,
       $tabs-border-bottom-width
     );
-    @include avariable("font-size", "tabs-font-size", $tabs-font-size);
+    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
 
     @each $name, $value in $sizes {
       &--#{$name} {
-        @include avariable("font-size", ("tabs-font-size-" + #{$name}), $value);
+        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
       }
     }
 
@@ -187,25 +171,19 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
     &-item {
       &-icon {
-        @include avariable(
-          "margin-right",
-          "tabs-icon-margin",
-          $tabs-icon-margin
-        );
+        margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
       }
 
       &-default {
         @include item;
 
         &--active {
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-active-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-link-active-border-bottom-color,
             $tabs-link-active-border-bottom-color
           );
-          @include avariable(
-            "color",
-            "tabs-link-active-color",
+          color: var(
+            --#{$prefix}tabs-link-active-color,
             $tabs-link-active-color
           );
         }
@@ -213,23 +191,19 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-default--active) {
-          @include avariable(
-            "background-color",
-            "tabs-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-link-hover-background-color,
             $tabs-boxed-link-hover-background-color
           );
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-hover-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-link-hover-border-bottom-color,
             $tabs-boxed-link-hover-border-bottom-color
           );
         }
@@ -237,37 +211,27 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
       &-boxed {
         @include item;
-        @include avariable(
-          "border-radius",
-          "tabs-border-bottom-color",
+        border-bottom-color: transparent;
+        border-radius: var(
+          --#{$prefix}tabs-border-bottom-color,
           #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
         );
-        border-bottom-color: transparent;
 
         &--active {
-          @include avariable(
-            "border-bottom-color",
-            "tabs-link-active-border-bottom-color",
-            $tabs-link-active-border-bottom-color
-          );
-          @include avariable(
-            "color",
-            "tabs-link-active-color",
+          color: var(
+            --#{$prefix}tabs-link-active-color,
             $tabs-link-active-color
           );
-          @include avariable(
-            "background-color",
-            "tabs-boxed-link-active-background-color",
+          background-color: var(
+            --#{$prefix}tabs-boxed-link-active-background-color,
             $tabs-boxed-link-active-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-boxed-link-active-border-color",
+          border-color: var(
+            --#{$prefix}tabs-boxed-link-active-border-color,
             $tabs-boxed-link-active-border-color
           );
-          @include avariable(
-            "border-bottom-color",
-            "tabs-boxed-link-active-border-bottom-color",
+          border-bottom-color: var(
+            --#{$prefix}tabs-boxed-link-active-border-bottom-color,
             $tabs-boxed-link-active-border-bottom-color
           );
         }
@@ -275,18 +239,15 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-boxed--active) {
-          @include avariable(
-            "background-color",
-            "tabs-boxed-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-boxed-link-hover-background-color,
             $tabs-boxed-link-hover-background-color
           );
         }
@@ -294,38 +255,32 @@ $tabs-toggle-link-active-color: $primary-invert !default;
 
       &-toggle {
         @include item;
-        @include avariable(
-          "border-color",
-          "tabs-toggle-link-border-color",
+        position: relative;
+        border-color: var(
+          --#{$prefix}tabs-toggle-link-border-color,
           $tabs-toggle-link-border-color
         );
-        @include avariable(
-          "border-style",
-          "tabs-toggle-link-border-style",
+        border-style: var(
+          --#{$prefix}tabs-toggle-link-border-style,
           $tabs-toggle-link-border-style
         );
-        @include avariable(
-          "border-width",
-          "tabs-toggle-link-border-width",
+        border-width: var(
+          --#{$prefix}tabs-toggle-link-border-width,
           $tabs-toggle-link-border-width
         );
         margin-bottom: 0;
-        position: relative;
 
         &--active {
-          @include avariable(
-            "background-color",
-            "tabs-toggle-link-active-background-color",
+          background-color: var(
+            --#{$prefix}tabs-toggle-link-active-background-color,
             $tabs-toggle-link-active-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-toggle-link-active-border-color",
+          border-color: var(
+            --#{$prefix}tabs-toggle-link-active-border-color,
             $tabs-toggle-link-active-border-color
           );
-          @include avariable(
-            "color",
-            "tabs-toggle-link-active-color",
+          color: var(
+            --#{$prefix}tabs-toggle-link-active-color,
             $tabs-toggle-link-active-color
           );
         }
@@ -333,23 +288,19 @@ $tabs-toggle-link-active-color: $primary-invert !default;
         &--disabled {
           pointer-events: none;
           cursor: not-allowed;
-
-          @include avariable(
-            "opacity",
-            "tabs-disabled-opacity",
+          opacity: var(
+            --#{$prefix}tabs-disabled-opacity,
             $tabs-disabled-opacity
           );
         }
 
         &:hover:not(.o-tabs__nav-item-toggle--active) {
-          @include avariable(
-            "background-color",
-            "tabs-toggle-link-hover-background-color",
+          background-color: var(
+            --#{$prefix}tabs-toggle-link-hover-background-color,
             $tabs-toggle-link-hover-background-color
           );
-          @include avariable(
-            "border-color",
-            "tabs-toggle-link-hover-border-color",
+          border-color: var(
+            --#{$prefix}tabs-toggle-link-hover-border-color,
             $tabs-toggle-link-hover-border-color
           );
         }
@@ -363,12 +314,7 @@ $tabs-toggle-link-active-color: $primary-invert !default;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-
-    @include avariable(
-      "padding",
-      "tabs-content-padding",
-      $tabs-content-padding
-    );
+    padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
 
     &--transitioning {
       overflow: hidden;
@@ -376,10 +322,6 @@ $tabs-toggle-link-active-color: $primary-invert !default;
   }
 
   &:not(:last-child) {
-    @include avariable(
-      "margin-bottom",
-      "tabs-margin-bottom",
-      $tabs-margin-bottom
-    );
+    margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
   }
 }
diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss
index 0366173..0e4ee7b 100644
--- a/src/assets/scss/components/_taginput.scss
+++ b/src/assets/scss/components/_taginput.scss
@@ -4,20 +4,20 @@
 $taginput-background-color: $input-background-color !default;
 $taginput-height: calc(2em - 1px) !default;
 $taginput-padding: calc(0.275em - 1px) 0 0 !default;
-$taginput-border-color: $grey-lighter !default;
+$taginput-border-color: var(--#{$prefix}grey-lighter) !default;
 $taginput-border-style: solid !default;
 $taginput-border-width: 1px !default;
-$taginput-border-radius: $base-border-radius !default;
+$taginput-border-radius: var(--#{$prefix}base-border-radius) !default;
 $taginput-color: #363636 !default;
-$taginput-line-height: $base-line-height !default;
+$taginput-line-height: var(--#{$prefix}base-line-height) !default;
 $taginput-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
 $taginput-max-width: 100% !default;
 $taginput-width: 100% !default;
 $taginput-counter-font-size: 0.75rem !default;
 $taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
-$taginput-item-background-color: $primary !default;
-$taginput-item-color: $primary-invert !default;
-$taginput-item-border-radius: $base-border-radius !default;
+$taginput-item-background-color: var(--#{$prefix}primary) !default;
+$taginput-item-color: var(--#{$prefix}primary-invert) !default;
+$taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
 $taginput-item-margin: 0 0 0 0.275em !default;
 $taginput-item-padding: 0 0.75em 0 0.75em !default;
 $taginput-margin-icon-to-text: 0.1875em !default;
@@ -33,55 +33,38 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     position: relative;
     vertical-align: top;
     flex-wrap: wrap;
-
-    @include avariable("max-width", "taginput-max-width", $taginput-max-width);
-    @include avariable("width", "taginput-width", $taginput-width);
-    @include avariable("padding", "taginput-padding", $taginput-padding);
-    @include avariable(
-      "background-color",
-      "taginput-background-color",
+    max-width: var(--#{$prefix}taginput-max-width, $taginput-max-width);
+    width: var(--#{$prefix}taginput-width, $taginput-width);
+    padding: var(--#{$prefix}taginput-padding, $taginput-padding);
+    color: var(--#{$prefix}taginput-color, $taginput-color);
+    font-size: var(--#{$prefix}base-font-size, $base-font-size);
+    line-height: var(--#{$prefix}taginput-line-height, $taginput-line-height);
+    background-color: var(
+      --#{$prefix}taginput-background-color,
       $taginput-background-color
     );
-    @include avariable(
-      "border-color",
-      "taginput-border-color",
+    border-color: var(
+      --#{$prefix}taginput-border-color,
       $taginput-border-color
     );
-    @include avariable(
-      "border-style",
-      "taginput-border-style",
+    border-style: var(
+      --#{$prefix}taginput-border-style,
       $taginput-border-style
     );
-    @include avariable(
-      "border-width",
-      "taginput-border-width",
+    border-width: var(
+      --#{$prefix}taginput-border-width,
       $taginput-border-width
     );
-    @include avariable(
-      "border-radius",
-      "taginput-border-radius",
+    border-radius: var(
+      --#{$prefix}taginput-border-radius,
       $taginput-border-radius
     );
-    @include avariable("color", "taginput-color", $taginput-color);
-    @include avariable("font-size", "base-font-size", $base-font-size);
-    @include avariable(
-      "line-height",
-      "taginput-line-height",
-      $taginput-line-height
-    );
-    @include avariable(
-      "box-shadow",
-      "taginput-box-shadow",
-      $taginput-box-shadow
-    );
+    box-shadow: var(--#{$prefix}taginput-box-shadow, $taginput-box-shadow);
 
+    // size variants
     @each $name, $value in $sizes {
       &--#{$name} {
-        @include avariable(
-          "font-size",
-          ("taginput-font-size-" + #{$name}),
-          $value
-        );
+        font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
       }
     }
   }
@@ -100,36 +83,27 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     justify-content: center;
     align-items: center;
     position: relative;
-
-    @include side-flex-gap($taginput-margin-icon-to-text);
-    @include avariable(
-      "background-color",
-      "taginput-item-background-color",
+    margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
+    padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
+    color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
+    background-color: var(
+      --#{$prefix}taginput-item-background-color,
       $taginput-item-background-color
     );
-    @include avariable("color", "taginput-item-color", $taginput-item-color);
-    @include avariable(
-      "border-radius",
-      "taginput-item-border-radius",
+    border-radius: var(
+      --#{$prefix}taginput-item-border-radius,
       $taginput-item-border-radius
     );
-    @include avariable("margin", "taginput-item-margin", $taginput-item-margin);
-    @include avariable(
-      "padding",
-      "taginput-item-padding",
-      $taginput-item-padding
-    );
 
+    @include side-flex-gap($taginput-margin-icon-to-text);
+
+    // color variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
       &--#{$name} {
-        @include avariable("background-color", ("variant-" + #{$name}), $color);
-        @include avariable(
-          "color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
+        background-color: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
       }
     }
   }
@@ -137,17 +111,11 @@ $taginput-margin-icon-to-text: 0.1875em !default;
   &__counter {
     display: block;
     float: right;
-
-    @include avariable(
-      "font-size",
-      "taginput-counter-font-size",
+    font-size: var(
+      --#{$prefix}taginput-counter-font-size,
       $taginput-counter-font-size
     );
-    @include avariable(
-      "margin",
-      "taginput-counter-margin",
-      $taginput-counter-margin
-    );
+    margin: var(--#{$prefix}taginput-counter-margin, $taginput-counter-margin);
   }
 
   &--expanded {
diff --git a/src/assets/scss/components/_timepicker.scss b/src/assets/scss/components/_timepicker.scss
index eaf877b..3945cff 100644
--- a/src/assets/scss/components/_timepicker.scss
+++ b/src/assets/scss/components/_timepicker.scss
@@ -1,32 +1,26 @@
 /* @docs */
-$timepicker-font-size: $base-font-size !default;
-$timepicker-box-line-height: $base-line-height !default;
+$timepicker-font-size: var(--#{$prefix}base-font-size) !default;
+$timepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
 $timepicker-box-padding: 0.375rem 1rem !default;
 $timepicker-footer-padding: 0 0.5rem !default;
 $timepicker-footer-margin: 0.875rem 0 0 0 !default;
-$timepicker-select-line-height: $base-line-height !default;
+$timepicker-select-line-height: var(--#{$prefix}base-line-height) !default;
 $timepicker-select-padding: $control-padding-vertical
   $control-padding-horizontal !default;
 $timepicker-select-color: #363636 !default;
 $timepicker-select-font-weight: 600 !default;
-$timepicker-select-placeholder-opacity: $base-disabled-opacity !default;
+$timepicker-select-placeholder-opacity: var(
+  --#{$prefix}base-disabled-opacity
+) !default;
 $timepicker-separator-font-weight: 600 !default;
 /* @docs */
 
 .o-tpck {
-  @include avariable(
-    "font-size",
-    "timepicker-font-size",
-    $timepicker-font-size
-  );
+  font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
 
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable(
-        "font-size",
-        ("timepicker-font-size-" + #{$name}),
-        $value
-      );
+      font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
     }
   }
 
@@ -38,17 +32,11 @@ $timepicker-separator-font-weight: 600 !default;
     display: flex;
     justify-content: center;
     align-items: center;
-
-    @include avariable(
-      "line-height",
-      "timepicker-box-line-height",
+    line-height: var(
+      --#{$prefix}timepicker-box-line-height,
       $timepicker-box-line-height
     );
-    @include avariable(
-      "padding",
-      "timepicker-box-padding",
-      $timepicker-box-padding
-    );
+    padding: var(--#{$prefix}timepicker-box-padding, $timepicker-box-padding);
   }
 
   &__select {
@@ -62,54 +50,42 @@ $timepicker-separator-font-weight: 600 !default;
     align-items: center;
     border: 0;
     font-size: inherit;
-
-    @include avariable(
-      "font-weight",
-      "timepicker-select-font-weight",
+    font-weight: var(
+      --#{$prefix}timepicker-select-font-weight,
       $timepicker-select-font-weight
     );
-    @include avariable(
-      "line-height",
-      "timepicker-select-line-height",
+    line-height: var(
+      --#{$prefix}timepicker-select-line-height,
       $timepicker-select-line-height
     );
-    @include avariable(
-      "padding",
-      "timepicker-select-padding",
+    padding: var(
+      --#{$prefix}timepicker-select-padding,
       $timepicker-select-padding
     );
-    @include avariable(
-      "color",
-      "timepicker-select-color",
-      $timepicker-select-color
-    );
+    color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
   }
 
   &__select-placeholder {
-    @include avariable(
-      "opacity",
-      "timepicker-select-placeholder-opacity",
+    opacity: var(
+      --#{$prefix}timepicker-select-placeholder-opacity,
       $timepicker-select-placeholder-opacity
     );
   }
 
   &__separator {
-    @include avariable(
-      "font-weight",
-      "timepicker-separator-font-weight",
+    font-weight: var(
+      --#{$prefix}timepicker-separator-font-weight,
       $timepicker-separator-font-weight
     );
   }
 
   &__footer {
-    @include avariable(
-      "padding",
-      "timepicker-header-padding",
+    padding: var(
+      --#{$prefix}timepicker-header-padding,
       $timepicker-footer-padding
     );
-    @include avariable(
-      "margin",
-      "timepicker-header-margin",
+    margin: var(
+      --#{$prefix}timepicker-header-margin,
       $timepicker-footer-margin
     );
   }
diff --git a/src/assets/scss/components/_tooltip.scss b/src/assets/scss/components/_tooltip.scss
index f786196..3b9a0c8 100644
--- a/src/assets/scss/components/_tooltip.scss
+++ b/src/assets/scss/components/_tooltip.scss
@@ -3,8 +3,8 @@
 /* @docs */
 $tooltip-arrow-margin: 2px !default;
 $tooltip-arrow-size: 5px !default;
-$tooltip-background-color: $primary !default;
-$tooltip-color: $primary-invert !default;
+$tooltip-background-color: var(--#{$prefix}primary) !default;
+$tooltip-color: var(--#{$prefix}primary-invert) !default;
 $tooltip-content-box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
 $tooltip-content-font-size: 0.85rem !default;
 $tooltip-content-max-width: 300px !default;
@@ -25,23 +25,16 @@ $tooltip-content-zindex: 38 !default;
     content: "";
     pointer-events: none;
 
-    @include avariable(
-      "z-index",
-      "tooltip-content-zindex",
-      $tooltip-content-zindex
-    );
-    @include avariable(
-      "color",
-      "tooltip-background-color",
-      $tooltip-background-color
-    );
+    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
+    color: var(--#{$prefix}tooltip-background-color, $tooltip-background-color);
 
     // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
 
@@ -60,19 +53,16 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -91,19 +81,16 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -121,19 +108,16 @@ $tooltip-content-zindex: 38 !default;
       border-bottom-style: solid;
       border-bottom-color: transparent;
 
-      @include avariable(
-        "border-left-width",
-        "tooltip-arrow-size",
+      border-left-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -151,19 +135,16 @@ $tooltip-content-zindex: 38 !default;
       border-bottom-style: solid;
       border-bottom-color: transparent;
 
-      @include avariable(
-        "border-right-width",
-        "tooltip-arrow-size",
+      border-right-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
     }
@@ -182,15 +163,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-right-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-right-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-left-width: 0;
     }
@@ -209,15 +187,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-top-width",
-        "tooltip-arrow-size",
+      border-top-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-left-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-left-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-right-width: 0;
     }
@@ -236,15 +211,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-left-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-left-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-right-width: 0;
     }
@@ -263,15 +235,12 @@ $tooltip-content-zindex: 38 !default;
       border-left-style: solid;
       border-left-color: transparent;
 
-      @include avariable(
-        "border-bottom-width",
-        "tooltip-arrow-size",
+      border-bottom-width: var(
+        --#{$prefix}tooltip-arrow-size,
         $tooltip-arrow-size
       );
-      @include evariable(
-        "border-right-width",
-        "calc($size *2)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      border-right-width: calc(
+        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
       );
       border-left-width: 0;
     }
@@ -281,59 +250,42 @@ $tooltip-content-zindex: 38 !default;
     position: absolute;
     white-space: nowrap;
 
-    @include avariable(
-      "max-width",
-      "tooltip-content-max-width",
+    max-width: var(
+      --#{$prefix}tooltip-content-max-width,
       $tooltip-content-max-width
     );
-    @include avariable(
-      "padding",
-      "tooltip-content-padding",
-      $tooltip-content-padding
-    );
-    @include avariable(
-      "border-radius",
-      "tooltip-content-radius-large",
+    padding: var(--#{$prefix}tooltip-content-padding, $tooltip-content-padding);
+    border-radius: var(
+      --#{$prefix}tooltip-content-radius-large,
       $tooltip-content-radius-large
     );
-    @include avariable(
-      "font-size",
-      "tooltip-content-font-size",
+    font-size: var(
+      --#{$prefix}tooltip-content-font-size,
       $tooltip-content-font-size
     );
-    @include avariable(
-      "font-weight",
-      "tooltip-content-weight-normal",
+    font-weight: var(
+      --#{$prefix}tooltip-content-weight-normal,
       $tooltip-content-weight-normal
     );
-    @include avariable(
-      "box-shadow",
-      "tooltip-content-box-shadow",
+    box-shadow: var(
+      --#{$prefix}tooltip-content-box-shadow,
       $tooltip-content-box-shadow
     );
-    @include avariable(
-      "z-index",
-      "tooltip-content-zindex",
-      $tooltip-content-zindex
-    );
-    @include avariable(
-      "background-color",
-      "tooltip-background-color",
+    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
+    background-color: var(
+      --#{$prefix}tooltip-background-color,
       $tooltip-background-color
     );
-    @include avariable("color", "tooltip-color", $tooltip-color);
+    color: var(--#{$prefix}tooltip-color, $tooltip-color);
 
     // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
-        @include avariable("background", ("variant-" + #{$name}), $color);
-        @include avariable(
-          "color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
+        background: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
       }
     }
 
@@ -342,28 +294,22 @@ $tooltip-content-zindex: 38 !default;
       top: auto;
       right: auto;
 
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       left: 50%;
       transform: translateX(-50%);
     }
 
     &--bottom {
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       right: auto;
       bottom: auto;
@@ -375,30 +321,22 @@ $tooltip-content-zindex: 38 !default;
       top: 50%;
       right: auto;
       bottom: auto;
-
-      @include evariable(
-        "left",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      left: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateY(-50%);
     }
 
     &--left {
       top: 50%;
-
-      @include evariable(
-        "right",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      right: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       bottom: auto;
       left: auto;
@@ -408,15 +346,11 @@ $tooltip-content-zindex: 38 !default;
     &--top-right {
       left: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(50%);
     }
@@ -424,15 +358,11 @@ $tooltip-content-zindex: 38 !default;
     &--top-left {
       right: auto;
       top: auto;
-
-      @include evariable(
-        "bottom",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      bottom: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(-50%);
     }
@@ -440,15 +370,11 @@ $tooltip-content-zindex: 38 !default;
     &--bottom-right {
       left: auto;
       bottom: auto;
-
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(50%);
     }
@@ -456,15 +382,11 @@ $tooltip-content-zindex: 38 !default;
     &--bottom-left {
       left: auto;
       bottom: auto;
-
-      @include evariable(
-        "top",
-        "calc(($size + $margin) + 100%)",
-        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-        eparam(
-          "$margin",
-          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-        )
+      top: calc(
+        (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
+          ) + 100%
       );
       transform: translateX(-50%);
     }
@@ -477,10 +399,8 @@ $tooltip-content-zindex: 38 !default;
     &--multiline {
       text-align: center;
       white-space: normal;
-
-      @include avariable(
-        "width",
-        "tooltip-content-multiline-width",
+      width: var(
+        --#{$prefix}tooltip-content-multiline-width,
         $tooltip-content-multiline-width
       );
     }
@@ -492,52 +412,36 @@ $tooltip-content-zindex: 38 !default;
       &--top,
       &--top-left,
       &--top-right {
-        @include evariable(
-          "margin-top",
-          "calc(-1 * ($size + $margin))",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-          )
+        margin-top: calc(
+          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
         );
       }
 
       &--bottom,
       &--bottom-left,
       &--bottom-right {
-        @include evariable(
-          "margin-top",
-          "calc($size + $margin)",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        margin-top: calc(
+          (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
           )
         );
       }
 
       &--right {
-        @include evariable(
-          "margin-left",
-          "calc($size + $margin)",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        margin-left: calc(
+          (
+            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
           )
         );
       }
 
       &--left {
-        @include evariable(
-          "margin-left",
-          "calc(-1 * ($size + $margin))",
-          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
-          eparam(
-            "$margin",
-            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
-          )
+        margin-left: calc(
+          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
+                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
         );
       }
     }
diff --git a/src/assets/scss/components/_upload.scss b/src/assets/scss/components/_upload.scss
index d4824f3..a1fc30f 100644
--- a/src/assets/scss/components/_upload.scss
+++ b/src/assets/scss/components/_upload.scss
@@ -1,10 +1,12 @@
 @use "sass:list";
 
 /* @docs */
-$upload-draggable-border: 1px dashed $grey-light !default;
-$upload-draggable-border-radius: $base-border-radius !default;
-$upload-draggable-disabled-opacity: $base-disabled-opacity !default;
-$upload-draggable-hover-border-color: $grey !default;
+$upload-draggable-border: 1px dashed var(--#{$prefix}grey-light) !default;
+$upload-draggable-border-radius: var(--#{$prefix}base-border-radius) !default;
+$upload-draggable-disabled-opacity: var(
+  --#{$prefix}base-disabled-opacity
+) !default;
+$upload-draggable-hover-border-color: var(--#{$prefix}grey) !default;
 $upload-draggable-padding: 0.25em !default;
 /* @docs */
 
@@ -13,9 +15,8 @@ $upload-draggable-padding: 0.25em !default;
   display: inline-flex;
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "upload-draggable-disabled-opacity",
+    opacity: var(
+      --#{$prefix}upload-draggable-disabled-opacity,
       $upload-draggable-disabled-opacity
     );
     cursor: not-allowed;
@@ -29,33 +30,27 @@ $upload-draggable-padding: 0.25em !default;
     cursor: pointer;
     width: 100%;
 
-    @include avariable(
-      "padding",
-      "upload-draggable-padding",
+    padding: var(
+      --#{$prefix}upload-draggable-padding,
       $upload-draggable-padding
     );
-    @include avariable(
-      "border",
-      "upload-draggable-border",
-      $upload-draggable-border
-    );
-    @include avariable(
-      "border-radius",
-      "upload-draggable-border-radius",
+    border: var(--#{$prefix}upload-draggable-border, $upload-draggable-border);
+    border-radius: var(
+      --#{$prefix}upload-draggable-border-radius,
       $upload-draggable-border-radius
     );
 
     &--hovered {
-      @include avariable(
-        "border-color",
-        "upload-draggable-hover-border-color",
+      border-color: var(
+        --#{$prefix}upload-draggable-hover-border-color,
         $upload-draggable-hover-border-color
       );
 
       @each $name, $pair in $colors {
         $color: list.nth($pair, 1);
+
         &-#{$name} {
-          @include avariable("border-color", ("variant-" + #{$name}), $color);
+          border-color: var(--#{$prefix}variant-#{$name}, $color);
         }
       }
     }
diff --git a/src/assets/scss/utils/_base.scss b/src/assets/scss/utils/_base.scss
index d783abc..34f2f84 100644
--- a/src/assets/scss/utils/_base.scss
+++ b/src/assets/scss/utils/_base.scss
@@ -12,10 +12,10 @@ body {
   margin: 0;
   padding: 0;
 
-  @include avariable("font-family", "base-font-family", $base-font-family);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("font-weight", "base-font-weight", $base-font-weight);
-  @include avariable("line-height", "base-line-height", $base-line-height);
+  font-family: var(--#{$prefix}base-font-family, $base-font-family);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  font-weight: var(--#{$prefix}base-font-weight, $base-font-weight);
+  line-height: var(--#{$prefix}base-line-height, $base-line-height);
 }
 
 .o-noscroll {
diff --git a/src/assets/scss/utils/_helpers.scss b/src/assets/scss/utils/_helpers.scss
index 5b98b14..4ae8529 100644
--- a/src/assets/scss/utils/_helpers.scss
+++ b/src/assets/scss/utils/_helpers.scss
@@ -84,81 +84,6 @@
   @return list.length($whitelist) == 0;
 }
 
-/// Returns a variable.
-///
-/// @param {string} $name
-///   Variable name
-/// @param {string} $value
-///   Variable value
-/// @param {string} $forceval
-///   By default is `false`, if `true` it allows to bypass whitelist and set the value
-/// @return {string} the variable or null if not in whitelist when $css-vars == false.
-@function variable($name, $value, $forceval: false) {
-  @if is-empty-whitelist() or is-in-whitelist($name) or $forceval {
-    @if $css-vars {
-      @return var(--#{$prefix}#{$name}, #{$value});
-    } @else {
-      @return #{$value};
-    }
-  }
-
-  @return null;
-}
-
-/// Returns a pair of `(key,value)` to pass to `evariable` function.
-///
-/// @param {string} $key
-///   Key of the parameter
-/// @param {string} $value
-///   Value of the parameter
-/// @return {list} list of two elements representing an `eparam` `(key, value)`.
-@function eparam($key, $value) {
-  @return $key, $value;
-}
-
-/// Assigns a specific expression to an attribute
-///
-/// @param {string} $attribute
-///   The attribute we want to include
-/// @param {string} $expression
-///   The body of the function we want to write (e.g. `calc($width/$height)`)
-/// @param {...} $parameters
-///   List of `eparam` to apply to the function
-@mixin evariable($attribute, $expression, $parameters...) {
-  $is_valid: true;
-
-  @each $parameter in $parameters {
-    @if not list.nth($parameter, 2) {
-      $is_valid: false;
-    }
-    @if str-slice(list.nth($parameter, 1), 0, 1) != "$" {
-      @error "Parameter #{list.nth($parameter, 1)} should start with $.";
-    }
-    $expression: str-replace(
-      $expression,
-      list.nth($parameter, 1),
-      list.nth($parameter, 2)
-    );
-  }
-  @if $is_valid {
-    #{$attribute}: #{$expression};
-  }
-}
-
-/// Assigns a specific variable to an attribute
-///
-/// @param {string} $attribute
-///   The attribute we want to include
-/// @param {string} $name
-///   Variable name
-/// @param {string} $value
-///   Variable value
-@mixin avariable($attribute, $name, $value) {
-  $variable: variable($name, $value);
-  @if $variable {
-    #{$attribute}: $variable;
-  }
-}
 @mixin unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
diff --git a/src/assets/scss/utils/_root.scss b/src/assets/scss/utils/_root.scss
index a77e5e2..7b79174 100644
--- a/src/assets/scss/utils/_root.scss
+++ b/src/assets/scss/utils/_root.scss
@@ -1,32 +1,43 @@
 @use "sass:list";
 
 :root {
-  @if $css-vars {
-    // generate color variables
-    @each $name, $color in $colors {
-      @if type-of($color) == list {
-        --#{$prefix}#{$name}: #{list.nth($color, 1)};
-        --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
-      } @else {
-        --#{$prefix}#{$name}: $color;
-      }
+  // define color variables
+  @each $name, $color in $colors {
+    @if type-of($color) == list {
+      --#{$prefix}#{$name}: #{list.nth($color, 1)};
+      --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
+    } @else {
+      --#{$prefix}#{$name}: $color;
     }
+  }
 
-    --#{$prefix}white: #{$white};
-    --#{$prefix}black: #{$black};
-    --#{$prefix}grey: #{$grey};
-    --#{$prefix}grey-light: #{$grey-light};
-    --#{$prefix}grey-lighter: #{$grey-lighter};
-    --#{$prefix}grey-dark: #{$grey-dark};
-
-    // generate size variables
-    @each $name, $size in $sizes {
-      --#{$prefix}size-#{$name}: #{$size};
-    }
+  // define additional colors
+  --#{$prefix}white: #{$white};
+  --#{$prefix}black: #{$black};
+  --#{$prefix}grey: #{$grey};
+  --#{$prefix}grey-light: #{$grey-light};
+  --#{$prefix}grey-lighter: #{$grey-lighter};
+  --#{$prefix}grey-dark: #{$grey-dark};
 
-    --#{$prefix}base-font-family: #{$base-font-family};
-    --#{$prefix}base-font-size: #{$base-font-size};
-    --#{$prefix}base-font-weight: #{$base-font-weight};
-    --#{$prefix}base-line-height: #{$base-line-height};
+  // define size variables
+  @each $name, $size in $sizes {
+    --#{$prefix}size-#{$name}: #{$size};
   }
+
+  //TODO: rename remove base prefix
+
+  // define base variables
+  --#{$prefix}base-font-family: #{$base-font-family};
+  --#{$prefix}base-font-size: #{$base-font-size};
+  --#{$prefix}base-font-weight: #{$base-font-weight};
+  --#{$prefix}base-line-height: #{$base-line-height};
+
+  --#{$prefix}base-border-radius: #{$base-border-radius};
+  //TODO: rename base-rounded-border-radius => base-border-radius-rounded
+  --#{$prefix}base-rounded-border-radius: #{$base-rounded-border-radius};
+  --#{$prefix}base-line-height: #{$base-line-height};
+  --#{$prefix}base-disabled-opacity: #{$base-disabled-opacity};
+
+  //TODO add (fe. checkbox)
+  // var(--#{$prefix}transition-duration, $speed-slow);
 }
diff --git a/src/assets/scss/utils/_variables.scss b/src/assets/scss/utils/_variables.scss
index 843bcb0..0caaf67 100644
--- a/src/assets/scss/utils/_variables.scss
+++ b/src/assets/scss/utils/_variables.scss
@@ -4,7 +4,6 @@
 
 // Settings
 $whitelist: () !default;
-$css-vars: true !default;
 $prefix: "oruga-" !default;
 
 // Animations
@@ -42,6 +41,7 @@ $base-rounded-border-radius: 9999px !default;
 $base-line-height: 1.5 !default;
 $base-disabled-opacity: 0.5 !default;
 
+// todo: check if maybe rename better
 $control-border-width: 1px !default;
 $control-height: 2.25em !default;
 $control-padding-vertical: calc(0.375em - #{$control-border-width});