@kizmann/nano-ui 0.9.10 → 1.0.0

package/themes/macos/root/vars.scss

@@ -1,32 +1,36 @@
+@use "sass:color";
+
 $color-white:           #ffffff !default;
 $color-black:           #111111 !default;
 
 $color-foreground:      $color-white !default;
 $color-background:      $color-black !default;
 
-$color-gray-05:         mix($color-foreground, $color-background, 0.05 * 100%) !default;
-$color-gray-10:         mix($color-foreground, $color-background, 0.10 * 100%) !default;
-$color-gray-15:         mix($color-foreground, $color-background, 0.15 * 100%) !default;
-$color-gray-20:         mix($color-foreground, $color-background, 0.20 * 100%) !default;
-$color-gray-25:         mix($color-foreground, $color-background, 0.25 * 100%) !default;
-$color-gray-30:         mix($color-foreground, $color-background, 0.30 * 100%) !default;
-$color-gray-35:         mix($color-foreground, $color-background, 0.35 * 100%) !default;
-$color-gray-40:         mix($color-foreground, $color-background, 0.40 * 100%) !default;
-$color-gray-45:         mix($color-foreground, $color-background, 0.45 * 100%) !default;
-$color-gray-50:         mix($color-foreground, $color-background, 0.50 * 100%) !default;
-$color-gray-55:         mix($color-foreground, $color-background, 0.55 * 100%) !default;
-$color-gray-60:         mix($color-foreground, $color-background, 0.60 * 100%) !default;
-$color-gray-65:         mix($color-foreground, $color-background, 0.65 * 100%) !default;
-$color-gray-70:         mix($color-foreground, $color-background, 0.70 * 100%) !default;
-$color-gray-75:         mix($color-foreground, $color-background, 0.75 * 100%) !default;
-$color-gray-80:         mix($color-foreground, $color-background, 0.80 * 100%) !default;
-$color-gray-85:         mix($color-foreground, $color-background, 0.85 * 100%) !default;
-$color-gray-90:         mix($color-foreground, $color-background, 0.90 * 100%) !default;
-$color-gray-95:         mix($color-foreground, $color-background, 0.95 * 100%) !default;
+$color-gray-05:         color.mix($color-foreground, $color-background, 0.05 * 100%) !default;
+$color-gray-10:         color.mix($color-foreground, $color-background, 0.10 * 100%) !default;
+$color-gray-15:         color.mix($color-foreground, $color-background, 0.15 * 100%) !default;
+$color-gray-20:         color.mix($color-foreground, $color-background, 0.20 * 100%) !default;
+$color-gray-25:         color.mix($color-foreground, $color-background, 0.25 * 100%) !default;
+$color-gray-30:         color.mix($color-foreground, $color-background, 0.30 * 100%) !default;
+$color-gray-35:         color.mix($color-foreground, $color-background, 0.35 * 100%) !default;
+$color-gray-40:         color.mix($color-foreground, $color-background, 0.40 * 100%) !default;
+$color-gray-45:         color.mix($color-foreground, $color-background, 0.45 * 100%) !default;
+$color-gray-50:         color.mix($color-foreground, $color-background, 0.50 * 100%) !default;
+$color-gray-55:         color.mix($color-foreground, $color-background, 0.55 * 100%) !default;
+$color-gray-60:         color.mix($color-foreground, $color-background, 0.60 * 100%) !default;
+$color-gray-65:         color.mix($color-foreground, $color-background, 0.65 * 100%) !default;
+$color-gray-70:         color.mix($color-foreground, $color-background, 0.70 * 100%) !default;
+$color-gray-75:         color.mix($color-foreground, $color-background, 0.75 * 100%) !default;
+$color-gray-80:         color.mix($color-foreground, $color-background, 0.80 * 100%) !default;
+$color-gray-85:         color.mix($color-foreground, $color-background, 0.85 * 100%) !default;
+$color-gray-90:         color.mix($color-foreground, $color-background, 0.90 * 100%) !default;
+$color-gray-95:         color.mix($color-foreground, $color-background, 0.95 * 100%) !default;
 
 $color-form:            $color-gray-05 !default;
