wave-ui 3.17.4 → 3.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.17.4",
+  "version": "3.18.1",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -43,49 +43,53 @@
     "ui"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
-    "@faker-js/faker": "^8.4.1",
+    "@eslint/js": "^9.21.0",
+    "@faker-js/faker": "^9.5.1",
     "@mdi/font": "^7.4.47",
-    "@tsconfig/recommended": "^1.0.7",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@tsconfig/recommended": "^1.0.8",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.7.7",
-    "eslint": "^9.10.0",
+    "axios": "^1.8.1",
+    "eslint": "^9.21.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-n": "^17.10.2",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.15.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-vue": "^9.32.0",
     "font-awesome": "^4.7.0",
-    "globals": "^15.9.0",
-    "gsap": "^3.12.5",
+    "globals": "^16.0.0",
+    "gsap": "^3.12.7",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.45",
+    "postcss": "^8.5.3",
     "pug": "^3.0.3",
-    "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.78.0",
-    "simple-syntax-highlighter": "^3.0.10",
-    "splitpanes": "^3.1.5",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.4.0",
-    "vite": "^5.4.3",
+    "rollup-plugin-delete": "^3.0.0",
+    "sass": "^1.85.1",
+    "simple-syntax-highlighter": "^3.1.1",
+    "splitpanes": "^3.1.8",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.25.0",
+    "vite": "^6.2.0",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.3",
-    "vue-router": "^4.4.3",
-    "vueperslides": "^3.5.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vueperslides": "^3.6.0",
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
   },
+  "engines": {
+    "node": ">=16.0.0",
+    "pnpm": ">=8.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build --base /wave-ui/",
     "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types",
     "preview": "vite preview --base /wave-ui/",
     "lint": "vite lint",
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"

package/src/wave-ui/components/w-accordion/item.vue

@@ -117,9 +117,11 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-accordion__item {position: relative;}
 
-button.w-accordion__expand-icon {color: rgba(var(--w-base-color-rgb), 0.4);}
+button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 40%, transparent);}
 .w-accordion__expand-icon {
   margin-right: $base-increment;
 
@@ -135,7 +137,7 @@ button.w-accordion__expand-icon {color: rgba(var(--w-base-color-rgb), 0.4);}
   position: relative;
   display: flex;
   align-items: center;
-  font-size: round(1.2 * $base-font-size);
+  font-size: math.round(1.2 * $base-font-size);
   padding: 1 * $base-increment;
   user-select: none;
   cursor: pointer;
@@ -158,6 +160,7 @@ button.w-accordion__expand-icon {color: rgba(var(--w-base-color-rgb), 0.4);}
     background-color: currentColor;
     opacity: 0;
     transition: $fast-transition-duration;
+    pointer-events: none;
   }
 
   &:focus:before, &:hover:before {opacity: 0.03;}

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

