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

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

@@ -2,8 +2,18 @@
 @use "bulma/sass/utilities/derived-variables" as dv;
 
 $theme-colors: dv.$colors !default;
-$color: cv.getVar("text-90");
-$hilight-color: cv.getVar("text-100") !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%;
@@ -15,10 +25,42 @@ $hilight-color: cv.getVar("text-100") !default;
   background-repeat: no-repeat;
   animation: kws-skeleton-shine 1.2s infinite;
 
+  &.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},
+    &.is-#{$name}.input {
       background-color: $_color-light;
       background-image: linear-gradient(
         90deg,

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;

package/styles/Toggle.scss

@@ -1,16 +1,12 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-toggle-off-bg-color: #{cv.getVar("background")} !default;
-$kws-toggle-handle-bg-color: #{cv.getVar("white")} !default;
-$kws-toggle-track-bg-color: #{cv.getVar("text")} !default;
-$kws-toggle-track-bg-color-invert: findColorInvert(
-  $kws-toggle-track-bg-color
-) !default;
-$kws-toggle-border-color: #{cv.getVar("border")} !default;
-
-$kws-theme-colors: dv.$colors !default;
+$theme-colors: dv.$colors !default;
+$off-bg-color: cv.getVar("border-weak") !default;
+$handle-bg-color: cv.getVar("text-invert") !default;
+$track-bg-color: cv.getVar("text") !default;
+$track-bg-color-invert: cv.getVar("text-invert") !default;
+$border-color: cv.getVar("border") !default;
 
 .kws-toggle-button {
   position: relative;
@@ -18,18 +14,21 @@ $kws-theme-colors: dv.$colors !default;
   vertical-align: middle;
   pointer-events: auto;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  font-size: 0.9rem;
+  font-size: cv.getVar("size-normal");
+  &.disabled {
+    opacity: 0.5;
+  }
   .track {
     transition:
       background-color 0.3s,
       border 0.3s;
     display: inline-flex;
     align-items: center;
-    width: 3.93em;
-    height: 2.21em;
-    border: solid 2px $kws-toggle-border-color;
+    width: 4.2em;
+    height: 2.5em;
+    border: solid 1px $border-color;
     border-radius: 1.428em;
-    background-color: $kws-toggle-off-bg-color;
+    background-color: $off-bg-color;
     content: " ";
     cursor: pointer;
     .toggle-text {
@@ -42,16 +41,16 @@ $kws-theme-colors: dv.$colors !default;
       text-align: right;
       user-select: none;
       margin: 0 0.5em;
-      color: findColorInvert($kws-toggle-off-bg-color);
+      color: $track-bg-color;
     }
     .handle {
       transition: transform 0.3s cubic-bezier(0, 1.1, 1, 1.1);
       position: absolute;
       display: block;
-      width: 1.928em;
-      height: 1.928em;
-      border-radius: 1.928em;
-      background-color: $kws-toggle-handle-bg-color;
+      width: 2.18em;
+      height: 2.18em;
+      border-radius: 2.18em;
+      background-color: $handle-bg-color;
       box-shadow:
         0 2px 7px rgba(0, 0, 0, 0.35),
         0 1px 1px rgba(0, 0, 0, 0.15);
@@ -59,23 +58,21 @@ $kws-theme-colors: dv.$colors !default;
   }
   &.on {
     .track {
-      border-color: $kws-toggle-track-bg-color;
-      background-color: $kws-toggle-track-bg-color;
+      border-color: $track-bg-color;
+      background-color: $track-bg-color;
       .toggle-text {
         left: 10%;
         right: auto;
         text-align: left;
-        color: $kws-toggle-track-bg-color-invert;
+        color: $track-bg-color-invert;
       }
     }
     .handle {
-      transform: translate3d(1.785em, 0, 0);
+      transform: translate3d(1.9em, 0, 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");
       &.is-#{$name} {
         .track {
           border-color: $color;
@@ -88,12 +85,12 @@ $kws-theme-colors: dv.$colors !default;
     }
   }
   &.is-small {
-    font-size: 0.75rem;
+    font-size: cv.getVar("size-small");
   }
   &.is-medium {
-    font-size: 1rem;
+    font-size: cv.getVar("size-medium");
   }
   &.is-large {
-    font-size: 1.25rem;
+    font-size: cv.getVar("size-large");
   }
 }

package/styles/ToggleButtons.scss

@@ -0,0 +1,50 @@
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/derived-variables" as dv;
+
+$count-background: cv.getVar("danger") !default;
+$count-color: cv.getVar("danger-invert") !default;
+
+.kws-toggle-buttons {
+  .button,
+  .button:focus {
+    .icon {
+      margin: 0;
+    }
+    box-shadow: none;
+    &.is-active {
+      box-shadow: 0 0 0.6rem
+        hsla(
+          cv.getVar("button-outer-shadow-h"),
+          cv.getVar("button-outer-shadow-s"),
+          cv.getVar("button-outer-shadow-l"),
+          0.2
+        )
+        inset !important;
+    }
+  }
+  .button {
+    position: relative;
+    .option-subtitle {
+      font-size: 0.7em;
+      display: block;
+      margin-top: -0.3em;
+      opacity: 0.7;
+    }
+    .count {
+      position: absolute;
+      font-weight: 600;
+      font-size: 0.8em;
+      border-radius: 999px;
+      padding: 0.15em 0.2em;
+      min-width: 1.8em;
+      min-height: 1.5em;
+      top: -0.75em;
+      right: 0.2em;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: $count-background;
+      color: $count-color;
+    }
+  }
+}

package/styles/Tooltip.scss

@@ -1,17 +1,18 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-tt-background-color: #{cv.getVar("scheme-invert-ter")} !default;
-$kws-tt-foreground-color: #{cv.getVar("scheme-main")} !default;
-$kws-tt-arrow-size: 8px !default;
-$kws-tt-padding: 0.5rem !default;
-$kws-tt-radius: #{cv.getVar("radius-small")} !default;
-$kws-tt-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4) !default;
-$kws-popover-background-color: #{cv.getVar("background")} !default;
-$kws-popover-foreground-color: #{cv.getVar("text")} !default;
-$kws-popover-arrow-color: #{cv.getVar("background")} !default;
-$kws-popover-radius: $kws-tt-radius !default;
+$theme-colors: dv.$colors !default;
+$background: cv.getVar("scheme-invert") !default;
+$color: cv.getVar("text-invert") !default;
+$arrow-size: 8px !default;
+$padding: 0.5rem !default;
+$radius: cv.getVar("radius-small") !default;
+$shadow: 0 5px 10px -5px hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
+$popover-background: cv.getVar("background") !default;
+$popover-color: cv.getVar("text") !default;
+$popover-arrow-color: cv.getVar("background") !default;
+$popover-shadow: $shadow !default;
+$popover-radius: $radius !default;
 
 .tippy-iOS {
   cursor: pointer !important;
@@ -24,9 +25,9 @@ $kws-popover-radius: $kws-tt-radius !default;
 
 .tippy-arrow {
   & {
-    width: $kws-tt-arrow-size;
-    height: $kws-tt-arrow-size;
-    color: $kws-tt-background-color;
+    width: $arrow-size;
+    height: $arrow-size;
+    color: $background;
   }
 
   &::before {
@@ -38,7 +39,7 @@ $kws-popover-radius: $kws-tt-radius !default;
 }
 .tippy-content {
   position: relative;
-  padding: $kws-tt-padding;
+  padding: $padding;
   z-index: 1;
 }
 
@@ -64,14 +65,14 @@ $kws-popover-radius: $kws-tt-radius !default;
   }
 
   position: relative;
-  background-color: $kws-tt-background-color;
-  color: $kws-tt-foreground-color;
-  border-radius: $kws-tt-radius;
+  background-color: $background;
+  color: $color;
+  border-radius: $radius;
   outline: 0;
-  box-shadow: $kws-tt-shadow;
+  box-shadow: $shadow;
   transition-property: transform, visibility, opacity;
 
-  @each $name, $pair in $kws-theme-colors {
+  @each $name, $pair in $theme-colors {
     &[data-theme~="#{$name}"] {
       color: cv.getVar($name, "", "-invert");
       background-color: cv.getVar($name);
@@ -90,11 +91,12 @@ $kws-popover-radius: $kws-tt-radius !default;
 
   &[data-theme~="popover"] {
     font-size: 1rem;
-    border-radius: $kws-popover-radius;
-    color: $kws-popover-foreground-color;
-    background-color: $kws-popover-background-color;
+    border-radius: $popover-radius;
+    color: $popover-color;
+    background-color: $popover-background;
+    box-shadow: $popover-shadow;
     .tippy-arrow {
-      color: $kws-popover-arrow-color;
+      color: $popover-arrow-color;
     }
     .tippy-content {
       padding: 0;

package/types/type-defs/index.d.ts

@@ -12,7 +12,7 @@ export const Colors = [
   "link",
 ] as const;
 
-export const ExtendedColors = [...Colors, "grey"] as const;
+export const ExtendedColors = [...Colors, "grey", "transparent"] as const;
 export const BGColors = [...Colors, "transparent"] as const;
 
 export const Sizes = ["", "small", "medium", "large"] as const;