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

package/styles/RangeSlider.scss

@@ -1,27 +1,26 @@
 @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-slider-radius: #{cv.getVar("radius")} !default;
-$kws-slider-track-background: #{cv.getVar("grey-lighter")} !default;
-$kws-slider-track-radius: #{cv.getVar("radius")} !default;
-$kws-slider-track-border: 0px solid #{cv.getVar("grey")} !default;
-$kws-slider-track-shadow: 0px 0px 0px #{cv.getVar("grey")} !default;
-$kws-slider-thumb-background: #{cv.getVar("white")} !default;
-$kws-slider-thumb-radius: #{cv.getVar("radius")} !default;
-$kws-slider-thumb-border: 1px solid #{cv.getVar("grey-light")} !default;
-$kws-slider-thumb-shadow: none !default;
-$kws-slider-thumb-to-track-ratio: 2 !default;
-$kws-slider-output-width: 3rem !default;
-$kws-slider-output-background: #{cv.getVar("grey-dark")} !default;
-$kws-slider-output-color: #{cv.getVar("white")} !default;
-$kws-slider-output-radius: #{cv.getVar("radius")} !default;
+$theme-colors: dv.$colors !default;
+$radius: cv.getVar("radius") !default;
+$track-background: cv.getVar("border") !default;
+$track-radius: cv.getVar("radius") !default;
+$track-border: 0px solid cv.getVar("border") !default;
+$track-shadow: cv.getVar("input-shadow") !default;
+$thumb-background: cv.getVar("text-invert") !default;
+$thumb-radius: cv.getVar("radius-small") !default;
+$thumb-border: 1px solid cv.getVar("border") !default;
+$thumb-shadow: none !default;
+$thumb-to-track-ratio: 2 !default;
+$output-width: 3rem !default;
+$output-background: cv.getVar("scheme-invert-ter") !default;
+$output-color: cv.getVar("text-invert") !default;
+$output-radius: cv.getVar("radius-small") !default;
 
 @use "sass:math";
 
 @mixin slider-size($size) {
-  $track-height: $size / $kws-slider-thumb-to-track-ratio;
+  $track-height: calc($size / $thumb-to-track-ratio);
   $thumb-size: $size;
 
   min-height: calc((#{$size} + 2px) * 1.25);
@@ -51,7 +50,7 @@ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
     margin-top: 0;
   }
   &::-webkit-slider-thumb {
-    margin-top: -($thumb-size / 4);
+    margin-top: calc($thumb-size / 4 * -1);
   }
 }
 
@@ -85,16 +84,16 @@ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
       &.has-output,
       &.has-output-tooltip {
         + output {
-          width: $kws-slider-output-width;
-          background: $kws-slider-output-background;
-          border-radius: $kws-slider-output-radius;
+          width: $output-width;
+          background: $output-background;
+          border-radius: $output-radius;
           padding: 0.4rem 0.8rem;
           font-size: cv.getVar("size-7");
           line-height: cv.getVar("size-7");
           text-align: center;
           text-overflow: ellipsis;
           white-space: nowrap;
-          color: $kws-slider-output-color;
+          color: $output-color;
           overflow: hidden;
           pointer-events: none;
           z-index: 200;
@@ -106,7 +105,7 @@ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
       &.has-output {
         display: inline-block;
         vertical-align: middle;
-        width: calc(100% - (#{$kws-slider-output-width + 1.2rem}));
+        width: calc(100% - (#{$output-width + 1.2rem}));
 
         + output {
           display: inline-block;
@@ -121,57 +120,58 @@ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
           position: absolute;
           left: 0;
           top: -1.8rem;
+          margin: 0;
         }
       }
 
       &::-webkit-slider-runnable-track {
         cursor: pointer;
-        box-shadow: $kws-slider-track-shadow;
-        background: $kws-slider-track-background;
-        border-radius: $kws-slider-track-radius;
-        border: $kws-slider-track-border;
+        box-shadow: $track-shadow;
+        background: $track-background;
+        border-radius: $track-radius;
+        border: $track-border;
       }
       &::-moz-range-track {
         cursor: pointer;
-        box-shadow: $kws-slider-track-shadow;
-        background: $kws-slider-track-background;
-        border-radius: $kws-slider-track-radius;
-        border: $kws-slider-track-border;
+        box-shadow: $track-shadow;
+        background: $track-background;
+        border-radius: $track-radius;
+        border: $track-border;
       }
       &::-ms-track {
         cursor: pointer;
-        box-shadow: $kws-slider-track-shadow;
-        background: $kws-slider-track-background;
-        border-radius: $kws-slider-track-radius;
-        border: $kws-slider-track-border;
+        box-shadow: $track-shadow;
+        background: $track-background;
+        border-radius: $track-radius;
+        border: $track-border;
       }
       &::-ms-fill-lower {
-        background: cv.getVar("grey-lighter");
-        border-radius: $kws-slider-radius;
+        background: $track-background;
+        border-radius: $radius;
       }
       &::-ms-fill-upper {
-        background: cv.getVar("grey-lighter");
-        border-radius: $kws-slider-radius;
+        background: $track-background;
+        border-radius: $radius;
       }
       &::-webkit-slider-thumb {
-        box-shadow: $kws-slider-thumb-shadow;
-        border: $kws-slider-thumb-border;
-        border-radius: $kws-slider-thumb-radius;
-        background: $kws-slider-thumb-background;
+        box-shadow: $thumb-shadow;
+        border: $thumb-border;
+        border-radius: $thumb-radius;
+        background: $thumb-background;
         cursor: pointer;
       }
       &::-moz-range-thumb {
-        box-shadow: $kws-slider-thumb-shadow;
-        border: $kws-slider-thumb-border;
-        border-radius: $kws-slider-thumb-radius;
-        background: $kws-slider-thumb-background;
+        box-shadow: $thumb-shadow;
+        border: $thumb-border;
+        border-radius: $thumb-radius;
+        background: $thumb-background;
         cursor: pointer;
       }
       &::-ms-thumb {
-        box-shadow: $kws-slider-thumb-shadow;
-        border: $kws-slider-thumb-border;
-        border-radius: $kws-slider-thumb-radius;
-        background: $kws-slider-thumb-background;
+        box-shadow: $thumb-shadow;
+        border: $thumb-border;
+        border-radius: $thumb-radius;
+        background: $thumb-background;
         cursor: pointer;
       }
       &::-webkit-slider-thumb {
@@ -227,11 +227,11 @@ $kws-slider-output-radius: #{cv.getVar("radius")} !default;
       &.is-large {
         @include slider-size(cv.getVar("size-large"));
       }
-      @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} {
           &::-moz-range-track {
             background: $color !important;

package/styles/Select.scss

@@ -1,37 +1,37 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-select-radius: #{cv.getVar("radius")} !default;
-$kws-select-focus-border-color: hsl(
-  #{cv.getVar("input-focus-h")},
-  #{cv.getVar("input-focus-s")},
-  #{cv.getVar("input-focus-l")}
+$theme-colors: dv.$colors !default;
+$radius: cv.getVar("radius") !default;
+$focus-border-color: hsl(
+  cv.getVar("input-focus-h"),
+  cv.getVar("input-focus-s"),
+  cv.getVar("input-focus-l")
 ) !default;
-$kws-select-focus-box-shadow-size: #{cv.getVar("input-focus-shadow-size")} !default;
-$kws-select-focus-box-shadow-color: hsl(
-  #{cv.getVar("input-focus-h")},
-  #{cv.getVar("input-focus-s")},
-  #{cv.getVar("input-focus-l")},
-  #{cv.getVar("input-focus-shadow-alpha")}
+$focus-box-shadow-size: cv.getVar("input-focus-shadow-size") !default;
+$focus-box-shadow-color: hsl(
+  cv.getVar("input-focus-h"),
+  cv.getVar("input-focus-s"),
+  cv.getVar("input-focus-l"),
+  cv.getVar("input-focus-shadow-alpha")
 ) !default;
-$kws-select-disabled-background-color: #{cv.getVar(
-    "input-disabled-background-color"
-  )} !default;
-$kws-select-disabled-border-color: #{cv.getVar("input-disabled-border-color")} !default;
-$kws-select-disabled-color: #{cv.getVar("input-disabled-color")} !default;
-$kws-select-selecting-color: #{cv.getVar("primary-invert")} !default;
-$kws-select-selecting-background: #{cv.getVar("primary")} !default;
-$kws-select-selected-color: #{cv.getVar("primary-dark")} !default;
-$kws-select-selected-background: #{cv.getVar("primary-light")} !default;
-$kws-select-options-background: #{cv.getVar("scheme-main-ter")} !default;
+$disabled-background-color: cv.getVar(
+  "input-disabled-background-color"
+) !default;
+$disabled-border-color: cv.getVar("input-disabled-border-color") !default;
+$disabled-color: cv.getVar("input-disabled-color") !default;
+$selecting-color: cv.getVar("primary-invert") !default;
+$selecting-background: cv.getVar("primary") !default;
+$selected-color: cv.getVar("primary-dark") !default;
+$selected-background: cv.getVar("primary-light") !default;
+$options-background: cv.getVar("scheme-main-ter") !default;
 
 $__modal-z: 41 !default;
 @if variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 
-$kws-select-options-z-index: $__modal-z + 1 !default;
+$options-z-index: $__modal-z + 1 !default;
 
 .kws-searchableselect {
   position: relative;
@@ -43,14 +43,13 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
   padding-top: calc(0.4em - 1px);
   padding-bottom: calc(0.4em - 1px);
   &:focus-within {
-    border-color: $kws-select-focus-border-color;
-    box-shadow: $kws-select-focus-box-shadow-size
-      $kws-select-focus-box-shadow-color;
+    border-color: $focus-border-color;
+    box-shadow: $focus-box-shadow-size $focus-box-shadow-color;
   }
   &.is-disabled {
-    background-color: $kws-select-disabled-background-color;
-    border-color: $kws-select-disabled-border-color;
-    color: $kws-select-disabled-color;
+    background-color: $disabled-background-color;
+    border-color: $disabled-border-color;
+    color: $disabled-color;
     cursor: not-allowed;
   }
   &.is-readonly {
@@ -110,14 +109,14 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
     max-height: 50vh;
     padding: 0;
     cursor: pointer;
-    border-radius: 0 0 $kws-select-radius $kws-select-radius;
+    border-radius: 0 0 $radius $radius;
     overflow: auto;
-    background: $kws-select-options-background;
+    background: $options-background;
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4);
     position: relative;
     z-index: 4;
     &[data-popper-placement="top"] {
-      border-radius: $kws-select-radius $kws-select-radius 0 0;
+      border-radius: $radius $radius 0 0;
       box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);
     }
     &.hidden {
@@ -156,16 +155,16 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
         }
       }
       &.selected {
-        color: $kws-select-selected-color;
-        background: $kws-select-selected-background;
+        color: $selected-color;
+        background: $selected-background;
         .kws-selected-icon {
           display: inline-flex;
         }
       }
       &.active {
         // keyboard focused item
-        color: $kws-select-selecting-color;
-        background: $kws-select-selecting-background;
+        color: $selecting-color;
+        background: $selecting-background;
       }
     }
 
@@ -198,12 +197,12 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
   }
 }
 
-@each $name, $pair in $kws-theme-colors {
+@each $name, $pair in $theme-colors {
   .kws-searchableselect {
     &.is-#{$name} {
       border-color: cv.getVar($name);
       &:focus-within {
-        box-shadow: $kws-select-focus-box-shadow-size
+        box-shadow: $focus-box-shadow-size
           hsla(
             cv.getVar($name, "", "-h"),
             cv.getVar($name, "", "-s"),
@@ -230,6 +229,6 @@ $kws-select-options-z-index: $__modal-z + 1 !default;
 #kws-overlay-root {
   .kws-searchableselect {
     position: absolute;
-    z-index: $kws-select-options-z-index;
+    z-index: $options-z-index;
   }
 }

package/styles/Skeleton.scss

@@ -1,38 +1,72 @@
 @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;
-$text: dv.$text !default;
-$kws-skeleton-color: fn.bulmaLighten(dv.$text, 60%) !default;
-$kws-skeleton-hilight-color: fn.bulmaLighten(dv.$text, 65%) !default;
+$theme-colors: dv.$colors !default;
+$color: hsla(
+  cv.getVar("text-h"),
+  cv.getVar("text-s"),
+  cv.getVar("text-weak-l"),
+  0.1
+) !default;
+$hilight-color: hsla(
+  cv.getVar("text-h"),
+  cv.getVar("text-s"),
+  cv.getVar("text-80-l"),
+  0.2
+) !default;
 
 .kws-skeleton {
   width: 100%;
   line-height: 1;
   display: inline-block;
-  background-color: $kws-skeleton-color;
-  background-image: linear-gradient(
-    90deg,
-    $kws-skeleton-color,
-    $kws-skeleton-hilight-color,
-    $kws-skeleton-color
-  );
+  background-color: $color;
+  background-image: linear-gradient(90deg, $color, $hilight-color, $color);
   background-size: 200px 100%;
   background-repeat: no-repeat;
   animation: kws-skeleton-shine 1.2s infinite;
 
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-light: fn.bulmaFindLightColor($color);
-    $color-dark: darken($color-light, 10%);
-    &.is-#{$name} {
-      background-color: $color-light;
+  &.input {
+    background-color: hsl(
+      cv.getVar("input-h"),
+      cv.getVar("input-s"),
+      calc(
+        cv.getVar("input-background-l") + cv.getVar("input-background-l-delta")
+      )
+    );
+    background-image: linear-gradient(
+      90deg,
+      hsla(
+        cv.getVar("input-h"),
+        cv.getVar("input-s"),
+        cv.getVar("input-color-l"),
+        0.1
+      ),
+      hsla(
+        cv.getVar("input-h"),
+        cv.getVar("input-s"),
+        cv.getVar("input-color-l"),
+        0.2
+      ),
+      hsla(
+        cv.getVar("input-h"),
+        cv.getVar("input-s"),
+        cv.getVar("input-color-l"),
+        0.1
+      )
+    );
+  }
+
+  @each $name, $pair in $theme-colors {
+    $_color-light: cv.getVar($name, "", "-90");
+    $_color-dark: cv.getVar($name, "", "-60");
+    &.is-#{$name},
+    &.is-#{$name}.input {
+      background-color: $_color-light;
       background-image: linear-gradient(
         90deg,
-        $color-light,
-        $color-dark,
-        $color-light
+        $_color-light,
+        $_color-dark,
+        $_color-light
       );
     }
   }
@@ -42,7 +76,7 @@ $kws-skeleton-hilight-color: fn.bulmaLighten(dv.$text, 65%) !default;
     background-image: linear-gradient(
       90deg,
       transparent,
-      transparentize($kws-skeleton-hilight-color, 0.6),
+      cv.getVar("text-90"),
       transparent
     );
   }

package/styles/SlidingPane.scss

@@ -1,5 +1,7 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 
+$easing: cv.getVar("easing") !default;
+
 .sliding-pane-set {
   position: relative;
   overflow: hidden;
@@ -12,7 +14,7 @@
     backface-visibility: hidden;
     transform-style: preserve-3d;
     transition:
-      transform 0.4s cv.getVar("easing"),
+      transform 0.4s $easing,
       opacity 0.1s;
     transform-origin: left top;
     .sliding-pane-inner {

package/styles/Timeline.scss

@@ -1,11 +1,12 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/initial-variables" as iv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-timeline-default-color: #{cv.getVar("grey")} !default;
-$kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
+$theme-colors: dv.$colors !default;
+$color: cv.getVar("text") !default;
+$color-invert: cv.getVar("text-invert") !default;
+$color-light: cv.getVar("text-weak") !default;
+$image-radius: cv.getVar("radius-small") !default;
+$image-shadow: cv.getVar("shadow") !default;
 
 @mixin right-aligned-timeline-item {
   flex-direction: row-reverse;
@@ -19,6 +20,10 @@ $kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
     padding-left: 0;
     padding-right: 1.75rem;
   }
+  .kws-timeline-image {
+    margin-left: 0;
+    margin-right: 0.25rem;
+  }
   &:before {
     right: -0.5px;
     left: auto;
@@ -40,8 +45,8 @@ $kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
   .kws-timeline-marker {
     position: absolute;
     left: 0;
-    background: $kws-timeline-default-color;
-    border: 1px solid $kws-timeline-default-color;
+    background: $color;
+    border: 1px solid $color;
     border-radius: 100%;
     transform: translateX(-50%);
     display: flex;
@@ -54,10 +59,10 @@ $kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
       min-width: 1rem;
       padding: 0;
       border-width: 4px;
-      background: $kws-timeline-default-color-invert;
+      background: $color-invert;
     }
     .icon {
-      color: $kws-timeline-default-color-invert;
+      color: $color-invert;
       width: 16px;
       height: 16px;
       font-size: 0.75rem !important;
@@ -73,24 +78,27 @@ $kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
     padding-left: 1.75rem;
     flex-grow: 1;
     flex-shrink: 1;
+    .above-description,
+    .below-description {
+      color: $color-light;
+    }
   }
   .kws-timeline-image {
     flex-grow: 0;
     flex-shrink: 0;
     width: 32px;
+    margin-left: 0.25rem;
     img {
       max-width: 100%;
       max-height: 100%;
-      border-radius: iv.$radius;
-      box-shadow:
-        0 0.125rem 0.1875rem rgba(10, 10, 10, 0.1),
-        0 0 0 0.0625rem rgba(10, 10, 10, 0.1);
+      border-radius: $image-radius;
+      box-shadow: $image-shadow;
     }
   }
 
   &:before {
     content: "";
-    background-color: $kws-timeline-default-color;
+    background-color: $color;
     display: block;
     width: 1px;
     height: 100%;
@@ -99,9 +107,9 @@ $kws-timeline-default-color-invert: #{cv.getVar("light")} !default;
     top: 0;
   }
 
-  @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-invert: fn.bulmaFindColorInvert($color); //nth($pair, 2);
+  @each $name, $pair in $theme-colors {
+    $color: cv.getVar($name);
+    $color-invert: cv.getVar($name, "", "-invert");
     &.is-#{$name} {
       .kws-timeline-marker {
         border-color: $color;

package/styles/Timepicker.scss

@@ -2,28 +2,22 @@
 @use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-timepicker-background: #{cv.getVar("background")} !default;
-$kws-timepicker-text: #{cv.getVar("text")} !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") !default;
 
 .flatpickr-calendar.hasTime.noCalendar {
-  $isDarkMode: false;
-  $lum: fn.bulmaColorLuminance($kws-timepicker-text);
-  @if ($lum > 0.55) {
-    $isDarkMode: true;
-  }
-
-  box-shadow:
-    0 2px 5px rgba(0, 0, 0, 0.3),
-    0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
-  background: $kws-timepicker-background;
-  color: $kws-timepicker-text;
-  border-radius: #{cv.getVar("radius")};
+  box-shadow: $shadow;
+  background: $background;
+  color: $text;
+  border-radius: $radius;
 
   .flatpickr-time {
     border: none;
     .flatpickr-time-separator {
-      color: $kws-timepicker-text;
+      color: $text;
     }
     input,
     .flatpickr-am-pm {
@@ -34,13 +28,13 @@ $kws-timepicker-text: #{cv.getVar("text")} !default;
       }
     }
     .flatpickr-am-pm {
-      border-radius: 0 #{cv.getVar("radius")} #{cv.getVar("radius")} 0;
+      border-radius: 0 $radius $radius 0;
     }
     .numInputWrapper {
       &:first-child {
-        border-radius: #{cv.getVar("radius")} 0 0 #{cv.getVar("radius")};
+        border-radius: $radius 0 0 $radius;
         .numInput {
-          border-radius: #{cv.getVar("radius")} 0 0 #{cv.getVar("radius")};
+          border-radius: $radius 0 0 $radius;
         }
       }
       &:hover {
@@ -52,16 +46,11 @@ $kws-timepicker-text: #{cv.getVar("text")} !default;
     }
   }
 
-  @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);
-    //invert on darkmode by checking color luminance
-    @if ($isDarkMode) {
-      $color-dark: findLightColor($color);
-      $color-light: findDarkColor($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} {
       border: 1px solid $color;