wave-ui 3.27.2 → 4.0.0

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

@@ -1,4 +1,3 @@
-@use "sass:math";
 @use 'variables' as *;
 
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
@@ -73,18 +72,18 @@
     // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
     // ----------------------------------------------
     @for $i from 1 through 6 {
-      .bd#{$i} {border: $i + px solid $border-color;}
+      .bd#{$i} {border: #{$i}px solid var(--w-border-color);}
     }
-    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
-    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
-    .bdl1 {border-left: 1px solid $border-color;}
-    .bdr1 {border-right: 1px solid $border-color;}
-    .bdt1 {border-top: 1px solid $border-color;}
-    .bdb1 {border-bottom: 1px solid $border-color;}
+    .bdx1 {border-left: var(--w-border);border-right: var(--w-border);}
+    .bdy1 {border-top: var(--w-border);border-bottom: var(--w-border);}
+    .bdl1 {border-left: var(--w-border);}
+    .bdr1 {border-right: var(--w-border);}
+    .bdt1 {border-top: var(--w-border);}
+    .bdb1 {border-bottom: var(--w-border);}
     .bd0 {border: none;}
 
     @for $i from 1 through 6 {
-      .bdrs#{$i} {border-radius: math.round($i * $base-increment);}
+      .bdrs#{$i} {border-radius: calc(#{$i} * var(--w-base-increment));}
     }
     .bdrsr {border-radius: 999em;}
     .bdrsm {border-radius: 100%;}
@@ -95,36 +94,33 @@
     // ----------------------------------------------
     @for $i from -6 through -1 {
       .sh#{$i} {
-        box-shadow: 0 0 (-1 * math.round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+        box-shadow: var(--w-shadow-n#{-1 * $i});
       }
     }
     @for $i from 1 through 6 {
       .sh#{$i} {
-        box-shadow: 0 0 1px rgba(#000, 0.1),
-                    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));
+        box-shadow: var(--w-shadow-#{$i});
       }
     }
-    .sh0 {box-shadow: none;}
+    .sh0 {box-shadow: var(--w-shadow-0);}
     // ----------------------------------------------
 
     // Spaces.
     // ----------------------------------------------
     // Margin.
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .ma#{$i} {margin: $number;}
-      @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
+      .ma#{$i} {margin: calc(#{$i} * var(--w-base-increment));}
+      @if ($i > 0) {.ma-#{$i} {margin: calc(-#{$i} * var(--w-base-increment));}}
     }
     .maa {margin: auto;}
     .ma0 {margin: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .mx#{$i} {margin-left: $number;margin-right: $number;}
-      .my#{$i} {margin-top: $number;margin-bottom: $number;}
+      .mx#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));margin-right: calc(#{$i} * var(--w-base-increment));}
+      .my#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));margin-bottom: calc(#{$i} * var(--w-base-increment));}
       @if ($i > 0) {
-        .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
-        .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+        .mx-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));margin-right: calc(-#{$i} * var(--w-base-increment));}
+        .my-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));margin-bottom: calc(-#{$i} * var(--w-base-increment));}
       }
     }
     .mxa {margin-left: auto;margin-right: auto;}
@@ -133,16 +129,15 @@
     .my0 {margin-top: 0;margin-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .mt#{$i} {margin-top: $number;}
-      .mr#{$i} {margin-right: $number;}
-      .mb#{$i} {margin-bottom: $number;}
-      .ml#{$i} {margin-left: $number;}
+      .mt#{$i} {margin-top: calc(#{$i} * var(--w-base-increment));}
+      .mr#{$i} {margin-right: calc(#{$i} * var(--w-base-increment));}
+      .mb#{$i} {margin-bottom: calc(#{$i} * var(--w-base-increment));}
+      .ml#{$i} {margin-left: calc(#{$i} * var(--w-base-increment));}
       @if ($i > 0) {
-        .mt-#{$i} {margin-top: -$number;}
-        .mr-#{$i} {margin-right: -$number;}
-        .mb-#{$i} {margin-bottom: -$number;}
-        .ml-#{$i} {margin-left: -$number;}
+        .mt-#{$i} {margin-top: calc(-#{$i} * var(--w-base-increment));}
+        .mr-#{$i} {margin-right: calc(-#{$i} * var(--w-base-increment));}
+        .mb-#{$i} {margin-bottom: calc(-#{$i} * var(--w-base-increment));}
+        .ml-#{$i} {margin-left: calc(-#{$i} * var(--w-base-increment));}
       }
     }
     .mta {margin-top: auto;}
