wave-ui 3.28.0 → 4.0.0

package/src/wave-ui/mixins/detachable.js

@@ -2,6 +2,10 @@
  * A detachable element is an element that can be appended to another DOM node
  * (but keeping data-driven Vue DOM refreshes).
  * This mixin is used by w-tooltip & w-menu.
+ *
+ * Vue Teleport handles moving the floating content to the right DOM node.
+ * Event listeners are auto-attached to the activator slot's root element so
+ * callers no longer need the `template(#activator="{ on }") v-on="on"` pattern.
  */
 
 import { consoleWarn } from '../utils/console'
@@ -55,7 +59,11 @@ export default {
     // Set to true by computeDetachableCoords after positioning, false until then.
     // Components use this to bind visibility:hidden, so the element is never visible at the
     // wrong position before its coordinates are calculated.
-    detachableReady: false
+    detachableReady: false,
+    // The Vue Teleport target. Stored as data (not computed) so it is resolved lazily at
+    // open()-time — after the DOM is committed — rather than during VNode creation where
+    // document.querySelector() may return null for elements that are part of the same render batch.
+    teleportTarget: null
   }),
 
   computed: {
@@ -74,7 +82,8 @@ export default {
 
       let target = this.appendTo || defaultTarget
       if (target === true) target = defaultTarget
-      else if (this.appendTo === 'activator') target = this.$el.previousElementSibling || this.$el.nextElementSibling
+      // When appendTo is 'activator', teleport into the activator element itself.
+      else if (this.appendTo === 'activator') target = this.activatorEl
       else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
       else if (typeof target === 'object' && !target.nodeType) {
         target = defaultTarget
@@ -111,7 +120,9 @@ export default {
           if (typeof document === 'undefined') return null
           return document.querySelector(this.activator)
         }
-        return this.$el.nextElementSibling
+        // For slot-based activators the component root ($el) is a comment fragment anchor in
+        // Vue 3 multi-root components; nextElementSibling is the activator slot's first real element.
+        return this.$el?.nextElementSibling || null
       },
       set () {}
     },
@@ -154,6 +165,7 @@ export default {
     // next open starts hidden. Done here rather than on close() to let the leave animation play.
     onAfterLeave () {
       this.detachableReady = false
+      this.detachableEl = null
     },
 
     unbindActivatorDocEvents () {
@@ -166,6 +178,61 @@ export default {
       }
     },
 
+    /**
+     * Single delegating handler for auto-attached slot-activator DOM events.
+     * Reads the current activatorEventHandlers computed each invocation so that changes to
+     * `disable`, `showOnHover`, etc. are always reflected without re-attaching.
+     */
+    _handleActivatorEvent (e) {
+      const handler = this.activatorEventHandlers[e.type]
+      if (handler) handler(e)
+    },
+
+    /**
+     * Attach DOM event listeners directly to the activator slot's root element.
+     * Called once from mounted(); a single delegating handler covers all event types so we never
+     * need to re-attach when props like `disable` or `showOnHover` change.
+     * ! \ This function uses the DOM - NO SSR.
+     */
+    _attachActivatorListeners () {
+      if (typeof document === 'undefined') return
+      const el = this.activatorEl
+      if (!el) return
+
+      // Inspect the activator slot's first VNode for pre-declared event handlers.
+      // When the slot root already declares onClick / onMouseenter etc. — whether on a native
+      // element (w-select, w-autocomplete) or on a component (w-button @click="...") — the
+      // parent is managing that event itself. Skip auto-attaching the competing handler to avoid
+      // open/close races (both toggle() and the explicit handler firing on the same click).
+      // With the new API, the default slot is the activator (no #activator slot used).
+      let existingHandlers = {}
+      const activatorSlot = this.$slots.activator || this.$slots.default
+      if (activatorSlot) {
+        const vnodes = activatorSlot()
+        const firstVnode = vnodes?.[0]
+        existingHandlers = firstVnode?.props || {}
+      }
+
+      this._activatorDomEl = el
+      this._activatorAttachedEvents = []
+      ;['click', 'mouseenter', 'mouseleave', 'focus', 'blur'].forEach(evt => {
+        // Skip if the slot element already binds this event (camelCase Vue prop name: onClick etc.).
+        const vueProp = `on${evt.charAt(0).toUpperCase()}${evt.slice(1)}`
+        if (existingHandlers[vueProp]) return
+        el.addEventListener(evt, this._handleActivatorEvent)
+        this._activatorAttachedEvents.push(evt)
+      })
+    },
+
+    _detachActivatorListeners () {
+      if (!this._activatorDomEl) return
+      ;(this._activatorAttachedEvents || []).forEach(evt => {
+        this._activatorDomEl.removeEventListener(evt, this._handleActivatorEvent)
+      })
+      this._activatorDomEl = null
+      this._activatorAttachedEvents = []
+    },
+
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     async open (e) {
       if (this.disable) return
@@ -181,13 +248,22 @@ export default {
 
       // Hide before entering the DOM; handles rapid re-opens where detachableReady is still true.
       this.detachableReady = false
+
+      // Resolve the teleport target here, at open()-time, so the DOM is fully committed and
+      // detachableDefaultRoot() (for nested menus/tooltips) returns the correct element.
+      // Setting teleportTarget and detachableVisible in the same synchronous block lets Vue
+      // batch both into a single render — the content is never shown at the wrong location.
+      if (typeof document !== 'undefined') this.teleportTarget = this.appendToTarget
+
       this.detachableVisible = true
 
       // If the activator is external, there might be multiple,
       // so on open, the activator will be set to the event target.
       if (this.activator) this.activatorEl = e.target
 
-      await this.insertInDOM()
+      // Wait for Vue Teleport to render the floating element into the target DOM node.
+      await this.$nextTick()
+      this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
 
       if (this.minWidth === 'activator' && this.activatorEl) {
         this.activatorWidth = this.activatorEl.offsetWidth
@@ -361,32 +437,6 @@ export default {
       }
     },
 
-    insertInDOM () {
-      return new Promise(resolve => {
-        this.$nextTick(() => {
-          this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
-
-          // Move the tooltip/menu elsewhere in the DOM.
-          if (this.detachableEl && this.appendToTarget) this.appendToTarget.appendChild(this.detachableEl)
-          resolve()
-        })
-      })
-    },
-
-    removeFromDOM () {
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('mousedown', this.onOutsideMousedown)
-      }
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', this.onResize)
-      }
-      if (this.detachableEl?.parentNode) {
-        this.detachableVisible = false
-        this.detachableEl.remove()
-        this.detachableEl = null
-      }
-    },
-
     // If the activator is external, add event listeners to the document and check the target is
     // the activator when toggling.
     // This way, the activator can be a future DOM element, that is not yet in the DOM.
@@ -401,8 +451,8 @@ export default {
         eventName = eventName.replace('mouseenter', 'mouseover').replace('mouseleave', 'mouseout')
         const handlerWrap = e => {
           // The activator can be a DOM string selector a ref or a DOM node.
-          if (activatorIsString && e.target?.matches && e.target.matches(this.activator)) handler(e)
-          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target)) handler(e)
+          if (activatorIsString && e.target?.matches?.(this.activator)) handler(e)
+          else if (e.target === this.activatorEl || this.activatorEl?.contains(e.target)) handler(e)
         }
         document.addEventListener(eventName, handlerWrap)
         // The event listeners handlers have to be removed the exact same way they have been attached.
@@ -414,14 +464,18 @@ export default {
   },
 
   mounted () {
-    // If the activator is external.
-    if (this.activator) this.bindActivatorEvents()
-
-    // If the activator seems to be undefined, it is probably a DOM node or Vue ref,
-    // so check it on nextTick.
+    if (this.activator) {
+      // External activator: attach via document-level delegation.
+      this.bindActivatorEvents()
+    }
     else {
+      // Slot-based activator: auto-attach DOM listeners to the slot's root element on next tick
+      // so the slot content is guaranteed to be in the DOM.
       this.$nextTick(() => {
+        // Re-check activator prop (might have resolved from a Vue ref after the tick).
         if (this.activator) this.bindActivatorEvents()
+        else this._attachActivatorListeners()
+
         if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
       })
     }
@@ -438,10 +492,8 @@ export default {
   unmounted () {
     this.close()
 
-    this.removeFromDOM()
-
-    // Remove the event listeners the exact same way they have been defined.
-    // Fixes issues on hot-reloading.
+    // Clean up slot-activator DOM listeners and external-activator document listeners.
+    this._detachActivatorListeners()
     this.unbindActivatorDocEvents()
   },
 
@@ -451,6 +503,8 @@ export default {
         this.unbindActivatorDocEvents()
         if (!disabled) this.bindActivatorEvents()
       }
+      // For slot-based activators, _handleActivatorEvent always reads the current
+      // activatorEventHandlers computed which already respects `disable`, so no re-attach needed.
       if (disabled) this.close()
       else if (this.modelValue) this.open({ target: this.activatorEl })
     },
@@ -461,9 +515,10 @@ export default {
         else if (!bool) this.close()
       }
     },
+
+    // Keep teleportTarget in sync when the appendTo prop changes at runtime.
     appendTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
+      if (typeof document !== 'undefined') this.teleportTarget = this.appendToTarget
     }
   }
 }

