wave-ui 3.28.0 → 4.0.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/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,155 +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;
-// --------------------------------------------------------

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

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

@@ -19,15 +19,14 @@ const config = reactive({
     // Note: colorShades must be enabled for this to work.
     colorShadeCssVariables: false,
 
-    // Generate palette colors and palette color shades.
-    // Can't have this option: color palette is generated via SCSS in colors.scss.
-    // colorPalette: true,
+    // Built-in palette colors and shades always generate CSS variables.
 
     breakpointSpaces: false, // Generate margin & padding classes for each breakpoint. E.g. `sm-ma2`.
     // Generate helper classes for each breakpoint.
     // E.g. `sm-text-left`, `xs-hide`.
     breakpointLayoutClasses: true,
-    grid: 12
+    grid: 12,
+    appClasses: '' // Custom CSS classes to add to the .w-app element.
   },
   colors: {
     // Default colors of Wave UI. Can be overridden from the Wave UI user config on init.

package/src/wave-ui/utils/dynamic-css.js

@@ -9,13 +9,26 @@ const cssVars = {
 let breakpointsDef = { keys: [], values: [] }
 let currentBreakpoint = null
 
+const generatePaletteVariables = colorPalette => {
+  let cssVariablesString = ''
+
+  colorPalette.forEach(({ label, color, shades = [] }) => {
+    cssVariablesString += `--w-${label}-color: ${color};`
+    shades.forEach(shade => {
+      cssVariablesString += `--w-${shade.label}-color: ${shade.color};`
+    })
+  })
+
+  return `:root{${cssVariablesString}}`
+}
+
 // Generates the CSS for all the dynamic colors and shades. E.g.
 // :root {[color1-variable], [color2-variable]}
 // .color1--bg {background-color: [color1-variable]}
 // .color1 {color: [color1-variable]}
 const generateColors = (themeColors, generateShadeCssVariables) => {
   let styles = ''
-  const cssVariables = {}
+  let cssVariablesString = ''
 
   // Extract status colors and place them after the other colors.
   const { info, warning, success, error, shades, ...colors } = themeColors
@@ -30,9 +43,10 @@ const generateColors = (themeColors, generateShadeCssVariables) => {
   }
   // The shades don't need css vars.
   for (const colorName in shades) {
+    const colorValue = generateShadeCssVariables ? `var(--w-${colorName}-color)` : shades[colorName]
     styles +=
-      `${cssScope} .${colorName}--bg{background-color:${shades[colorName]}}` +
-      `${cssScope} .${colorName}{color:${shades[colorName]}}`
+      `${cssScope} .${colorName}--bg{background-color:${colorValue}}` +
+      `${cssScope} .${colorName}{color:${colorValue}}`
   }
 
   // Creating CSS3 variables.
@@ -41,14 +55,12 @@ const generateColors = (themeColors, generateShadeCssVariables) => {
   // Status colors must remain after the other colors so they have priority in form validations.
   // That only makes sense when there are 2 colors on the same element: e.g. `span.primary.error`.
   const allColors = { ...colors, info, warning, success, error }
-  for (const colorName in allColors) cssVariables[colorName] = allColors[colorName]?.color ?? allColors[colorName]
+  for (const colorName in allColors) {
+    cssVariablesString += `--w-${colorName}-color: ${allColors[colorName]?.color ?? allColors[colorName]};`
+  }
   if (generateShadeCssVariables) {
-    for (const colorName in shades) cssVariables[colorName] = shades[colorName]
+    for (const colorName in shades) cssVariablesString += `--w-${colorName}-color: ${shades[colorName]};`
   }
-  let cssVariablesString = ''
-  Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
-    cssVariablesString += `--w-${colorName}-color: ${colorHex};`
-  })
 
   return `:root{${cssVariablesString}}${styles}`
 }
@@ -104,7 +116,7 @@ const generateBreakpoints = (breakpoints, grid) => {
 
 const generateBreakpointSpaces = breakpoints => {
   let styles = ''
-  const { cssScope, baseIncrement } = cssVars
+  const { cssScope } = cssVars
 
   breakpoints.forEach(({ label, min }) => {
     // Discard `xs` since the min is 0 (`media query (min-width: 0)`), and leave in _layout.scss.
@@ -148,7 +160,7 @@ const generateBreakpointSpaces = breakpoints => {
 
 const genBreakpointLayoutClasses = breakpoints => {
   let styles = ''
-  const { cssScope, baseIncrement } = cssVars
+  const { cssScope } = cssVars
   const layoutClasses = [
     'show{display:block}',
     'hide{display:none}',
@@ -202,8 +214,8 @@ const genBreakpointLayoutClasses = breakpoints => {
         `@media(min-width:${min}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}u-${rule}`).join('') +
         // w-grid columns and gap.
-        array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-        array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        array12.map((_, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((_, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
         `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}` +
         '}'
     }
@@ -214,8 +226,8 @@ const genBreakpointLayoutClasses = breakpoints => {
       `@media (min-width:${min}px) and (max-width:${max}px){` +
       layoutClasses.map(rule => `${cssScope} .${label}-${rule}`).join('') +
       // w-grid columns and gap.
-      array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-      array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+      array12.map((_, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+      array12.map((_, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
       `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}` +
       '}'
   })
@@ -226,8 +238,8 @@ const genBreakpointLayoutClasses = breakpoints => {
         `@media (max-width:${max}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}d-${rule}`).join('') +
         // w-grid columns and gap.
-        array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
-        array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        array12.map((_, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((_, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:calc(${i + 1} * var(--w-base-increment));}`).join('') +
         `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}` +
         '}'
     }
@@ -290,11 +302,21 @@ export const injectCSSInDOM = $waveui => {
 }
 
 export const injectColorsCSSInDOM = (themeColors, colorPalette, generateShadeCssVariables) => {
+  if (!document.getElementById('wave-ui-palette')) {
+    const css = document.createElement('style')
+    css.id = 'wave-ui-palette'
+    css.innerHTML = generatePaletteVariables(colorPalette)
+
+    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
+    if (firstStyle) firstStyle.before(css)
+    else document.head.appendChild(css)
+  }
+
   // Inject global dynamic CSS classes in document head.
   if (!document.getElementById('wave-ui-colors')) {
     const css = document.createElement('style')
     css.id = 'wave-ui-colors'
-    css.innerHTML = generateColors(themeColors, colorPalette, generateShadeCssVariables)
+    css.innerHTML = generateColors(themeColors, generateShadeCssVariables)
 
     const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
     if (firstStyle) firstStyle.before(css)
@@ -311,8 +333,8 @@ const doDynamicCSS = config => {
   })
 
   const computedStyles = getComputedStyle(document.documentElement)
-  cssVars.cssScope = computedStyles.getPropertyValue('--w-css-scope')
-  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--w-base-increment'))
+  cssVars.cssScope = (computedStyles.getPropertyValue('--w-css-scope') || '.w-app').trim() || '.w-app'
+  cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--w-base-increment'), 10)
 
   let styles = ''
   styles += generateBreakpoints(breakpointsDef, config.css.grid)

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

@@ -4,7 +4,7 @@
  *
  * @param {HTMLElement} hostEl
  * @param {PointerEvent|MouseEvent|TouchEvent} event
- * @param {{ disabled?: boolean }} [options]
+ * @param {{ disabled?: boolean, sizeRect?: DOMRect }} [options]
  */
 export function applyRipple (hostEl, event, options = {}) {
   if (typeof window === 'undefined' || typeof document === 'undefined') return
@@ -20,7 +20,8 @@ export function applyRipple (hostEl, event, options = {}) {
   if (clientX == null || clientY == null) return
 
   const rect = hostEl.getBoundingClientRect()
-  const maxSide = Math.max(rect.width, rect.height)
+  const sizeRect = options.sizeRect || rect
+  const maxSide = Math.max(sizeRect.width, sizeRect.height)
   const size = Math.max(maxSide * 2.5, 48)
   const x = clientX - rect.left - size / 2
   const y = clientY - rect.top - size / 2