wave-ui 3.17.4 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.17.4",
+  "version": "3.18.0",
   "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",
@@ -18,8 +18,14 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/wave-ui.es.js",
-      "require": "./dist/wave-ui.umd.js"
+      "import": {
+        "default": "./dist/wave-ui.es.js",
+        "types": "./dist/types/index.d.ts"
+      },
+      "require": {
+        "default": "./dist/wave-ui.umd.js",
+        "types": "./dist/types/index.d.ts"
+      }
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
@@ -43,44 +49,48 @@
     "ui"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.10.0",
+    "@eslint/js": "^9.14.0",
     "@faker-js/faker": "^8.4.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.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
+    "@vitejs/plugin-vue": "^5.1.4",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
-    "eslint": "^9.10.0",
+    "eslint": "^9.14.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-n": "^17.12.0",
     "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-vue": "^9.30.0",
     "font-awesome": "^4.7.0",
-    "globals": "^15.9.0",
+    "globals": "^15.12.0",
     "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "pug": "^3.0.3",
-    "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.78.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "sass": "^1.80.6",
     "simple-syntax-highlighter": "^3.0.10",
     "splitpanes": "^3.1.5",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.4.0",
-    "vite": "^5.4.3",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.12.2",
+    "vite": "^5.4.10",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.5.3",
-    "vue-router": "^4.4.3",
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5",
     "vueperslides": "^3.5.1",
     "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/",

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

@@ -119,7 +119,7 @@ export default {
 <style lang="scss">
 .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;
 

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

@@ -235,7 +235,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);}

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-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-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)')
       }
     },
 

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

@@ -758,7 +758,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 +804,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 +867,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;}
@@ -970,8 +970,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-tag.vue

@@ -86,8 +86,8 @@ export default {
   justify-content: center;
   vertical-align: middle;
   border-radius: $border-radius;
-  border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.08);
-  background-color: rgba(var(--w-base-bg-color-rgb), 0.85);
+  border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent);
+  background-color: color-mix(in srgb, var(--w-base-bg-color) 85%, transparent);
   padding-left: 2 * $base-increment;
   padding-right: 2 * $base-increment;
   cursor: default;
@@ -95,7 +95,7 @@ export default {
 
   @include themeable;
 
-  &--dark {color: rgba(var(--w-base-bg-color-rgb), 0.95);}
+  &--dark {color: color-mix(in srgb, var(--w-base-bg-color) 95%, transparent);}
   &--outline {background-color: transparent;border-color: currentColor;}
   &--no-border {border-color: transparent;}
   &--round {border-radius: 99em;}
@@ -154,7 +154,7 @@ export default {
     }
 
     &:hover {
-      .w-tag__closable {background-color: rgba(var(--w-contrast-bg-color-rgb), 0.1);}
+      .w-tag__closable {background-color: color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent);}
     }
 
     // Overlay to mark the focus and active state.
@@ -172,19 +172,19 @@ export default {
 
     // Hover state.
     &:hover:before {background-color: currentColor;opacity: 0.06;}
-    &--dark:hover:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);opacity: 1;}
+    &--dark:hover:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);opacity: 1;}
     &--outline:hover:before,
     &--text:hover:before {background-color: currentColor;opacity: 0.12;}
 
     // Focus state.
     &:focus:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:focus:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);}
+    &--dark:focus:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 12%, transparent);}
     &--outline:focus:before,
     &--text:focus:before {background-color: currentColor;opacity: 0.12;}
 
     // Active state.
     &:active:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:active:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.2);}
+    &--dark:active:before {background-color: color-mix(in srgb, var(--w-base-bg-color) 20%, transparent);}
     &--outline:active:before,
     &--text:active:before {background-color: currentColor;opacity: 0.2;}
   }

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

@@ -117,7 +117,7 @@ export default {
         zIndex: this.zIndex || this.zIndex === 0 || null,
         top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
-        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))'
+        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor] || 'var(--w-base-bg-color)'
       }
     },
 

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

@@ -1,4 +1,5 @@
 @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.
@@ -6,26 +7,26 @@
   --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));
+  background-color: var(--w-base-bg-color);
+  color: var(--w-base-color);
 }
 
 :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-caption-color-rgb: #{map.get($theme-light, 'caption-color-rgb')};
-  --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
+  --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')};
 }
 
 :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-caption-color-rgb: #{map.get($theme-dark, 'caption-color-rgb')};
