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

package/CHANGELOG.mdx

@@ -1,3 +1,20 @@
+### 4.5.0 <span className="has-text-danger">[BREAKING]</span>
+  - This version requires Bulma v1
+  - Supports bulma dark mode
+  - All SCSS files are now modular, so you need to use `@use` instead of `@import`
+  - All SCSS variable names have been updated. Now they do not start with `$kws-` and are more generic. This is due to using modular SCSS
+  - All SCSS variables now have default Bulma css variables as default values, so most of the time an override will not be required, and it will just work according to the active theme
+  - `ToggleButtons` component now has it's own SCSS file that needs to be imported
+  - Default `inactive_class` has changed in `ToggleButtons` component
+  - Some internal class names in `FileUpload` component have changed
+  - Some internal class names in `TimelineItem` component have changed
+  - `Colorpicker` component's wrapper class name has changed
+  - All instances of `is-marginless` css class has been replaced with `marginless`, as this is how new Bulma v1 supports it
+  - All instances of `is-paddingless` css class has been replaced with `paddingless`, as this is how new Bulma v1 supports it
+  - Fix `datepicker` and `timepicker` action return types
+  - Fix utility `cloneObject` type signature
+  - Add `transparent` to `ExtendedColors` type
+
 ## 4.3.5
   - Fix Radio component value type
 

package/controls/RangeSlider.svelte

@@ -127,8 +127,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   $: {
     let range = max - min;
     let position = ((value - min) / range) * 100;
-    let positionOffset = Math.round(position * 0.5);
-    computedStyle = `left:calc(${position}% - ${positionOffset}px`;
+    let positionOffset = Math.round(position * 0.4);
+    computedStyle = `left:calc(${position}% - ${positionOffset}px)`;
   }
 
   onMount(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.4.0-alpha.4",
+  "version": "4.5.0-beta.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -39,5 +39,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "4273214f77bd46fe7d02867a47646f5ab8fac962"
+  "gitHead": "c5a77050657a2bc3237013f0d64f97bd6ce1d015"
 }

package/styles/Grid.scss

@@ -7,6 +7,7 @@ $th-color: cv.getVar("text") !default;
 $tag-margin: 0 0.125rem 0.125rem 0 !default;
 $icon-size: 1.5em !default;
 $checked-row-background: cv.getVar("info-light") !default;
+$checked-row-color: cv.getVar("info") !default;
 $active-row-background: cv.getVar("table-row-active-background-color") !default;
 $active-row-color: cv.getVar("table-row-active-color") !default;
 $background: cv.getVar("table-background-color") !default;
@@ -71,7 +72,7 @@ $cell-border-color: cv.getVar("table-cell-border-color") !default;
     background-color: $checked-row-background !important;
     td {
       background-color: $checked-row-background !important;
-      color: $th-color !important;
+      color: $checked-row-color !important;
     }
   }
 

package/styles/Panel.scss

@@ -25,6 +25,7 @@ $caret-closed-color: cv.getVar("link") !default;
     }
     .level {
       .level-right {
+        flex-direction: row;
         .level-item {
           margin-right: 0;
           margin-left: 0.5rem;

package/styles/Toggle.scss

@@ -3,7 +3,7 @@
 
 $theme-colors: dv.$colors !default;
 $off-bg-color: cv.getVar("border-weak") !default;
-$handle-bg-color: cv.getVar("text-invert") !default;
+$handle-bg-color: cv.getVar("text-40-invert") !default;
 $track-bg-color: cv.getVar("text") !default;
 $track-bg-color-invert: cv.getVar("text-invert") !default;
 $border-color: cv.getVar("border") !default;
@@ -24,8 +24,8 @@ $border-color: cv.getVar("border") !default;
       border 0.3s;
     display: inline-flex;
     align-items: center;
-    width: 4.2em;
-    height: 2.5em;
+    width: 3.93em;
+    height: 2.21em;
     border: solid 1px $border-color;
     border-radius: 1.428em;
     background-color: $off-bg-color;
@@ -36,7 +36,6 @@ $border-color: cv.getVar("border") !default;
       flex-shrink: 0;
       font-weight: bold;
       font-size: 0.642em;
-      line-height: 1em;
       display: block;
       text-align: right;
       user-select: none;
@@ -47,9 +46,9 @@ $border-color: cv.getVar("border") !default;
       transition: transform 0.3s cubic-bezier(0, 1.1, 1, 1.1);
       position: absolute;
       display: block;
-      width: 2.18em;
-      height: 2.18em;
-      border-radius: 2.18em;
+      width: 1.928em;
+      height: 1.928em;
+      border-radius: 1.928em;
       background-color: $handle-bg-color;
       box-shadow:
         0 2px 7px rgba(0, 0, 0, 0.35),
@@ -68,7 +67,7 @@ $border-color: cv.getVar("border") !default;
       }
     }
     .handle {
-      transform: translate3d(1.9em, 0, 0);
+      transform: translate3d(1.785em, 0, 0);
     }
     @each $name, $pair in $theme-colors {
       $color: cv.getVar($name);