@kws3/ui 4.3.5 → 4.4.0-alpha.1

package/styles/Timeline.scss

@@ -1,6 +1,11 @@
-$kws-theme-colors: $colors !default;
-$kws-timeline-default-color: $grey !default;
-$kws-timeline-default-color-invert: $light !default;
+@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;
 
 @mixin right-aligned-timeline-item {
   flex-direction: row-reverse;
@@ -76,8 +81,9 @@ $kws-timeline-default-color-invert: $light !default;
     img {
       max-width: 100%;
       max-height: 100%;
-      border-radius: $radius;
-      box-shadow: 0 0.125rem 0.1875rem rgba(10, 10, 10, 0.1),
+      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);
     }
   }
@@ -95,7 +101,7 @@ $kws-timeline-default-color-invert: $light !default;
 
   @each $name, $pair in $kws-theme-colors {
     $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
+    $color-invert: fn.bulmaFindColorInvert($color); //nth($pair, 2);
     &.is-#{$name} {
       .kws-timeline-marker {
         border-color: $color;

package/styles/Timepicker.scss

@@ -1,18 +1,24 @@
-$kws-theme-colors: $colors !default;
-$kws-timepicker-background: $background !default;
-$kws-timepicker-text: $text !default;
+@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-timepicker-background: #{cv.getVar("background")} !default;
+$kws-timepicker-text: #{cv.getVar("text")} !default;
 
 .flatpickr-calendar.hasTime.noCalendar {
   $isDarkMode: false;
-  $lum: colorLuminance($kws-timepicker-text);
+  $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);
+  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: $radius;
+  border-radius: #{cv.getVar("radius")};
 
   .flatpickr-time {
     border: none;
@@ -28,13 +34,13 @@ $kws-timepicker-text: $text !default;
       }
     }
     .flatpickr-am-pm {
-      border-radius: 0 $radius $radius 0;
+      border-radius: 0 #{cv.getVar("radius")} #{cv.getVar("radius")} 0;
     }
     .numInputWrapper {
       &:first-child {
-        border-radius: $radius 0 0 $radius;
+        border-radius: #{cv.getVar("radius")} 0 0 #{cv.getVar("radius")};
         .numInput {
-          border-radius: $radius 0 0 $radius;
+          border-radius: #{cv.getVar("radius")} 0 0 #{cv.getVar("radius")};
         }
       }
       &:hover {
@@ -48,10 +54,9 @@ $kws-timepicker-text: $text !default;
 
   @each $name, $pair in $kws-theme-colors {
     $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-    $color-light: findLightColor($color);
-    $color-dark: findDarkColor($color);
-
+    $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);

package/styles/Toggle.scss

@@ -1,12 +1,16 @@
-$kws-toggle-off-bg-color: $background !default;
-$kws-toggle-handle-bg-color: $white !default;
-$kws-toggle-track-bg-color: $text !default;
+@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: $input-border-color !default;
+$kws-toggle-border-color: #{cv.getVar("border")} !default;
 
-$kws-theme-colors: $colors !default;
+$kws-theme-colors: dv.$colors !default;
 
 .kws-toggle-button {
   position: relative;
@@ -16,7 +20,9 @@ $kws-theme-colors: $colors !default;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 0.9rem;
   .track {
-    transition: background-color 0.3s, border 0.3s;
+    transition:
+      background-color 0.3s,
+      border 0.3s;
     display: inline-flex;
     align-items: center;
     width: 3.93em;
@@ -46,7 +52,9 @@ $kws-theme-colors: $colors !default;
       height: 1.928em;
       border-radius: 1.928em;
       background-color: $kws-toggle-handle-bg-color;
-      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);
+      box-shadow:
+        0 2px 7px rgba(0, 0, 0, 0.35),
+        0 1px 1px rgba(0, 0, 0, 0.15);
     }
   }
   &.on {
@@ -65,7 +73,9 @@ $kws-theme-colors: $colors !default;
     }
     @each $name, $pair in $kws-theme-colors {
       $color: nth($pair, 1);
-      $color-invert: nth($pair, 2);
+      $color-invert: fn.bulmaFindColorInvert($color);
+      $color-light: fn.bulmaFindLightColor($color);
+      $color-dark: fn.bulmaFindDarkColor($color);
       &.is-#{$name} {
         .track {
           border-color: $color;

package/styles/Tooltip.scss

@@ -1,13 +1,16 @@
-$kws-theme-colors: $colors !default;
-$kws-tt-background-color: $scheme-invert-ter !default;
-$kws-tt-foreground-color: $scheme-main !default;
+@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: $radius-small !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: $background !default;
-$kws-popover-foreground-color: $text !default;
-$kws-popover-arrow-color: $background !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;
 
 .tippy-iOS {
@@ -69,23 +72,18 @@ $kws-popover-radius: $kws-tt-radius !default;
   transition-property: transform, visibility, opacity;
 
   @each $name, $pair in $kws-theme-colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-    $color-light: findLightColor($color);
-    $color-dark: findDarkColor($color);
-
     &[data-theme~="#{$name}"] {
-      color: $color-invert;
-      background-color: $color;
+      color: cv.getVar($name, "", "-invert");
+      background-color: cv.getVar($name);
       .tippy-arrow {
-        color: $color;
+        color: cv.getVar($name);
       }
     }
     &[data-theme~="#{$name}-light"] {
-      color: $color-dark;
-      background-color: $color-light;
+      color: cv.getVar($name, "", "-dark");
+      background-color: cv.getVar($name, "", "-light");
       .tippy-arrow {
-        color: $color-light;
+        color: cv.getVar($name, "", "-light");
       }
     }
   }

package/utils/index.d.ts

@@ -9,11 +9,7 @@ export function truncate(str?: string, len?: number): string;
  * @param {string} [input=""] - String to be checked, Default: `""`
  */
 export function nl2br(input?: string): string;
-/**
- * Clone an Object.
- * @param {object} [obj={}] - Object to be cloned, Default: `{}`
- */
-export function cloneObject(obj?: object): any;
+export function cloneObject<T>(obj: T): T;
 /**
  * Returns a function, that, as long as it continues to be invoked, will not
  * be triggered. The function will be called after it stops being called for

package/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+BAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;GAGG;AACH,8BAFW,MAAM,UAQhB;AAED;;;GAGG;AACH,kCAFW,MAAM,OAIhB;AAsBD;;;;;;;;GAQG;AACH,oDAJW,MAAM,WACN,OAAO;;;EA2BjB;AAED;;;GAGG;AACH,+CAFW,MAAM,UAIhB;AAED;;;;GAIG;AACH,qCAFW,MAAM,QAKhB;AAED;;;GAGG;AACH,6BAFW,MAAM,UAKhB;AAED;;;GAGG;AACH,kCAFW,MAAM,UAUhB;AAED;;;;;;;GAOG;AACH,gDAHW,MAAM,QACN,MAAM,UAMhB;AAED;;;;GAIG;AACH,oCAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;;GAIG;AACH,sDAFW,MAAM,QAYhB;AAED;;;;;;GAMG;AACH,6BALW,MAAM,cACN,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,GACd,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,yCAJW,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,YAU1B;AArKD;;;GAGG;AACH,sBAce"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+BAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;GAGG;AACH,8BAFW,MAAM,UAQhB;AAoIe,0CAAiB;AArGjC;;;;;;;;GAQG;AACH,oDAJW,MAAM,WACN,OAAO;;;EA2BjB;AAED;;;GAGG;AACH,+CAFW,MAAM,UAIhB;AAED;;;;GAIG;AACH,qCAFW,MAAM,QAKhB;AAED;;;GAGG;AACH,6BAFW,MAAM,UAKhB;AAED;;;GAGG;AACH,kCAFW,MAAM,UAUhB;AAED;;;;;;;GAOG;AACH,gDAHW,MAAM,QACN,MAAM,UAMhB;AAED;;;;GAIG;AACH,oCAHW,MAAM,QACN,MAAM,UAIhB;AAED;;;;GAIG;AACH,sDAFW,MAAM,QAYhB;AAED;;;;;;GAMG;AACH,6BALW,MAAM,cACN,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,GACd,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,yCAJW,CAAC,MAAM,EAAE,MAAM,CAAC,eAChB,CAAC,MAAM,EAAE,MAAM,CAAC,YAU1B;AArKD;;;GAGG;AACH,sBAce"}

package/utils/index.js

@@ -21,6 +21,7 @@ export function nl2br(input = "") {
 
 /**
  * Clone an Object.
+ * @type {import("@kws3/ui/types").CloneObject}
  * @param {object} [obj={}] - Object to be cloned, Default: `{}`
  */
 export function cloneObject(obj) {