-  --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
+  --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')};
 }
 
 * {
@@ -63,3 +64,10 @@ a {text-decoration: none;}
   padding-left: 3 * $base-increment;
   padding-right: 3 * $base-increment;
 }
+
+// Structure classes.
+// ----------------------------------------------
+.content-wrap {
+  position: relative;
+  padding: $layout-padding;
+}

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

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'variables' as *;
+
 #{$css-scope} {
   // Color palette (immutable).
   // ------------------------------------------------------
@@ -98,14 +101,14 @@
         $light-increment: 8.8;
         $dark-increment: 5;
       }
-      .#{$label}-light#{$i}--bg {background-color: lighten($color, $light-increment * $i - $light-offset);}
-      .#{$label}-light#{$i} {color: lighten($color, $light-increment * $i - $light-offset);}
-      .#{$label}-dark#{$i}--bg {background-color: darken($color, $dark-increment * $i);}
-      .#{$label}-dark#{$i} {color: darken($color, $dark-increment * $i);}
+      .#{$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%);}
     }
   }
 
-  .primary--bg {color: rgb(var(--w-base-bg-color-rgb));}
+  .primary--bg {color: var(--w-base-bg-color);}
   .white--bg {background-color: #fff;}
   .white {color: #fff;}
   .black--bg {background-color: #000;}
@@ -119,10 +122,10 @@
   // 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));}
+  .base-color {color: color-mix(in srgb, var(--w-base-color) 75%, transparent);}
+  .base-color--bg {background-color: var(--w-base-bg-color);}
+  .contrast-color {color: color-mix(in srgb, var(--w-contrast-color) 75%, transparent);}
+  .contrast-color--bg {background-color: var(--w-contrast-bg-color);}
   // ------------------------------------------------------
 
   // Status colors - must stay last and have highest priority.

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

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
 @if $use-layout-classes {
   #{$css-scope} {

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

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Fade.

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

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 #{$css-scope} {
   .headline, .title1 {
     font-size: round(2.2 * $base-font-size);

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

@@ -1,18 +1,6 @@
-@import './base';
-@import './typography';
-@import './layout';
-@import './colors';
-@import './icons';
-@import './transitions';
-
-// ==============================================
-// Wave UI framework classes.
-// ==============================================
-
-// Structure classes.
-// ----------------------------------------------
-.content-wrap {
-  position: relative;
-  padding: $layout-padding;
-}
-// ----------------------------------------------
+@forward 'base';
+@forward 'typography';
+@forward 'layout';
+@forward 'colors';
+@forward 'icons';
+@forward 'transitions';

package/src/wave-ui/scss/variables/_index.scss

@@ -0,0 +1,2 @@
+@forward 'variables';
+@forward 'mixins';

package/src/wave-ui/scss/{_mixins.scss → variables/_mixins.scss}

@@ -1,24 +1,25 @@
 @use "sass:map";
+@use "variables" as *;
 
 // 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);
+    --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-disabled-color: #{map.get($theme-light, 'disabled-color')};
+    color: rgba(var(--w-base-color), 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);
+    --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-disabled-color: #{map.get($theme-dark, 'disabled-color')};
+    color: rgba(var(--w-base-color), 0.7);
   }
 }
 

package/src/wave-ui/scss/{_variables.scss → variables/_variables.scss}

@@ -7,36 +7,35 @@
 
 // THEME COLORS.
 // ========================================================
-// These colors are defined by a list of RBG channels only, so you can later apply any alpha channel.
 // If you don't need themes, you can leave this as is and override the global defaults.
 $theme-light: (
-  base-bg-color-rgb: (255, 255, 255), // #fff.
-  base-color-rgb: (0, 0, 0), // #000.
-  contrast-bg-color-rgb: (0, 0, 0), // #000.
-  contrast-color-rgb: (255, 255, 255), // #fff.
-  caption-color-rgb: (160, 160, 160), // #a0a0a0.
-  disabled-color-rgb: (204, 204, 204), // #ccc.
+  base-bg-color: #fff,
+  base-color: #000,
+  contrast-bg-color: #000,
+  contrast-color: #fff,
+  caption-color: #a0a0a0,
+  disabled-color: #ccc
 ) !default;
 
 $theme-dark: (
-  base-bg-color-rgb: (34, 34, 34), // #222.
-  base-color-rgb: (255, 255, 255), // #fff.
-  contrast-bg-color-rgb: (255, 255, 255), // #fff.
-  contrast-color-rgb: (0, 0, 0), // #000.
-  caption-color-rgb: (110, 110, 110), // #6e6e6e.
-  disabled-color-rgb: (74, 74, 74), // #4a4a4a.
+  base-bg-color: #222,
+  base-color: #fff,
+  contrast-bg-color: #fff,
+  contrast-color: #000,
+  caption-color: #6e6e6e,
+  disabled-color: #4a4a4a
 ) !default;
 
 // These variables are filled up with the current theme colors for you to use.
 $primary: var(--w-primary-color);
 $secondary: var(--w-secondary-color);
-$base-bg-color: rgb(var(--w-base-bg-color-rgb));
-$base-color: rgb(var(--w-base-color-rgb));
-$contrast-bg-color: rgb(var(--w-contrast-bg-color-rgb));
-$contrast-color: rgb(var(--w-contrast-color-rgb));
-$caption-color: rgb(var(--w-caption-color-rgb));
+$base-bg-color: var(--w-base-bg-color);
+$base-color: var(--w-base-color);
+$contrast-bg-color: var(--w-contrast-bg-color);
+$contrast-color: var(--w-contrast-color);
+$caption-color: var(--w-caption-color);
 // When a form element is disabled (checkbox, radio, input, select list).
-$disabled-color: rgb(var(--w-disabled-color-rgb));
+$disabled-color: var(--w-disabled-color);
 
 // GLOBAL DEFAULTS.
 // ========================================================
@@ -48,7 +47,7 @@ $base-font-size: 14px !default; // Must be a px unit.
 $base-increment: round(divide($base-font-size, 4)) !default;
 $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap tag.
 $border-radius: 4px !default;
-$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.12) !default;
+$border-color: color-mix(in srgb, var(--w-contrast-bg-color) 12%, transparent) !default;
 $border: 1px solid $border-color !default;
 $transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;
@@ -95,35 +94,35 @@ $menu-color: $detachable-color !default;
 
 // w-progress.
 // --------------------------------------------------------
-$progress-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+$progress-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent) !default;
 // --------------------------------------------------------
 
 // w-rating.
 // --------------------------------------------------------
-$rating-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+$rating-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent) !default;
 // --------------------------------------------------------
 
 // w-slider.
 // --------------------------------------------------------
 $slider-height: $base-increment !default;
