wave-ui 2.47.0 → 3.0.0

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

@@ -4,22 +4,27 @@ ul.w-tree(:class="classes")
     v-for="(item, i) in currentDepthItems"
     :key="i"
     :class="itemClasses(item)")
-    .w-tree__item-label(
-      @click="!disabled && onLabelClick(item, $event)"
-      @keydown="!disabled && onLabelKeydown(item, $event)"
-      :tabindex="!disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+    //- The keys `route` & `disabled` are always present in any currentDepthItems.
+    component.w-tree__item-label(
+      :is="!disabled && !item.disabled && item.route ? (!$router || hasExternalLink(item) ? 'a' : 'router-link') : 'div'"
+      v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
+      @click="!disabled && !item.disabled && onLabelClick(item, $event)"
+      @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
+      :tabindex="!disabled && !item.disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+      //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
         v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
+        @click.stop="!disabled && !item.disabled && onLabelClick(item, $event)"
         color="inherit"
         :icon="(item.open && expandOpenIcon) || expandIcon"
         :icon-props="{ rotate90a: !item.open }"
         :tabindex="-1"
-        :disabled="disabled"
+        :disabled="disabled || item.disabled"
         text
         sm)
-      slot(name="item-label" :item="item.originalItem" :depth="depth" :open="item.open")
-        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon") {{ itemIcon(item) }}
-        span {{ item.label }}
+      slot(name="item" :item="item.originalItem" :depth="depth" :open="item.open")
+        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
+        span(v-html="item.label")
         span.ml1(v-if="counts && (item.children || item.branch)").
           ({{ item.originalItem.children?.length || 0 }})
     component(
@@ -39,16 +44,15 @@ ul.w-tree(:class="classes")
         @click="$emit('click', $event)"
         @select="$emit('select', $event)"
         @update:model-value="$emit('update:model-value', $event)")
-        template(#item-label="{ item, depth, open }")
-          slot(name="item-label" :item="item" :depth="depth" :open="open")
+        template(#item="{ item, depth, open }")
+          slot(name="item" :item="item" :depth="depth" :open="open")
 </template>
 
 <script>
+import { consoleWarn } from '../utils/console'
 /**
- * @todo things to support:
- * - items routes
- * - icon per item
- * - left border?
+ * @todo:
+ * - option to add a left border.
  **/
 
 export default {
@@ -70,8 +74,14 @@ export default {
     noTransition: { type: Boolean },
     selectable: { type: Boolean },
     // By default it only reacts to items count change (added or deleted items) not property of items change.
-    depthReactivity: { type: Boolean },
-    counts: { type: Boolean }
+    deepReactivity: { type: Boolean },
+    counts: { type: Boolean },
+    itemIconKey: { type: String, default: 'icon' }, // Support a different icon per item.
+    iconColor: { type: String }, // Applies a color on all the label item icons.
+    itemIconColorKey: { type: String, default: 'iconColor' }, // Applies a specific color on each label item icons.
+    itemRouteKey: { type: String, default: 'route' }, // Uses a router link if the item has the `route` key.
+    itemDisabledKey: { type: String, default: 'disabled' }, // Disables the item click and selection.
+    itemOpenKey: { type: String, default: 'open' } // Open the item by default.
   },
 
   emits: ['update:model-value', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
@@ -97,6 +107,12 @@ export default {
     updateCurrentDepthTree (items, oldItems = []) {
       this.currentDepthItems = []
 
+      if (!Array.isArray(items) && typeof items !== 'object') {
+        return consoleWarn(`[w-tree] the tree items must be of type array or object, ${typeof items} received.`, items)
+      }
+
+      if (!Array.isArray(items)) items = [items]
+
       items.forEach((item, i) => {
         this.currentDepthItems.push({
           originalItem: item, // Store the original item to return it on event emits.
@@ -104,8 +120,10 @@ export default {
           label: item.label,
           children: !!item.children, // The children tree remains available in originalItem.
           branch: item.branch,
+          route: item[this.itemRouteKey],
+          disabled: item[this.itemDisabledKey],
           depth: this.depth,
-          open: oldItems[i]?.open || false
+          open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey])
         })
       })
     },
@@ -132,6 +150,9 @@ export default {
     },
 
     onLabelClick (item, e) {
+      const route = item[this.itemRouteKey]
+      if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
+
       this.$emit('click', { item: item.originalItem, depth: this.depth, e })
       if (item.children || (item.branch && !this.unexpandableEmpty)) this.expandDepth(item)
 
@@ -168,6 +189,7 @@ export default {
               treeTabbableItems[i + indexModifier] && treeTabbableItems[i + indexModifier].focus()
               return true // Break the loop.
             }
+            return false
           })
         }
       }
@@ -182,6 +204,7 @@ export default {
      * @param {String} selector any valid DOM selector to match the siblings.
      */
     getPreviousSibling (node, selector) {
+      // eslint-disable-next-line no-unmodified-loop-condition
       while (selector && (node = node.previousElementSibling)) {
         if (node.matches(selector)) return node
       }
@@ -195,6 +218,7 @@ export default {
      * @param {String} selector any valid DOM selector to match the siblings.
      */
     getNextSibling (node, selector) {
+      // eslint-disable-next-line no-unmodified-loop-condition
       while (selector && (node = node.nextElementSibling)) {
         if (node.matches(selector)) return node
       }
@@ -207,15 +231,20 @@ export default {
 
     itemIcon (item) {
       return (
-        item.originalItem.icon ||
+        item.originalItem[this.itemIconKey] ||
         (!item.children && !item.branch && this.leafIcon) ||
         ((item.children || item.branch) && ((item.open && this.branchOpenIcon) || this.branchIcon))
       )
     },
 
+    hasExternalLink (item) {
+      return /^(https?:)?\/\/|mailto:|tel:/.test(item[this.itemRouteKey])
+    },
+
     itemClasses (item) {
       return {
         [item.children || item.branch ? 'w-tree__item--branch' : 'w-tree__item--leaf']: true,
+        'w-tree__item--disabled': item[this.itemDisabledKey],
         'w-tree__item--empty': item.branch && !item.children,
         'w-tree__item--unexpandable': item.branch && !item.children && this.unexpandableEmpty
       }
@@ -229,7 +258,7 @@ export default {
       // The open property of each item has to be retained from this.currentDepthItems in order to stay
       // in the same state after DOM repaint.
       items => this.updateCurrentDepthTree(items, this.currentDepthItems),
-      { deep: !!this.depthReactivity } // Deep watching is more resource consuming. Only enable on user demand.
+      { deep: !!this.deepReactivity } // Deep watching is more resource consuming. Only enable on user demand.
     )
   },
 
@@ -258,6 +287,7 @@ $expand-icon-size: 20px;
     position: relative;
     display: inline-flex;
     align-items: center;
+    user-select: none;
 
     &:before {
       content: '';
@@ -268,16 +298,24 @@ $expand-icon-size: 20px;
       right: - $base-increment - 2px;
       border-radius: $border-radius;
     }
+    &:hover:before {background-color: rgba($primary, 0.05);}
     &:focus:before {background-color: rgba($primary, 0.1);}
   }
   &__item--leaf &__item-label:before {
     left: - $base-increment;
     right: - $base-increment;
   }
+  &__item--disabled &__item-label {opacity: 0.5;}
+  &__item--disabled &__item-label:before {display: none;}
 
   &__item-expand {margin-right: 2px;}
 
   &__item--branch > &__item-label {cursor: pointer;}
+  &__item--disabled > &__item-label {
+    color: $disabled-color;
+    cursor: not-allowed;
+    -webkit-tap-highlight-color: transparent;
+  }
   &__item--unexpandable > &__item-label {
     margin-left: $expand-icon-size + 2px;
     cursor: auto;

package/src/wave-ui/core.js

@@ -1,52 +1,73 @@
 import { reactive, inject } from 'vue'
-import config, { mergeConfig } from './utils/config'
-import NotificationManager from './utils/notification-manager'
-import colors from './utils/colors'
-// import * as directives from './directives'
-
-const shadeColor = (color, amount) => {
-  return '#' + color.slice(1).match(/../g)
-    .map(x => (x =+ `0x${x}` + amount, x < 0 ? 0 : ( x > 255 ? 255 : x)).toString(16).padStart(2, 0))
-    .join('')
+import { mergeConfig } from './utils/config'
+import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
+import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
+import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
+import './scss/index.scss'
+
+let mounted = false
+const detectOSDarkMode = $waveui => {
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+  $waveui.preferredTheme = matchMedia.matches ? 'dark' : 'light'
+  $waveui.switchTheme($waveui.preferredTheme)
+
+  matchMedia.addEventListener('change', event => {
+    $waveui.preferredTheme = event.matches ? 'dark' : 'light'
+    $waveui.switchTheme($waveui.preferredTheme)
+  })
 }
 
-// Keep the notification manager private.
-// @todo: find a way to use private fields with Vue 3 proxies.
-// https://github.com/tc39/proposal-class-fields/issues/106
-// https://github.com/tc39/proposal-class-fields/issues/227
-let notificationManager = null
+/**
+ * Inject presets into a Vue component props defaults before its registration into the app.
+ *
+ * @param {Object} component the Vue component to inject presets into.
+ * @param {Object} presets the presets to inject. E.g. `{ bgColor: 'green' }`.
+ */
+const injectPresets = (component, presets) => {
+  for (const preset in presets) {
+    component.props[preset].default = presets[preset]
+  }
+}
 
 export default class WaveUI {
-  static instance = null
-  static vueInstance = null // Needed until constructor is called.
-  // #notificationManager
-
-  // Public breakpoint object. Accessible from this.$waveui.breakpoint.
-  breakpoint = {
-    name: '',
-    xs: false,
-    sm: false,
-    md: false,
-    lg: false,
-    xl: false
+  static #registered = false
+
+  // Exposed as a global object and also `app.provide`d.
+  // Accessible from this.$waveui, or inject('$waveui').
+  $waveui = {
+    breakpoint: {
+      name: '',
+      xs: false,
+      sm: false,
+      md: false,
+      lg: false,
+      xl: false,
+      width: null
+    },
+    config: {},
+    colors: {}, // Object of pairs of color-name => color hex.
+    preferredTheme: null, // The user OS preferred theme (light or dark).
+    theme: null, // The current theme (light or dark).
+    _notificationManager: null,
+
+    // Callable from this.$waveui.
+    notify (...args) {
+      this._notificationManager.notify(...args)
+    },
+
+    // Callable from this.$waveui.
+    switchTheme (theme) {
+      this.theme = theme
+      document.documentElement.setAttribute('data-theme', theme)
+      document.head.querySelector('#wave-ui-colors')?.remove?.()
+      const themeColors = this.config.colors[this.theme]
+      injectColorsCSSInDOM(themeColors)
+      this.colors = flattenColors(themeColors, colorPalette)
+    }
   }
 
-  // A public object containing pairs of color-name => color hex.
-  // Accessible from anywhere via `this.$waveui.colors`.
-  // These colors generate the CSS in `w-app` on mounted.
-  colors = colors.reduce((obj, color) => {
-    obj[color.label] = color.color
-    color.shades.forEach(shade => (obj[shade.label] = shade.color))
-    return obj
-  }, { ...config.colors, black: '#000', white: '#fff', transparent: 'transparent', inherit: 'inherit' })
-
-  config = {} // Store and expose the config in the $waveui object.
-
   static install (app, options = {}) {
     // Register directives.
-    // for (const id in directives) {
-    //   if (directives[id]) app.directive(id, directives[id])
-    // }
     app.directive('focus', {
       // Wait for the next tick to focus the newly mounted element.
       mounted: el => setTimeout(() => el.focus(), 0)
@@ -62,71 +83,77 @@ export default class WaveUI {
 
     // Register a-la-carte components from the given list.
     const { components = {} } = options || {}
-    for (let id in components) {
+    for (const id in components) {
       const component = components[id]
+      // If presets are defined for this component inject them into the props defaults.
+      if (options.presets?.[component.name]) injectPresets(component, options.presets[component.name])
       app.component(component.name, component)
     }
 
     // Register mixins.
-    // app.mixin({
-    //   mounted () {
-    //   }
-    // })
+    app.mixin({
+      // Add a mixin to capture the first mounted hook, trigger the Wave UI init then unregister the mixin straight away.
+      beforeMount () {
+        if (!mounted) {
+          mounted = true
+          const $waveui = inject('$waveui')
+          const { config } = $waveui
+
+          // Add the .w-app class where defined by user or at the root.
+          const wApp = document.querySelector(config.on) || document.body
+          wApp.classList.add('w-app')
+
+          let themeColors = config.colors[config.theme]
+          if (config.theme === 'auto') {
+            detectOSDarkMode($waveui)
+            themeColors = config.colors[$waveui.preferredTheme]
+            $waveui.colors = flattenColors(themeColors, colorPalette)
+          }
+          injectColorsCSSInDOM(themeColors)
+          injectCSSInDOM($waveui)
+          injectNotifManagerInDOM(wApp, components, $waveui)
+
+          // This mixin must only run once, we can delete it.
+          app._context.mixins.find(mixin => mixin.mounted && delete mixin.mounted)
+        }
+      }
+    })
 
-    WaveUI.registered = true
+    new WaveUI(app, options)
+    WaveUI.#registered = true
   }
 
-  // Singleton.
   constructor (app, options = {}) {
-    if (WaveUI.instance) return WaveUI.instance
-
-    else {
-      if (!WaveUI.registered) app.use(WaveUI)
-      notificationManager = reactive(new NotificationManager())
-
-      // Merge user options into the default config.
-      mergeConfig(options)
-
-      // Add color shades for each custom color given in options.
-      if (config.css.colorShades) {
-        config.colorShades = {}
+    if (WaveUI.#registered) {
+      console.warn('Wave UI is already instantiated.')
+      return
+    }
 
-        for (let color in config.colors) {
-          color = { label: color, color: config.colors[color].replace('#', '') }
-          const col = color.color
-          if (col.length === 3) color.color = col[0] + '' + col[0] + col[1] + col[1] + col[2] + col[2]
+    this.$waveui._notificationManager = new NotificationManager()
 
-          this.colors[color.label] = `#${color.color}`
+    if (!options.theme) options.theme = 'light'
+    // Move colors inside a theme if there are option.colors without theme.
+    // E.g. colors: { primary, ... } & not colors: { light { primary, ... }, dark: { primary, ... } })
+    const colors = { ...options.colors }
+    if (!options.colors?.light) options.colors.light = colors
+    if (!options.colors?.dark) options.colors.dark = colors
+    // Cleanup anything else than themes in config.colors.
+    options.colors = { light: options.colors.light, dark: options.colors.dark }
 
-          for (let i = 1; i <= 3; i++) {
-            const lighterColor = shadeColor(`#${color.color}`, i * 40)
-            const darkerColor = shadeColor(`#${color.color}`, -i * 40)
-            this.colors[`${color.label}-light${i}`] = lighterColor
-            this.colors[`${color.label}-dark${i}`] = darkerColor
+    // Merge user options into the default config.
+    let { components, ...config } = options
+    config = this.$waveui.config = mergeConfig(config)
 
-            // Adding the shades to the config object to generate the CSS from w-app.
-            config.colorShades[`${color.label}-light${i}`] = lighterColor
-            config.colorShades[`${color.label}-dark${i}`] = darkerColor
-          }
-        }
-      }
+    // Generates color shades for each color of each theme and store in the config.colors object.
+    if (config.css.colorShades) generateColorShades(config)
 
-      this.config = config
-      this.notify = (...args) => notificationManager.notify(...args)
-      WaveUI.instance = this
+    // Make Wave UI reactive and expose the single instance in the app.
+    const $waveui = reactive(this.$waveui)
+    app.config.globalProperties.$waveui = $waveui
+    app.provide('$waveui', $waveui)
 
-      // Make waveui reactive and expose the single instance in Vue.
-      app.config.globalProperties.$waveui = reactive(this)
-      app.provide('$waveui', WaveUI.instance)
+    if (config.theme !== 'auto') {
+      this.$waveui.colors = flattenColors(config.colors[config.theme], colorPalette)
     }
   }
-
-  notify (...args) {
-    notificationManager.notify(...args)
-  }
 }
-
-/**
- * Returns the WaveUI instance. Equivalent to using `$waveui` inside templates.
- */
-export const useWaveUI = () => inject('$waveui')

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

@@ -1,10 +1,61 @@
-* {outline: none;margin: 0;padding: 0;}
+@use "sass:map";
+
+// 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-css-scope: #{$css-scope};
+
+  background-color: rgb(var(--w-base-bg-color-rgb));
+  color: rgb(var(--w-base-color-rgb));
+}
+
+:root[data-theme="light"] {
+  --w-base-bg-color-rgb: #{map.get($theme-light, 'base-bg-color-rgb')};
+  --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
+  --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
+  --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
+  --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
+}
+
+:root[data-theme="dark"] {
+  --w-base-bg-color-rgb: #{map.get($theme-dark, 'base-bg-color-rgb')};
+  --w-base-color-rgb: #{map.get($theme-dark, 'base-color-rgb')};
+  --w-contrast-bg-color-rgb: #{map.get($theme-dark, 'contrast-bg-color-rgb')};
+  --w-contrast-color-rgb: #{map.get($theme-dark, 'contrast-color-rgb')};
+  --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
+}
+
+* {
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
 
 body {overflow-x: hidden;}
 
 a {text-decoration: none;}
 
-.w-app, .w-app *, .w-app :before, .w-app :after {box-sizing: border-box;}
+.w-app {
+  position: relative; // Make the .w-app a referential for tooltips / menus.
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  &, *, :before, :after {box-sizing: border-box;}
+
+  &.row {flex-direction: row;}
+  &.d-block {display: block;}
+  &.align-center {align-items: center;}
+  &.align-end {align-items: flex-end;}
+  &.justify-center {justify-content: center;}
+  &.justify-end {justify-content: flex-end;}
+  &.justify-space-between {justify-content: space-between;}
+  &.justify-space-around {justify-content: space-around;}
+  &.justify-space-evenly {justify-content: space-evenly;}
+  &.text-center {text-align: center;}
+  &.text-right {text-align: right;}
+}
 
 .w-main {
   padding-left: 3 * $base-increment;

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

@@ -1,21 +1,7 @@
 #{$css-scope} {
-  .primary--bg,
-  .primary-dark1--bg,
-  .primary-dark2--bg,
-  .primary-dark3--bg {color: #fff;}
-  .white--bg {background-color: #fff;}
-  .white {color: #fff;}
-  .grey--bg {background-color: #888;}
-  .grey {color: #888;}
-  .black--bg {background-color: #000;}
-  .black {color: #000;}
-  .transparent--bg {background-color: transparent;}
-  .transparent {color: transparent;}
-  .inherit--bg {background-color: inherit;}
-  .inherit {color: inherit;}
-  .success--bg, .error--bg, .warning--bg, .info--bg {color: #fff;}
-
-  $colors:(
+  // Color palette (immutable).
+  // ------------------------------------------------------
+  $colors: (
     'pink': #e91e63,
     'purple': #a741b9,
     'deep-purple': #673ab7,
@@ -37,6 +23,8 @@
     'grey': #848484
   );
 
+  // 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;}
@@ -116,4 +104,40 @@
       .#{$label}-dark#{$i} {color: darken($color, $dark-increment * $i);}
     }
   }
+
+  .primary--bg {color: rgb(var(--w-base-bg-color-rgb));}
+  .white--bg {background-color: #fff;}
+  .white {color: #fff;}
+  .black--bg {background-color: #000;}
+  .black {color: #000;}
+  .transparent--bg {background-color: transparent;}
+  .transparent {color: transparent;}
+  .inherit--bg {background-color: inherit;}
+  .inherit {color: inherit;}
+  // ------------------------------------------------------
+
+  // Theming colors.
+  // These classes carry colors which change automatically when switching theme.
+  // ------------------------------------------------------
+  .base-color {color: rgba(var(--w-base-color-rgb), 0.7);}
+  .base-color--bg {background-color: rgb(var(--w-base-bg-color-rgb));}
+  .contrast-color {color: rgba(var(--w-contrast-color-rgb), 0.7);}
+  .contrast-color--bg {background-color: rgb(var(--w-contrast-bg-color-rgb));}
+  // ------------------------------------------------------
+
+  // Status colors - must stay last and have highest priority.
+  // ------------------------------------------------------
+  .info {color: var(--w-info-color);}
+  .info--bg {background-color: var(--w-info-color);color: #fff;}
+  .warning {color: var(--w-warning-color);}
+  .warning--bg {background-color: var(--w-warning-color);color: #fff;}
+  .success {color: var(--w-success-color);}
+  .success--bg {background-color: var(--w-success-color);color: #fff;}
+  .error {color: var(--w-error-color);}
+  .error--bg {background-color: var(--w-error-color);color: #fff;}
+  // ------------------------------------------------------
+
+  // The only colors remaining to define are user custom colors and shades.
+  // The associated CSS will be generated from dynamic-css.js, and injected as a first stylesheet,
+  // before this one (so the rules in this file have more priority).
 }

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

@@ -1,10 +1,3 @@
-// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
-// variable presets.
-:root {
-  --base-increment: #{$base-increment};
-  --css-scope: #{$css-scope};
-}
-
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
 @if $use-layout-classes {
   #{$css-scope} {
@@ -170,7 +163,7 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, round(x / 2) * 2 to always have even numbers.
     // 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: round(0.85 * $base-font-size);}
@@ -186,25 +179,25 @@
     // (https://www.w3.org/TR/css-variables-1/#using-variables),
     // the grid system is done dynamically in dynamic-css.js.
 
-    // @media screen and (min-width: var(--breakpoint-xs)) {
+    // @media screen and (min-width: var(--w-breakpoint-xs)) {
     //   @for $i from 0 through $grid-base {
     //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-sm)) {
+    // @media screen and (min-width: var(--w-breakpoint-sm)) {
     //   @for $i from 0 through $grid-base {
     //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-md)) {
+    // @media screen and (min-width: var(--w-breakpoint-md)) {
     //   @for $i from 0 through $grid-base {
     //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-lg)) {
+    // @media screen and (min-width: var(--w-breakpoint-lg)) {
     //   @for $i from 0 through $grid-base {
     //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }

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

@@ -1,3 +1,27 @@
+@use "sass:map";
+
+// This allows each UI component to be used in dark or light theme regardless of the global theme.
+@mixin themeable {
+  // Will force the light style on this component.
+  &--light {
+    --w-base-bg-color-rgb: #{map.get($theme-light, 'base-bg-color-rgb')};
+    --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
+    --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
+    --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
+    --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
+    color: rgba(var(--w-base-color-rgb), 0.7);
+  }
+  // Will force the dark style on this component.
+  &--dark {
+    --w-base-bg-color-rgb: #{map.get($theme-dark, 'base-bg-color-rgb')};
+    --w-base-color-rgb: #{map.get($theme-dark, 'base-color-rgb')};
+    --w-contrast-bg-color-rgb: #{map.get($theme-dark, 'contrast-bg-color-rgb')};
+    --w-contrast-color-rgb: #{map.get($theme-dark, 'contrast-color-rgb')};
+    --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
+    color: rgba(var(--w-base-color-rgb), 0.7);
+  }
+}
+
 @mixin default-transition($duration: $transition-duration, $delay: 0s) {
   transition: $duration $delay ease-in-out;
 }