@kws3/ui 4.3.5 → 4.4.0-alpha.1

package/controls/ToggleButtons.svelte

@@ -42,12 +42,12 @@ This property can be bound to, to fetch the current value, Default: `null`
           ? 'is-active ' +
             (option.active_class ? option.active_class : active_class)
           : option.inactive_class
-          ? option.inactive_class
-          : inactive_class}"
+            ? option.inactive_class
+            : inactive_class}"
         style="height:auto">
         <span>
           {#if option.icon}
-            <Icon icon={option.icon} size="small" class="is-marginless" />
+            <Icon icon={option.icon} size="small" class="marginless" />
           {/if}
           <span class="is-block">{option.name}</span>
           {#if option.subtitle}

package/datagrid/DataSort/DataSort.svelte

@@ -8,7 +8,7 @@
 -->
 
 <div class="sorting-filters">
-  <div class="field is-grouped">
+  <div class="field is-grouped is-gapless">
     <div class="control">
       <small>Sort By:</small>
     </div>

package/forms/AutoComplete.svelte

@@ -65,7 +65,7 @@ Default value: `<span>{option.label}</span>`
     <button
       type="button"
       style="border: none;"
-      class="button is-paddingless delete is-medium is-loading" />
+      class="button paddingless delete is-medium is-loading" />
   {/if}
   {#if rootContainer}
     <div
@@ -127,7 +127,7 @@ Default value: `<span>{option.label}</span>`
     fn: ({ state }) => {
       state.styles.popper.width = `${Math.max(
         200,
-        state.rects.reference.width
+        state.rects.reference.width,
       )}px`;
     },
     effect: ({ state }) => {
@@ -454,25 +454,25 @@ Default value: `<span>{option.label}</span>`
 
   const normaliseArraysToObjects = (arr) =>
     [...arr].map((item) =>
-      typeof item === "object" ? item : { label: item, value: item }
+      typeof item === "object" ? item : { label: item, value: item },
     );
 
   const highlightMatches = (options, filters) => {
     if (!filters.length) return options;
     // join all filter parts and split into chars and filter out duplicates
     let common_chars = [...filters.join("")].filter(
-      (v, i, self) => self.indexOf(v) === i
+      (v, i, self) => self.indexOf(v) === i,
     );
     let pattern = new RegExp(
       `[${common_chars.join("").replace(/\\/g, "&#92;")}]`,
-      "gi"
+      "gi",
     );
     return options.map((item) => {
       return {
         ...item,
         label: item.value.replace(
           pattern,
-          (match) => `<span class="h">${match}</span>`
+          (match) => `<span class="h">${match}</span>`,
         ),
       };
     });

package/forms/PasswordInput.svelte

@@ -43,9 +43,9 @@ This property can be bound to, to fetch the current value, Default: ``
 
 -->
 
-<div class="field is-marginless">
+<div class="field marginless">
   <p
-    class="control is-marginless"
+    class="control marginless"
     class:has-icons-left={show_field_icon}
     class:has-icons-right={show_visibility_switch}>
     <input

package/forms/SearchInput.svelte

@@ -19,7 +19,7 @@
 -->
 <div
   class="
-  field has-addons is-marginless
+  field has-addons marginless
   {readonly ? 'is-readonly' : ''}
   {disabled ? 'is-disabled' : ''}
   ">

package/forms/select/MultiSelect.svelte

@@ -111,7 +111,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     <button
       type="button"
       style="border: none;"
-      class="button is-paddingless delete is-medium is-loading" />
+      class="button delete paddingless is-small is-loading" />
   {:else if !readonly && !disabled}
     <button
       type="button"
@@ -190,7 +190,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     fn: ({ state }) => {
       state.styles.popper.width = `${Math.max(
         200,
-        state.rects.reference.width
+        state.rects.reference.width,
       )}px`;
     },
     effect: ({ state }) => {
@@ -385,8 +385,8 @@ Default value: `<span>{option[search_key] || option}</span>`
       ? true
       : false
     : value && value.length
-    ? true
-    : false;
+      ? true
+      : false;
   $: _placeholder = hasValue ? "" : placeholder;
 
   //ensure search_key and value_key are no empty strings
@@ -464,7 +464,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       (activeOption &&
         searching &&
         !filteredOptions.some(
-          (fo) => fo[used_value_key] === activeOption[used_value_key]
+          (fo) => fo[used_value_key] === activeOption[used_value_key],
         )) ||
       (!activeOption && searchText)
     ) {
@@ -472,7 +472,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     } else {
       if (asyncMode || allow_fuzzy_match) {
         activeOption = filteredOptions.find((opts) =>
-          matchesValue(activeOption, opts)
+          matchesValue(activeOption, opts),
         );
       }
     }
@@ -481,7 +481,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   function fillSelectedOptions() {
     if (single) {
       selectedOptions = normalisedOptions.filter(
-        (v) => `${v[used_value_key]}` === `${value}`
+        (v) => `${v[used_value_key]}` === `${value}`,
       );
     } else {
       let _normalisedOptions = asyncMode
@@ -489,7 +489,9 @@ Default value: `<span>{option[search_key] || option}</span>`
             //de-dupe by `used_value_key` when in asyncMode
             (value, idx, self) =>
               idx ===
-              self.findIndex((v) => v[used_value_key] === value[used_value_key])
+              self.findIndex(
+                (v) => v[used_value_key] === value[used_value_key],
+              ),
           )
         : normalisedOptions;
 
@@ -497,13 +499,13 @@ Default value: `<span>{option[search_key] || option}</span>`
         .filter(
           (v) =>
             Array.isArray(value) &&
-            value.some((vl) => `${v[used_value_key]}` === `${vl}`)
+            value.some((vl) => `${v[used_value_key]}` === `${vl}`),
         )
         .sort(
           (a, b) =>
             // tweak for 'value is nullable' type error
             (value ? value.indexOf(a[used_value_key]) : 0) -
-            (value ? value.indexOf(b[used_value_key]) : 0)
+            (value ? value.indexOf(b[used_value_key]) : 0),
         );
     }
 
@@ -566,7 +568,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         tick().then(() => {
           normaliseOptions();
           value = normaliseArraysToObjects(options).map(
-            (v) => v[used_value_key]
+            (v) => v[used_value_key],
           );
           if (single && Array.isArray(value)) {
             value = value[0];
@@ -614,7 +616,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         //Do not filter invalid options, as they are async and might not be invalid
         //but ensure they are unique
         value = [...(value ? value : []), token[used_value_key]].filter(
-          (v, i, a) => a.indexOf(v) === i
+          (v, i, a) => a.indexOf(v) === i,
         );
       } else {
         //attach to value array while filtering out invalid values

package/helpers/FloatingUI/Floatie.svelte

@@ -46,7 +46,7 @@
         <button type="button" class="delete" on:click={destroy} />
       {/if}
       {#if title}
-        <h4 class="title is-5 is-marginless">{title}</h4>
+        <h4 class="title is-5 marginless">{title}</h4>
       {/if}
 
       <!-- eslint-disable-next-line svelte/no-at-html-tags -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.3.5",
+  "version": "4.4.0-alpha.1",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -26,7 +26,7 @@
   },
   "types": "./index.d.ts",
   "peerDependencies": {
-    "bulma": "^0.9.3",
+    "bulma": "^1.0.0",
     "svelte": "^4.2.10"
   },
   "dependencies": {
@@ -39,5 +39,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "ad72273ec9e8d597a106b53c345e9499b4a9f2d1"
+  "gitHead": "cf074da1936f0203001ff52e74bcf8ad2c921dd9"
 }

package/styles/ActionSheet.scss

@@ -1,6 +1,9 @@
-$kws-actionsheet-background: $background !default;
-$kws-actionsheet-box-shadow: $card-shadow !default;
-$kws-actionsheet-box-radius: $radius !default;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+$kws-actionsheet-background: #{cv.getVar("background")} !default;
+$kws-actionsheet-box-shadow: #{cv.getVar("card-shadow")} !default;
+$kws-actionsheet-box-radius: #{cv.getVar("radius")} !default;
 
 .kws-action-sheet-outer {
   display: flex;
@@ -28,7 +31,7 @@ $kws-actionsheet-box-radius: $radius !default;
   padding: 1.25em 1.5em;
   overflow-x: auto;
 }
-@include mobile {
+@include mx.mobile {
   .kws-action-sheet {
     left: 0;
     max-width: 100%;

package/styles/AutoComplete.scss

@@ -1,23 +1,37 @@
-$kws-theme-colors: $colors !default;
-$kws-autocomplete-radius: $radius !default;
-$kws-autocomplete-border-color: $input-border-color !default;
-$kws-autocomplete-box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%),
+@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-autocomplete-radius: #{cv.getVar("radius")} !default;
+$kws-autocomplete-border-color: #{cv.getVar("border")} !default;
+$kws-autocomplete-box-shadow:
+  0 0.5em 1em -0.125em rgb(10 10 10 / 10%),
   0 0px 0 1px rgb(10 10 10 / 2%) !default;
-$kws-autocomplete-focus-border-color: $input-focus-border-color !default;
-$kws-autocomplete-focus-box-shadow-size: $input-focus-box-shadow-size !default;
-$kws-autocomplete-focus-box-shadow-color: $input-focus-box-shadow-color !default;
-$kws-autocomplete-disabled-background-color: $input-disabled-background-color !default;
-$kws-autocomplete-disabled-border-color: $input-disabled-border-color !default;
-$kws-autocomplete-disabled-color: $input-disabled-color !default;
-$kws-autocomplete-selecting-color: $primary-invert !default;
-$kws-autocomplete-selecting-background: $primary !default;
+$kws-autocomplete-focus-border-color: #{cv.getVar("input-focus-border-color")} !default;
+$kws-autocomplete-focus-box-shadow-size: #{cv.getVar("focus-shadow-size")} !default;
+$kws-autocomplete-focus-box-shadow-color: hsl(
+  #{cv.getVar("focus-h")},
+  #{cv.getVar("focus-s")},
+  #{cv.getVar("focus-l")},
+  #{cv.getVar("focus-shadow-alpha")}
+) !default;
+$kws-autocomplete-disabled-background-color: #{cv.getVar(
+    "input-disabled-background-color"
+  )} !default;
+$kws-autocomplete-disabled-border-color: #{cv.getVar(
+    "input-disabled-border-color"
+  )} !default;
+$kws-autocomplete-disabled-color: #{cv.getVar("input-disabled-color")} !default;
+$kws-autocomplete-selecting-color: #{cv.getVar("primary-invert")} !default;
+$kws-autocomplete-selecting-background: #{cv.getVar("primary")} !default;
 $kws-autocomplete-text-matches-color: currentColor !default;
 $kws-autocomplete-text-matches-background: transparent !default;
-$kws-autocomplete-text-matches-font-weight: $weight-bold !default;
-$kws-autocomplete-options-background: $scheme-main-ter !default;
+$kws-autocomplete-text-matches-font-weight: #{cv.getVar("weight-bold")} !default;
+$kws-autocomplete-options-background: #{cv.getVar("scheme-main-ter")} !default;
 
 $__modal-z: 41 !default;
-@if $modal-z {
+@if variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 
@@ -100,14 +114,20 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !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);
   .kws-autocomplete {
     &.is-#{$name} {
       border-color: $color;
       &:focus-within {
-        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+        box-shadow: $kws-autocomplete-focus-box-shadow-size
+          hsla(
+            cv.getVar($name, "", "-h"),
+            cv.getVar($name, "", "-s"),
+            cv.getVar($name, "", "-l"),
+            cv.getVar("input-focus-shadow-alpha")
+          );
       }
       ul.options {
         li {

package/styles/Canvas.scss

@@ -1,3 +1,6 @@
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/initial-variables" as iv;
+
 :root {
   --kws-peninput-height: 350px;
   --kws-peninput-width: 250px;
@@ -11,7 +14,7 @@
   height: var(--kws-peninput-height);
   width: var(--kws-peninput-width);
   transform: translate3d(0, 0, 0);
-  transition: transform 0.3s $easeOutCustom;
+  transition: transform 0.3s cv.getVar("easing");
   transform-origin: center center;
   will-change: transform;
   backface-visibility: hidden;
@@ -21,7 +24,7 @@
     position: absolute;
     width: 100%;
     min-height: var(--kws-peninput-controls-height);
-    background: transparentize($grey-light, 0.5);
+    background: transparentize(iv.$grey-light, 0.5);
     padding: 0.25rem;
     margin: 0 auto;
     .control {
@@ -46,7 +49,7 @@
       width: 32px;
       height: 32px;
       padding: 3px;
-      background-color: $white-ter;
+      background-color: cv.getVar("white-ter");
     }
     input[type="color"]::-webkit-color-swatch-wrapper {
       padding: 0;
@@ -57,9 +60,9 @@
     &.expanded {
       z-index: 999;
       position: relative;
-      box-shadow: $card-shadow;
+      box-shadow: cv.getVar("card-shadow");
       .kws-pen-controls {
-        background: $grey-lighter;
+        background: iv.$grey-lighter;
       }
     }
   }

package/styles/Chart.scss

@@ -1,5 +1,7 @@
-$kws-chart-tooltip-background-color: $scheme-main !default;
-$kws-chart-tooltip-foreground-color: $scheme-invert-ter !default;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+$kws-chart-tooltip-background-color: #{cv.getVar("scheme-main")} !default;
+$kws-chart-tooltip-foreground-color: #{cv.getVar("scheme-invert-ter")} !default;
 
 .kws-chart {
   .apexcharts-tooltip {

package/styles/CheckRadio.scss

@@ -1,12 +1,20 @@
-$kws-theme-colors: $colors !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-checkradio-default-check-color: $text !default;
+$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: $input-focus-box-shadow-size !default;
-$kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !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")}
+) !default;
 
 .kws-checkbox {
   position: relative;
@@ -146,8 +154,9 @@ $kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !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} input[type="checkbox"]:checked + .kws-checkbox-label {
       &:after {
         border-color: $color;
@@ -208,7 +217,12 @@ $kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !default;
     &.is-#{$name} input[type="radio"]:active + .kws-checkbox-label {
       &:before {
         box-shadow: $kws-checkradio-focus-box-shadow-size
-          bulmaRgba($color, 0.25);
+          hsla(
+            #{cv.getVar($name, "", "-h")},
+            #{cv.getVar($name, "", "-s")},
+            #{cv.getVar($name, "", "-l")},
+            #{cv.getVar("focus-shadow-alpha")}
+          );
       }
     }
   }

package/styles/DataSearch.scss

@@ -1,8 +1,12 @@
+@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($success, 0.5);
+    border-color: transparentize(dv.$success, 0.5);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.23) !important;
     z-index: 2;
   }
@@ -16,7 +20,7 @@
   }
 }
 
-@include mobile {
+@include mx.mobile {
   .kws-grid-search {
     .field.outer-level-field {
       flex-wrap: wrap;
@@ -26,8 +30,8 @@
       .main-search {
         width: 100%;
         .input {
-          border-bottom-right-radius: $radius !important;
-          border-top-right-radius: $radius !important;
+          border-bottom-right-radius: #{cv.getVar("radius")} !important;
+          border-top-right-radius: #{cv.getVar("radius")} !important;
         }
       }
       .search-control {

package/styles/DataSort.scss

@@ -1,19 +1,24 @@
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/derived-variables" as dv;
+@use "bulma/sass/utilities/mixins" as mx;
+
 .sorting-filters {
   font-weight: bold;
   margin-top: -1.55rem;
   margin-bottom: 1.5rem;
   .control {
-    background: $input-border-color;
+    background: cv.getVar("border");
     margin: 0 !important;
     padding: 0.2rem 0;
     &:first-child {
       padding-left: calc(0.625rem - 1px);
-      border-radius: 0 0 0 $radius-large;
-      background: darken($input-border-color, 5%);
+      border-radius: 0 0 0 #{cv.getVar("radius-medium")};
+      background: darken(dv.$border, 5%);
       padding-right: calc(0.625rem - 1px);
     }
     &:last-child {
-      border-radius: 0 0 $radius-large 0;
+      border-radius: 0 0 #{cv.getVar("radius-medium")} 0;
     }
   }
   .select {
@@ -23,7 +28,7 @@
       padding-bottom: 0.2rem;
       border: none;
       background: transparent;
-      color: $primary;
+      color: #{cv.getVar("primary")};
       height: auto;
       font-weight: bold;
       &:focus,
@@ -36,12 +41,12 @@
       }
     }
     &::after {
-      border-color: $primary;
+      border-color: #{cv.getVar("primary")};
     }
   }
 }
 
-@include mobile {
+@include mx.mobile {
   .sorting-filters {
     margin-top: 0rem;
     .field {
@@ -49,10 +54,14 @@
     }
     .control {
       &:first-child {
-        border-radius: $radius-large 0 0 $radius-large;
+        border-radius: #{cv.getVar("radius-large")} 0 0 #{cv.getVar(
+            "radius-large"
+          )};
       }
       &:last-child {
-        border-radius: 0 $radius-large $radius-large 0;
+        border-radius: 0 #{cv.getVar("radius-large")} #{cv.getVar(
+            "radius-large"
+          )} 0;
         flex-grow: 1;
         flex-shrink: 1;
         .select {

package/styles/Datepicker.scss

@@ -1,14 +1,19 @@
-$kws-theme-colors: $colors !default;
-$kws-datepicker-background: $scheme-main-ter !default;
-$kws-datepicker-text: $text !default;
-$kws-datepicker-shadow: 0 2px 5px rgba(0, 0, 0, 0.3),
+@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;
 
 .flatpickr-calendar {
-  $inRangeBg: lighten($kws-datepicker-text, 55);
-  @if (colorLuminance($kws-datepicker-text) > 0.55) {
-    $inRangeBg: darken($kws-datepicker-text, 55);
+  $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;
@@ -28,9 +33,9 @@ $kws-datepicker-radius: 0px !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);
     &.is-#{$name} {
       &.arrowTop:before,
       &.arrowTop:after {
@@ -118,7 +123,9 @@ $kws-datepicker-radius: 0px !default;
         color: $color-dark;
         background: $color-light;
         border-color: $color-light;
-        box-shadow: -5px 0 0 $color-light, 5px 0 0 $color-light;
+        box-shadow:
+          -5px 0 0 $color-light,
+          5px 0 0 $color-light;
       }
       .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
       .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
@@ -145,7 +152,9 @@ $kws-datepicker-radius: 0px !default;
     }
 
     &.inRange {
-      box-shadow: -5px 0 0 $inRangeBg, 5px 0 0 $inRangeBg;
+      box-shadow:
+        -5px 0 0 $inRangeBg,
+        5px 0 0 $inRangeBg;
     }
 
     &.inRange,

package/styles/Divider.scss

@@ -1,6 +1,9 @@
-$kws-theme-colors: $colors !default;
-$kws-divider-color: $border !default;
-$kws-divider-font-size: $size-7 !default;
+@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;
 
@@ -9,9 +12,9 @@ $kws-divider-margin: 1rem !default;
   display: flex;
   align-items: center;
   text-transform: uppercase;
-  color: $grey;
+  color: cv.getVar("grey");
   font-size: $kws-divider-font-size;
-  font-weight: $weight-semibold;
+  font-weight: cv.getVar("weight-semibold");
   letter-spacing: 0.5px;
   margin: $kws-divider-margin 0;
   width: 100%;