wave-ui 3.27.2 → 4.0.0

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

@@ -9,7 +9,9 @@ ul.w-tree(:class="classes")
       :is="getTreeItemComponent(item)"
       v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
       @click="!disabled && !item.disabled && onLabelClick(item, $event)"
+      @pointerdown="onLabelPointerDown(item, $event)"
       @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
+      :class="itemLabelClasses(item)"
       :tabindex="getTreeItemTabindex(item)")
       //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
@@ -59,6 +61,7 @@ ul.w-tree(:class="classes")
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
 import { consoleWarn } from '../utils/console'
 /**
  * @todo:
@@ -67,6 +70,9 @@ import { consoleWarn } from '../utils/console'
 
 export default {
   name: 'w-tree',
+
+  mixins: [RippleMixin],
+
   props: {
     modelValue: { type: [Object, Array] },
     data: { type: [Object, Array], required: true },
@@ -200,6 +206,16 @@ export default {
       return true // Just to chain instructions.
     },
 
+    isItemRippleActive (item) {
+      return this.rippleActive && this.selectable && !this.disabled && !item.disabled
+    },
+
+    itemLabelClasses (item) {
+      return {
+        'w-ripple': this.isItemRippleActive(item)
+      }
+    },
+
     onLabelClick (item, e) {
       const route = item[this.itemRouteKey]
       if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
@@ -212,6 +228,11 @@ export default {
       this.emitItemSelection(item, e) // Always emitting on click, but different event for selection.
     },
 
+    onLabelPointerDown (item, e) {
+      if (!this.isItemRippleActive(item) || e.target.closest?.('.w-tree__item-expand')) return
+      this.onRipple(e)
+    },
+
     onLabelKeydown (item, e) {
       // Keys: 13 enter, 32 space, 37 arrow left, 38 arrow up, 39 arrow right, 40 arrow down.
       if (!(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) && [13, 32, 37, 38, 39, 40].includes(e.keyCode)) {
@@ -339,16 +360,14 @@ export default {
 </script>
 
 <style lang="scss">
-$expand-icon-size: 20px;
-
 .w-tree {
+  --w-tree-expand-icon-size: 20px;
   margin: 0;
 
   // Tree items.
   // ------------------------------------------------------
   &__item {list-style-type: none;}
-  &__item--branch {}
-  &__item--leaf {margin-left: $base-increment * 5 + 2px;}
+  &__item--leaf {margin-left: calc(var(--w-base-increment) * 5 + 2px);}
   &--no-expand-button &__item--leaf {margin-left: 0;}
 
   // Tree item label.
@@ -364,21 +383,21 @@ $expand-icon-size: 20px;
       position: absolute;
       top: -1px;
       bottom: -1px;
-      left: - $base-increment + 2px;
-      right: - $base-increment - 2px;
-      border-radius: $border-radius;
+      left: calc(var(--w-base-increment) * -1 + 2px);
+      right: calc(var(--w-base-increment) * -1 - 2px);
+      border-radius: var(--w-border-radius);
     }
-    &:hover:before {background-color: $primary;opacity: 0.1;}
-    &:focus-visible:before {background-color: $primary;opacity: 0.15;}
+    &:hover:before {background-color: var(--w-primary-color);opacity: 0.1;}
+    &:focus-visible:before {background-color: var(--w-primary-color);opacity: 0.15;}
   }
   &.w-tree--selectable &__item-label {cursor: pointer;}
   &.w-tree--selectable &__item--disabled &__item-label {cursor: auto;}
   &__item--leaf &__item-label:before {
-    left: - $base-increment;
-    right: - $base-increment;
+    left: calc(var(--w-base-increment) * -1);
+    right: calc(var(--w-base-increment) * -1);
   }
   &__item--selected > &__item-label:before {
-    background-color: $primary;
+    background-color: var(--w-primary-color);
     opacity: 0.25;
   }
   &__item--disabled &__item-label {opacity: 0.5;}
@@ -388,21 +407,21 @@ $expand-icon-size: 20px;
 
   &__item--branch > &__item-label {cursor: pointer;}
   &__item--disabled > &__item-label {
-    color: $disabled-color;
+    color: var(--w-disabled-color);
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;
   }
   &__item--unexpandable > &__item-label {
-    margin-left: $expand-icon-size + 2px;
+    margin-left: calc(var(--w-tree-expand-icon-size) + 2px);
     cursor: auto;
   }
   &--disabled &__item-label {cursor: auto;}
   &--disabled &__item--branch > &__item-label {opacity: 0.5;}
 
-  &__item-icon {margin-right: $base-increment;}
+  &__item-icon {margin-right: var(--w-base-increment);}
 
   // Recursive children.
   // ------------------------------------------------------
-  .w-tree {margin-left: $base-increment * 5;}
+  .w-tree {margin-left: calc(var(--w-base-increment) * 5);}
 }
 </style>

package/src/wave-ui/core.js

@@ -4,6 +4,7 @@ import { consoleWarn } from './utils/console'
 import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
 import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
 import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
+import { waveRippleDirective } from './utils/wave-ripple-directive'
 import './scss/index.scss'
 
 let mounted = false
@@ -90,7 +91,7 @@ export default class WaveUI {
       document.documentElement.setAttribute('data-theme', theme)
       document.head.querySelector('#wave-ui-colors')?.remove?.()
       const themeColors = this.config.colors[this.theme]
-      injectColorsCSSInDOM(themeColors, this.config.css.colorShadeCssVariables)
+      injectColorsCSSInDOM(themeColors, colorPalette, this.config.css.colorShadeCssVariables)
       this.colors = flattenColors(themeColors, colorPalette)
     },
 
@@ -122,6 +123,7 @@ export default class WaveUI {
         window.addEventListener('scroll', f)
       }
     })
+    app.directive('waveRipple', waveRippleDirective)
 
     // Register a-la-carte components from the given list.
     const { components = {} } = options || {}
@@ -145,6 +147,14 @@ export default class WaveUI {
           const wApp = document.querySelector(config.on) || document.body
           wApp.classList.add('w-app')
 
+          // Add any custom app classes from config.
+          if (config.css.appClasses) {
+            const classesToAdd = typeof config.css.appClasses === 'string'
+              ? config.css.appClasses.split(' ').filter(c => c)
+              : config.css.appClasses
+            if (classesToAdd.length) wApp.classList.add(...classesToAdd)
+          }
+
           if (config.theme === 'auto') detectOSDarkMode($waveui) // Also switches the theme.
           else $waveui.switchTheme(config.theme, true)
 

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

@@ -0,0 +1,39 @@
+import { applyRipple, isRippleEnabled } from '../utils/ripple'
+
+export default {
+  inject: {
+    $waveui: { from: '$waveui', default: () => ({ config: { ripple: true } }) }
+  },
+
+  props: {
+    /** Set to `true` to disable the ripple for this component only. */
+    noRipple: { type: Boolean, default: undefined }
+  },
+
+  computed: {
+    rippleActive () {
+      return isRippleEnabled(this.noRipple ? false : undefined, this.$waveui)
+    }
+  },
+
+  methods: {
+    /**
+     * 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, options) {
+      if (!this.rippleActive || !e) return
+      let host = hostEl ?? e.currentTarget
+      if (!host?.getBoundingClientRect) {
+        const raw = e.target
+        const el = raw?.nodeType === 1 ? raw : raw?.parentElement
+        host = el?.closest?.('.w-ripple') ?? null
+      }
+      if (!host?.getBoundingClientRect && this.$el instanceof Element && this.$el.classList?.contains('w-ripple')) {
+        host = this.$el
+      }
+      if (!host?.getBoundingClientRect) return
+      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);}
     }
   }