wave-ui 2.48.0 → 3.0.1

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

@@ -1,10 +1,61 @@
-* {outline: none;margin: 0;padding: 0;}
+@use "sass:map";
+
+// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
+// variable presets.
+:root {
+  --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));
+}
+
+: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-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
+}
+
+: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-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
+}
+
+* {
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
 
 body {overflow-x: hidden;}
 
 a {text-decoration: none;}
 
-.w-app, .w-app *, .w-app :before, .w-app :after {box-sizing: border-box;}
+.w-app {
+  position: relative; // Make the .w-app a referential for tooltips / menus.
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  &, *, :before, :after {box-sizing: border-box;}
+
+  &.row {flex-direction: row;}
+  &.d-block {display: block;}
+  &.align-center {align-items: center;}
+  &.align-end {align-items: flex-end;}
+  &.justify-center {justify-content: center;}
+  &.justify-end {justify-content: flex-end;}
+  &.justify-space-between {justify-content: space-between;}
+  &.justify-space-around {justify-content: space-around;}
+  &.justify-space-evenly {justify-content: space-evenly;}
+  &.text-center {text-align: center;}
+  &.text-right {text-align: right;}
+}
 
 .w-main {
   padding-left: 3 * $base-increment;

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

@@ -1,21 +1,7 @@
 #{$css-scope} {
-  .primary--bg,
-  .primary-dark1--bg,
-  .primary-dark2--bg,
-  .primary-dark3--bg {color: #fff;}
-  .white--bg {background-color: #fff;}
-  .white {color: #fff;}
-  .grey--bg {background-color: #888;}
-  .grey {color: #888;}
-  .black--bg {background-color: #000;}
-  .black {color: #000;}
-  .transparent--bg {background-color: transparent;}
-  .transparent {color: transparent;}
-  .inherit--bg {background-color: inherit;}
-  .inherit {color: inherit;}
-  .success--bg, .error--bg, .warning--bg, .info--bg {color: #fff;}
-
-  $colors:(
+  // Color palette (immutable).
+  // ------------------------------------------------------
+  $colors: (
     'pink': #e91e63,
     'purple': #a741b9,
     'deep-purple': #673ab7,
@@ -37,6 +23,8 @@
     'grey': #848484
   );
 
+  // For each color, create a [color] and a [color]--bg associated classes,
+  // + 6 shades lighter and 6 shades darker.
   @each $label, $color in $colors {
     .#{$label}--bg {background-color: $color;}
     .#{$label} {color: $color;}
@@ -116,4 +104,40 @@
       .#{$label}-dark#{$i} {color: darken($color, $dark-increment * $i);}
     }
   }
+
+  .primary--bg {color: rgb(var(--w-base-bg-color-rgb));}
+  .white--bg {background-color: #fff;}
+  .white {color: #fff;}
+  .black--bg {background-color: #000;}
+  .black {color: #000;}
+  .transparent--bg {background-color: transparent;}
+  .transparent {color: transparent;}
+  .inherit--bg {background-color: inherit;}
+  .inherit {color: inherit;}
+  // ------------------------------------------------------
+
+  // 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));}
+  // ------------------------------------------------------
+
+  // Status colors - must stay last and have highest priority.
+  // ------------------------------------------------------
+  .info {color: var(--w-info-color);}
+  .info--bg {background-color: var(--w-info-color);color: #fff;}
+  .warning {color: var(--w-warning-color);}
+  .warning--bg {background-color: var(--w-warning-color);color: #fff;}
+  .success {color: var(--w-success-color);}
+  .success--bg {background-color: var(--w-success-color);color: #fff;}
+  .error {color: var(--w-error-color);}
+  .error--bg {background-color: var(--w-error-color);color: #fff;}
+  // ------------------------------------------------------
+
+  // The only colors remaining to define are user custom colors and shades.
+  // The associated CSS will be generated from dynamic-css.js, and injected as a first stylesheet,
+  // before this one (so the rules in this file have more priority).
 }

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

@@ -1,10 +1,3 @@
-// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
-// variable presets.
-:root {
-  --base-increment: #{$base-increment};
-  --css-scope: #{$css-scope};
-}
-
 // All these CSS classes will not be generated if the $use-layout-classes is set to false.
 @if $use-layout-classes {
   #{$css-scope} {
@@ -170,7 +163,7 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, 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.85 * $base-font-size);}
@@ -186,25 +179,25 @@
     // (https://www.w3.org/TR/css-variables-1/#using-variables),
     // the grid system is done dynamically in dynamic-css.js.
 
-    // @media screen and (min-width: var(--breakpoint-xs)) {
+    // @media screen and (min-width: var(--w-breakpoint-xs)) {
     //   @for $i from 0 through $grid-base {
     //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-sm)) {
+    // @media screen and (min-width: var(--w-breakpoint-sm)) {
     //   @for $i from 0 through $grid-base {
     //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-md)) {
+    // @media screen and (min-width: var(--w-breakpoint-md)) {
     //   @for $i from 0 through $grid-base {
     //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }
     // }
 
-    // @media screen and (min-width: var(--breakpoint-lg)) {
+    // @media screen and (min-width: var(--w-breakpoint-lg)) {
     //   @for $i from 0 through $grid-base {
     //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
     //   }

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

@@ -1,3 +1,27 @@
+@use "sass:map";
+
+// 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);
+  }
+  // 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);
+  }
+}
+
 @mixin default-transition($duration: $transition-duration, $delay: 0s) {
   transition: $duration $delay ease-in-out;
 }

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

@@ -1,10 +1,40 @@
 @use "sass:math";
+@use "sass:map";
 
 @function divide($a, $b) {
   @return math.div($a, $b); // Must use `sass` & not `node-sass`.
-  // @return $a / $b;
 }
 
+// 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.
+  disabled-color-rgb: (204, 204, 204), // #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.
+  disabled-color-rgb: (74, 74, 74), // #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));
+// When a form element is disabled (checkbox, radio, input, select list).
+$disabled-color: rgb(var(--w-disabled-color-rgb));
+
 // GLOBAL DEFAULTS.
 // ========================================================
 $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
@@ -15,47 +45,106 @@ $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: 3px !default;
-$border-color: rgba(0, 0, 0, 0.15);
+$border-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !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;
-// When a form element is disabled (checkbox, radio, input, select list).
-$disabled-color: #ccc;
 $form-field-height: 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;
 
+// 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: rgba(var(--w-contrast-bg-color-rgb), 0.15) !default;
+// --------------------------------------------------------
+
+// w-rating.
+// --------------------------------------------------------
+$rating-bg-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
 // --------------------------------------------------------
 
 // w-slider.
 // --------------------------------------------------------
 $slider-height: $base-increment !default;
-$slider-track-color: #ddd;
+$slider-track-color: rgba(var(--w-contrast-bg-color-rgb), 0.15) !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;
+
+// w-switch.
+// --------------------------------------------------------
+$switch-inactive-color: rgba(var(--w-contrast-bg-color-rgb), 0.25) !default;
+$switch-thumb-color: #fff !default;
 // --------------------------------------------------------
 
 // w-table.
 // --------------------------------------------------------
-$table-tr-odd-color: rgba(0, 0, 0, 0.02);
-$table-tr-hover-color: rgba(0, 0, 0, 0.05);
-$table-color: rgba(0, 0, 0, 0.7);
+$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;
 // --------------------------------------------------------
 
 // w-textarea.
 // --------------------------------------------------------
-$textarea-line-height: 1.2;
+$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;
+// --------------------------------------------------------
+
+// w-toolbar.
+// --------------------------------------------------------
+$toolbar-max-size: 380px !default;
+$toolbar-bg-color: $base-bg-color !default;
 // --------------------------------------------------------
 
 // w-tooltip.
 // --------------------------------------------------------
-$tooltip-bg-color: #fff;
-$tooltip-color: rgba(0, 0, 0, 0.7);
+$tooltip-bg-color: $detachable-bg-color !default;
+$tooltip-color: $detachable-color !default;
+$tooltip-border-color: $border-color !default;
 // --------------------------------------------------------
 
 // Mixins.

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

@@ -1,4 +1,58 @@
-export default [
+const shadeColor = (color, amount) => {
+  return '#' + color.slice(1).match(/../g)
+    .map(x => {
+      x = +`0x${x}` + amount
+      return (x < 0 ? 0 : (x > 255 ? 255 : x)).toString(16).padStart(2, 0)
+    })
+    .join('')
+}
+
+/**
+ * Generates the color shades for each custom color and status colors for the current theme (only),
+ * and save it in the config object.
+ *
+ * @param {Object} config
+ */
+export const generateColorShades = config => {
+  // Add color shades for each custom color and status color of each theme.
+  ['light', 'dark'].forEach(theme => {
+    const themeOfColors = config.colors[theme]
+    themeOfColors.shades = {}
+
+    for (let color in themeOfColors) {
+      if (color === 'shades') continue // Skip if item is the `shades` container.
+      color = { label: color, color: themeOfColors[color].replace('#', '') }
+      const col = color.color
+      if (col.length === 3) color.color = col[0] + '' + col[0] + col[1] + col[1] + col[2] + col[2]
+
+      for (let i = 1; i <= 3; i++) {
+        const lighterColor = shadeColor(`#${color.color}`, i * 40)
+        const darkerColor = shadeColor(`#${color.color}`, -i * 40)
+        // Adding the shades to the config object to generate the CSS from w-app.
+        themeOfColors.shades[`${color.label}-light${i}`] = lighterColor
+        themeOfColors.shades[`${color.label}-dark${i}`] = darkerColor
+      }
+    }
+  })
+}
+
+export const flattenColors = (themeColors, colorPalette) => {
+  const colors = {
+    ...colorPalette.reduce((obj, color) => {
+      obj[color.label] = color.color
+      const shades = (color.shades || []).reduce((obj, color) => {
+        obj[color.label] = color.color
+        return obj
+      }, {})
+      return { ...obj, ...shades }
+    }, { ...themeColors, ...themeColors.shades })
+  }
+  delete colors.shades
+
+  return colors
+}
+
+export const colorPalette = [
   {
     label: 'pink',
     color: '#e91e63',
@@ -15,7 +69,6 @@ export default [
       { label: 'pink-dark4', color: '#7c0c32' },
       { label: 'pink-dark5', color: '#600927' },
       { label: 'pink-dark6', color: '#43071b' }
-
     ]
   },
   {
@@ -342,5 +395,9 @@ export default [
       { label: 'grey-dark5', color: '#353535' },
       { label: 'grey-dark6', color: '#252525' }
     ]
-  }
+  },
+  { label: 'black', color: '#000' },
+  { label: 'white', color: '#fff' },
+  { label: 'transparent', color: 'transparent' },
+  { label: 'inherit', color: 'inherit' }
 ]

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

@@ -1,6 +1,7 @@
 import { reactive } from 'vue'
 
 const config = reactive({
+  on: '#app', // Sets the Wave UI root node. If not found, will default to `body`.
   breakpoints: {
     xs: 600,
     sm: 900,
@@ -10,7 +11,7 @@ const config = reactive({
   },
   css: {
     // Generate shades for custom colors and status colors.
-    // Palette color shades are always generated with palette.
+    // Note: the color palette shades are always generated separately from SCSS.
     colorShades: true,
 
     // Generate palette colors and palette color shades.
@@ -24,13 +25,27 @@ const config = reactive({
     grid: 12
   },
   colors: {
-    primary: '#234781',
-    secondary: '#d3ebff',
-    success: '#54b946',
-    error: '#f65555',
-    warning: '#f80',
-    info: '#3d9ff5'
+    // Default colors of Wave UI. Can be overridden from the Wave UI user config on init.
+    light: {
+      primary: '#234781',
+      secondary: '#d3ebff',
+      info: '#3d9ff5',
+      warning: '#f80',
+      success: '#54b946',
+      error: '#f65555'
+    },
+    dark: {
+      primary: '#89b6d2',
+      secondary: '#375b6a',
+      info: '#3d9ff5',
+      warning: '#f80',
+      success: '#54b946',
+      error: '#f65555'
+    }
   },
+  // The initial theme to use.
+  // To switch theme while running, call the $waveui.switchTheme('light'|'dark') method.
+  theme: 'light', // One of 'light', 'dark', 'auto'.
   icons: [],
   iconsLigature: false,
   notificationManager: {
@@ -43,9 +58,18 @@ const config = reactive({
 export { config as default }
 
 export const mergeConfig = (options, conf = config) => {
-  for (const key in options) {
-    const option = options[key]
-    if (typeof option === 'object') mergeConfig(options[key], conf[key])
-    else conf[key] = option
+  // If the conf object is empty, populate with options (case of presets).
+  if (!Object.keys(conf).length) conf = Object.assign(conf, options)
+
+  else {
+    for (const key in options) {
+      const option = options[key]
+      if (typeof option === 'object') {
+        mergeConfig(options[key], conf[key])
+      }
+      else conf[key] = option
+    }
   }
+
+  return conf
 }