wave-ui 3.28.0 → 4.0.0

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

@@ -49,7 +49,13 @@ export default {
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     inline: { type: Boolean },
     color: { type: String, default: 'primary' },
-    labelColor: { type: String, default: 'primary' }
+    labelColor: { type: String, default: 'primary' },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -77,10 +83,15 @@ export default {
         color: item[this.itemColorKey] || this.color
       }))
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return [
         'w-radios',
-        `w-radios--${this.inline ? 'inline' : 'column'}`
+        `w-radios--${this.inline ? 'inline' : 'column'}`,
+        this.presetSize && `size--${this.presetSize}`
       ]
     }
   },
@@ -113,8 +124,22 @@ export default {
     flex-wrap: wrap;
     vertical-align: middle;
 
-    .w-radio {margin-right: 3 * $base-increment;}
+    .w-radio {margin-right: calc(var(--w-base-increment) * 3);}
     .w-radio:last-child {margin-right: 0;}
   }
+
+  // Sizes (cascades --w-small-form-el-size to child w-radio elements).
+  // Also scales the radio bullet border-width proportionally.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--xs .w-radio__input {border-width: 1px;}
+  &.size--xs :checked ~ .w-radio__input:after {border-width: 3px;}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--sm .w-radio__input {border-width: 1.5px;}
+  &.size--sm :checked ~ .w-radio__input:after {border-width: 4px;}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--lg :checked ~ .w-radio__input:after {border-width: 5px;}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
+  &.size--xl :checked ~ .w-radio__input:after {border-width: 7px;}
 }
 </style>

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