@@ -156,25 +151,22 @@
 
     // Padding.
     @for $i from 1 through 12 {
-      $number: math.round($i * $base-increment);
-      .pa#{$i} {padding: $number;}
+      .pa#{$i} {padding: calc(#{$i} * var(--w-base-increment));}
     }
     .pa0 {padding: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .px#{$i} {padding-left: $number;padding-right: $number;}
-      .py#{$i} {padding-top: $number;padding-bottom: $number;}
+      .px#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));padding-right: calc(#{$i} * var(--w-base-increment));}
+      .py#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));padding-bottom: calc(#{$i} * var(--w-base-increment));}
     }
     .px0 {padding-left: 0;padding-right: 0;}
     .py0 {padding-top: 0;padding-bottom: 0;}
 
     @for $i from 0 through 12 {
-      $number: math.round($i * $base-increment);
-      .pt#{$i} {padding-top: $number;}
-      .pr#{$i} {padding-right: $number;}
-      .pb#{$i} {padding-bottom: $number;}
-      .pl#{$i} {padding-left: $number;}
+      .pt#{$i} {padding-top: calc(#{$i} * var(--w-base-increment));}
+      .pr#{$i} {padding-right: calc(#{$i} * var(--w-base-increment));}
+      .pb#{$i} {padding-bottom: calc(#{$i} * var(--w-base-increment));}
+      .pl#{$i} {padding-left: calc(#{$i} * var(--w-base-increment));}
     }
     .pt0 {padding-top: 0;}
     .pr0 {padding-right: 0;}
@@ -184,14 +176,14 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes below, math.round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, round(nearest, …, 1px) matches former Sass rounding for px base sizes.
     // 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: 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);}
+    .size--xs {font-size: round(nearest, calc(0.8 * var(--w-base-font-size)), 1px);}
+    .size--sm {font-size: round(nearest, calc(0.9 * var(--w-base-font-size)), 1px);}
+    .size--md {font-size: round(nearest, calc(1 * var(--w-base-font-size)), 1px);}
+    .size--lg {font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);}
+    .size--xl {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
     // ----------------------------------------------
 
     // Grid system.
@@ -228,6 +220,6 @@
 }
 
 @for $i from 1 through 12 {
-  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: math.round($base-increment * $i);}
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: calc(#{$i} * var(--w-base-increment));}
 }
 .w-flex.gap0, .w-grid.gap0 {gap: 0;}

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