package/src/wave-ui/mixins/ripple.js

@@ -21,7 +21,7 @@ export default {
      * Resolve host for applyRipple. Vue (and some browsers) can leave `event.currentTarget` null
      * on delegated handlers, which would otherwise skip the ripple entirely.
      */
-    onRipple (e, hostEl) {
+    onRipple (e, hostEl, options) {
       if (!this.rippleActive || !e) return
       let host = hostEl ?? e.currentTarget
       if (!host?.getBoundingClientRect) {
@@ -33,7 +33,7 @@ export default {
         host = this.$el
       }
       if (!host?.getBoundingClientRect) return
-      applyRipple(host, e)
+      applyRipple(host, e, options)
     }
   }
 }

package/src/wave-ui/scss/_base.scss

@@ -1,11 +1,43 @@
-@use "sass:map";
 @use "variables" as *;
 
 // The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
 // variable presets.
 :root {
-  --w-base-increment: #{$base-increment};
+  --w-base-font-size: 14px;
+  // Keeps spacing in sync when only --w-base-font-size is overridden (matches former Sass rounding).
+  --w-base-increment: round(nearest, calc(var(--w-base-font-size) / 4), 1px);
+  // Sass-only: must match $css-scope in _layout.scss and what dynamic-css reads for injected rules.
   --w-css-scope: #{$css-scope};
+  --w-layout-padding: 16px;
+  --w-border-radius: 4px;
+  --w-border-width: 1px;
+  --w-border-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 12%, transparent)};
+  --w-border: var(--w-border-width) solid var(--w-border-color);
+  --w-transition-duration: 0.25s;
+  --w-transition-duration-fast: 0.15s;
+  --w-transition-timing-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+  --w-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                  0 2px 2px 0 rgba(0, 0, 0, 0.15),
+                  0 1px 5px 0 rgba(0, 0, 0, 0.15);
+  --w-form-field-height: round(nearest, calc(2 * var(--w-base-font-size)), 1px);
+  // Even px step (same as former 2 * round(1.3 * $base-font-size / 2)).
+  --w-small-form-el-size: round(nearest, calc(1.3 * var(--w-base-font-size)), 2px);
+  --w-scrollbar-size: 8px;
+
+  @for $i from -6 through -1 {
+    --w-shadow-n#{-1 * $i}: 0 0 round(nearest, calc(#{$i} * var(--w-base-increment)), 1px) rgba(0, 0, 0, max(0.15, calc(0.15 * #{-$i} / 2))) inset;
+  }
+  --w-shadow-0: none;
+  @for $i from 1 through 6 {
+    --w-shadow-#{$i}: 0 0 1px rgba(0, 0, 0, 0.1),
+      round(nearest, calc(var(--w-base-increment) * #{$i} / 4), 1px) round(nearest, calc(var(--w-base-increment) * #{$i} / 4), 1px) round(nearest, calc(#{$i} * var(--w-base-increment)), 1px) rgba(0, 0, 0, max(0.15, calc(0.15 * #{$i} / 2)));
+  }
+
+  --w-base-color-muted: #{color-mix(in srgb, var(--w-base-color) 70%, transparent)};
+  --w-overlay-scrim-color: #{color-mix(in srgb, #000 30%, transparent)};
+  --w-surface-hover-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-surface-active-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent)};
+  --w-surface-selected-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
   --w-contrast-bg-o025-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2.5%, transparent)};
   --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
   --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