@@ -167,8 +167,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-rating {
   display: inline-flex;
   align-items: center;
@@ -184,21 +182,21 @@ export default {
     justify-content: center;
     border: none;
     background: none;
-    color: $rating-bg-color;
+    color: var(--w-rating-bg-color);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    @include default-transition($fast-transition-duration);
+    @include default-transition(var(--w-transition-duration-fast));
 
     // Disabled & readonly.
     .w-rating--disabled & {opacity: 0.6;cursor: not-allowed;}
     .w-rating--readonly & {cursor: auto;}
 
     // Sizes.
-    &.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;margin-left: 0;}
+    &.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));margin-left: 0;}
 
     &:before {font-size: 1.1em;}
     &:before, .w-icon:before {

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

@@ -744,19 +744,19 @@ defineExpose({
     cursor: pointer;
     touch-action: none;
     opacity: 1;
-    transition: opacity $fast-transition-duration ease;
+    transition: opacity var(--w-transition-duration-fast) ease;
 
     &--horizontal {
       width: 100%;
       border-bottom-left-radius: inherit;
       border-bottom-right-radius: inherit;
-      height: $scrollbar-size;
+      height: var(--w-scrollbar-size);
     }
     &--vertical {
       inset: 0 0 0 auto;
       border-top-right-radius: inherit;
       border-bottom-right-radius: inherit;
-      width: $scrollbar-size;
+      width: var(--w-scrollbar-size);
     }
 
     &--hidden {
@@ -770,7 +770,7 @@ defineExpose({
     color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, var(--w-base-bg-color));
     background: currentColor;
 
-    border-radius: $border-radius;
+    border-radius: var(--w-border-radius);
     z-index: 1;
     transition: box-shadow 0.15s ease;
     cursor: grab;

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

@@ -24,77 +24,77 @@ component(
     custom
     min-width="activator"
     v-bind="menuProps || {}")
-    template(#activator)
-      //- Input wrapper.
-      .w-select__selection-wrap(
-        @click="!isDisabled && !isReadonly && onInputFieldClick()"
-        role="button"
-        aria-haspopup="listbox"
-        :aria-expanded="showMenu ? 'true' : 'false'"
-        :aria-owns="selectListId"
-        :aria-activedescendant="`${selectListId}_item-1`"
-        :class="inputWrapClasses")
-        slot(name="icon-left")
-          w-icon.w-select__icon.w-select__icon--inner-left(
-            v-if="innerIconLeft"
-            tag="label"
-            @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
-        .w-select__selection-slot(v-if="$slots.selection")
-          //- inputValue is always an array.
-          slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
-        .w-select__selection(
-          ref="selection-input"
-          @focus="!isDisabled && !isReadonly && onFocus($event)"
-          @blur="onBlur"
-          @keydown="!isDisabled && !isReadonly && onKeydown($event)"
-          v-bind="selectionAttributes"
-          v-html="selectionHtml")
-        //- For standard HTML form submission.
-        input(
-          v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
-          :key="i"
-          type="hidden"
-          :value="val.value === undefined ? '' : val.value.toString()"
-          :name="inputName + (multiple ? '[]' : '')")
-        template(v-if="labelPosition === 'inside' && showLabelInside")
-          label.w-select__label.w-select__label--inside.w-form-el-shakable(
-            v-if="$slots.default || label"
-            :class="labelClasses")
-            slot {{ label }}
-        slot(name="icon-right")
-          w-icon.w-select__icon.w-select__icon--inner-right(
-            v-if="innerIconRight"
-            tag="label"
-            @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
-    w-list(
-      ref="w-list"
-      :model-value="inputValue"
-      @update:model-value="onInput"
-      @item-click="$emit('item-click', $event)"
-      @item-select="onListItemSelect"
-      @keydown="onWListKeydown"
-      @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="showMenu && (showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
-      :items="selectItems"
-      :multiple="multiple"
-      arrows-navigation
-      return-object
-      :add-ids="selectListId"
-      :no-unselect="noUnselect"
-      :selection-color="selectionColor"
-      :item-color-key="itemColorKey"
-      role="listbox"
-      tabindex="-1")
-      template(v-for="i in items.length" #[`item.${i}`]="{ item, selected, index }")
-        slot(
-          v-if="$slots[`item.${i}`] && $slots[`item.${i}`](item, selected, index)"
-          :name="`item.${i}`"
-          :item="item"
-          :selected="selected"
-          :index="index")
-          | {{ item[itemLabelKey] }}
-        slot(v-else name="item" :item="item" :selected="selected" :index="index") {{ item[itemLabelKey] }}
-
+    //- Input wrapper.
+    .w-select__selection-wrap(
+      @click="!isDisabled && !isReadonly && onInputFieldClick()"
+      role="button"
+      aria-haspopup="listbox"
+      :aria-expanded="showMenu ? 'true' : 'false'"
+      :aria-owns="selectListId"
+      :aria-activedescendant="`${selectListId}_item-1`"
+      :class="inputWrapClasses")
+      slot(name="icon-left")
+        w-icon.w-select__icon.w-select__icon--inner-left(
+          v-if="innerIconLeft"
+          tag="label"
+          @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+      .w-select__selection-slot(v-if="$slots.selection")
+        //- inputValue is always an array.
+        slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
+      .w-select__selection(
+        ref="selection-input"
+        @focus="!isDisabled && !isReadonly && onFocus($event)"
+        @blur="onBlur"
+        @keydown="!isDisabled && !isReadonly && onKeydown($event)"
+        v-bind="selectionAttributes"
+        v-html="selectionHtml")
+      //- For standard HTML form submission.
+      input(
+        v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
+        :key="i"
+        type="hidden"
+        :value="val.value === undefined ? '' : val.value.toString()"
+        :name="inputName + (multiple ? '[]' : '')")
+      template(v-if="labelPosition === 'inside' && showLabelInside")
+        label.w-select__label.w-select__label--inside.w-form-el-shakable(
+          v-if="$slots.default || label"
+          :class="labelClasses")
+          slot {{ label }}
+      slot(name="icon-right")
+        w-icon.w-select__icon.w-select__icon--inner-right(
+          v-if="innerIconRight"
+          tag="label"
+          @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+    template(#content)
+      w-list(
+        ref="w-list"
+        :model-value="inputValue"
+        @update:model-value="onInput"
+        @item-click="$emit('item-click', $event)"
+        @item-select="onListItemSelect"
+        @keydown="onWListKeydown"
+        @keydown:enter="noUnselect && !multiple && closeMenu()"
+        @keydown:escape="showMenu && (showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
+        :items="selectItems"
+        :multiple="multiple"
+        arrows-navigation
+        return-object
+        :add-ids="selectListId"
+        :no-unselect="noUnselect"
+        :selection-color="selectionColor"
+        :item-color-key="itemColorKey"
+        role="listbox"
+        tabindex="-1")
+        template(v-for="i in items.length" #[`item.${i}`]="{ item, selected, index }")
+          slot(
+            v-if="$slots[`item.${i}`] && $slots[`item.${i}`](item, selected, index)"
+            :name="`item.${i}`"
+            :item="item"
+            :selected="selected"
+            :index="index")
+            | {{ item[itemLabelKey] }}
+          slot(v-else name="item" :item="item" :selected="selected" :index="index") {{ item[itemLabelKey] }}
+  
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
@@ -147,6 +147,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 },
     returnObject: { type: Boolean },
     // By default you can unselect a list item by re-selecting it.
     // Allow preventing that on single selection lists only.
@@ -214,6 +220,10 @@ export default {
       if (this.$slots.selection) return ''
       return this.selectionString
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         'w-select': true,
@@ -229,7 +239,8 @@ export default {
         'w-select--has-placeholder': this.placeholder,
         'w-select--inner-icon-left': this.innerIconLeft,
         'w-select--inner-icon-right': this.innerIconRight,
-        'w-select--open': this.showMenu
+        'w-select--open': this.showMenu,
+        [`size--${this.presetSize}`]: !!this.presetSize
       }
     },
     inputWrapClasses () {
@@ -441,12 +452,12 @@ export default {
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  font-size: $base-font-size;
+  font-size: var(--w-base-font-size);
 
   @include themeable;
 
   &--disabled {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
@@ -463,16 +474,16 @@ export default {
     display: inline-flex;
     flex: 1 1 auto;
     align-items: center;
-    min-height: $form-field-height; // Min-height to allow multiple lines.
-    border-radius: $border-radius;
-    border: $border;
-    transition: border $transition-duration;
+    min-height: var(--w-size, var(--w-form-field-height)); // Min-height to allow multiple lines.
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
+    transition: border var(--w-transition-duration);
 
     &--tile {border-radius: initial;}
-    &--shadow {box-shadow: $box-shadow;}
+    &--shadow {box-shadow: var(--w-box-shadow);}
     .w-select[class^="bdrs"] &, .w-select[class*=" bdrs"] & {border-radius: inherit;}
 
-    .w-select--floating-label & {margin-top: 3 * $base-increment;}
+    .w-select--floating-label & {margin-top: calc(var(--w-base-increment) * 3);}
 
     &--underline {
       border-bottom-left-radius: initial;
@@ -493,7 +504,7 @@ export default {
       width: 100%;
       height: 0;
       border-bottom: 2px solid currentColor;
-      transition: $transition-duration;
+      transition: var(--w-transition-duration);
       transform: scaleX(0);
       pointer-events: none;
     }
@@ -502,12 +513,12 @@ export default {
     .w-select--open &--underline:after {transform: scaleX(1);}
     &--round.w-select__selection-wrap--underline:after {
       border-radius: 99em;
-      transition: $transition-duration, height 0.035s;
+      transition: var(--w-transition-duration), height 0.035s;
     }
     .w-select--focused &--round.w-select__selection-wrap--underline:after,
     .w-select--open &--round.w-select__selection-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);
     }
   }
 
@@ -520,8 +531,8 @@ export default {
     height: 100%;
     min-height: inherit;
     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);
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -541,15 +552,15 @@ export default {
     }
 
     .w-select__selection-wrap--round & {
-      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);
     }
 
     .w-select--inner-icon-left & {padding-left: 27px;}
     &-slot, .w-select--inner-icon-right & {padding-right: 22px;}
 
     .w-select--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -575,13 +586,13 @@ export default {
 
     .w-select--disabled &,
     .w-select--readonly & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
 
-    &--inner-left {left: $base-increment;}
-    &--inner-right {right: $base-increment;}
+    &--inner-left {left: var(--w-base-increment);}
+    &--inner-right {right: var(--w-base-increment);}
     .w-select--no-padding &--inner-left {left: 1px;}
     .w-select--no-padding &--inner-right {right: 1px;}
 
@@ -596,15 +607,15 @@ export default {
   &__label {
     display: flex;
     align-items: center;
-    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-select--disabled & {
-      color: $disabled-color;
+      color: var(--w-disabled-color);
       cursor: not-allowed;
       -webkit-tap-highlight-color: transparent;
     }
@@ -621,7 +632,7 @@ export default {
     white-space: nowrap;
     // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
-    margin-left: 2 * $base-increment;
+    margin-left: calc(var(--w-base-increment) * 2);
     pointer-events: none;
 
     .w-select--inner-icon-right & {padding-right: 26px;}
@@ -631,14 +642,14 @@ export default {
       margin-left: 0;
     }
     .w-select__selection-wrap--round & {
-      margin-left: math.round(3 * $base-increment);
+      margin-left: calc(var(--w-base-increment) * 3);
     }
     .w-select--inner-icon-left & {left: 18px;}
     .w-select--no-padding.w-select--inner-icon-left & {left: 26px;}
 
     .w-select--floating-label & {
       transform-origin: 0 0;
-      transition: $transition-duration ease;
+      transition: var(--w-transition-duration) ease;
     }
 
     // Move label with underline style.
@@ -657,15 +668,22 @@ export default {
     .w-select--floating-label.w-select--inner-icon-left .w-select__select:-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);}
+
   // Menu.
   // ------------------------------------------------------
   &__menu {
     margin: 0;
     max-height: 300px;
     overflow: auto;
-    background-color: $base-bg-color;
-    border: $border;
-    border-radius: $border-radius;
+    background-color: var(--w-base-bg-color);
+    border: var(--w-border);
+    border-radius: var(--w-border-radius);
 
     .w-list {width: 100%;}
   }

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

@@ -283,12 +283,12 @@ export default {
 
   // Slider label, left & right.
   // ------------------------------------------------------
-  &__label--left {margin-right: 3 * $base-increment;}
-  &__label--right {margin-left: 3 * $base-increment;}
+  &__label--left {margin-right: calc(var(--w-base-increment) * 3);}
+  &__label--right {margin-left: calc(var(--w-base-increment) * 3);}
 
   // Steps labels.
   // ------------------------------------------------------
-  &--has-step-labels {padding-bottom: 4 * $base-increment;}
+  &--has-step-labels {padding-bottom: calc(var(--w-base-increment) * 4);}
   &__step-labels {
     position: absolute;
     top: 0;
@@ -300,8 +300,8 @@ export default {
     position: absolute;
     transform: translateX(-50%);
     font-size: 0.8em;
-    padding-top: 2 * $base-increment;
-    color: $slider-step-label-color;
+    padding-top: calc(var(--w-base-increment) * 2);
+    color: var(--w-slider-step-label-color);
     z-index: 1;
     cursor: pointer;
 
@@ -311,10 +311,10 @@ export default {
       left: 50%;
       transform: translateX(-50%);
       top: 0;
-      width: $base-increment;
+      width: var(--w-base-increment);
       aspect-ratio: 1;
       min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
-      background-color: $slider-step-label-bg-color;
+      background-color: var(--w-slider-step-label-bg-color);
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
       box-sizing: border-box;
@@ -333,10 +333,10 @@ export default {
   &__track {
     position: relative;
     flex-grow: 1;
-    height: $slider-height;
-    background-color: $slider-track-color;
+    height: var(--w-slider-height);
+    background-color: var(--w-slider-track-color);
     -webkit-tap-highlight-color: transparent;
-    border-radius: $border-radius;
+    border-radius: var(--w-border-radius);
     touch-action: none;
     cursor: pointer;
 
@@ -364,7 +364,7 @@ export default {
     right: 0;
     height: 100%;
     z-index: 1;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
     border-radius: inherit;
 
     .w-slider--dragging & {transition: none;}
@@ -375,14 +375,14 @@ export default {
   // ------------------------------------------------------
   &__thumb {
     position: absolute;
-    width: 3 * $base-increment;
+    width: calc(var(--w-base-increment) * 3);
     aspect-ratio: 1;
     min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
 
     .w-slider--dragging & {transition: none;}
   }
@@ -397,7 +397,7 @@ export default {
     border: none;
     border-radius: 99em;
     cursor: pointer;
-    background-color: $slider-thumb-button-bg-color;
+    background-color: var(--w-slider-thumb-button-bg-color);
 
     .w-slider--disabled &, .w-slider--readonly & {cursor: auto;}
 
@@ -417,17 +417,17 @@ export default {
     &:active:before, .w-slider--dragging &:before {
       opacity: 1;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-      transition-duration: $fast-transition-duration;
+      transition-duration: var(--w-transition-duration-fast);
     }
     .w-slider--disabled &:before,
     .w-slider--readonly &:before {box-shadow: none;opacity: 0.4;}
 
     // The outline when focused, but also a bigger reactive zone for fat fingers when not.
     &:after {
-      left: -2 * $base-increment;
-      right: -2 * $base-increment;
-      top: -2 * $base-increment;
-      bottom: -2 * $base-increment;
+      left: calc(var(--w-base-increment) * -2);
+      right: calc(var(--w-base-increment) * -2);
+      top: calc(var(--w-base-increment) * -2);
+      bottom: calc(var(--w-base-increment) * -2);
       opacity: 0;
       background-color: currentColor;
     }
@@ -441,15 +441,15 @@ export default {
     position: absolute;
     left: 50%;
     bottom: 100%;
-    margin-bottom: math.round(3 * $base-increment);
+    margin-bottom: calc(var(--w-base-increment) * 3);
     transform: translateX(-50%);
-    padding: math.round(0.75 * $base-increment) (2 * $base-increment);
-    background-color: $slider-thumb-label-bg-color;
-    border-radius: $border-radius;
-    border: $border;
+    padding: calc(var(--w-base-increment) * 0.75) calc(var(--w-base-increment) * 2);
+    background-color: var(--w-slider-thumb-label-bg-color);
+    border-radius: var(--w-border-radius);
+    border: var(--w-border);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
     font-size: 0.85em;
-    color: $slider-thumb-label-color;
+    color: var(--w-slider-thumb-label-color);
 
     &:before, &:after {
       content: '';
@@ -463,7 +463,7 @@ export default {
     }
 
     &:before {border-width: 7px;border-top-color: inherit;}
-    &:after {border-width: 6px;border-top-color: $slider-thumb-label-bg-color;}
+    &:after {border-width: 6px;border-top-color: var(--w-slider-thumb-label-bg-color);}
 
     &--droplet {
       transform: translateX(-50%) rotate(-45deg);

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

@@ -55,8 +55,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-spinner {
   position: relative;
   display: inline-flex;
@@ -66,11 +64,11 @@ export default {
   aspect-ratio: 1;
   min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
-  &.size--xs {font-size: math.round(0.9 * divide($base-font-size, 2)) * 2;}
-  &.size--sm {font-size: math.round(1.5 * $base-font-size);}
-  &.size--md {font-size: math.round(2 * $base-font-size);}
-  &.size--lg {font-size: math.round(2.5 * $base-font-size);}
-  &.size--xl {font-size: 3 * $base-font-size;}
+  &.size--xs {font-size: calc(2 * round(nearest, calc(0.9 * var(--w-base-font-size) / 2), 1px));}
+  &.size--sm {font-size: round(nearest, calc(1.5 * var(--w-base-font-size)), 1px);}
+  &.size--md {font-size: round(nearest, calc(2 * var(--w-base-font-size)), 1px);}
+  &.size--lg {font-size: round(nearest, calc(2.5 * var(--w-base-font-size)), 1px);}
+  &.size--xl {font-size: calc(3 * var(--w-base-font-size));}
 
   &:before, &:after {
     content: '';