feat: update variables (#22)

src/assets/scss/components/_button.scss

@@ -12,8 +12,10 @@ $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: var(
+  --#{$prefix}#{base-border-radius-rounded}
+) !default;
+$button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
 $button-outlined-background-color: transparent !default;
 /* @docs */
 

src/assets/scss/components/_carousel.scss

@@ -5,10 +5,11 @@ $carousel-arrow-icon-spaced: 1.5rem !default;
 $carousel-arrow-top: 50% !default;
 $carousel-arrow-size: 1.5rem !default;
 $carousel-arrow-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $carousel-arrow-border: 1px solid $carousel-arrow-background !default;
-$carousel-arrow-transition: $speed-slow $easing !default;
+$carousel-arrow-transition: var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) !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;
@@ -17,14 +18,16 @@ $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-transition: var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) !default;
 $carousel-indicator-size: 10px !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;
+$carousel-items-transition: all var(--#{$prefix}transition-duration)
+  var(--#{$prefix}transition-timing) 0s !default;
 $carousel-item-border: 2px solid transparent !default;
 $carousel-overlay-background: hsla(0, 0%, 4%, 0.86) !default;
 $carousel-overlay-zindex: 40 !default;

src/assets/scss/components/_checkbox.scss

@@ -81,9 +81,8 @@ $checkbox-line-height: 1.5 !default;
       $checkbox-border-color
     );
     border-style: solid;
-    transition-property: background;
-    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
 
     &--checked {
       background-color: var(

src/assets/scss/components/_icon.scss

@@ -21,8 +21,8 @@ $icon-spin-duration: 2s !default;
   display: inline-flex;
   justify-content: center;
   transition:
-    transform $speed-slow $easing,
-    opacity $speed $easing;
+    transform $animation-speed $animation-timing,
+    opacity $animation-speed-fast $animation-timing;
 
   @each $name, $value in $sizes {
     &--#{$name} {

src/assets/scss/components/_input.scss

@@ -7,7 +7,7 @@ $input-border-style: solid !default;
 $input-border-width: 1px !default;
 $input-border-radius: var(--#{$prefix}base-border-radius) !default;
 $input-rounded-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
 $input-color: #363636 !default;

src/assets/scss/components/_modal.scss

@@ -3,7 +3,7 @@ $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: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $modal-close-right: 20px !default;
 $modal-close-top: 20px !default;

src/assets/scss/components/_notification.scss

@@ -8,7 +8,7 @@ $notification-margin-bottom: 1.5rem !default;
 $notification-animantion: append-animate 0.3s linear !default;
 $notification-color: var(--#{$prefix}white) !default;
 $notification-close-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $notification-close-right: 0.5rem !default;
 $notification-close-top: 0.5rem !default;

src/assets/scss/components/_pagination.scss

@@ -16,7 +16,7 @@ $pagination-link-min-width: 2.25em !default;
 $pagination-link-padding: 0.5em 0.5em !default;
 $pagination-margin: -0.25rem !default;
 $pagination-rounded-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 /* @docs */
 

src/assets/scss/components/_radio.scss

@@ -52,9 +52,8 @@ $radio-line-height: 1.25 !default;
     border-radius: 50%;
     cursor: pointer;
     background-repeat: no-repeat;
-    transition-property: background;
-    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
     background-image: url(svg_radio_empty($radio-active-background-color));
 
     &--checked {

src/assets/scss/components/_select.scss

@@ -7,7 +7,7 @@ $select-border-width: 1px !default;
 $select-border-style: solid !default;
 $select-border-radius: var(--#{$prefix}base-border-radius) !default;
 $select-rounded-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $select-box-shadow: none !default;
 $select-color: #363636 !default;

src/assets/scss/components/_sidebar.scss

@@ -42,17 +42,15 @@ $sidebar-zindex: 100 !default;
     // position
     &--right,
     &--left {
-      transition: width;
-      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+      transition: width var(--#{$prefix}transition-duration)
+        var(--#{$prefix}transition-timing);
       width: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
     &--top,
     &--bottom {
-      transition: height;
-      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+      transition: height var(--#{$prefix}transition-duration)
+        var(--#{$prefix}transition-timing);
       height: var(--#{$prefix}sidebar-width, $sidebar-width);
     }
 
@@ -92,15 +90,8 @@ $sidebar-zindex: 100 !default;
 
       &-expand {
         &:hover {
-          transition: width;
-          transition-duration: var(
-            --#{$prefix}transition-duration,
-            $speed-slow
-          );
-          transition-timing-function: var(
-            --#{$prefix}transition-timing,
-            $easing
-          );
+          transition: width var(--#{$prefix}transition-duration)
+            var(--#{$prefix}transition-timing);
           width: var(--#{$prefix}sidebar-width, $sidebar-width);
         }
       }

src/assets/scss/components/_slider.scss

@@ -6,7 +6,7 @@ $slider-margin: 1em 0 !default;
 $slider-mark-size: 0.75rem !default;
 $slider-font-size: var(--#{$prefix}base-font-size) !default;
 $slider-rounded-borded-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $slider-thumb-background: var(--#{$prefix}white) !default;
 $slider-thumb-border: 1px solid var(--#{$prefix}grey-light) !default;

src/assets/scss/components/_steps.scss

@@ -8,7 +8,7 @@ $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: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $steps-color: var(--#{$prefix}grey-lighter) !default;
 $steps-previous-color: var(--#{$prefix}primary) !default;
@@ -227,9 +227,8 @@ $steps-details-title-font-weight: 600 !default;
 
   &--animated {
     .o-steps__divider {
-      transition-property: background;
-      transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-      transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+      transition: background var(--#{$prefix}transition-duration)
+        var(--#{$prefix}transition-timing);
     }
   }
 

src/assets/scss/components/_switch.scss

@@ -13,7 +13,7 @@ $switch-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
 $switch-margin-label: 0.5em !default;
 $switch-padding: 0.2em !default;
 $switch-rounded-border-radius: var(
-  --#{$prefix}base-rounded-border-radius
+  --#{$prefix}base-border-radius-rounded
 ) !default;
 $switch-width: 2.75 * 1em !default;
 /* @docs */
@@ -84,9 +84,8 @@ $switch-width: 2.75 * 1em !default;
       $switch-action-background
     );
     box-shadow: var(--#{$prefix}switch-box-shadow, $switch-box-shadow);
-    transition-property: transform;
-    transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
-    transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+    transition: transform var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
     will-change: transform;
     transform-origin: left;
   }
@@ -104,9 +103,8 @@ $switch-width: 2.75 * 1em !default;
     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);
+    transition: background var(--#{$prefix}transition-duration)
+      var(--#{$prefix}transition-timing);
 
     &--checked {
       background: var(

src/assets/scss/components/_table.scss

@@ -59,7 +59,7 @@ $table-th-padding: 0.5em 0.75em !default;
   }
 
   &__wrapper {
-    transition: opacity $speed $easing;
+    transition: opacity $animation-speed-fast $animation-timing;
     position: relative;
 
     &--sticky-header {

src/assets/scss/utils/_animations.scss

@@ -111,7 +111,7 @@
 // Fade
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 }
 
 .fade-enter,
@@ -123,10 +123,10 @@
 // Zoom In
 .zoom-in-enter-active,
 .zoom-in-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 
   .animation-content {
-    transition: transform $speed-slow $easing;
+    transition: transform $animation-speed $animation-timing;
   }
 }
 
@@ -143,10 +143,10 @@
 // Zoom Out
 .zoom-out-enter-active,
 .zoom-out-leave-active {
-  transition: opacity $speed-slow $easing;
+  transition: opacity $animation-speed $animation-timing;
 
   .animation-content {
-    transition: transform $speed-slow $easing;
+    transition: transform $animation-speed $animation-timing;
   }
 }
 
@@ -165,7 +165,8 @@
 .slide-next-leave-active,
 .slide-prev-enter-active,
 .slide-prev-leave-active {
-  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition: transform $animation-speed-fast
+    cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-prev-leave-to,
@@ -188,7 +189,8 @@
 .slide-down-leave-active,
 .slide-up-enter-active,
 .slide-up-leave-active {
-  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  transition: transform $animation-speed-fast
+    cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-down-enter,
@@ -208,11 +210,11 @@
 }
 
 .slide-enter-active {
-  transition: $speed-slow $easing;
+  transition: $animation-speed $animation-timing;
 }
 
 .slide-leave-active {
-  transition: $speed-slow $easing;
+  transition: $animation-speed $animation-timing;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 

src/assets/scss/utils/_root.scss

@@ -28,20 +28,17 @@
     --#{$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-border-radius-rounded: #{$base-border-radius-rounded};
   --#{$prefix}base-line-height: #{$base-line-height};
   --#{$prefix}base-disabled-opacity: #{$base-disabled-opacity};
 
-  //TODO add (fe. checkbox)
-  // var(--#{$prefix}transition-duration, $speed-slow);
+  --#{$prefix}transition-duration: #{$animation-speed};
+  --#{$prefix}transition-timing: #{$animation-timing};
 }

src/assets/scss/utils/_variables.scss

@@ -6,10 +6,9 @@
 $prefix: "oruga-" !default;
 
 // Animations
-$speed: 300ms !default;
-$speed-slow: 150ms !default;
-$speed-slower: 250ms !default;
-$easing: ease-out !default;
+$animation-speed: 150ms !default;
+$animation-speed-fast: 300ms !default;
+$animation-timing: ease-out !default;
 
 // Font
 $base-font-family: 
@@ -36,11 +35,10 @@ $base-line-height: 1.5 !default;
 
 // Base Style
 $base-border-radius: 4px !default;
-$base-rounded-border-radius: 9999px !default;
+$base-border-radius-rounded: 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});