@@ -18,26 +50,59 @@
   --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
   --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};
 
+  --w-detachable-bg-color: var(--w-base-bg-color);
+  --w-detachable-color: var(--w-base-color);
+  --w-confirm-bg-color: var(--w-detachable-bg-color);
+  --w-confirm-color: var(--w-detachable-color);
+  --w-dialog-bg-color: var(--w-base-bg-color);
+  --w-divider-color: var(--w-border-color);
+  --w-drawer-max-size: 380px;
+  --w-drawer-bg-color: var(--w-base-bg-color);
+  --w-menu-bg-color: var(--w-detachable-bg-color);
+  --w-menu-color: var(--w-detachable-color);
+  --w-progress-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
+  --w-rating-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-slider-height: var(--w-base-increment);
+  --w-slider-track-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
+  --w-slider-thumb-button-bg-color: var(--w-base-bg-color);
+  --w-slider-thumb-label-bg-color: var(--w-base-bg-color);
+  --w-slider-thumb-label-color: #{color-mix(in srgb, var(--w-base-color) 75%, transparent)};
+  --w-slider-step-label-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
+  --w-slider-step-label-color: #{color-mix(in srgb, var(--w-base-color) 50%, transparent)};
+  --w-switch-inactive-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-switch-thumb-color: var(--w-base-bg-color);
+  --w-table-tr-odd-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2%, transparent)};
+  --w-table-tr-hover-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-table-color: #{color-mix(in srgb, var(--w-contrast-color) 70%, transparent)};
+  --w-textarea-line-height: 1.2;
+  --w-timeline-bullet-color: var(--w-base-bg-color);
+  --w-timeline-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-toolbar-max-size: 380px;
+  --w-toolbar-bg-color: var(--w-base-bg-color);
+  --w-tooltip-bg-color: var(--w-detachable-bg-color);
+  --w-tooltip-color: var(--w-detachable-color);
+  --w-tooltip-border-color: var(--w-border-color);
+
   background-color: var(--w-base-bg-color);
   color: var(--w-base-color);
 }
 
 :root[data-theme="light"] {
-  --w-base-bg-color: #{map.get($theme-light, 'base-bg-color')};
-  --w-base-color: #{map.get($theme-light, 'base-color')};
-  --w-contrast-bg-color: #{map.get($theme-light, 'contrast-bg-color')};
-  --w-contrast-color: #{map.get($theme-light, 'contrast-color')};
-  --w-caption-color: #{map.get($theme-light, 'caption-color')};
-  --w-disabled-color: #{map.get($theme-light, 'disabled-color')};
+  --w-base-bg-color: #fff;
+  --w-base-color: #000;
+  --w-contrast-bg-color: #000;
+  --w-contrast-color: #fff;
+  --w-caption-color: #a0a0a0;
+  --w-disabled-color: #ccc;
 }
 
 :root[data-theme="dark"] {
-  --w-base-bg-color: #{map.get($theme-dark, 'base-bg-color')};
-  --w-base-color: #{map.get($theme-dark, 'base-color')};
-  --w-contrast-bg-color: #{map.get($theme-dark, 'contrast-bg-color')};
-  --w-contrast-color: #{map.get($theme-dark, 'contrast-color')};
-  --w-caption-color: #{map.get($theme-dark, 'caption-color')};
-  --w-disabled-color: #{map.get($theme-dark, 'disabled-color')};
+  --w-base-bg-color: #222;
+  --w-base-color: #fff;
+  --w-contrast-bg-color: #fff;
+  --w-contrast-color: #000;
+  --w-caption-color: #6e6e6e;
+  --w-disabled-color: #4a4a4a;
 }
 
 * {
@@ -72,13 +137,13 @@ a {text-decoration: none;}
 }
 
 .w-main {
-  padding-left: 3 * $base-increment;
-  padding-right: 3 * $base-increment;
+  padding-left: calc(3 * var(--w-base-increment));
+  padding-right: calc(3 * var(--w-base-increment));
 }
 
 // Structure classes.
 // ----------------------------------------------
 .content-wrap {
   position: relative;
-  padding: $layout-padding;
+  padding: var(--w-layout-padding);
 }