@@ -0,0 +1,37 @@
+// Pointer ripple (v-wave-ripple + components using applyRipple).
+// Note: avoid overflow:hidden here so hosts like w-button keep focus rings that extend past the box.
+.w-ripple {
+  position: relative;
+
+  .w-ripple__ink-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+}
+
+.w-ripple__ink {
+  position: absolute;
+  z-index: 2; // Above .w-button:before hover overlay (explicit z-index:0 on :before keeps ink visible).
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.5;
+  // currentColor is often invisible on filled buttons (e.g. white on white); use a neutral ink.
+  background-color: color-mix(in srgb, #000 22%, transparent);
+  will-change: transform, opacity;
+  animation: w-ripple-ink-expand 0.65s ease-out forwards;
+}
+
+html[data-theme='dark'] .w-ripple__ink {
+  background-color: color-mix(in srgb, #fff 20%, transparent);
+}
+
+@keyframes w-ripple-ink-expand {
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

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

@@ -1,11 +1,11 @@
 @use 'variables' as *;
 
-$fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+$fast-out-slow-in: var(--w-transition-timing-fast-out-slow-in);
 
 // Fade.
 // --------------------------------------------------------
-.fade-enter-active {animation: w-fade $transition-duration;}
-.fade-leave-active {animation: w-fade $transition-duration reverse;}
+.fade-enter-active {animation: w-fade var(--w-transition-duration);}
+.fade-leave-active {animation: w-fade var(--w-transition-duration) reverse;}
 @keyframes w-fade {
   0% {opacity: 0;}
   100% {opacity: 1;}
@@ -15,7 +15,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-right: translate x from left to right.
 // --------------------------------------------------------
 .slide-right-enter-active, .slide-right-leave-active {
-  transition: $transition-duration $fast-out-slow-in;
+  transition: var(--w-transition-duration) $fast-out-slow-in;
   transition-property: transform, left, margin-left;
   transform: translateX(0%);
 }
@@ -29,7 +29,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-left: translate x from right to left.
 // --------------------------------------------------------
 .slide-left-enter-active, .slide-left-leave-active {
-  transition: $transition-duration;
+  transition: var(--w-transition-duration);
   transition-property: transform, right, margin-right;
   transform: translateX(0%);
 }
@@ -43,7 +43,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-down: translate y from top to bottom.
 // --------------------------------------------------------
 .slide-down-enter-active, .slide-down-leave-active {
-  transition: transform $transition-duration $fast-out-slow-in;
+  transition: transform var(--w-transition-duration) $fast-out-slow-in;
   transition-property: transform, top, margin-top;
   transform: translateY(0%);
 }
@@ -57,7 +57,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-up: translate y from bottom to top.
 // --------------------------------------------------------
 .slide-up-enter-active, .slide-up-leave-active {
-  transition: transform $transition-duration $fast-out-slow-in;
+  transition: transform var(--w-transition-duration) $fast-out-slow-in;
   transition-property: transform, bottom, margin-bottom;
   transform: translateY(0%);
 }
@@ -71,7 +71,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-fade-left.
 // --------------------------------------------------------
 .slide-fade-left-enter-active, .slide-fade-left-leave-active {
-  transition: all $transition-duration $fast-out-slow-in;
+  transition: all var(--w-transition-duration) $fast-out-slow-in;
 }
 .slide-fade-left-enter-from, .slide-fade-left-leave-to {
   transform: translateX(12px);
@@ -81,7 +81,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-fade-right.
 // --------------------------------------------------------
 .slide-fade-right-enter-active, .slide-fade-right-leave-active {
-  transition: all $transition-duration $fast-out-slow-in;
+  transition: all var(--w-transition-duration) $fast-out-slow-in;
 }
 .slide-fade-right-enter-from, .slide-fade-right-leave-to {
   transform: translateX(-12px);
@@ -92,7 +92,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-fade-up.
 // --------------------------------------------------------
 .slide-fade-up-enter-active, .slide-fade-up-leave-active {
-  transition: all $transition-duration $fast-out-slow-in;
+  transition: all var(--w-transition-duration) $fast-out-slow-in;
 }
 .slide-fade-up-enter-from, .slide-fade-up-leave-to {
   transform: translateY(12px);
@@ -103,7 +103,7 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 // Slide-fade-down.
 // --------------------------------------------------------
 .slide-fade-down-enter-active, .slide-fade-down-leave-active {
-  transition: all $transition-duration $fast-out-slow-in;
+  transition: all var(--w-transition-duration) $fast-out-slow-in;
 }
 .slide-fade-down-enter-from, .slide-fade-down-leave-to {
   transform: translateY(-12px);
@@ -113,8 +113,8 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Scale.
 // --------------------------------------------------------
-.scale-enter-active {animation: w-scale $transition-duration;}
-.scale-leave-active {animation: w-scale $transition-duration reverse;}
+.scale-enter-active {animation: w-scale var(--w-transition-duration);}
+.scale-leave-active {animation: w-scale var(--w-transition-duration) reverse;}
 @keyframes w-scale {
   0% {transform: scale(0);}
   100% {transform: scale(1);}
@@ -123,8 +123,8 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Scale-fade.
 // --------------------------------------------------------
-.scale-fade-enter-active {animation: w-scale-fade $transition-duration;}
-.scale-fade-leave-active {animation: w-scale-fade $transition-duration reverse;}
+.scale-fade-enter-active {animation: w-scale-fade var(--w-transition-duration);}
+.scale-fade-leave-active {animation: w-scale-fade var(--w-transition-duration) reverse;}
 @keyframes w-scale-fade {
   0% {transform: scale(0.8);opacity: 0;}
   100% {transform: scale(1);opacity: 1;}
@@ -133,8 +133,8 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Bounce.
 // --------------------------------------------------------
-.bounce-enter-active {animation: w-bounce ($transition-duration + 0.05s);}
-.bounce-leave-active {animation: w-bounce ($transition-duration + 0.05s) reverse;}
+.bounce-enter-active {animation: w-bounce calc(var(--w-transition-duration) + 0.05s);}
+.bounce-leave-active {animation: w-bounce calc(var(--w-transition-duration) + 0.05s) reverse;}
 @keyframes w-bounce {
   0% {transform: scale(0.7);opacity: 0;}
   60% {transform: scale(1.1);opacity: 1;}
@@ -144,8 +144,8 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Twist.
 // --------------------------------------------------------
-.twist-enter-active {animation: w-twist ($transition-duration + 0.25s);}
-.twist-leave-active {animation: w-twist ($transition-duration + 0.25s) reverse;}
+.twist-enter-active {animation: w-twist calc(var(--w-transition-duration) + 0.25s);}
+.twist-leave-active {animation: w-twist calc(var(--w-transition-duration) + 0.25s) reverse;}
 @keyframes w-twist {
   0% {transform: scale(0) rotate(-70deg);}
   60% {transform: scale(1.03) rotate(6deg);}

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

@@ -1,41 +1,40 @@
-@use "sass:math";
 @use 'variables' as *;
 
 #{$css-scope} {
   .headline, .title1 {
-    font-size: math.round(2.2 * $base-font-size);
+    font-size: calc(2.2 * var(--w-base-font-size));
     font-weight: 100;
   }
 
   .title2 {
-    font-size: math.round(1.7 * $base-font-size);
+    font-size: calc(1.7 * var(--w-base-font-size));
     font-weight: 400;
   }
 
   .title3 {
-    font-size: math.round(1.4 * $base-font-size);
+    font-size: calc(1.4 * var(--w-base-font-size));
     font-weight: 400;
   }
 
   .title4 {
-    font-size: math.round(1.25 * $base-font-size);
+    font-size: calc(1.25 * var(--w-base-font-size));
     font-weight: 400;
   }
 
   .title5 {
-    font-size: math.round(1.1 * $base-font-size);
+    font-size: calc(1.1 * var(--w-base-font-size));
     font-weight: 600;
   }
 
   .body {
-    font-size: $base-font-size;
+    font-size: var(--w-base-font-size);
     font-weight: normal;
   }
 
   .caption {
-    font-size: math.round(0.85 * $base-font-size);
+    font-size: calc(0.85 * var(--w-base-font-size));
     font-style: italic;
-    color: $caption-color;
+    color: var(--w-caption-color);
   }
 
   .text-upper {text-transform: uppercase;}

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

@@ -4,3 +4,4 @@
 @forward 'colors';
 @forward 'icons';
 @forward 'transitions';
+@forward 'ripple';

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

@@ -1,33 +1,32 @@
-@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: #{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);
+    --w-base-bg-color: #fff;
+    --w-base-color: #000;
+    --w-contrast-bg-color: #000;
+    --w-contrast-color: #fff;
+    --w-caption-color: #a0a0a0;
+    --w-disabled-color: #ccc;
+    color: var(--w-base-color-muted);
   }
   // Will force the dark style on this component.
   &--dark {
-    --w-base-bg-color: #{map.get($theme-dark, 'base-bg-color')};
-    --w-base-color: #{map.get($theme-dark, 'base-color')};
-    --w-contrast-bg-color: #{map.get($theme-dark, 'contrast-bg-color')};
-    --w-contrast-color: #{map.get($theme-dark, 'contrast-color')};
-    --w-disabled-color: #{map.get($theme-dark, 'disabled-color')};
-    color: rgba(var(--w-base-color), 0.7);
+    --w-base-bg-color: #222;
+    --w-base-color: #fff;
+    --w-contrast-bg-color: #fff;
+    --w-contrast-color: #000;
+    --w-caption-color: #6e6e6e;
+    --w-disabled-color: #4a4a4a;
+    color: var(--w-base-color-muted);
   }
 }
 
-@mixin default-transition($duration: $transition-duration, $delay: 0s) {
+@mixin default-transition($duration: var(--w-transition-duration), $delay: 0s) {
   transition: $duration $delay ease-in-out;
 }
 
-@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
+@mixin out-back-transition($duration: var(--w-transition-duration), $delay: 0s) {
   transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
 }
 
@@ -78,21 +77,21 @@
 
     &#{$selector}--align-top:before {
       transform: none;
-      top: (2 * $base-increment) - 1px;
+      top: calc(2 * var(--w-base-increment) - 1px);
     }
     &#{$selector}--align-bottom:before {
       transform: none;
       top: auto;
-      bottom: (2 * $base-increment) - 1px;
+      bottom: calc(2 * var(--w-base-increment) - 1px);
     }
     &#{$selector}--align-left:before {
       transform: none;
-      left: (2 * $base-increment) - 1px;
+      left: calc(2 * var(--w-base-increment) - 1px);
     }
     &#{$selector}--align-right:before {
       transform: none;
       left: auto;
-      right: (2 * $base-increment) - 1px;
+      right: calc(2 * var(--w-base-increment) - 1px);
     }
   }
 
@@ -129,8 +128,8 @@
     transform: translateY(-50%);
   }
 
-  &#{$selector}--align-top:after {transform: none;top: 2 * $base-increment;}
-  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: 2 * $base-increment;}
-  &#{$selector}--align-left:after {transform: none;left: 2 * $base-increment;}
-  &#{$selector}--align-right:after {transform: none;left: auto;right: 2 * $base-increment;}
+  &#{$selector}--align-top:after {transform: none;top: calc(2 * var(--w-base-increment));}
+  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: calc(2 * var(--w-base-increment));}
+  &#{$selector}--align-left:after {transform: none;left: calc(2 * var(--w-base-increment));}
+  &#{$selector}--align-right:after {transform: none;left: auto;right: calc(2 * var(--w-base-increment));}
 }

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

@@ -1,157 +1,10 @@
-@use "sass:math";
-@use "sass:map";
-
-@function divide($a, $b) {
-  @return math.div($a, $b);
-}
-
-// THEME COLORS.
-// ========================================================
-// If you don't need themes, you can leave this as is and override the global defaults.
-$theme-light: (
-  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: #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: 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: var(--w-disabled-color);
+// Theme palette defaults live as plain CSS on :root[data-theme] in _base.scss
+// and in the themeable mixin (_mixins.scss). Override with CSS, e.g.
+// :root { --w-base-font-size: 16px; } (also drives --w-base-increment on :root)
+// :root[data-theme="light"] { --w-base-bg-color: #fafafa; }
 
 // GLOBAL DEFAULTS.
 // ========================================================
 $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
 // True by default. False allows you to use an external CSS library (like Tailwind).
 $use-layout-classes: true !default;
-
-$base-font-size: 14px !default; // Must be a px unit.
-$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: 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: math.round(2 * $base-font-size) !default;
-// Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
-$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;
-$detachable-color: $base-color !default;
-
-// COMPONENTS DEFAULTS.
-// ========================================================
-// w-confirm.
-// --------------------------------------------------------
-$confirm-bg-color: $detachable-bg-color !default;
-$confirm-color: $detachable-color !default;
-// --------------------------------------------------------
-
-// w-dialog.
-// --------------------------------------------------------
-$dialog-bg-color: $base-bg-color !default;
-// --------------------------------------------------------
-
-// w-divider.
-// --------------------------------------------------------
-$divider-color: $border-color !default;
-// --------------------------------------------------------
-
-// w-drawer.
-// --------------------------------------------------------
-$drawer-max-size: 380px !default;
-$drawer-bg-color: $base-bg-color !default;
-// --------------------------------------------------------
-
-// w-menu.
-// --------------------------------------------------------
-$menu-bg-color: $detachable-bg-color !default;
-$menu-color: $detachable-color !default;
-// --------------------------------------------------------
-
-// w-progress.
-// --------------------------------------------------------
-$progress-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent) !default;
-// --------------------------------------------------------
-
-// w-rating.
-// --------------------------------------------------------
-$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: 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: 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: 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: 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.
-// --------------------------------------------------------
-$textarea-line-height: 1.2 !default;
-// --------------------------------------------------------
-
-// w-timeline.
-// --------------------------------------------------------
-$timeline-bullet-color: $base-bg-color !default;
-$timeline-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent) !default;
-// --------------------------------------------------------
-
-// w-toolbar.
-// --------------------------------------------------------
-$toolbar-max-size: 380px !default;
-$toolbar-bg-color: $base-bg-color !default;
-// --------------------------------------------------------
-
-// w-tooltip.
-// --------------------------------------------------------
-$tooltip-bg-color: $detachable-bg-color !default;
-$tooltip-color: $detachable-color !default;
-$tooltip-border-color: $border-color !default;
-// --------------------------------------------------------
-
-// w-scrollable.
-// --------------------------------------------------------
-$scrollbar-size: 8px !default;
-$scrollbar-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, var(--w-base-bg-color)) !default;
-$scrollbar-thumb-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, var(--w-base-bg-color)) !default;
-// --------------------------------------------------------

package/src/wave-ui/utils/colors.js

@@ -1,5 +1,9 @@
 import { consoleError } from './console'
 
+// The built-in palette remains the single source for exact legacy shade values.
+// dynamic-css.js exposes these colors as --w-*-color variables; SCSS color
+// utility classes only reference those variables.
+
 /**
  * Generates the color shades for each custom color and status colors for the current theme (only),
  * and save it in the config object.
@@ -37,11 +41,10 @@ export const flattenColors = (themeColors, colorPalette) => {
   const colors = {
     ...colorPalette.reduce((obj, color) => {
       obj[color.label] = color.color
-      const shades = (color.shades || []).reduce((obj, color) => {
+      ;(color.shades || []).forEach(color => {
         obj[color.label] = color.color
-        return obj
-      }, {})
-      return { ...obj, ...shades }
+      })
+      return obj
     }, { ...themeColors, ...themeColors.shades })
   }
   delete colors.shades