@kws3/ui 4.4.0-alpha.2 → 4.4.0-alpha.4

package/styles/CheckRadio.scss

@@ -1,19 +1,16 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-checkradio-default-check-color: #{cv.getVar("text")} !default;
-$kws-checkradio-default-check-color-invert: findColorInvert(
-  $kws-checkradio-default-check-color
-) !default;
-$kws-checkradio-default-border-color: #dbdbdb !default;
-$kws-checkradio-focus-box-shadow-size: #{cv.getVar("focus-shadow-size")} !default;
-$kws-checkradio-focus-box-shadow-color: hsla(
-  #{cv.getVar("focus-h")},
-  #{cv.getVar("focus-s")},
-  #{cv.getVar("focus-l")},
-  #{cv.getVar("focus-shadow-alpha")}
+$theme-colors: dv.$colors !default;
+$check-color: cv.getVar("text") !default;
+$check-color-invert: cv.getVar("text-invert") !default;
+$border-color: cv.getVar("text") !default;
+$focus-box-shadow-size: cv.getVar("focus-shadow-size") !default;
+$focus-box-shadow-color: hsla(
+  cv.getVar("focus-h"),
+  cv.getVar("focus-s"),
+  cv.getVar("focus-l"),
+  cv.getVar("focus-shadow-alpha")
 ) !default;
 
 .kws-checkbox {
@@ -35,7 +32,7 @@ $kws-checkradio-focus-box-shadow-color: hsla(
     top: 0.25em;
     left: 0;
     font-size: 1em;
-    color: $kws-checkradio-default-check-color;
+    color: $check-color;
     opacity: 0;
     display: inline-flex;
     align-items: center;
@@ -58,7 +55,7 @@ $kws-checkradio-focus-box-shadow-color: hsla(
       content: "";
     }
     &:before {
-      border: 0.05em solid $kws-checkradio-default-border-color;
+      border: 0.05em solid $border-color;
       width: 1em;
       height: 1em;
       top: 0.25em;
@@ -82,7 +79,7 @@ $kws-checkradio-focus-box-shadow-color: hsla(
   }
   input[type="checkbox"]:checked + .kws-checkbox-label {
     &:after {
-      border: 0.1em solid $kws-checkradio-default-check-color;
+      border: 0.1em solid $check-color;
       border-top: 0;
       border-left: 0;
     }
@@ -94,36 +91,36 @@ $kws-checkradio-focus-box-shadow-color: hsla(
     &:after {
       transform: none;
       border: 0.25em solid #fff;
-      background: $kws-checkradio-default-check-color;
+      background: $check-color;
       width: 1em;
       height: 1em;
       top: 0.25em;
       left: 0;
       border-radius: 0.14em;
-      box-shadow: 0 0 0 0.05em $kws-checkradio-default-border-color;
+      box-shadow: 0 0 0 0.05em $border-color;
       display: inline-block;
     }
   }
 
   &.is-inverted input[type="checkbox"]:checked + .kws-checkbox-label {
     &:before {
-      background: $kws-checkradio-default-check-color;
+      background: $check-color;
     }
     &:after {
-      border-color: $kws-checkradio-default-check-color-invert;
+      border-color: $check-color-invert;
     }
   }
   &.is-inverted input[type="checkbox"]:checked ~ .icon {
-    color: $kws-checkradio-default-check-color-invert;
+    color: $check-color-invert;
   }
 
   &.is-inverted input[type="radio"]:checked + .kws-checkbox-label {
     &:before {
-      background: $kws-checkradio-default-check-color;
+      background: $check-color;
     }
     &:after {
-      background-color: $kws-checkradio-default-check-color-invert;
-      border-color: $kws-checkradio-default-check-color;
+      background-color: $check-color-invert;
+      border-color: $check-color;
       box-shadow: none;
     }
   }
@@ -133,8 +130,7 @@ $kws-checkradio-focus-box-shadow-color: hsla(
   input[type="checkbox"]:active + .kws-checkbox-label,
   input[type="radio"]:active + .kws-checkbox-label {
     &:before {
-      box-shadow: $kws-checkradio-focus-box-shadow-size
-        $kws-checkradio-focus-box-shadow-color;
+      box-shadow: $focus-box-shadow-size $focus-box-shadow-color;
     }
   }
 
@@ -152,11 +148,11 @@ $kws-checkradio-focus-box-shadow-color: hsla(
     cursor: not-allowed;
   }
 
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-invert: fn.bulmaFindColorInvert($color);
-    $color-light: fn.bulmaFindLightColor($color);
-    $color-dark: fn.bulmaFindDarkColor($color);
+  @each $name, $pair in $theme-colors {
+    $color: cv.getVar($name);
+    $color-invert: cv.getVar($name, "", "-invert");
+    $color-light: cv.getVar($name, "", "-light");
+    $color-dark: cv.getVar($name, "", "-dark");
     &.is-#{$name} input[type="checkbox"]:checked + .kws-checkbox-label {
       &:after {
         border-color: $color;
@@ -216,12 +212,12 @@ $kws-checkradio-focus-box-shadow-color: hsla(
     &.is-#{$name} input[type="checkbox"]:active + .kws-checkbox-label,
     &.is-#{$name} input[type="radio"]:active + .kws-checkbox-label {
       &:before {
-        box-shadow: $kws-checkradio-focus-box-shadow-size
+        box-shadow: $focus-box-shadow-size
           hsla(
-            #{cv.getVar($name, "", "-h")},
-            #{cv.getVar($name, "", "-s")},
-            #{cv.getVar($name, "", "-l")},
-            #{cv.getVar("focus-shadow-alpha")}
+            cv.getVar($name, "", "-h"),
+            cv.getVar($name, "", "-s"),
+            cv.getVar($name, "", "-l"),
+            cv.getVar("focus-shadow-alpha")
           );
       }
     }

package/styles/Colorpicker.scss

@@ -1,3 +1,27 @@
+@use "bulma/sass/utilities/css-variables" as cv;
+
+$picker-shadow: cv.getVar("shadow") !default;
+$picker-border-color: cv.getVar("border") !default;
+$preview-shadow:
+  0 0.125rem 0.1875rem
+    hsla(
+      cv.getVar("shadow-h"),
+      cv.getVar("shadow-s"),
+      cv.getVar("shadow-l"),
+      0.1
+    ),
+  0 0 0 0.0625rem
+    hsla(
+      cv.getVar("shadow-h"),
+      cv.getVar("shadow-s"),
+      cv.getVar("shadow-l"),
+      0.1
+    ) !default;
+$preview-radius: cv.getVar("radius-small") !default;
+$icon-shadow: 0 0.0625rem 0.0625rem
+  hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
+$dragover-hilight-color: cv.getVar("success-soft") !default;
+
 .color-picker,
 .color-picker:before,
 .color-picker:after,
@@ -18,10 +42,8 @@
     font: inherit;
   }
   .color-picker-control {
-    border: 1px solid #000;
-    -webkit-box-shadow: 0.0625rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0.0625rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.5);
-    box-shadow: 0.0625rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.5);
+    border: 1px solid $picker-border-color;
+    box-shadow: $picker-shadow;
     *,
     *:before,
     *:after {
@@ -147,7 +169,7 @@
   }
 }
 
-.color-picker-wrapper {
+.kws-color-picker {
   position: relative;
   .color-preview {
     height: 1.5rem;
@@ -157,8 +179,7 @@
     top: 0.5rem;
     right: 0.5rem;
     z-index: 4;
-    box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
-      0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+    box-shadow: $preview-shadow;
     &.is-small {
       height: 0.95rem;
       width: 0.95rem;
@@ -180,6 +201,7 @@
       top: 0.5rem;
       height: 1.5rem;
       width: 1.5rem;
+      border-radius: $preview-radius;
       &.is-small {
         height: 0.95rem;
         width: 0.95rem;
@@ -195,7 +217,7 @@
     }
   }
   i {
-    text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.4);
+    text-shadow: $icon-shadow;
   }
   input.readonly {
     pointer-events: none;
@@ -219,6 +241,6 @@
     }
   }
   .dragover input {
-    background: #bdd2b9;
+    background: $dragover-hilight-color;
   }
 }

package/styles/DataSearch.scss

@@ -1,13 +1,20 @@
 @use "bulma/sass/utilities/css-variables" as cv;
-@use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/mixins" as mx;
 
 .kws-grid-search {
-  .is-not-in-use {
-  }
   .is-in-use {
-    border-color: transparentize(dv.$success, 0.5);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.23) !important;
+    border-color: hsla(
+      cv.getVar("success-h"),
+      cv.getVar("success-s"),
+      cv.getVar("success-l"),
+      0.5
+    );
+    box-shadow: 0 0 3px hsla(
+      cv.getVar("success-h"),
+      cv.getVar("success-s"),
+      cv.getVar("success-l"),
+      0.23
+    ) !important;
     z-index: 2;
   }
 
@@ -30,8 +37,8 @@
       .main-search {
         width: 100%;
         .input {
-          border-bottom-right-radius: #{cv.getVar("radius")} !important;
-          border-top-right-radius: #{cv.getVar("radius")} !important;
+          border-bottom-right-radius: cv.getVar("radius") !important;
+          border-top-right-radius: cv.getVar("radius") !important;
         }
       }
       .search-control {

package/styles/DataSort.scss

@@ -8,7 +8,7 @@ $background: cv.getVar("border") !default;
 $label-background: hsla(
   cv.getVar("scheme-h"),
   cv.getVar("scheme-s"),
-  90%,
+  calc(cv.getVar("border-l") - 5%),
   1
 ) !default;
 $dropdown-text-color: cv.getVar("primary") !default;
@@ -41,6 +41,7 @@ $dropdown-marker-color: cv.getVar("primary") !default;
       padding-top: 0.2rem;
       padding-bottom: 0.2rem;
       border: none;
+      box-shadow: none;
       background: transparent;
       color: $dropdown-text-color;
       height: auto;
@@ -54,8 +55,9 @@ $dropdown-marker-color: cv.getVar("primary") !default;
         width: 100%;
       }
     }
-    &::after {
+    &:not(.is-multiple):not(.is-loading)::after {
       border-color: $dropdown-marker-color;
+      top: 40%;
     }
   }
 }

package/styles/Datepicker.scss

@@ -1,41 +1,33 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-datepicker-background: #{cv.getVar("scheme-main-ter")} !default;
-$kws-datepicker-text: dv.$text !default;
-$kws-datepicker-shadow:
-  0 2px 5px rgba(0, 0, 0, 0.3),
-  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
-$kws-datepicker-radius: 0px !default;
+$theme-colors: dv.$colors !default;
+$background: cv.getVar("scheme-main-ter") !default;
+$text: cv.getVar("text") !default;
+$shadow: cv.getVar("shadow") !default;
+$radius: cv.getVar("radius-small") !default;
 
 .flatpickr-calendar {
-  $inRangeBg: fn.bulmaLighten($kws-datepicker-text, 55);
-  @if (fn.bulmaColorLuminance($kws-datepicker-text) > 0.55) {
-    $inRangeBg: fn.bulmaDarken($kws-datepicker-text, 55);
-  }
-
-  box-shadow: $kws-datepicker-shadow;
-  background: $kws-datepicker-background;
-  color: $kws-datepicker-text;
+  box-shadow: $shadow;
+  background: $background;
+  color: $text;
 
-  border-radius: $kws-datepicker-radius;
+  border-radius: $radius;
   .flatpickr-months {
-    border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+    border-radius: $radius $radius 0 0;
     .flatpickr-month {
-      border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+      border-radius: $radius $radius 0 0;
     }
   }
   .flatpickr-innerContainer {
-    border-radius: 0 0 $kws-datepicker-radius $kws-datepicker-radius;
+    border-radius: 0 0 $radius $radius;
   }
 
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-invert: fn.bulmaFindColorInvert($color);
-    $color-light: fn.bulmaFindLightColor($color);
-    $color-dark: fn.bulmaFindDarkColor($color);
+  @each $name, $pair in $theme-colors {
+    $color: cv.getVar($name);
+    $color-invert: cv.getVar($name, "", "-invert");
+    $color-light: cv.getVar($name, "", "-soft");
+    $color-dark: cv.getVar($name, "", "-bold");
     &.is-#{$name} {
       &.arrowTop:before,
       &.arrowTop:after {
@@ -140,7 +132,7 @@ $kws-datepicker-radius: 0px !default;
   }
 
   .flatpickr-day {
-    color: $kws-datepicker-text;
+    color: $text;
     &.flatpickr-disabled,
     &.flatpickr-disabled:hover,
     &.prevMonthDay,
@@ -148,13 +140,25 @@ $kws-datepicker-radius: 0px !default;
     &.notAllowed,
     &.notAllowed.prevMonthDay,
     &.notAllowed.nextMonthDay {
-      color: transparentize($kws-datepicker-text, 0.7);
+      color: hsla(
+        cv.getVar("text-h"),
+        cv.getVar("text-s"),
+        cv.getVar("text-l"),
+        0.6
+      );
+    }
+
+    &.startRange,
+    &.endRange {
+      background-color: cv.getVar("text");
+      border-color: cv.getVar("text");
+      color: cv.getVar("text-invert");
     }
 
     &.inRange {
       box-shadow:
-        -5px 0 0 $inRangeBg,
-        5px 0 0 $inRangeBg;
+        -5px 0 0 cv.getVar("text-weak"),
+        5px 0 0 cv.getVar("text-weak");
     }
 
     &.inRange,
@@ -169,8 +173,9 @@ $kws-datepicker-radius: 0px !default;
     &:focus,
     &.prevMonthDay:focus,
     &.nextMonthDay:focus {
-      background: $inRangeBg;
-      border-color: $inRangeBg;
+      background: cv.getVar("text-weak");
+      border-color: cv.getVar("text-weak");
+      color: cv.getVar("text-invert");
     }
   }
 }

package/styles/Divider.scss

@@ -1,11 +1,11 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-divider-color: #{cv.getVar("border")} !default;
-$kws-divider-font-size: cv.getVar("size-smal") !default;
-$kws-divider-gap: 0.25rem !default;
-$kws-divider-margin: 1rem !default;
+$theme-colors: dv.$colors !default;
+$color: cv.getVar("border") !default;
+$font-size: cv.getVar("size-small") !default;
+$gap: 0.25rem !default;
+$margin: 1rem !default;
 
 .kws-divider {
   position: relative;
@@ -13,10 +13,10 @@ $kws-divider-margin: 1rem !default;
   align-items: center;
   text-transform: uppercase;
   color: cv.getVar("grey");
-  font-size: $kws-divider-font-size;
+  font-size: $font-size;
   font-weight: cv.getVar("weight-semibold");
   letter-spacing: 0.5px;
-  margin: $kws-divider-margin 0;
+  margin: $margin 0;
   width: 100%;
 
   &::after,
@@ -25,20 +25,20 @@ $kws-divider-margin: 1rem !default;
     display: block;
     flex: 1;
     height: 1px;
-    background-color: $kws-divider-color;
+    background-color: $color;
   }
 
   &:not(.is-right),
   &:not(.is-bottom) {
     &::after {
-      margin-left: $kws-divider-gap;
+      margin-left: $gap;
     }
   }
 
   &:not(.is-left),
   &:not(.is-top) {
     &::before {
-      margin-right: $kws-divider-gap;
+      margin-right: $gap;
     }
   }
 
@@ -58,7 +58,7 @@ $kws-divider-margin: 1rem !default;
 
   &.is-vertical {
     flex-direction: column;
-    margin: 0 $kws-divider-margin;
+    margin: 0 $margin;
     height: 100%;
     width: auto;
 
@@ -70,12 +70,12 @@ $kws-divider-margin: 1rem !default;
 
     &::after {
       margin-left: 0;
-      margin-top: $kws-divider-gap;
+      margin-top: $gap;
     }
 
     &::before {
       margin-right: 0;
-      margin-bottom: $kws-divider-gap;
+      margin-bottom: $gap;
     }
   }
 
@@ -86,9 +86,9 @@ $kws-divider-margin: 1rem !default;
     }
   }
 
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-light: findLightColor($color);
+  @each $name, $pair in $theme-colors {
+    $color: cv.getVar($name);
+    $color-light: cv.getVar($name, "", "-light");
     &.is-#{$name} {
       &::after,
       &::before {

package/styles/FileUpload.scss

@@ -1,43 +1,29 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-fileupload-bg-color: #{cv.getVar("background-white")} !default;
-$kws-fileupload-border-color: #{cv.getVar("border")} !default;
-$kws-fileupload-shadow: #{cv.getVar("shadow-s")} !default;
-$kws-fileupload-radius: #{cv.getVar("radius")} !default;
-$kws-fileupload-text-color: #{cv.getVar("text")} !default;
-$kws-fileupload-disabled-bg-color: #{cv.getVar("white-ter")} !default;
-$kws-fileupload-disabled-border-color: #{cv.getVar("white-ter")} !default;
-$kws-fileupload-progress-bg-color: #{cv.getVar("success-light")} !default;
-$kws-fileupload-progress-text-color: #{cv.getVar("success-dark")} !default;
-$kws-fileupload-progress-anim-easing: linear !default;
-@if (variable-exists(#{cv.getVar("easeOutCustom")})) {
-  $kws-fileupload-progress-anim-easing: #{cv.getVar("easeOutCustom")} !default;
-}
+$theme-colors: dv.$colors !default;
+$progress-bg-color: cv.getVar("success-light") !default;
+$progress-text-color: cv.getVar("success-dark") !default;
+$progress-easing: linear !default;
 
 .kws-file-upload {
   width: 100%;
   .file-upload-inner {
     position: relative;
-    background: $kws-fileupload-bg-color;
-    border: 1px solid $kws-fileupload-border-color;
-    border-radius: $kws-fileupload-radius;
     max-width: 100%;
-    height: 2.5rem;
-    .file {
+    height: cv.getVar("control-height");
+    .file-target {
       overflow: hidden;
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       right: 2rem;
-      box-shadow: $kws-fileupload-shadow;
-      .filename,
+      .file-name,
       .upload-progress,
       .progress-caption {
-        padding: 0.7rem 0.5rem;
+        padding: cv.getVar("control-padding-horizontal")
+          cv.getVar("control-padding-vertical");
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -58,17 +44,18 @@ $kws-fileupload-progress-anim-easing: linear !default;
           width: 100%;
           height: 100%;
           .bar {
-            border-radius: $kws-fileupload-radius 0 0 $kws-fileupload-radius;
+            border-radius: cv.getVar("input-radius") 0 0
+              cv.getVar("input-radius");
             position: relative;
             height: 100%;
-            background: $kws-fileupload-progress-bg-color;
-            transition: width 0.3s $kws-fileupload-progress-anim-easing;
+            background: $progress-bg-color;
+            transition: width 0.3s $progress-easing;
           }
         }
       }
       .progress-caption {
         text-shadow: none;
-        color: $kws-fileupload-progress-text-color;
+        color: $progress-text-color;
       }
       .filename {
         span {
@@ -79,9 +66,9 @@ $kws-fileupload-progress-anim-easing: linear !default;
       }
     }
     .up-icon {
-      border-radius: 0 $kws-fileupload-radius $kws-fileupload-radius 0;
-      background: $kws-fileupload-border-color;
-      color: $kws-fileupload-text-color;
+      border-radius: 0 cv.getVar("input-radius") cv.getVar("input-radius") 0;
+      background: cv.getVar("border");
+      color: cv.getVar("text");
       padding: 0.5rem 0;
       width: 2rem;
       text-align: center;
@@ -94,11 +81,12 @@ $kws-fileupload-progress-anim-easing: linear !default;
       justify-content: center;
       .icon {
         height: 1.4rem;
+        font-size: 1em;
       }
       .loader {
         margin: 0.2rem auto;
-        border-left-color: $kws-fileupload-text-color;
-        border-bottom-color: $kws-fileupload-text-color;
+        border-left-color: cv.getVar("text");
+        border-bottom-color: cv.getVar("text");
       }
     }
     input[type="file"] {
@@ -110,14 +98,13 @@ $kws-fileupload-progress-anim-easing: linear !default;
       opacity: 0;
     }
   }
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-invert: fn.bulmaFindColorInvert($color);
-    $color-light: fn.bulmaFindLightColor($color);
-    $color-dark: fn.bulmaFindDarkColor($color);
+  @each $name, $pair in $theme-colors {
+    $color: cv.getVar($name);
+    $color-invert: cv.getVar($name, "", "-invert");
+    $color-light: cv.getVar($name, "", "-light");
+    $color-dark: cv.getVar($name, "", "-dark");
     &.is-#{$name} {
       .file-upload-inner {
-        border-color: $color;
         .up-icon {
           background: $color;
           color: $color-invert;
@@ -142,19 +129,19 @@ $kws-fileupload-progress-anim-easing: linear !default;
   &.is-disabled {
     opacity: 0.6;
     .file-upload-inner {
-      background: $kws-fileupload-disabled-bg-color;
-      border-color: $kws-fileupload-disabled-border-color;
-      color: $kws-fileupload-text-color;
+      background: cv.getVar("input-disabled-background-color");
+      border-color: cv.getVar("input-disabled-border-color");
+      color: cv.getVar("input-disabled-color");
       .up-icon {
         text-shadow: none;
-        background: $kws-fileupload-disabled-bg-color;
+        background: cv.getVar("input-disabled-background-color");
       }
       .file {
         box-shadow: none;
       }
     }
-    @each $name, $pair in $kws-theme-colors {
-      $color: nth($pair, 1);
+    @each $name, $pair in $theme-colors {
+      $color: cv.getVar($name);
       &.is-#{$name} {
         .icon {
           color: $color;
@@ -168,27 +155,24 @@ $kws-fileupload-progress-anim-easing: linear !default;
   }
 
   &.is-small {
-    .file-upload-inner {
-      font-size: 0.75rem;
-      height: 2rem;
+    .file-target {
+      right: 1.75rem;
     }
     .up-icon {
       width: 1.75rem;
     }
   }
   &.is-medium {
-    .file-upload-inner {
-      font-size: 1.25rem;
-      height: 3rem;
+    .file-target {
+      right: 2.5rem;
     }
     .up-icon {
       width: 2.5rem;
     }
   }
   &.is-large {
-    .file-upload-inner {
-      font-size: 1.5rem;
-      height: 3.5rem;
+    .file-target {
+      right: 3rem;
     }
     .up-icon {
       width: 3rem;