package/src/wave-ui/scss/_colors.scss

@@ -1,4 +1,3 @@
-@use 'sass:color';
 @use 'variables' as *;
 
 #{$css-scope} {
@@ -29,82 +28,14 @@
   // For each color, create a [color] and a [color]--bg associated classes,
   // + 6 shades lighter and 6 shades darker.
   @each $label, $color in $colors {
-    .#{$label}--bg {background-color: $color;}
-    .#{$label} {color: $color;}
+    .#{$label}--bg {background-color: var(--w-#{$label}-color);}
+    .#{$label} {color: var(--w-#{$label}-color);}
 
     @for $i from 1 through 6 {
-      $light-increment: 7.5;
-      $light-offset: 0;
-      $dark-increment: 6.2;
-      // Some color shades need bigger or smaller increments to end up with the same scale.
-      @if $label == 'deep-orange' {
-        $light-increment: 6.4;
-      }
-      @if $label == 'orange' {
-      }
-      @else if $label == 'green' {
-        $light-increment: 7.6;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'amber' {
-      }
-      @else if $label == 'pink' {
-        $light-increment: 6.7;
-        $light-offset: -4;
-      }
-      @else if $label == 'red' {
-        $light-increment: 6.5;
-        $light-offset: -1;
-      }
-      @else if $label == 'indigo' {
-        $light-increment: 8;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'deep-purple' {
-        $light-increment: 8;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'light-blue' {
-        $light-increment: 7.8;
-      }
-      @else if $label == 'light-green' {
-        $light-increment: 6;
-        $light-offset: -5;
-      }
-      @else if $label == 'lime' {
-        $light-increment: 6.2;
-        $light-offset: -6;
-      }
-      @else if $label == 'yellow' {
-        $light-increment: 5.5;
-        $light-offset: -8;
-      }
-      @else if $label == 'purple' {
-        $light-increment: 6.5;
-        $light-offset: -8.5;
-      }
-      @else if $label == 'cyan' {
-        $light-increment: 9.4;
-        $light-offset: 6.5;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'teal' {
-        $light-increment: 9.6;
-        $light-offset: 5;
-        $dark-increment: 5.4;
-      }
-      @else if $label == 'blue' {
-        $light-increment: 6.8;
-        $dark-increment: 6.8;
-      }
-      @else if $label == 'brown' {
-        $light-increment: 8.8;
-        $dark-increment: 5;
-      }
-      .#{$label}-light#{$i}--bg {background-color: color.adjust($color, $lightness: $light-increment * $i * 1% - $light-offset);}
-      .#{$label}-light#{$i} {color: color.adjust($color, $lightness: $light-increment * $i * 1% - $light-offset);}
-      .#{$label}-dark#{$i}--bg {background-color: color.adjust($color, $lightness: - $dark-increment * $i * 1%);}
-      .#{$label}-dark#{$i} {color: color.adjust($color, $lightness: - $dark-increment * $i * 1%);}
+      .#{$label}-light#{$i}--bg {background-color: var(--w-#{$label}-light#{$i}-color);}
+      .#{$label}-light#{$i} {color: var(--w-#{$label}-light#{$i}-color);}
+      .#{$label}-dark#{$i}--bg {background-color: var(--w-#{$label}-dark#{$i}-color);}
+      .#{$label}-dark#{$i} {color: var(--w-#{$label}-dark#{$i}-color);}
     }
   }
 

package/src/wave-ui/scss/_layout.scss

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use 'variables' as *;
 
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
@@ -73,18 +72,18 @@
     // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
     // ----------------------------------------------
     @for $i from 1 through 6 {
-      .bd#{$i} {border: $i + px solid $border-color;}
+      .bd#{$i} {border: #{$i}px solid var(--w-border-color);}
     }
-    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
-    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
-    .bdl1 {border-left: 1px solid $border-color;}
-    .bdr1 {border-right: 1px solid $border-color;}
-    .bdt1 {border-top: 1px solid $border-color;}
-    .bdb1 {border-bottom: 1px solid $border-color;}
+    .bdx1 {border-left: var(--w-border);border-right: var(--w-border);}
+    .bdy1 {border-top: var(--w-border);border-bottom: var(--w-border);}
+    .bdl1 {border-left: var(--w-border);}
+    .bdr1 {border-right: var(--w-border);}
+    .bdt1 {border-top: var(--w-border);}
+    .bdb1 {border-bottom: var(--w-border);}
     .bd0 {border: none;}
 
     @for $i from 1 through 6 {
-      .bdrs#{$i} {border-radius: math.round($i * $base-increment);}
+      .bdrs#{$i} {border-radius: calc(#{$i} * var(--w-base-increment));}
     }
     .bdrsr {border-radius: 999em;}
     .bdrsm {border-radius: 100%;}
@@ -95,36 +94,33 @@
     // ----------------------------------------------
     @for $i from -6 through -1 {
       .sh#{$i} {
-        box-shadow: 0 0 (-1 * math.round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+        box-shadow: var(--w-shadow-n#{-1 * $i});
       }
     }
     @for $i from 1 through 6 {
       .sh#{$i} {
-        box-shadow: 0 0 1px rgba(#000, 0.1),
-                    math.round($base-increment * divide($i, 4)) math.round($base-increment * divide($i, 4)) math.round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+        box-shadow: var(--w-shadow-#{$i});
       }
     }
-    .sh0 {box-shadow: none;}
+    .sh0 {box-shadow: var(--w-shadow-0);}
     // ----------------------------------------------
 
     // Spaces.
     // ----------------------------------------------
     // Margin.
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .ma#{$i} {margin: $number;}
-      @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
+      .ma#{$i} {margin: calc(#{$i} * var(--w-base-increment));}
+      @if ($i > 0) {.ma-#{$i} {margin: calc(-#{$i} * var(--w-base-increment));}}
     }
     .maa {margin: auto;}
     .ma0 {margin: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .mx#{$i} {margin-left: $number;margin-right: $number;}
-      .my#{$i} {margin-top: $number;margin-bottom: $number;}
+      .mx#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));margin-right: calc(#{$i} * var(--w-base-increment));}
+      .my#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));margin-bottom: calc(#{$i} * var(--w-base-increment));}
       @if ($i > 0) {
-        .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
-        .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+        .mx-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));margin-right: calc(-#{$i} * var(--w-base-increment));}
+        .my-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));margin-bottom: calc(-#{$i} * var(--w-base-increment));}
       }
     }
     .mxa {margin-left: auto;margin-right: auto;}
@@ -133,16 +129,15 @@
     .my0 {margin-top: 0;margin-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .mt#{$i} {margin-top: $number;}
-      .mr#{$i} {margin-right: $number;}
-      .mb#{$i} {margin-bottom: $number;}
-      .ml#{$i} {margin-left: $number;}
+      .mt#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));}
+      .mr#{$i} {margin-right: calc(#{$i} * var(--w-base-increment));}
+      .mb#{$i} {margin-bottom: calc(#{$i} * var(--w-base-increment));}
+      .ml#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));}
       @if ($i > 0) {
-        .mt-#{$i} {margin-top: -$number;}
-        .mr-#{$i} {margin-right: -$number;}
-        .mb-#{$i} {margin-bottom: -$number;}
-        .ml-#{$i} {margin-left: -$number;}
+        .mt-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));}
+        .mr-#{$i} {margin-right: calc(-#{$i} * var(--w-base-increment));}
+        .mb-#{$i} {margin-bottom: calc(-#{$i} * var(--w-base-increment));}
+        .ml-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));}
       }
     }
     .mta {margin-top: auto;}