@@ -131,6 +131,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-alert {
   position: relative;
   margin-top: 4 * $base-increment;
@@ -214,8 +216,8 @@ export default {
   &__dismiss.w-button {
     align-self: flex-start;
     margin-left: 2 * $base-increment;
-    margin-top: round(-0.5 * $base-increment);
-    margin-right: round(-0.5 * $base-increment);
+    margin-top: math.round(-0.5 * $base-increment);
+    margin-right: math.round(-0.5 * $base-increment);
   }
 
   & &__icon {
@@ -235,7 +237,7 @@ export default {
     left: 1px;
     z-index: 1;
     transform: translateX(-50%);
-    border: 1px solid rgba(var(--w-base-bg-color-rgb), 0.7);
+    border: 1px solid color-mix(in srgb, var(--w-base-bg-color) 70%, transparent);
     background-color: $base-bg-color;
   }
   &--icon-outside &__icon:before {transform: scale(1.05);}
@@ -246,8 +248,8 @@ export default {
   // ------------------------------------------------------
   &.size--xs {padding-top: $base-increment;padding-bottom: $base-increment;}
   &.size--sm {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--md {padding-top: round(2 * $base-increment);padding-bottom: round(2 * $base-increment);}
-  &.size--lg {padding-top: round(3 * $base-increment);padding-bottom: round(2.5 * $base-increment);}
-  &.size--xl {padding-top: round(3 * $base-increment);padding-bottom: round(3 * $base-increment);}
+  &.size--md {padding-top: math.round(2 * $base-increment);padding-bottom: math.round(2 * $base-increment);}
+  &.size--lg {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(2.5 * $base-increment);}
+  &.size--xl {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(3 * $base-increment);}
 }
 </style>

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

@@ -343,8 +343,8 @@ export default {
   &__selection {
     display: flex;
     align-items: center;
-    background: rgba(var(--w-contrast-bg-color-rgb), 0.035);
-    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.05);
+    background: color-mix(in srgb, var(--w-contrast-bg-color) 3.5%, transparent);
+    border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent);
     border-radius: $border-radius;
     padding: 0 2px 0 4px;
     flex-shrink: 0;
@@ -363,7 +363,7 @@ export default {
   }
 
   &__placeholder {
-    color: rgba(var(--w-base-color-rgb), 0.5);
+    color: color-mix(in srgb, var(--w-base-color) 50%, transparent);
     pointer-events: none;
     line-height: 18px;
   }
@@ -375,7 +375,7 @@ export default {
     margin-top: -1px;
     margin-left: 0;
     background-color: $base-bg-color;
-    border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.2);
+    border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent);
     border-top: none;
     border-bottom-left-radius: $border-radius;
     border-bottom-right-radius: $border-radius;

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

@@ -92,6 +92,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-badge-wrap {
   position: relative;
   display: inline-flex;
@@ -105,9 +107,9 @@ export default {
   user-select: none;
   border-radius: 99em;
   // Always get an even number for better text vertical align.
-  height: round(1.1 * divide($base-font-size, 2)) * 2;
-  line-height: round(1.1 * divide($base-font-size, 2)) * 2;
-  min-width: round(1.1 * divide($base-font-size, 2)) * 2;
+  height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+  line-height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+  min-width: math.round(1.1 * divide($base-font-size, 2)) * 2;
   z-index: 1;
   padding: 0 $base-increment;
 
@@ -124,38 +126,38 @@ export default {
   // Sizes.
   &.size--xs {
     // Always get an even number for better text vertical alignment.
-    $height: round(divide($base-font-size, 2)) * 2;
-    font-size: round(0.67 * divide($base-font-size, 2)) * 2;
+    $height: math.round(divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.67 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
 
-    &--round {width: $height;padding: 0 round(divide($height, 2));}
+    &--round {width: $height;padding: 0 math.round(divide($height, 2));}
   }
   &.size--sm {
-    $height: round(1.1 * divide($base-font-size, 2)) * 2;
-    font-size: round(0.75 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.1 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.75 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--md {
-    $height: round(1.3 * divide($base-font-size, 2)) * 2;
-    font-size: round(0.9 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.3 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(0.9 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--lg {
-    $height: round(1.5 * divide($base-font-size, 2)) * 2;
-    font-size: round(1.05 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.5 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(1.05 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
   }
   &.size--xl {
-    $height: round(1.8 * divide($base-font-size, 2)) * 2;
-    font-size: round(1.2 * divide($base-font-size, 2)) * 2;
+    $height: math.round(1.8 * divide($base-font-size, 2)) * 2;
+    font-size: math.round(1.2 * divide($base-font-size, 2)) * 2;
     height: $height;
     line-height: $height;
     min-width: $height;
@@ -171,12 +173,12 @@ export default {
     &.w-badge--bottom {margin-bottom: -1 * $base-increment;}
     &.w-badge--left {margin-right: -3 * $base-increment;}
     &.w-badge--right {margin-left: -3 * $base-increment;}
-    &.w-badge--top.size--xs {margin-top: round(-0.5 * $base-increment);}
-    &.w-badge--bottom.size--xs {margin-bottom: round(-0.5 * $base-increment);}
-    &.w-badge--top.size--sm {margin-top: round(-0.75 * $base-increment);}
-    &.w-badge--bottom.size--sm {margin-bottom: round(-0.75 * $base-increment);}
-    &.w-badge--top.size--lg {margin-top: round(-1.5 * $base-increment);}
-    &.w-badge--bottom.size--lg {margin-bottom: round(-1.5 * $base-increment);}
+    &.w-badge--top.size--xs {margin-top: math.round(-0.5 * $base-increment);}
+    &.w-badge--bottom.size--xs {margin-bottom: math.round(-0.5 * $base-increment);}
+    &.w-badge--top.size--sm {margin-top: math.round(-0.75 * $base-increment);}
+    &.w-badge--bottom.size--sm {margin-bottom: math.round(-0.75 * $base-increment);}
+    &.w-badge--top.size--lg {margin-top: math.round(-1.5 * $base-increment);}
+    &.w-badge--bottom.size--lg {margin-bottom: math.round(-1.5 * $base-increment);}
     &.w-badge--top.size--xl {margin-top: -2 * $base-increment;}
     &.w-badge--bottom.size--xl {margin-bottom: -2 * $base-increment;}
   }
@@ -190,10 +192,10 @@ export default {
   &--shadow {box-shadow: $box-shadow;}
 
   &--dot.w-badge {min-width: 0;padding: 0;aspect-ratio: 1;}
-  &--dot.size--xs {height: round(1.35 * $base-increment);}
-  &--dot.size--sm {height: round(1.7 * $base-increment);}
-  &--dot.size--md {height: round(2.2 * $base-increment);}
-  &--dot.size--lg {height: round(2.75 * $base-increment);}
+  &--dot.size--xs {height: math.round(1.35 * $base-increment);}
+  &--dot.size--sm {height: math.round(1.7 * $base-increment);}
+  &--dot.size--md {height: math.round(2.2 * $base-increment);}
+  &--dot.size--lg {height: math.round(2.75 * $base-increment);}
   &--dot.size--xl {height: 3 * $base-increment;}
 }
 </style>

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

@@ -85,15 +85,17 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-breadcrumbs {
   display: flex;
   align-items: center;
 
-  &.size--xs {font-size: round(0.8 * $base-font-size);}
-  &.size--sm {font-size: round(0.9 * $base-font-size);}
-  &.size--md {font-size: round(1.05 * $base-font-size);}
-  &.size--lg {font-size: round(1.2 * $base-font-size);}
-  &.size--xl {font-size: round(1.4 * $base-font-size);}
+  &.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.05 * $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);}
 
   &__separator {
     margin-left: $base-increment;

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

@@ -145,6 +145,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $spinner-size: 40;
 
 .w-button {
@@ -226,16 +228,16 @@ $spinner-size: 40;
   }
 
   // Sizes adjustments (always an even number for easier vertical alignments).
-  &.size--xs {height: round(1.25 * divide($base-font-size, 2)) * 2;}
-  &.size--sm {height: round(1.55 * divide($base-font-size, 2)) * 2;}
-  &.size--md {height: round(1.85 * divide($base-font-size, 2)) * 2;}
-  &.size--lg {height: round(2.2 * divide($base-font-size, 2)) * 2;}
-  &.size--xl {height: round(2.5 * divide($base-font-size, 2)) * 2;}
+  &.size--xs {height: math.round(1.25 * divide($base-font-size, 2)) * 2;}
+  &.size--sm {height: math.round(1.55 * divide($base-font-size, 2)) * 2;}
+  &.size--md {height: math.round(1.85 * divide($base-font-size, 2)) * 2;}
+  &.size--lg {height: math.round(2.2 * divide($base-font-size, 2)) * 2;}
+  &.size--xl {height: math.round(2.5 * divide($base-font-size, 2)) * 2;}
 
   &.size--xs {padding-left: $base-increment;padding-right: $base-increment;}
   &.size--xl {padding-left: 3 * $base-increment;padding-right: 3 * $base-increment;}
-  &--round.size--xs {padding-left: round(1.5 * $base-increment);padding-right: round(1.5 * $base-increment);}
-  &--round.size--xl {padding-left: round(4.5 * $base-increment);padding-right: round(4.5 * $base-increment);}
+  &--round.size--xs {padding-left: math.round(1.5 * $base-increment);padding-right: math.round(1.5 * $base-increment);}
+  &--round.size--xl {padding-left: math.round(4.5 * $base-increment);padding-right: math.round(4.5 * $base-increment);}
   &--icon.size--xs {padding-left: 0;padding-right: 0;}
   &--icon.size--xl {padding-left: 0;padding-right: 0;}
 

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

@@ -201,7 +201,7 @@ $inactive-color: #666;
     }
 
     .w-checkbox--indeterminate & {opacity: 0;}
-    .w-checkbox--disabled & {stroke: rgba(var(--w-contrast-color-rgb), 0.4);}
+    .w-checkbox--disabled & {stroke: color-mix(in srgb, var(--w-contrast-color) 40%, transparent);}
   }
 
   &__input:after {
@@ -230,7 +230,7 @@ $inactive-color: #666;
     .w-checkbox--disabled :checked ~ & {
       border-color: $disabled-color;
       // Prevents a tiny hole while animating and in some browser zoom levels.
-      background-color: rgba(var(--w-contrast-color-rgb), 0.4);
+      background-color: color-mix(in srgb, var(--w-contrast-color) 40%, transparent);
     }
   }
 

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

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

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

@@ -375,6 +375,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $inactive-color: #777;
 
 .w-input {
@@ -602,8 +604,8 @@ $inactive-color: #777;
       padding-right: 0;
     }
     .w-input__input-wrap--round & {
-      padding-left: round(3 * $base-increment);
-      padding-right: round(3 * $base-increment);
+      padding-left: math.round(3 * $base-increment);
+      padding-right: math.round(3 * $base-increment);
     }
     .w-input--inner-icon-left & {left: 18px;}
     .w-input--no-padding.w-input--inner-icon-left & {left: 26px;}

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

@@ -175,7 +175,7 @@ export default {
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
         minWidth: (this.minWidth && this.menuMinWidth) || null,
         maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
-        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))')
+        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)')
       }
     },
 
@@ -282,6 +282,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-menu-wrap {display: none;}
 
 .w-menu {
@@ -296,7 +298,7 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding: $base-increment round(2.5 * $base-increment);
+    padding: $base-increment math.round(2.5 * $base-increment);
   }
   &--shadow {box-shadow: $box-shadow;}
 

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

@@ -163,6 +163,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-rating {
   display: inline-flex;
   align-items: center;
@@ -188,10 +190,10 @@ export default {
     .w-rating--readonly & {cursor: auto;}
 
     // Sizes.
-    &.size--xs {font-size: round(0.85 * $base-font-size);}
-    &.size--sm {font-size: round(1.15 * $base-font-size);}
-    &.size--md {font-size: round(1.4 * $base-font-size);}
-    &.size--lg {font-size: round(1.7 * $base-font-size);}
+    &.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;}
 
     &:before {font-size: 1.1em;}

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

@@ -424,6 +424,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-select {
   position: relative;
   display: flex;
@@ -620,7 +622,7 @@ export default {
       margin-left: 0;
     }
     .w-select__selection-wrap--round & {
-      margin-left: round(3 * $base-increment);
+      margin-left: math.round(3 * $base-increment);
     }
     .w-select--inner-icon-left & {left: 18px;}
     .w-select--no-padding.w-select--inner-icon-left & {left: 26px;}

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

@@ -262,6 +262,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-slider {
   position: relative;
   display: flex;
@@ -430,9 +432,9 @@ export default {
     position: absolute;
     left: 50%;
     bottom: 100%;
-    margin-bottom: round(3 * $base-increment);
+    margin-bottom: math.round(3 * $base-increment);
     transform: translateX(-50%);
-    padding: round(0.75 * $base-increment) (2 * $base-increment);
+    padding: math.round(0.75 * $base-increment) (2 * $base-increment);
     background-color: $slider-thumb-label-bg-color;
     border-radius: $border-radius;
     border: $border;

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

@@ -55,6 +55,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-spinner {
   position: relative;
   display: inline-flex;
@@ -64,10 +66,10 @@ 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: round(0.9 * divide($base-font-size, 2)) * 2;}
-  &.size--sm {font-size: round(1.5 * $base-font-size);}
-  &.size--md {font-size: round(2 * $base-font-size);}
-  &.size--lg {font-size: round(2.5 * $base-font-size);}
+  &.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;}
 
   &:before, &:after {

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

@@ -154,6 +154,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $outline-width: 2px;
 
 .w-switch {
@@ -207,7 +209,7 @@ $outline-width: 2px;
       box-sizing: border-box;
       border: none;
       width: 2 * $small-form-el-size;
-      height: round(0.7 * $small-form-el-size);
+      height: math.round(0.7 * $small-form-el-size);
     }
     .w-switch--thin :checked ~ & {background-color: $switch-inactive-color;}
 
@@ -248,7 +250,7 @@ $outline-width: 2px;
     .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
-      top: - round(0.15 * $small-form-el-size);
+      top: - math.round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
@@ -278,7 +280,7 @@ $outline-width: 2px;
     :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
-    .w-switch--thin & {top: - round(0.15 * $small-form-el-size);}
+    .w-switch--thin & {top: - math.round(0.15 * $small-form-el-size);}
   }
 
   &--ripple &__input:before {

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

@@ -722,6 +722,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 $tr-border-top: 1px;
 
 .w-table {
@@ -758,7 +760,7 @@ $tr-border-top: 1px;
   // Table columns.
   // ------------------------------------------------------
   &__col--highlighted {
-    background-color: rgba(var(--w-contrast-bg-color-rgb), 0.04);
+    background-color: color-mix(in srgb, var(--w-contrast-bg-color) 4%, transparent);
   }
 
   // Table headers.
@@ -804,7 +806,7 @@ $tr-border-top: 1px;
   // Sorting arrow.
   &__header--sortable {cursor: pointer;}
   &__header-sort {
-    color: rgba(var(--w-base-color-rgb), 0.8);
+    color: color-mix(in srgb, var(--w-base-color) 8%, transparent);
     vertical-align: text-bottom;
     @include default-transition;
 
@@ -867,7 +869,7 @@ $tr-border-top: 1px;
   tbody {transition: opacity $transition-duration;}
   &--loading-in-header tbody {opacity: 0.6;}
 
-  tbody tr {border-top: $tr-border-top solid rgba(var(--w-base-color-rgb), 0.06);}
+  tbody tr {border-top: $tr-border-top solid color-mix(in srgb, var(--w-base-color) 6%, transparent);}
   // Don't apply built-in bg color if a bg color is already found on a tr.
   tbody tr:nth-child(odd):not(.no-data):not([class*="--bg"]) {background-color: $table-tr-odd-color;}
   tbody .w-table__row:hover:not(.no-data):not([class*="--bg"]) {background-color: $table-tr-hover-color;}
@@ -882,7 +884,7 @@ $tr-border-top: 1px;
     pointer-events: none;
   }
 
-  &__cell {padding: round(divide($base-increment, 2)) $base-increment;}
+  &__cell {padding: math.round(divide($base-increment, 2)) $base-increment;}
   &__header:first-child, &__cell:first-child {padding-left: 2 * $base-increment;}
   &__header:last-child, &__cell:last-child {padding-right: 2 * $base-increment;}
 
@@ -970,8 +972,8 @@ $tr-border-top: 1px;
       aspect-ratio: 1;
       min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
       overflow: hidden;
-      color: rgba(var(--w-base-color-rgb), 0.65);
-      background-color: rgba(var(--w-base-bg-color-rgb), 0.4);
+      color: color-mix(in srgb, var(--w-base-color) 65%, transparent);
+      background-color: color-mix(in srgb, var(--w-base-bg-color) 40%, transparent);
 
       &:hover:before {
         background-color: $primary;

package/src/wave-ui/components/w-tabs/index.vue

@@ -348,6 +348,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tabs {
   z-index: 1;
   border-radius: $border-radius;
@@ -386,7 +388,7 @@ export default {
     align-items: center;
     padding: (2 * $base-increment) (3 * $base-increment);
     justify-content: center;
-    font-size: round(1.2 * $base-font-size);
+    font-size: math.round(1.2 * $base-font-size);
     transition: $transition-duration ease-in-out, flex-grow 0s, flex 0s; // `flex` for Safari.
     user-select: none;
     cursor: pointer;