-$slider-track-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+$slider-track-color: color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent) !default;
 $slider-thumb-button-bg-color: $base-bg-color !default;
 $slider-thumb-label-bg-color: $base-bg-color !default;
-$slider-thumb-label-color: rgba(var(--w-base-color-rgb), 0.75) !default;
-$slider-step-label-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.2) !default;
-$slider-step-label-color: rgba(var(--w-base-color-rgb), 0.5) !default;
+$slider-thumb-label-color: color-mix(in srgb, var(--w-base-color) 75%, transparent) !default;
+$slider-step-label-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent) !default;
+$slider-step-label-color: color-mix(in srgb, var(--w-base-color) 50%, transparent) !default;
 
 // w-switch.
 // --------------------------------------------------------
-$switch-inactive-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+$switch-inactive-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent) !default;
 $switch-thumb-color: $base-bg-color !default;
 // --------------------------------------------------------
 
 // w-table.
 // --------------------------------------------------------
-$table-tr-odd-color: rgba(0, 0, 0, 0.02) !default;
-$table-tr-hover-color: rgba(0, 0, 0, 0.05) !default;
-$table-color: rgba(var(--w-contrast-color-rgb), 0.7) !default;
+$table-tr-odd-color: color-mix(in srgb, var(--w-contrast-bg-color) 2%, transparent) !default;
+$table-tr-hover-color: color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent) !default;
+$table-color: color-mix(in srgb, var(--w-contrast-color) 70%, transparent) !default;
 // --------------------------------------------------------
 
 // w-textarea.
@@ -134,7 +133,7 @@ $textarea-line-height: 1.2 !default;
 // w-timeline.
 // --------------------------------------------------------
 $timeline-bullet-color: $base-bg-color !default;
-$timeline-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+$timeline-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent) !default;
 // --------------------------------------------------------
 
 // w-toolbar.
@@ -149,7 +148,3 @@ $tooltip-bg-color: $detachable-bg-color !default;
 $tooltip-color: $detachable-color !default;
 $tooltip-border-color: $border-color !default;
 // --------------------------------------------------------
-
-// Mixins.
-// --------------------------------------------------------
-@import './mixins';