@@ -156,25 +151,22 @@
 
     // Padding.
     @for $i from 1 through 12 {
-      $number: math.round($i * $base-increment);
-      .pa#{$i} {padding: $number;}
+      .pa#{$i} {padding: calc(#{$i} * var(--w-base-increment));}
     }
     .pa0 {padding: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .px#{$i} {padding-left: $number;padding-right: $number;}
-      .py#{$i} {padding-top: $number;padding-bottom: $number;}
+      .px#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));padding-right: calc(#{$i} * var(--w-base-increment));}
+      .py#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));padding-bottom: calc(#{$i} * var(--w-base-increment));}
     }
     .px0 {padding-left: 0;padding-right: 0;}
     .py0 {padding-top: 0;padding-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .pt#{$i} {padding-top: $number;}
-      .pr#{$i} {padding-right: $number;}
-      .pb#{$i} {padding-bottom: $number;}
-      .pl#{$i} {padding-left: $number;}
+      .pt#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));}
+      .pr#{$i} {padding-right: calc(#{$i} * var(--w-base-increment));}
+      .pb#{$i} {padding-bottom: calc(#{$i} * var(--w-base-increment));}
+      .pl#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));}
     }
     .pt0 {padding-top: 0;}
     .pr0 {padding-right: 0;}
