wave-ui 3.17.4 → 3.18.1

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

@@ -79,6 +79,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tag {
   position: relative;
   display: inline-flex;
@@ -86,8 +88,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 +97,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;}
@@ -103,37 +105,37 @@ export default {
   &--shadow {box-shadow: $box-shadow;}
 
   &.size--xs {
-    $font-size: round(0.7 * $base-font-size);
+    $font-size: math.round(0.7 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
-    padding: round(0.25 * $base-increment) $base-increment;
+    padding: math.round(0.25 * $base-increment) $base-increment;
   }
   &.size--sm {
-    $font-size: round(0.82 * $base-font-size);
+    $font-size: math.round(0.82 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
-    padding: round(0.25 * $base-increment) $base-increment;
+    padding: math.round(0.25 * $base-increment) $base-increment;
   }
   &.size--md {
-    $font-size: round(0.85 * $base-font-size);
+    $font-size: math.round(0.85 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(0.25 * $base-increment);
-    padding-bottom: round(0.25 * $base-increment);
+    padding-top: math.round(0.25 * $base-increment);
+    padding-bottom: math.round(0.25 * $base-increment);
   }
   &.size--lg {
-    $font-size: round(1.1 * $base-font-size);
+    $font-size: math.round(1.1 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(0.5 * $base-increment);
-    padding-bottom: round(0.5 * $base-increment);
+    padding-top: math.round(0.5 * $base-increment);
+    padding-bottom: math.round(0.5 * $base-increment);
   }
   &.size--xl {
-    $font-size: round(1.3 * $base-font-size);
+    $font-size: math.round(1.3 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 4px;
-    padding-top: round(1 * $base-increment);
-    padding-bottom: round(1 * $base-increment);
+    padding-top: math.round(1 * $base-increment);
+    padding-bottom: math.round(1 * $base-increment);
   }
 
   &--clickable {
@@ -154,7 +156,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 +174,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)'
       }
     },
 
@@ -215,12 +215,14 @@ export default {
 </script>
 
 <style lang="scss">
+@use "sass:math";
+
 .w-tooltip {
   // Fix Safari where `width: max-content` does not take padding and border into consideration.
   display: table;
 
   position: absolute;
-  padding: $base-increment round(1.5 * $base-increment);
+  padding: $base-increment math.round(1.5 * $base-increment);
   border-radius: $border-radius;
   border: 1px solid $tooltip-border-color;
   background-color: $tooltip-bg-color;
@@ -238,7 +240,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;}
   &--no-border {border: none;}

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,6 @@
+@use "sass:math";
+@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} {
@@ -65,7 +68,7 @@
     .bd0 {border: none;}
 
     @for $i from 1 through 6 {
-      .bdrs#{$i} {border-radius: round($i * $base-increment);}
+      .bdrs#{$i} {border-radius: math.round($i * $base-increment);}
     }
     .bdrsr {border-radius: 999em;}
     .bdrsm {border-radius: 100%;}
@@ -76,13 +79,13 @@
     // ----------------------------------------------
     @for $i from -6 through -1 {
       .sh#{$i} {
-        box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+        box-shadow: 0 0 (-1 * math.round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
       }
     }
     @for $i from 1 through 6 {
       .sh#{$i} {
         box-shadow: 0 0 1px rgba(#000, 0.1),
-                    round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+                    math.round($base-increment * divide($i, 4)) math.round($base-increment * divide($i, 4)) math.round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
       }
     }
     .sh0 {box-shadow: none;}
@@ -92,7 +95,7 @@
     // ----------------------------------------------
     // Margin.
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .ma#{$i} {margin: $number;}
       @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
     }
@@ -100,7 +103,7 @@
     .ma0 {margin: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .mx#{$i} {margin-left: $number;margin-right: $number;}
       .my#{$i} {margin-top: $number;margin-bottom: $number;}
       @if ($i > 0) {
@@ -114,7 +117,7 @@
     .my0 {margin-top: 0;margin-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .mt#{$i} {margin-top: $number;}
       .mr#{$i} {margin-right: $number;}
       .mb#{$i} {margin-bottom: $number;}
@@ -137,13 +140,13 @@
 
     // Padding.
     @for $i from 1 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .pa#{$i} {padding: $number;}
     }
     .pa0 {padding: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .px#{$i} {padding-left: $number;padding-right: $number;}
       .py#{$i} {padding-top: $number;padding-bottom: $number;}
     }
@@ -151,7 +154,7 @@
     .py0 {padding-top: 0;padding-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: round($i * $base-increment);
+      $number: math.round($i * $base-increment);
       .pt#{$i} {padding-top: $number;}
       .pr#{$i} {padding-right: $number;}
       .pb#{$i} {padding-bottom: $number;}
@@ -165,14 +168,14 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes below, round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, math.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.8 * $base-font-size);}
-    .size--sm {font-size: round(0.9 * $base-font-size);}
-    .size--md {font-size: round(1 * $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 * $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);}
     // ----------------------------------------------
 
     // Grid system.
@@ -209,6 +212,6 @@
 }
 
 @for $i from 1 through 12 {
-  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: round($base-increment * $i);}
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: math.round($base-increment * $i);}
 }
 .w-flex.gap0, .w-grid.gap0 {gap: 0;}

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,26 +1,29 @@
+@use "sass:math";
+@use 'variables' as *;
+
 #{$css-scope} {
   .headline, .title1 {
-    font-size: round(2.2 * $base-font-size);
+    font-size: math.round(2.2 * $base-font-size);
     font-weight: 100;
   }
 
   .title2 {
-    font-size: round(1.7 * $base-font-size);
+    font-size: math.round(1.7 * $base-font-size);
     font-weight: 400;
   }
 
   .title3 {
-    font-size: round(1.4 * $base-font-size);
+    font-size: math.round(1.4 * $base-font-size);
     font-weight: 400;
   }
 
   .title4 {
-    font-size: round(1.25 * $base-font-size);
+    font-size: math.round(1.25 * $base-font-size);
     font-weight: 400;
   }
 
   .title5 {
-    font-size: round(1.1 * $base-font-size);
+    font-size: math.round(1.1 * $base-font-size);
     font-weight: 600;
   }
 
@@ -30,7 +33,7 @@
   }
 
   .caption {
-    font-size: round(0.85 * $base-font-size);
+    font-size: math.round(0.85 * $base-font-size);
     font-style: italic;
     color: $caption-color;
   }

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.
 // ========================================================
@@ -45,19 +44,19 @@ $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
 $use-layout-classes: true !default;
 
 $base-font-size: 14px !default; // Must be a px unit.
-$base-increment: round(divide($base-font-size, 4)) !default;
+$base-increment: math.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;
 $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) !default;
-$form-field-height: round(2 * $base-font-size) !default;
+$form-field-height: math.round(2 * $base-font-size) !default;
 // Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
-$small-form-el-size: round(divide(1.3 * $base-font-size, 2)) * 2 !default;
+$small-form-el-size: math.round(divide(1.3 * $base-font-size, 2)) * 2 !default;
 
 // Detachable elements are: w-tooltip, w-menu, w-confirm.
 $detachable-bg-color: $base-bg-color !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';