+$color-input:           $color-background !default;
+$color-input-off:       $color-gray-05 !default;
 
-$color-secondary:       #ca62f0 !default;
+$color-secondary:       #d31f9d !default;
 $color-primary:         #2F89FE !default;
 
 $color-success:         #06C493 !default;
@@ -34,67 +38,67 @@ $color-warning:         #FFBF3F !default;
 $color-danger:          #F9536E !default;
 $color-info:            #4BD6F9 !default;
 
-$color-shadow:              mix(#000, $color-primary, 80%) !default;
+$color-shadow:              color.mix($color-black, $color-primary, 80%) !default;
 
 
 $color-white-light:         $color-white !default;
 $color-white-lighter:       $color-white !default;
 
-$color-white-dark:          mix($color-gray-50, $color-white, 5%) !default;
-$color-white-darker:        mix($color-gray-50, $color-white, 10%) !default;
+$color-white-dark:          color.mix($color-gray-50, $color-white, 5%) !default;
+$color-white-darker:        color.mix($color-gray-50, $color-white, 10%) !default;
 
-$color-black-light:         mix($color-gray-50, $color-black, 5%) !default;
-$color-black-lighter:       mix($color-gray-50, $color-black, 10%) !default;
+$color-black-light:         color.mix($color-gray-50, $color-black, 5%) !default;
+$color-black-lighter:       color.mix($color-gray-50, $color-black, 10%) !default;
 
 $color-black-dark:          $color-black !default;
 $color-black-darker:        $color-black !default;
 
 
-$color-primary-light:       lighten(mix($color-white, $color-primary, 10%), 5%) !default;
-$color-primary-lighter:     lighten(mix($color-white, $color-primary, 20%), 5%) !default;
+$color-primary-light:       color.adjust(color.mix($color-white, $color-primary, 10%), $lightness: 5%) !default;
+$color-primary-lighter:     color.adjust(color.mix($color-white, $color-primary, 20%), $lightness: 5%) !default;
 
-$color-primary-dark:        darken(mix($color-black, $color-primary, 10%), 5%) !default;
-$color-primary-darker:      darken(mix($color-black, $color-primary, 20%), 5%) !default;
+$color-primary-dark:        color.adjust(color.mix($color-black, $color-primary, 10%), $lightness: -5%) !default;
+$color-primary-darker:      color.adjust(color.mix($color-black, $color-primary, 20%), $lightness: -5%) !default;
 
 
-$color-secondary-light:     lighten(mix($color-white, $color-secondary, 10%), 5%) !default;
-$color-secondary-lighter:   lighten(mix($color-white, $color-secondary, 20%), 5%) !default;
+$color-secondary-light:     color.adjust(color.mix($color-white, $color-secondary, 10%), $lightness: 5%) !default;
+$color-secondary-lighter:   color.adjust(color.mix($color-white, $color-secondary, 20%), $lightness: 5%) !default;
 
-$color-secondary-dark:      darken(mix($color-black, $color-secondary, 10%), 5%) !default;
-$color-secondary-darker:    darken(mix($color-black, $color-secondary, 20%), 5%) !default;
+$color-secondary-dark:      color.adjust(color.mix($color-black, $color-secondary, 10%), $lightness: -5%) !default;
+$color-secondary-darker:    color.adjust(color.mix($color-black, $color-secondary, 20%), $lightness: -5%) !default;
 
 
-$color-success-light:       lighten(mix($color-white, $color-success, 10%), 5%) !default;
-$color-success-lighter:     lighten(mix($color-white, $color-success, 20%), 5%) !default;
+$color-success-light:       color.adjust(color.mix($color-white, $color-success, 10%), $lightness: 5%) !default;
+$color-success-lighter:     color.adjust(color.mix($color-white, $color-success, 20%), $lightness: 5%) !default;
 
-$color-success-dark:        darken(mix($color-black, $color-success, 10%), 5%) !default;
-$color-success-darker:      darken(mix($color-black, $color-success, 20%), 5%) !default;
+$color-success-dark:        color.adjust(color.mix($color-black, $color-success, 10%), $lightness: -5%) !default;
+$color-success-darker:      color.adjust(color.mix($color-black, $color-success, 20%), $lightness: -5%) !default;
 
 
-$color-warning-light:       lighten(mix($color-white, $color-warning, 10%), 5%) !default;
-$color-warning-lighter:     lighten(mix($color-white, $color-warning, 20%), 5%) !default;
+$color-warning-light:       color.adjust(color.mix($color-white, $color-warning, 10%), $lightness: 5%) !default;
+$color-warning-lighter:     color.adjust(color.mix($color-white, $color-warning, 20%), $lightness: 5%) !default;
 
-$color-warning-dark:        darken(mix($color-black, $color-warning, 10%), 5%) !default;
-$color-warning-darker:      darken(mix($color-black, $color-warning, 20%), 5%) !default;
+$color-warning-dark:        color.adjust(color.mix($color-black, $color-warning, 10%), $lightness: -5%) !default;
+$color-warning-darker:      color.adjust(color.mix($color-black, $color-warning, 20%), $lightness: -5%) !default;
 
 
-$color-danger-light:        lighten(mix($color-white, $color-danger, 10%), 5%) !default;
-$color-danger-lighter:      lighten(mix($color-white, $color-danger, 20%), 5%) !default;
+$color-danger-light:        color.adjust(color.mix($color-white, $color-danger, 10%), $lightness: 5%) !default;
+$color-danger-lighter:      color.adjust(color.mix($color-white, $color-danger, 20%), $lightness: 5%) !default;
 
-$color-danger-dark:         darken(mix($color-black, $color-danger, 10%), 5%) !default;
-$color-danger-darker:       darken(mix($color-black, $color-danger, 20%), 5%) !default;
+$color-danger-dark:         color.adjust(color.mix($color-black, $color-danger, 10%), $lightness: -5%) !default;
+$color-danger-darker:       color.adjust(color.mix($color-black, $color-danger, 20%), $lightness: -5%) !default;
 
-$color-info-light:          lighten(mix($color-white, $color-info, 10%), 5%) !default;
-$color-info-lighter:        lighten(mix($color-white, $color-info, 20%), 5%) !default;
+$color-info-light:          color.adjust(color.mix($color-white, $color-info, 10%), $lightness: 5%) !default;
+$color-info-lighter:        color.adjust(color.mix($color-white, $color-info, 20%), $lightness: 5%) !default;
 
-$color-info-dark:           darken(mix($color-black, $color-info, 10%), 5%) !default;
-$color-info-darker:         darken(mix($color-black, $color-info, 20%), 5%) !default;
+$color-info-dark:           color.adjust(color.mix($color-black, $color-info, 10%), $lightness: -5%) !default;
+$color-info-darker:         color.adjust(color.mix($color-black, $color-info, 20%), $lightness: -5%) !default;
 
-$color-background-light:    lighten(mix($color-white, $color-background, 10%), 5%) !default;
-$color-background-lighter:  lighten(mix($color-white, $color-background, 20%), 5%) !default;
+$color-background-light:    color.adjust(color.mix($color-white, $color-background, 10%), $lightness: 5%) !default;
+$color-background-lighter:  color.adjust(color.mix($color-white, $color-background, 20%), $lightness: 5%) !default;
 
-$color-background-dark:     darken(mix($color-black, $color-background, 10%), 5%) !default;
-$color-background-darker:   darken(mix($color-black, $color-background, 20%), 5%) !default;
+$color-background-dark:     color.adjust(color.mix($color-black, $color-background, 10%), $lightness: -5%) !default;
+$color-background-darker:   color.adjust(color.mix($color-black, $color-background, 20%), $lightness: -5%) !default;
 
 $xs-radius:                 2px !default;
 $sm-radius:                 4px !default;
@@ -183,7 +187,7 @@ $modal: (
         'default': (
                 'color': $color-foreground,
                 'border': $color-gray-10,
-                'header': mix($color-background, $color-form, 50%),
+                'header': color.mix($color-background, $color-form, 50%),
                 'body': $color-background,
                 'footer': $color-background,
         ),
@@ -196,25 +200,35 @@ $modal: (
         )
 ) !default;
 
+$drawer: (
+        'default': (
+                'color': $color-foreground,
+                'border': $color-gray-10,
+                'header': color.mix($color-background, $color-form, 50%),
+                'body': $color-background,
+                'footer': $color-background,
+        )
+) !default;
+
 $colors-tags: (
-        '0': mix($color-secondary, $color-secondary, 65%),
-        '1': mix($color-primary, $color-secondary, 65%),
-        '2': mix($color-danger, $color-secondary, 65%),
-        '3': mix($color-success, $color-secondary, 65%),
-        '4': mix($color-warning, $color-secondary, 65%),
-        '5': mix($color-primary, $color-success, 65%),
-        '6': mix($color-secondary, $color-success, 65%),
-        '7': mix($color-danger, $color-success, 65%),
-        '8': mix($color-success, $color-success, 65%),
-        '9': mix($color-warning, $color-success, 65%),
-        '10': mix($color-primary, $color-danger, 65%),
-        '11': mix($color-secondary, $color-danger, 65%),
-        '12': mix($color-danger, $color-danger, 65%),
-        '13': mix($color-success, $color-danger, 65%),
-        '14': mix($color-warning, $color-danger, 65%),
-        '15': mix($color-primary, $color-warning, 65%),
-        '16': mix($color-secondary, $color-warning, 65%),
-        '17': mix($color-danger, $color-warning, 65%),
-        '18': mix($color-success, $color-warning, 65%),
-        '19': mix($color-warning, $color-warning, 65%),
+        '0': color.mix($color-secondary, $color-secondary, 65%),
+        '1': color.mix($color-primary, $color-secondary, 65%),
+        '2': color.mix($color-danger, $color-secondary, 65%),
+        '3': color.mix($color-success, $color-secondary, 65%),
+        '4': color.mix($color-warning, $color-secondary, 65%),
+        '5': color.mix($color-primary, $color-success, 65%),
+        '6': color.mix($color-secondary, $color-success, 65%),
+        '7': color.mix($color-danger, $color-success, 65%),
+        '8': color.mix($color-success, $color-success, 65%),
+        '9': color.mix($color-warning, $color-success, 65%),
+        '10': color.mix($color-primary, $color-danger, 65%),
+        '11': color.mix($color-secondary, $color-danger, 65%),
+        '12': color.mix($color-danger, $color-danger, 65%),
+        '13': color.mix($color-success, $color-danger, 65%),
+        '14': color.mix($color-warning, $color-danger, 65%),
+        '15': color.mix($color-primary, $color-warning, 65%),
+        '16': color.mix($color-secondary, $color-warning, 65%),
+        '17': color.mix($color-danger, $color-warning, 65%),
+        '18': color.mix($color-success, $color-warning, 65%),
+        '19': color.mix($color-warning, $color-warning, 65%),
 ) !default;

package/themes/macos/select/src/select/select.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-select {
@@ -6,7 +7,7 @@
 }
 
 .n-select.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-select__clear,
@@ -31,9 +32,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-select--#{$color}:not(.n-disabled):hover,
      .n-select--#{$color}:not(.n-disabled).n-focus {

package/themes/macos/switch/src/switch/switch.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:color";
 @import "../../../root/vars";
 
 .n-switch__switch {
@@ -12,13 +14,13 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-switch--#{$color}:not(.n-disabled) .n-switch__switch {
         background: $-color-base;
-        border-color: mix($-color-dark, $-color-base, 25%);
+        border-color: color.mix($-color-dark, $-color-base, 25%);
     }
 
     .n-switch--#{$color}:not(.n-disabled) .n-switch__label {

package/themes/macos/table/src/table/table.scss

@@ -1,7 +1,7 @@
 @import "../../../root/vars";
 
-.n-table {
-    box-shadow: inset 0 0 1px 1px $color-gray-15;
+.n-table:before {
+    border: 1px solid $color-gray-15;
 }
 
 .n-table .n-draglist-item {
@@ -9,7 +9,7 @@
 }
 
 .n-table .n-table__header {
-    background: $color-form;
     border: 1px solid $color-gray-15;
+    background: $color-form;
     box-shadow: 0 0 3px rgba($color-shadow, 0.10);
 }

package/themes/macos/table/src/table-cell/table-cell.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-table-cell.n-changed:before {
@@ -23,14 +24,14 @@
 }
 
 .n-table-cell--checkbox.n-disabled i {
-    background:rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-disabled) i,
     .n-draglist--#{$color} .n-table-cell--checkbox.n-checked:not(.n-uncheck) i {

package/themes/macos/tabs/src/tabs/tabs.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-tabs:not(.n-float) > .n-tabs__header:after {
@@ -14,9 +15,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-tabs--#{$color} .n-tabs__indicator {
         background: $-color-base;

package/themes/macos/tabs/src/tabs-item/tabs-item.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-tabs__tab-icon {
@@ -6,9 +7,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-icon,
     .n-tabs--#{$color} .n-tabs__tab.n-active .n-tabs__tab-label {

package/themes/macos/tags/src/tags-item/tags-item.scss

@@ -1,13 +1,15 @@
+@use "sass:map";
+@use "sass:color";
 @import "../../../root/vars";
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-tags-item--color-#{$color} {
-        color: mix($-color-dark, $color-black, 70%);
+        color: color.mix($-color-dark, $color-black, 70%);
         background: rgba($-color-base, 0.25);
     }
     .n-tags-item--color-#{$color} i {

package/themes/macos/textarea/src/textarea/textarea.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-textarea textarea {
@@ -6,14 +7,14 @@
 }
 
 .n-textarea.n-disabled textarea  {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     /**
      * Button primary

package/themes/macos/timepicker/src/timepicker/timepicker.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-timepicker {
@@ -6,7 +7,7 @@
 }
 
 .n-timepicker.n-disabled {
-    background: rgba($color-gray-15, 0.3);
+    background: $color-input-off;
 }
 
 .n-timepicker__seperator {
@@ -38,9 +39,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
      .n-timepicker--#{$color}:not(.n-disabled):hover,
      .n-timepicker--#{$color}:not(.n-disabled).n-focus {

package/themes/macos/timepicker/src/timepicker-panel/timepicker-panel.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../root/vars";
 
 .n-timepicker-panel {
@@ -15,9 +16,9 @@
 
 @each $color, $values in $colors {
 
-    $-color-base: map_get($values, 'base');
-    $-color-light: map_get($values, 'light');
-    $-color-dark: map_get($values, 'dark');
+    $-color-base: map.get($values, 'base');
+    $-color-light: map.get($values, 'light');
+    $-color-dark: map.get($values, 'dark');
 
     .n-timepicker-panel--#{$color} .n-timepicker-panel__item.n-selected {
         color: $color-white;

package/webpack.config.js

@@ -1,16 +1,19 @@
+const fs = require('fs');
 const path = require("path");
 const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 let themes = {
     './src/index.scss': './nano-ui.css',
-    './docs/src/scss/index.scss': '../docs/dist/docs.css',
+    './docs/src/scss/index-light.scss': '../docs/dist/light.css',
+    './docs/src/scss/index-dark.scss': '../docs/dist/dark.css',
     './themes/macos/index-dark.scss': './themes/dark.css',
     './themes/macos/index-light.scss': './themes/light.css',
 };
 
-let config = {
+let libJs = {
     entry: ["./src/index.js"],
     module: {
         rules: [
@@ -25,7 +28,6 @@ let config = {
                 },
             }
         ],
-
     },
     externals: {
         'vue': {
@@ -41,6 +43,30 @@ let config = {
     plugins: []
 };
 
+let docJs = {
+    entry: ["./docs/src/js/index.js"],
+    module: {
+        rules: [
+            {
+                test: /.js$/,
+                include: [
+                    path.resolve('src'),
+                    path.resolve('node_modules/@kizmann/pico-js'),
+                ],
+                loader: 'babel-loader',
+                options: {
+                    configFile: path.resolve('babel.config.js')
+                },
+            }
+        ],
+    },
+    externals: {
+        // '@kizmann/pico-js': {
+        //     root: 'pi', commonjs2: '@kizmann/pico-js', commonjs: '@kizmann/pico-js', amd: '@kizmann/pico-js'
+        // }
+    }
+};
+
 let themeFn = (entry, target) => ({
     entry: [entry],
     module: {
@@ -70,30 +96,70 @@ let themeFn = (entry, target) => ({
 
 module.exports = function (env, argv) {
 
-    config.mode = argv.mode;
+    let docConfig = {
+        inject: false, base: 'https://nano-ui.local', logoSvg: '', loaderCss: ''
+    }
+
+    if ( fs.existsSync('./assets/nano-ui-dark.svg') ) {
+        docConfig.logoSvg = fs.readFileSync('./assets/nano-ui-dark.svg', 'utf8');
+    }
+
+    if ( fs.existsSync('./docs/src/scss/theme/loader.scss') ) {
+        docConfig.loaderCss = fs.readFileSync('./docs/src/scss/theme/loader.scss', 'utf8');
+    }
+
+    if ( argv.mode === 'production' ) {
+        docConfig.base = 'https://vankizmann.github.io/nano-ui';
+    }
+
+    libJs.mode = argv.mode;
 
     if ( argv.mode === 'development' ) {
-        config.devtool = 'eval-source-map';
+        libJs.devtool = 'eval-source-map';
     }
 
     if ( argv.mode === 'production' ) {
-        config.devtool = 'source-map';
+        libJs.devtool = 'source-map';
     }
 
     /**
      * @const __dirname
      */
 
-    let bundlerPackage = Object.assign({
+    let libJsBundle = Object.assign({
 
-        output:{
+        output: {
             filename: "nano-ui.js",
             path: path.resolve(__dirname, "dist"),
             library: 'Nano',
             libraryTarget: "umd",
         }
 
-    }, config);
+    }, libJs);
+
+    let docJsBundle = Object.assign({
+
+        output: {
+            filename: "dist/docs.js",
+            path: path.resolve(__dirname, "docs"),
+        },
+
+        plugins: [
+            new webpack.ProvidePlugin({
+                global: 'global'
+            }),
+            new HtmlWebpackPlugin(Object.assign({
+                template: path.resolve('./docs/index.template.html'),
+            }, docConfig))
+        ],
+
+        resolve: {
+            fallback: {
+                "global": require.resolve("global")
+            }
+        }
+
+    }, docJs);
 
     let themeList = [];
 
@@ -103,7 +169,7 @@ module.exports = function (env, argv) {
 
     if ( argv.mode === 'development' ) {
         return [
-            bundlerPackage, ...themeList
+            libJsBundle, docJsBundle, ...themeList
         ];
     }
 
@@ -111,7 +177,8 @@ module.exports = function (env, argv) {
         minimize: true
     });
 
-    bundlerPackage.plugins.push(loaderOptions);
+    libJsBundle.plugins.push(loaderOptions);
+    docJsBundle.plugins.push(loaderOptions);
 
     themeList.forEach((cfg) => {
         cfg.plugins.push(loaderOptions);
@@ -131,13 +198,14 @@ module.exports = function (env, argv) {
 
     optimization.minimizer.push(terser);
 
-    bundlerPackage.optimization = optimization;
+    libJsBundle.optimization = optimization;
+    docJsBundle.optimization = optimization;
 
     themeList.forEach((cfg) => {
         cfg.optimization = optimization;
     });
 
     return [
-        bundlerPackage, ...themeList
+        libJsBundle, docJsBundle, ...themeList
     ];
 }