@@ -184,14 +176,14 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes below, math.round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, round(nearest, …, 1px) matches former Sass rounding for px base sizes.
     // Different heights with a mix of odd and even numbers will misalign
     // when vertically centering (vertical-align or align-items center).
-    .size--xs {font-size: math.round(0.8 * $base-font-size);}
-    .size--sm {font-size: math.round(0.9 * $base-font-size);}
-    .size--md {font-size: math.round(1 * $base-font-size);}
-    .size--lg {font-size: math.round(1.2 * $base-font-size);}
-    .size--xl {font-size: math.round(1.4 * $base-font-size);}
+    .size--xs {font-size: round(nearest, calc(0.8 * var(--w-base-font-size)), 1px);}
+    .size--sm {font-size: round(nearest, calc(0.9 * var(--w-base-font-size)), 1px);}
+    .size--md {font-size: round(nearest, calc(1 * var(--w-base-font-size)), 1px);}
+    .size--lg {font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);}
+    .size--xl {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
     // ----------------------------------------------
 
     // Grid system.
@@ -228,6 +220,6 @@
 }
 
 @for $i from 1 through 12 {
-  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: math.round($base-increment * $i);}
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: calc(#{$i} * var(--w-base-increment));}
 }
 .w-flex.gap0, .w-grid.gap0 {gap: 0;}

package/src/wave-ui/scss/_ripple.scss

@@ -20,13 +20,13 @@
   transform: scale(0);
   opacity: 0.5;
   // currentColor is often invisible on filled buttons (e.g. white on white); use a neutral ink.
-  background-color: rgba(#000, 0.22);
+  background-color: color-mix(in srgb, #000 22%, transparent);
   will-change: transform, opacity;
   animation: w-ripple-ink-expand 0.65s ease-out forwards;
 }
 
 html[data-theme='dark'] .w-ripple__ink {
-  background-color: rgba(#fff, 0.2);
+  background-color: color-mix(in srgb, #fff 20%, transparent);
 }
 
 @keyframes w-ripple-ink-expand {