wave-ui 3.27.2 → 4.0.0

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

@@ -1,26 +1,26 @@
 <template lang="pug">
-w-menu(v-model="showPopup" v-bind="wMenuProps")
-  template(#activator="{ on }")
-    w-button.w-confirm(v-bind="{ ...$attrs, ...buttonProps }" v-on="disablePrompt ? {} : { ...on }")
-      slot
-  w-flex(:column="!inline" align-center)
-    div
-      slot(name="question") {{ question }}
-    .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
-      w-button.mr2(
-        v-if="cancel !== false"
-        v-bind="cancelButtonProps"
-        :bg-color="(cancelButton || {}).bgColor || 'error'"
-        @keyup.escape="!persistent && onCancel()"
-        @click="onCancel")
-        slot(name="cancel") {{ cancelButton.label }}
-      w-button(
-        v-bind="confirmButtonProps"
-        :bg-color="(confirmButton || {}).bgColor || 'success'"
-        v-focus
-        @keyup.escape="!persistent && onCancel()"
-        @click="onConfirm")
-        slot(name="confirm") {{ confirmButton.label }}
+w-menu(v-model="showPopup" v-bind="wMenuProps" :disable="disablePrompt")
+  w-button.w-confirm(v-bind="{ ...$attrs, ...buttonProps }")
+    slot
+  template(#content)
+    w-flex(:column="!inline" align-center)
+      div
+        slot(name="question") {{ question }}
+      .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
+        w-button.mr2(
+          v-if="cancel !== false"
+          v-bind="cancelButtonProps"
+          :bg-color="(cancelButton || {}).bgColor || 'error'"
+          @keyup.escape="!persistent && onCancel()"
+          @click="onCancel")
+          slot(name="cancel") {{ cancelButton.label }}
+        w-button(
+          v-bind="confirmButtonProps"
+          :bg-color="(confirmButton || {}).bgColor || 'success'"
+          v-focus
+          @keyup.escape="!persistent && onCancel()"
+          @click="onConfirm")
+          slot(name="confirm") {{ confirmButton.label }}
 </template>
 
 <script>

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

@@ -139,7 +139,7 @@ export default {
     flex-grow: 1;
     max-width: 95%;
     overflow: auto;
-    background-color: $dialog-bg-color;
+    background-color: var(--w-dialog-bg-color);
 
     @include themeable;
 

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

@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .w-divider {
-  border: 0 solid $divider-color;
+  border: 0 solid var(--w-divider-color);
   border-top-width: 1px;
 
   @include themeable;
@@ -69,15 +69,15 @@ export default {
       display: flex;
       flex: 1 1 auto;
     }
-    &:before {margin-right: 2 * $base-increment;}
-    &:after {margin-left: 2 * $base-increment;}
+    &:before {margin-right: calc(var(--w-base-increment) * 2);}
+    &:after {margin-left: calc(var(--w-base-increment) * 2);}
 
     // Vertical.
     &.w-divider--vertical {
       flex-direction: column;
       &:before, &:after {border-top-width: 0;border-left-width: 1px;}
-      &:before {margin-right: 0;margin-bottom: 2 * $base-increment;}
-      &:after {margin-left: 0;margin-top: 2 * $base-increment;}
+      &:before {margin-right: 0;margin-bottom: calc(var(--w-base-increment) * 2);}
+      &:after {margin-left: 0;margin-top: calc(var(--w-base-increment) * 2);}
     }
   }
 }

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

@@ -245,7 +245,7 @@ export default {
   position: inherit;
   display: flex;
   z-index: 1;
-  background: $drawer-bg-color;
+  background: var(--w-drawer-bg-color);
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
 
   @include themeable;
@@ -254,13 +254,13 @@ export default {
     top: 0;
     bottom: 0;
     width: 100%;
-    max-width: $drawer-max-size;
+    max-width: var(--w-drawer-max-size);
   }
   &--top, &--bottom {
     left: 0;
     right: 0;
     height: 100%;
-    max-height: $drawer-max-size;
+    max-height: var(--w-drawer-max-size);
   }
   &--fit-content {width: auto;height: auto;}
 

package/src/wave-ui/components/w-form-element.vue

@@ -130,7 +130,7 @@ div.w-form-el {
   &--has-error input::placeholder {color: inherit;}
 
   &-shakable {position: relative;}
-  &--error &-shakable {animation: w-form-el-shake 0.3s $transition-duration ease-in-out;}
+  &--error &-shakable {animation: w-form-el-shake 0.3s var(--w-transition-duration) ease-in-out;}
 
   // Error message.
   // ------------------------------------------------------
@@ -138,7 +138,7 @@ div.w-form-el {
     width: 100%;
     flex-grow: 1;
     font-size: 0.775rem;
-    margin-top: $base-increment;
+    margin-top: var(--w-base-increment);
 
     .w-form--error-placeholders & {position: absolute;bottom: 0;}
   }

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

@@ -98,8 +98,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-icon {
   position: relative;
   display: inline-flex;
@@ -115,21 +113,21 @@ export default {
   // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
-  &.size--xs {font-size: math.round(0.85 * $base-font-size);}
-  &.size--sm {font-size: math.round(1.15 * $base-font-size);}
-  &.size--md {font-size: math.round(1.4 * $base-font-size);}
-  &.size--lg {font-size: math.round(1.7 * $base-font-size);}
-  &.size--xl {font-size: 2 * $base-font-size;}
+  &.size--xs {font-size: round(nearest, calc(0.85 * var(--w-base-font-size)), 1px);}
+  &.size--sm {font-size: round(nearest, calc(1.15 * var(--w-base-font-size)), 1px);}
+  &.size--md {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
+  &.size--lg {font-size: round(nearest, calc(1.7 * var(--w-base-font-size)), 1px);}
+  &.size--xl {font-size: calc(2 * var(--w-base-font-size));}
 
   // Always an even number to align well vertically in a button.
-  .w-button.size--xs & {font-size: math.round(0.95 * divide($base-font-size, 2)) * 2;}
-  .w-alert.size--xs & {font-size: $base-font-size;}
-  .w-button.size--sm &, .w-alert.size--sm & {font-size: math.round(1.15 * $base-font-size);}
-  // .w-button.size--md &, .w-alert.size--md & {font-size: math.round(1.4 * $base-font-size);}
-  .w-button.size--lg &, .w-alert.size--lg & {font-size: math.round(1.7 * $base-font-size);}
-  .w-button.size--xl &, .w-alert.size--xl & {font-size: 2 * $base-font-size;}
+  .w-button.size--xs & {font-size: calc(2 * round(nearest, calc(0.95 * var(--w-base-font-size) / 2), 1px));}
+  .w-alert.size--xs & {font-size: var(--w-base-font-size);}
+  .w-button.size--sm &, .w-alert.size--sm & {font-size: round(nearest, calc(1.15 * var(--w-base-font-size)), 1px);}
+  // .w-button.size--md &, .w-alert.size--md & {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
+  .w-button.size--lg &, .w-alert.size--lg & {font-size: round(nearest, calc(1.7 * var(--w-base-font-size)), 1px);}
+  .w-button.size--xl &, .w-alert.size--xl & {font-size: calc(2 * var(--w-base-font-size));}
 
-  &:before {transition: transform $transition-duration;}
+  &:before {transition: transform var(--w-transition-duration);}
   &--spin:before {animation: w-icon--spin 2s infinite linear;}
   &--spin-a:before {animation: w-icon--spin-a 2s infinite linear;}
   &--rotate45:before {transform: rotate(45deg);}

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

@@ -247,7 +247,7 @@ export default {
   }
 
   &__caption {
-    padding-top: $base-increment;
+    padding-top: var(--w-base-increment);
     text-align: right;
   }
 }

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

@@ -162,6 +162,12 @@ export default {
     round: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     multiple: { type: Boolean }, // Only for file uploads.
     preview: { type: [Boolean, String], default: true }, // Only for file uploads.
     loading: { type: [Boolean, Number], default: false }, // If a number is given, it will be the value of the progress.
@@ -251,6 +257,10 @@ export default {
       return this.overallFilesProgress === 100
     },
 
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         'w-input': true,
@@ -266,6 +276,7 @@ export default {
         'w-input--has-placeholder': this.placeholder,
         'w-input--inner-icon-left': this.innerIconLeft,
         'w-input--inner-icon-right': this.innerIconRight,
+        [`size--${this.presetSize}`]: !!this.presetSize,
         // With the inheritAttrs set to false any class on the component would be lost, so add it back.
         [this.$attrs.class]: !!this.$attrs.class
       }
@@ -391,7 +402,7 @@ $inactive-color: #777;
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
   &--file {
     flex-wrap: nowrap;
@@ -409,13 +420,13 @@ $inactive-color: #777;
     display: inline-flex;
     flex: 1 1 auto;
     align-items: center;
-    height: $form-field-height;
-    border-radius: $border-radius;
-    border: $border;
-    transition: border $transition-duration;
+    height: var(--w-size, var(--w-form-field-height));
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
+    transition: border var(--w-transition-duration);
 
     .w-input.h-auto & {height: auto;}
-    .w-input--floating-label & {margin-top: 3 * $base-increment;}
+    .w-input--floating-label & {margin-top: calc(var(--w-base-increment) * 3);}
     .w-input[class^="bdrs"] &, .w-input[class*=" bdrs"] & {border-radius: inherit;}
 
     // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
@@ -429,7 +440,7 @@ $inactive-color: #777;
 
     &--round {border-radius: 99em;}
     &--tile {border-radius: initial;}
-    &--shadow {box-shadow: $box-shadow;}
+    &--shadow {box-shadow: var(--w-box-shadow);}
     &--loading, &--upload-complete {
       border-bottom-color: transparent;
       flex-wrap: wrap;
@@ -454,7 +465,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;
     }
@@ -464,11 +475,11 @@ $inactive-color: #777;
     .w-input--focused &--underline:after {transform: scaleX(1);}
     &--round.w-input__input-wrap--underline:after {
       border-radius: 99em;
-      transition: $transition-duration, height 0.035s;
+      transition: var(--w-transition-duration), height 0.035s;
     }
     .w-input--focused &--round.w-input__input-wrap--underline:after {
       height: 100%;
-      transition: $transition-duration, height 0s ($transition-duration - 0.035s);
+      transition: var(--w-transition-duration), height 0s calc(var(--w-transition-duration) - 0.035s);
     }
   }
 
@@ -486,8 +497,8 @@ $inactive-color: #777;
     border: none;
     border-radius: inherit; // Mostly for the browser-autofilled appearance.
     outline: none;
-    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);
 
     // For type="search" on Safari.
     -webkit-appearance: none;
@@ -500,15 +511,15 @@ $inactive-color: #777;
   }
 
   &__input-wrap--round &__input {
-    padding-left: 3 * $base-increment;
-    padding-right: 3 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 3);
+    padding-right: calc(var(--w-base-increment) * 3);
   }
 
   &--inner-icon-left &__input {padding-left: 27px;}
   &--inner-icon-right &__input {padding-right: 27px;}
 
   &--disabled &__input {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -548,7 +559,7 @@ $inactive-color: #777;
     left: 0;
     display: flex;
     align-items: center;
-    color: $disabled-color;
+    color: var(--w-disabled-color);
   }
 
   &__file-preview {
@@ -570,7 +581,7 @@ $inactive-color: #777;
   .w-input--focused &__icon {color: currentColor;}
 
   &--disabled &__icon {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -578,15 +589,15 @@ $inactive-color: #777;
   // Label.
   // ------------------------------------------------------
   &__label {
-    transition: color $transition-duration;
+    transition: color var(--w-transition-duration);
     cursor: pointer;
     user-select: none;
 
-    &--left {margin-right: 2 * $base-increment;}
-    &--right {margin-left: 2 * $base-increment;}
+    &--left {margin-right: calc(var(--w-base-increment) * 2);}
+    &--right {margin-left: calc(var(--w-base-increment) * 2);}
 
     .w-input--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -600,7 +611,7 @@ $inactive-color: #777;
     position: absolute;
     top: 50%;
     left: 0;
-    padding-left: 2 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 2);
     white-space: nowrap;
     transform: translateY(-50%);
     pointer-events: none;
@@ -611,15 +622,15 @@ $inactive-color: #777;
       padding-right: 0;
     }
     .w-input__input-wrap--round & {
-      padding-left: math.round(3 * $base-increment);
-      padding-right: math.round(3 * $base-increment);
+      padding-left: calc(var(--w-base-increment) * 3);
+      padding-right: calc(var(--w-base-increment) * 3);
     }
     .w-input--inner-icon-left & {left: 18px;}
     .w-input--no-padding.w-input--inner-icon-left & {left: 26px;}
 
     .w-input--floating-label & {
       transform-origin: 0 0;
-      transition: $transition-duration ease;
+      transition: var(--w-transition-duration) ease;
       will-change: transform;
     }
 
@@ -644,5 +655,12 @@ $inactive-color: #777;
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.
     .w-input--floating-label.w-input--inner-icon-left .w-input__input:-webkit-autofill & {left: 0;}
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 1px);}
+  &.size--sm {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 1px);}
+  &.size--lg {--w-size: round(nearest, calc(2.29 * var(--w-base-font-size)), 1px);}
+  &.size--xl {--w-size: round(nearest, calc(2.71 * var(--w-base-font-size)), 1px);}
 }
 </style>

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

@@ -44,10 +44,13 @@ ul.w-list(:class="classes")
 
 <script>
 import { useId } from 'vue'
+import RippleMixin from '../mixins/ripple'
 
 export default {
   name: 'w-list',
 
+  mixins: [RippleMixin],
+
   setup () {
     return { waveUiUseId: useId() }
   },
@@ -161,7 +164,13 @@ export default {
     },
 
     liLabelClasses (item) {
+      const rippleHost =
+        this.rippleActive &&
+        !item.disabled &&
+        (this.checklist || this.isSelectable || (this.nav && item[this.itemRouteKey]))
+
       return {
+        'w-ripple': rippleHost,
         'w-list__item-label--disabled': item.disabled || (this.nav && !item[this.itemRouteKey] && !item.children),
         'w-list__item-label--active': (this.isSelectable && item._selected) || null,
         'w-list__item-label--focused': item._focused,
@@ -188,6 +197,7 @@ export default {
       // If selectable list, on mousedown select the item.
       const mousedown = this.isSelectable && (e => {
         e.stopPropagation()
+        this.onRipple(e)
         !li.disabled && this.selectItem(li)
       })
       // If selectable list, on enter key press select item.
@@ -230,6 +240,7 @@ export default {
         props.onFocus = () => (li._focused = true)
         props.onBlur = () => (li._focused = false)
         props.onInput = value => this.selectItem(li, value)
+        props.onPointerdown = e => this.onRipple(e)
         // When clicking on the checkbox component wrapper, trigger a focus & click on the checkbox.
         props.onClick = e => {
           const checkbox = e.target.querySelector('input[type="checkbox"]')
@@ -250,6 +261,7 @@ export default {
         if (!li.disabled && li[this.itemRouteKey]) {
           props.onKeydown = keydown
           props.onMousedown = mousedown
+          props.onPointerdown = e => this.onRipple(e)
 
           if (this.$router) {
             props.to = li[this.itemRouteKey]
@@ -397,10 +409,10 @@ export default {
 .w-list {
   list-style-type: none;
   margin-left: 0;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
-  &--child {margin-left: 6 * $base-increment;}
-  &--icon {padding-left: 8 * $base-increment;}
+  &--child {margin-left: calc(var(--w-base-increment) * 6);}
+  &--icon {padding-left: calc(var(--w-base-increment) * 8);}
 
   &__item {margin-top: 1px;}
   &__item:first-child {margin-top: 0;}
@@ -416,7 +428,7 @@ export default {
   &__item-bullet {
     position: absolute;
     right: 100%;
-    margin-right: 3 * $base-increment;
+    margin-right: calc(var(--w-base-increment) * 3);
     top: 0.1em;
 
     @-moz-document url-prefix() {
@@ -425,7 +437,7 @@ export default {
 
     .w-list--hoverable &,
     .w-list--selectable &,
-    .w-list--checklist & {margin-top: 3 * $base-increment;}
+    .w-list--checklist & {margin-top: calc(var(--w-base-increment) * 3);}
   }
 
   // List item Label.
@@ -451,15 +463,14 @@ export default {
 
     &--hoverable,
     &--selectable {
-      padding: 2 * $base-increment;
+      padding: calc(var(--w-base-increment) * 2);
 
       &:before {
         content: '';
         position: absolute;
         inset: 0;
-        background-color: currentColor;
-        opacity: 0;
-        transition: 0.2s;
+        background-color: transparent;
+        transition: background-color 0.2s;
         pointer-events: none;
       }
     }
@@ -468,17 +479,17 @@ export default {
     &--hoverable:hover:before,
     &--selectable:focus:before,
     &--focused:before,
-    &--selectable:hover:before {opacity: 0.08;}
+    &--selectable:hover:before {background-color: color-mix(in srgb, currentColor 8%, transparent);}
 
     // Active class (when item is selected).
     &--active:before, &--active:focus:before, &--active:hover:before,
-    .w-list--navigation &.router-link-exact-active:before {opacity: 0.15;}
+    .w-list--navigation &.router-link-exact-active:before {background-color: color-mix(in srgb, currentColor 15%, transparent);}
 
     // Active state (while pressing key or mouse).
     &--active.w-list__item-label--hoverable:hover:before,
     &--active.w-list__item-label--selectable:focus:before,
     &--active.w-list__item-label--selectable:hover:before,
-    &--selectable:active:before {opacity: 0.2;}
+    &--selectable:active:before {background-color: color-mix(in srgb, currentColor 20%, transparent);}
 
     // Disabled.
     &--disabled:before {display: none;}

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

@@ -1,44 +1,48 @@
 <template lang="pug">
-slot(name="activator" :on="activatorEventHandlers")
-transition(:name="transitionName" appear @after-leave="onAfterLeave")
-  .w-menu(
-    v-if="custom && detachableVisible"
-    ref="detachable"
-    v-bind="$attrs"
-    @click="hideOnMenuClick && close(true)"
-    @mouseenter="showOnHover && (hoveringMenu = true)"
-    @mouseleave="showOnHover && ((hoveringMenu = false), close())"
-    :class="classes"
-    :style="styles")
-    slot
-  w-card.w-menu(
-    v-else-if="detachableVisible"
-    ref="detachable"
-    v-bind="$attrs"
-    @click.native="hideOnMenuClick && close(true)"
-    @mouseenter.native="showOnHover && (hoveringMenu = true)"
-    @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
-    :tile="tile"
-    :title-class="titleClasses"
-    :content-class="contentClasses"
-    :shadow="shadow"
-    :no-border="noBorder"
-    :class="classes"
-    :style="styles")
-    template(v-if="$slots.title" #title)
-      slot(name="title")
-    template(v-if="$slots.actions" #actions)
-      slot(name="actions")
-    slot
-w-overlay(
-  v-if="overlay"
-  ref="overlay"
-  :model-value="detachableVisible"
-  :persistent="persistent"
-  :class="overlayClasses"
-  v-bind="overlayProps"
-  :z-index="(zIndex || 200) - 1"
-  @update:model-value="detachableVisible = false")
+slot(name="activator")
+slot(v-if="!$slots.activator")
+teleport(:to="teleportTarget" :disabled="!teleportTarget")
+  transition(:name="transitionName" appear @after-leave="onAfterLeave")
+    .w-menu(
+      v-if="custom && detachableVisible"
+      ref="detachable"
+      v-bind="$attrs"
+      @click="hideOnMenuClick && close(true)"
+      @mouseenter="showOnHover && (hoveringMenu = true)"
+      @mouseleave="showOnHover && ((hoveringMenu = false), close())"
+      :class="classes"
+      :style="styles")
+      slot(v-if="$slots.activator")
+      slot(v-else name="content")
+    w-card.w-menu(
+      v-else-if="detachableVisible"
+      ref="detachable"
+      v-bind="$attrs"
+      @click.native="hideOnMenuClick && close(true)"
+      @mouseenter.native="showOnHover && (hoveringMenu = true)"
+      @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
+      :tile="tile"
+      :title-class="titleClasses"
+      :content-class="contentClasses"
+      :shadow="shadow"
+      :no-border="noBorder"
+      :class="classes"
+      :style="styles")
+      template(v-if="$slots.title" #title)
+        slot(name="title")
+      template(v-if="$slots.actions" #actions)
+        slot(name="actions")
+      slot(v-if="$slots.activator")
+      slot(v-else name="content")
+  w-overlay(
+    v-if="overlay"
+    ref="overlay"
+    :model-value="detachableVisible"
+    :persistent="persistent"
+    :class="overlayClasses"
+    v-bind="overlayProps"
+    :z-index="(zIndex || 200) - 1"
+    @update:model-value="detachableVisible = false")
 </template>
 
 <script>
@@ -175,7 +179,7 @@ export default {
         minWidth: (this.minWidth && this.menuMinWidth) || null,
         maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
         visibility: this.detachableReady ? null : 'hidden', // Hidden until coords are ready.
-        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)')
+        '--w-menu-bg-color': this.arrow ? (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)') : null
       }
     },
 
@@ -291,36 +295,34 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-menu-wrap {display: none;}
 
 .w-menu {
   position: absolute;
   z-index: 100;
-  color: $menu-color;
+  color: var(--w-menu-color);
 
   @include themeable;
 
   &--fixed {position: fixed;z-index: 1000;}
-  &--card {background-color: $menu-bg-color;}
+  &--card {background-color: var(--w-menu-bg-color);}
   &--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);}
 
-  &--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);}
 
   &--arrow {
-    &.w-menu--top {margin-top: -4 * $base-increment;}
-    &.w-menu--bottom {margin-top: 4 * $base-increment;}
-    &.w-menu--left {margin-left: -4 * $base-increment;}
-    &.w-menu--right {margin-left: 4 * $base-increment;}
+    &.w-menu--top {margin-top: calc(var(--w-base-increment) * -4);}
+    &.w-menu--bottom {margin-top: calc(var(--w-base-increment) * 4);}
+    &.w-menu--left {margin-left: calc(var(--w-base-increment) * -4);}
+    &.w-menu--right {margin-left: calc(var(--w-base-increment) * 4);}
 
     // Menu without border.
     &.w-menu--no-border {