wave-ui 3.27.2 → 4.0.0

package/src/wave-ui/components/w-tabs/index.vue

@@ -5,6 +5,7 @@
       v-for="(item, i) in tabs"
       :key="i"
       :class="barItemClasses(item)"
+      @pointerdown="onTabsBarPointerDown($event, item)"
       @click="!item._disabled && item._uid !== activeTabUid && openTab(item._uid)"
       @focus="$emit('focus', getOriginalItem(item))"
       :tabindex="!item._disabled && 0"
@@ -73,11 +74,14 @@
 <script>
 import { useId } from 'vue'
 import { objectifyClasses } from '../../utils/index'
+import RippleMixin from '../../mixins/ripple'
 import TabContent from './tab-content.vue'
 
 export default {
   name: 'w-tabs',
 
+  mixins: [RippleMixin],
+
   setup () {
     return { tabsStableId: useId() }
   },
@@ -235,6 +239,7 @@ export default {
       const isActive = item._index === this.activeTabIndex
 
       return {
+        'w-ripple': this.rippleActive,
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.color]: this.color && !item._disabled && !(this.activeClass && isActive),
         'w-tabs__bar-item--active': isActive,
@@ -244,6 +249,11 @@ export default {
       }
     },
 
+    onTabsBarPointerDown (e, item) {
+      if (item._disabled) return
+      this.onRipple(e)
+    },
+
     // Switching tabs.
     openTab (uid) {
       this.prevTabIndex = this.activeTabIndex // To resolve the transition direction.
@@ -351,12 +361,10 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-tabs {
   z-index: 1;
-  border-radius: $border-radius;
-  border: $border;
+  border-radius: var(--w-border-radius);
+  border: var(--w-border);
   overflow: hidden;
 
   @include themeable;
@@ -372,13 +380,13 @@ export default {
 
     &--center {justify-content: center;}
     &--right {justify-content: flex-end;}
-    .w-tabs--pill-slider & {padding-left: $base-increment;}
+    .w-tabs--pill-slider & {padding-left: var(--w-base-increment);}
 
     .w-tabs--card &:after {
       content: '';
       display: flex;
       flex-grow: 1;
-      border-bottom: $border;
+      border-bottom: var(--w-border);
       align-self: flex-end;
     }
   }
@@ -389,18 +397,18 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    padding: (2 * $base-increment) (3 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
     justify-content: center;
-    font-size: math.round(1.2 * $base-font-size);
-    transition: $transition-duration ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
+    font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);
+    transition: var(--w-transition-duration) ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
     user-select: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     .w-tabs--fill-bar & {flex-grow: 1;flex-basis: 0;}
     .w-tabs--card & {
-      border: $border;
-      border-radius: $border-radius $border-radius 0 0;
+      border: var(--w-border);
+      border-radius: var(--w-border-radius) var(--w-border-radius) 0 0;
       margin-right: -1px;
     }
     .w-tabs--card &--active {border-bottom-color: transparent;}
@@ -415,13 +423,12 @@ export default {
       content: '';
       position: absolute;
       inset: 0;
-      background-color: currentColor;
-      opacity: 0;
-      transition: $fast-transition-duration;
+      background-color: transparent;
+      transition: background-color var(--w-transition-duration-fast);
     }
 
-    &--active:before, &:focus:before, &:hover:before {opacity: 0.05;}
-    &:active:before {opacity: 0.08;}
+    &--active:before, &:focus:before, &:hover:before {background-color: color-mix(in srgb, currentColor 5%, transparent);}
+    &:active:before {background-color: color-mix(in srgb, currentColor 8%, transparent);}
     &--disabled:before {display: none;}
   }
   &--pill-slider &__bar-item:before {display: none;}
@@ -445,7 +452,7 @@ export default {
     bottom: 0;
     height: 2px;
     background-color: currentColor;
-    transition: $transition-duration ease-in-out;
+    transition: var(--w-transition-duration) ease-in-out;
   }
   &--pill-slider &__slider {
     opacity: 0.1;
@@ -463,12 +470,12 @@ export default {
     flex-grow: 1;
 
     .w-tabs--card & {
-      border: $border;
+      border: var(--w-border);
       border-top: none;
-      border-radius: 0 0 $border-radius $border-radius;
+      border-radius: 0 0 var(--w-border-radius) var(--w-border-radius);
     }
   }
-  &__content {padding: 3 * $base-increment;}
+  &__content {padding: calc(var(--w-base-increment) * 3);}
 }
 
 .w-tabs-slide-left-leave-active,
@@ -480,8 +487,8 @@ export default {
   overflow: hidden;
 }
 
-.w-tabs-slide-left-enter-active {animation: w-tabs-slide-left-enter $transition-duration + 0.15s;}
-.w-tabs-slide-left-leave-active {animation: w-tabs-slide-left-leave $transition-duration + 0.15s;}
+.w-tabs-slide-left-enter-active {animation: w-tabs-slide-left-enter calc(var(--w-transition-duration) + 0.15s);}
+.w-tabs-slide-left-leave-active {animation: w-tabs-slide-left-leave calc(var(--w-transition-duration) + 0.15s);}
 @keyframes w-tabs-slide-left-enter {
   0% {transform: translateX(100%);}
   100% {transform: translateX(0);}
@@ -491,8 +498,8 @@ export default {
   100% {transform: translateX(-100%);}
 }
 
-.w-tabs-slide-right-enter-active {animation: w-tabs-slide-right-enter $transition-duration + 0.15s;}
-.w-tabs-slide-right-leave-active {animation: w-tabs-slide-right-leave $transition-duration + 0.15s;}
+.w-tabs-slide-right-enter-active {animation: w-tabs-slide-right-enter calc(var(--w-transition-duration) + 0.15s);}
+.w-tabs-slide-right-leave-active {animation: w-tabs-slide-right-leave calc(var(--w-transition-duration) + 0.15s);}
 @keyframes w-tabs-slide-right-enter {
   0% {transform: translateX(-100%);}
   100% {transform: translateX(0);}

package/src/wave-ui/components/w-tag.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 span.w-tag(
   @click="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
+  @pointerdown="onTagPointerDown"
   @keypress.enter="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
   :class="classes"
   :role="modelValue !== -1 && 'button'"
@@ -17,9 +18,13 @@ span.w-tag(
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
+
 export default {
   name: 'w-tag',
 
+  mixins: [RippleMixin],
+
   props: {
     modelValue: { type: [Boolean, Number], default: -1 },
     color: { type: String },
@@ -58,6 +63,7 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: true,
+        'w-ripple': this.rippleActive && this.modelValue !== -1,
         'w-tag--dark': this.dark,
         'w-tag--light': this.light,
         'w-tag--clickable': this.modelValue !== -1,
@@ -74,24 +80,30 @@ export default {
         height: (!isNaN(this.height) ? `${this.height}px` : this.height) || null
       }
     }
+  },
+
+  methods: {
+    onTagPointerDown (e) {
+      if (this.modelValue === -1) return
+      if (e.target.closest?.('.w-tag__closable')) return
+      this.onRipple(e)
+    }
   }
 }
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-tag {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  border-radius: $border-radius;
+  border-radius: var(--w-border-radius);
   border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent);
   background-color: color-mix(in srgb, var(--w-base-bg-color) 85%, transparent);
-  padding-left: 2 * $base-increment;
-  padding-right: 2 * $base-increment;
+  padding-left: calc(var(--w-base-increment) * 2);
+  padding-right: calc(var(--w-base-increment) * 2);
   cursor: default;
   user-select: none;
 
@@ -102,40 +114,40 @@ export default {
   &--no-border {border-color: transparent;}
   &--round {border-radius: 99em;}
   &--tile {border-radius: initial;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   &.size--xs {
-    $font-size: math.round(0.7 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 2px;
-    padding: math.round(0.25 * $base-increment) $base-increment;
+    --w-tag-font-size: round(nearest, calc(0.7 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 2px);
+    padding: calc(var(--w-base-increment) * 0.25) var(--w-base-increment);
   }
   &.size--sm {
-    $font-size: math.round(0.82 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 2px;
-    padding: math.round(0.25 * $base-increment) $base-increment;
+    --w-tag-font-size: round(nearest, calc(0.82 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 2px);
+    padding: calc(var(--w-base-increment) * 0.25) var(--w-base-increment);
   }
   &.size--md {
-    $font-size: math.round(0.85 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(0.25 * $base-increment);
-    padding-bottom: math.round(0.25 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(0.85 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: calc(var(--w-base-increment) * 0.25);
+    padding-bottom: calc(var(--w-base-increment) * 0.25);
   }
   &.size--lg {
-    $font-size: math.round(1.1 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(0.5 * $base-increment);
-    padding-bottom: math.round(0.5 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(1.1 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: calc(var(--w-base-increment) * 0.5);
+    padding-bottom: calc(var(--w-base-increment) * 0.5);
   }
   &.size--xl {
-    $font-size: math.round(1.3 * $base-font-size);
-    font-size: $font-size;
-    line-height: $font-size + 4px;
-    padding-top: math.round(1 * $base-increment);
-    padding-bottom: math.round(1 * $base-increment);
+    --w-tag-font-size: round(nearest, calc(1.3 * var(--w-base-font-size)), 1px);
+    font-size: var(--w-tag-font-size);
+    line-height: calc(var(--w-tag-font-size) + 4px);
+    padding-top: var(--w-base-increment);
+    padding-bottom: var(--w-base-increment);
   }
 
   &--clickable {
@@ -147,7 +159,7 @@ export default {
       margin-left: 3px;
       margin-right: -3px;
       padding: 1px;
-      transition: $transition-duration;
+      transition: var(--w-transition-duration);
     }
     &.size--lg .w-tag__closable,
     &.size--xl .w-tag__closable {
@@ -164,31 +176,30 @@ export default {
       content: '';
       position: absolute;
       inset: 0;
-      opacity: 0;
       background-color: transparent;
       // As this overlay is a smaller rectangle, the radius must be smaller to cover perfectly.
-      border-radius: $border-radius - 1;
+      border-radius: calc(var(--w-border-radius) - 1px);
       transition: 0.2s;
     }
     &.w-tag--round:before {border-radius: inherit;}
 
     // Hover state.
-    &:hover:before {background-color: currentColor;opacity: 0.06;}
+    &:hover:before {background-color: color-mix(in srgb, currentColor 6%, transparent);}
     &--dark:hover:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);opacity: 1;}
     &--outline:hover:before,
-    &--text:hover:before {background-color: currentColor;opacity: 0.12;}
+    &--text:hover:before {background-color: color-mix(in srgb, currentColor 12%, transparent);}
 
     // Focus state.
-    &:focus:before {background-color: currentColor;opacity: 0.2;}
+    &:focus:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
     &--dark:focus:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);}
     &--outline:focus:before,
-    &--text:focus:before {background-color: currentColor;opacity: 0.12;}
+    &--text:focus:before {background-color: color-mix(in srgb, currentColor 12%, transparent);}
 
     // Active state.
-    &:active:before {background-color: currentColor;opacity: 0.2;}
+    &:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
     &--dark:active:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 20%, transparent);}
     &--outline:active:before,
-    &--text:active:before {background-color: currentColor;opacity: 0.2;}
+    &--text:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
   }
 }
 </style>

package/src/wave-ui/components/w-textarea.vue

@@ -237,7 +237,7 @@ $inactive-color: #777;
   display: flex;
   flex-grow: 1;
   flex-wrap: wrap;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
   @include themeable;
 
@@ -247,15 +247,15 @@ $inactive-color: #777;
     position: relative;
     display: inline-flex;
     flex: 1 1 auto;
-    min-height: $form-field-height;
-    border-radius: $border-radius;
-    border: $border;
-    transition: border $transition-duration;
+    min-height: var(--w-form-field-height);
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
+    transition: border var(--w-transition-duration);
 
     .w-textarea[class^="bdrs"] &, .w-textarea[class*=" bdrs"] & {border-radius: inherit;}
   }
 
-  &--floating-label &__textarea-wrap {margin-top: 4 * $base-increment;}
+  &--floating-label &__textarea-wrap {margin-top: calc(var(--w-base-increment) * 4);}
 
   &__textarea-wrap--underline {
     border-bottom-left-radius: initial;
@@ -264,7 +264,7 @@ $inactive-color: #777;
   }
 
   &__textarea-wrap--tile {border-radius: initial;}
-  &__textarea-wrap--shadow {box-shadow: $box-shadow;}
+  &__textarea-wrap--shadow {box-shadow: var(--w-box-shadow);}
 
   &--focused &__textarea-wrap {border-color: currentColor;}
 
@@ -277,7 +277,7 @@ $inactive-color: #777;
     width: 100%;
     height: 0;
     border-bottom: 2px solid currentColor;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
     transform: scaleX(0);
     pointer-events: none;
   }
@@ -290,12 +290,12 @@ $inactive-color: #777;
     width: 100%;
     height: 100%;
     font: inherit;
-    line-height: $textarea-line-height;
+    line-height: var(--w-textarea-line-height);
     color: inherit;
     background: none;
     border: none;
     outline: none;
-    padding: $base-increment (2 * $base-increment);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2);
     resize: none;
 
     .w-textarea--resizable & {resize: vertical;}
@@ -309,7 +309,7 @@ $inactive-color: #777;
     .w-textarea--inner-icon-right & {padding-right: 27px;}
 
     .w-textarea--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -319,7 +319,7 @@ $inactive-color: #777;
 
   // Icons inside.
   // ------------------------------------------------------
-  &__icon {position: absolute;margin-top: $base-increment;}
+  &__icon {position: absolute;margin-top: var(--w-base-increment);}
   &__icon--inner-left {left: 6px;}
   &__icon--inner-right {right: 6px;}
   &--no-padding &__icon--inner-left {left: 1px;}
@@ -328,7 +328,7 @@ $inactive-color: #777;
   .w-textarea--focused &__icon {color: currentColor;}
 
   &--disabled &__icon {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -336,21 +336,21 @@ $inactive-color: #777;
   // Label.
   // ------------------------------------------------------
   &__label {
-    transition: color $transition-duration;
+    transition: color var(--w-transition-duration);
     cursor: pointer;
     align-self: flex-start;
     user-select: none;
 
     &--left {
-      margin-top: $base-increment;
-      margin-right: 2 * $base-increment;
+      margin-top: var(--w-base-increment);
+      margin-right: calc(var(--w-base-increment) * 2);
     }
     &--right {
-      margin-top: $base-increment;
-      margin-left: 2 * $base-increment;
+      margin-top: var(--w-base-increment);
+      margin-left: calc(var(--w-base-increment) * 2);
     }
     .w-textarea--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -362,9 +362,9 @@ $inactive-color: #777;
 
   &__label--inside {
     position: absolute;
-    top: $base-increment;
+    top: var(--w-base-increment);
     left: 0;
-    padding-left: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
     white-space: nowrap;
     transform: translateY(0%);
     pointer-events: none;
@@ -379,7 +379,7 @@ $inactive-color: #777;
 
     .w-textarea--floating-label & {
       transform-origin: 0 0;
-      transition: $transition-duration ease;
+      transition: var(--w-transition-duration) ease;
     }
 
     // move label with underline style.

package/src/wave-ui/components/w-timeline.vue

@@ -43,14 +43,14 @@ export default {
 
 <style lang="scss">
 .w-timeline {
-  margin-left: $base-increment;
+  margin-left: var(--w-base-increment);
 
   @include themeable;
 }
 
 .w-timeline-item {
-  padding-left: 5 * $base-increment;
-  padding-bottom: 3 * $base-increment;
+  padding-left: calc(var(--w-base-increment) * 5);
+  padding-bottom: calc(var(--w-base-increment) * 3);
   list-style-type: none;
   position: relative;
 
@@ -61,10 +61,10 @@ export default {
     position: absolute;
     top: 2px;
     left: 0;
-    background-color: $timeline-bullet-color;
+    background-color: var(--w-timeline-bullet-color);
     border-radius: 1em;
     border: 1px solid currentColor;
-    width: $base-font-size;
+    width: var(--w-base-font-size);
     aspect-ratio: 1;
     min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     transform: translateX(-50%);
@@ -80,7 +80,7 @@ export default {
     top: 2px;
     bottom: -2px;
     left: -1px;
-    border-left: 2px solid $timeline-bg-color;
+    border-left: 2px solid var(--w-timeline-bg-color);
   }
 }
 </style>

package/src/wave-ui/components/w-toolbar.vue

@@ -69,8 +69,8 @@ export default {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  padding: (2 * $base-increment) (3 * $base-increment);
-  background-color: $toolbar-bg-color;
+  padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
+  background-color: var(--w-toolbar-bg-color);
   z-index: 10;
 
   @include themeable;
@@ -83,30 +83,30 @@ export default {
   &--absolute.w-toolbar--right, &--fixed.w-toolbar--right {left: auto;right: 0;}
 
   // Horizontal.
-  &--top {border-bottom: $border;}
+  &--top {border-bottom: var(--w-border);}
   &--bottom {
     bottom: 0;
     top: auto;
-    border-top: $border;
+    border-top: var(--w-border);
   }
 
   // Vertical.
   &--vertical {
-    padding: (2 * $base-increment);
+    padding: calc(var(--w-base-increment) * 2);
     flex-direction: column;
     flex-grow: 0;
     flex-shrink: 0;
   }
 
-  &--left {border-right: $border;}
+  &--left {border-right: var(--w-border);}
   &--right {
     right: 0;
     left: auto;
-    border-left: $border;
+    border-left: var(--w-border);
   }
 
   &--no-border, &--shadow {border-width: 0;}
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   .w-app > & {z-index: 200;}
 

package/src/wave-ui/components/w-tooltip.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
-slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear @after-leave="onAfterLeave")
-  .w-tooltip(
-    v-if="detachableVisible"
-    ref="detachable"
-    :key="tooltipInstanceId"
-    :class="classes"
-    :style="styles")
-    slot
+slot(name="activator")
+slot(v-if="!$slots.activator")
+teleport(:to="teleportTarget" :disabled="!teleportTarget")
+  transition(:name="transitionName" appear @after-leave="onAfterLeave")
+    .w-tooltip(
+      v-if="detachableVisible"
+      ref="detachable"
+      :key="tooltipInstanceId"
+      :class="classes"
+      :style="styles")
+      template(v-if="tooltip") {{ tooltip }}
+      slot(v-else-if="$slots.tooltip" name="tooltip")
+      slot(v-else-if="$slots.activator")
 </template>
 
 <script>
@@ -26,6 +30,7 @@ export default {
 
   props: {
     modelValue: {},
+    tooltip: { type: String }, // Simple string content shorthand; use the #tooltip slot for rich content.
     showOnClick: { type: Boolean },
     color: { type: String },
     bgColor: { type: String },
@@ -239,12 +244,12 @@ export default {
   display: table;
 
   position: absolute;
-  padding: $base-increment math.round(1.5 * $base-increment);
-  border-radius: $border-radius;
-  border: 1px solid $tooltip-border-color;
-  background-color: $tooltip-bg-color;
+  padding: var(--w-base-increment) calc(var(--w-base-increment) * 1.5);
+  border-radius: var(--w-border-radius);
+  border: 1px solid var(--w-tooltip-border-color);
+  background-color: var(--w-tooltip-bg-color);
   pointer-events: none;
-  color: $tooltip-color;
+  color: var(--w-tooltip-color);
   align-items: center;
   max-width: 300px;
   width: max-content; // Not supported in IE11. :/
@@ -257,15 +262,15 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment math.round(2.5 * $base-increment);
+    padding: var(--w-base-increment) calc(var(--w-base-increment) * 2.5);
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--no-border {border: none;}
 
-  &--top {margin-top: -3 * $base-increment;}
-  &--bottom {margin-top: 3 * $base-increment;}
-  &--left {margin-left: -3 * $base-increment;}
-  &--right {margin-left: 3 * $base-increment;}
+  &--top {margin-top: calc(var(--w-base-increment) * -3);}
+  &--bottom {margin-top: calc(var(--w-base-increment) * 3);}
+  &--left {margin-left: calc(var(--w-base-increment) * -3);}
+  &--right {margin-left: calc(var(--w-base-increment) * 3);}
 
   &.size--xs {font-size: 0.75rem;}
   &.size--sm {font-size: 0.83rem;}
@@ -292,30 +297,30 @@ export default {
 .w-tooltip-slide-fade-down-enter-active, .w-tooltip-slide-fade-down-leave-active,
 .w-tooltip-slide-fade-left-enter-active, .w-tooltip-slide-fade-left-leave-active,
 .w-tooltip-slide-fade-right-enter-active, .w-tooltip-slide-fade-right-leave-active {
-  transition: margin $transition-duration ease-in-out, opacity $transition-duration ease-in-out;
+  transition: margin var(--w-transition-duration) ease-in-out, opacity var(--w-transition-duration) ease-in-out;
 }
 
 // slide-fade-up.
 .w-tooltip-slide-fade-up-enter-from, .w-tooltip-slide-fade-up-leave-to {
-  margin-top: -2 * $base-increment;
+  margin-top: calc(var(--w-base-increment) * -2);
   opacity: 0;
 }
 
 // slide-fade-down.
 .w-tooltip-slide-fade-down-enter-from, .w-tooltip-slide-fade-down-leave-to {
-  margin-top: 2 * $base-increment;
+  margin-top: calc(var(--w-base-increment) * 2);
   opacity: 0;
 }
 
 // Slide-fade-left.
 .w-tooltip-slide-fade-left-enter-from, .w-tooltip-slide-fade-left-leave-to {
-  margin-left: -2 * $base-increment;
+  margin-left: calc(var(--w-base-increment) * -2);
   opacity: 0;
 }
 
 // Slide-fade-right.
 .w-tooltip-slide-fade-right-enter-from, .w-tooltip-slide-fade-right-leave-to {
-  margin-left: 2 * $base-increment;
+  margin-left: calc(var(--w-base-increment) * 2);
   opacity: 0;
 }
 // --------------------------------------------------------