@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/css/colors/_colors.scss

@@ -1,67 +1,151 @@
-:root {
-  // MAIN COLORS
-  --main-primary-color: #fff;
-  --main-primary-accent-color: #171A2A;
-  --main-ouline-color: #EAEAEA;
-
-  --main-secondary-color: #000;
-  --main-secondary-accent-color: #FFE69C;
-
-  --main-accent-color: #FFC107;
-  --main-page-bg-color: #F1F4F6;
-
-  // SEMANTIC COLORS
-  --disabled-color: #F3F4F4;
-
-  --true-color: #4CAF50;
-  --true--hover-color: #43A146;
-
-  --false-color: #FF4444;
-  --false--hover-color: #F03D3D;
-
-  --hold-color: #FFC107;
-  --hold--hover-color: #EFB917;
-
-  --transfer-color: #708FFF;
-  --transfer--hover-color: #6582EB;
-
-  // SUBORDINATE COLORS
-  // table colors
-  --table-primary-color: var(--main-primary-color);
-  --table--hover-color: var(--main-secondary-accent-color);
-  --table-secondary-color: #F9F9F9; // zebra
-
-  // other colors
-  --tag-bg-color: var(--main-secondary-accent-color);
-
-  // FORM COLORS
-  --form-input-color: #000; // user input color
-
-  --form-label-color: #ACACAC;
-  --form-label--active-color: #000;
-  --form-label--hover-color: #000;
-  --form-label--disabled-color: #EAEAEA;
-
-  --form-border-color: #ACACAC;
-  --form-border--hover-color: #000;
-  --form-border--disabled-color: #f5f5f5;
-
-  --form-placeholder-color: #ACACAC;
-  --form-placeholder--hover-color: #000;
-  --form-placeholder--disabled-color: #E3E3E3;
-
-  // outline
-  --form-outline-label-color: #EAEAEA;
-
-  --form-outline-border-color: #EAEAEA;
-  --form-outline-border--hover-color: #ACACAC;
-
-  --form-outline-placeholder-color: #EAEAEA;
-  --form-outline-placeholder--hover-color: #ACACAC;
-
-  // TEXT COLORS
-  --text-primary-color: #000;
-  --text-outline-color: #ACACAC;
-  --text-contrast-color: #fff;
-  --text--disabled-color: var(--disabled-color);
-}
+:root {
+  // HSL COLORS HUE VALUE
+  --_accent-color-hue: 42;
+  --_secondary-color-hue: 202;
+  --_page-bg-color-hue: 209;
+  --_icon-color-hue: 202;
+  --_positive-color-hue: 119;
+  --_negative-color-hue: 11;
+
+  --_hold-color-hue: 54;
+  --_transfer-color-hue: 227;
+
+  // DEFAULT STATES OPACITY
+  --_opacity--default: 0.8;
+  --_opacity--hover: 1;
+  --_opacity--active: 1;
+  --_opacity--focus: 0.8;
+  --_opacity--disabled: 0.4;
+
+  // BASIC HSL COLORS VALUES
+  --_accent-color: var(--_accent-color-hue), 100%, 50%;
+  --_main-color: var(--_accent-color-hue), 20%, 99%;
+  --_contrast-color: var(--_accent-color-hue), 20%, 1%;
+  --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
+  --_secondary-color-50: var(--_secondary-color-hue), 22%, 94%;
+  --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
+  --_header-color: var(--_page-bg-color-hue), 20%, 90%;
+  --_positive-color: var(--_positive-color-hue), 60%, 40%;
+  --_negative-color: var(--_negative-color-hue) , 80%, 50%;
+  --_icon-color: var(--_icon-color-hue), 100%, 15%;
+
+  --_hold-color: var(--_hold-color-hue), 80%, 50%;
+  --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+
+  // MAIN COLORS
+  --accent-color: hsla(var(--_accent-color), 1);
+  --main-accent-color: var(--accent-color); // DEPRECATED
+
+  --main-color: hsla(var(--_main-color), 1);
+  --main-primary-color: var(--main-color); // DEPRECATED
+
+  --contrast-color: hsla(var(--_contrast-color), 1);
+  --main-primary-accent-color: var(--contrast-color); // DEPRECATED
+
+  --secondary-color: hsla(var(--_secondary-color), 1);
+  --secondary-color-50: hsla(var(--_secondary-color-50), 1);
+  --main-secondary-color: var(--secondary-color); // DEPRECATED
+  --main-outline-color: var(--secondary-color); // DEPRECATED
+
+  // ICON COLORS
+  --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
+
+  --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+
+  --icon-color-accent: var(--accent-color);
+  --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
+  --icon-color-active: var(--icon-color--hover);
+  --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --icon-color-success: var(--true-color);
+  --icon-color-danger: var(--false-color);
+  --icon-color-transfer: var(--transfer-color);
+  --icon-color-hold: var(--hold-color);
+
+
+  --page-bg-color: hsla(var(--_page-bg-color), 1);
+  --header-color: hsla(var(--_header-color), 1);
+  --main-page-bg-color: var(--page-bg-color); // DEPRECATED
+
+  --accent-secondary-color: hsla(var(--_accent-color), 0.3);
+  --main-secondary-accent-color: var(--accent-secondary-color); // DEPRECATED
+  --main-option-hover-color: var(--accent-secondary-color); // DEPRECATED
+
+  // SEMANTIC COLORS
+  --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
+
+  --true-color: hsla(var(--_positive-color), var(--_opacity--default));
+  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover)); // DEPRECATED
+
+  --false-color: hsla(var(--_negative-color), var(--_opacity--default));
+  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover)); // DEPRECATED
+
+  --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
+  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover)); // DEPRECATED
+
+  --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
+  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover)); // DEPRECATED
+
+  // SUBORDINATE COLORS
+  --tag-bg-color: var(--main-secondary-accent-color);
+
+  // FORM STATES OPACITY
+  --form-opacity--default: var(--_opacity--default);
+  --form-opacity--hover: var(--_opacity--hover);
+  --form-opacity--active: var(--_opacity--active);
+  --form-opacity--focus: var(--_opacity--focus);
+  --form-opacity--disabled: var(--_opacity--disabled);
+
+  --form-placeholder-opacity: 0.4;
+  --form-placeholder-opacity--hover: 0.6;
+  --form-border-opacity--disabled: 0.05;
+
+  --form-opacity--ouline--default: 0.4;
+  --form-opacity--ouline--hover: 0.7;
+
+  // FORM COLORS
+  --form-input-color: var(--contrast-color); // user input color
+
+  --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
+  --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+  --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
+
+  --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
+  --form-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity--hover));
+  --form-placeholder--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+  // outline
+  --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+
+  --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
+  --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
+
+  --form-outline-placeholder-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
+  --form-outline-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
+
+  // TEXT OPACITY
+  --text-opacity--default: var(--_opacity--default);
+  --text-opacity----outline--default: 0.7;
+  --text-opacity--disabled: 0.5;
+
+  // TEXT COLORS
+  --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
+  --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
+  --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
+  --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
+
+  // CHAT COLORS
+  --_chat-client-color: var(--_accent-color);
+  --_chat-client-opacity: 0.2;
+  --_chat-agent-color: var(--_contrast-color);
+  --_chat-agent-opacity: 0.1;
+
+  --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+  --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+}

package/src/css/components/_components.scss

@@ -1,25 +1,41 @@
-@import "atoms/wt-badge/variables";
-@import "atoms/wt-button/variables";
-@import "atoms/wt-icon/variables";
-@import "atoms/wt-input-info/variables";
-@import "atoms/wt-divider/variables";
-@import "atoms/wt-label/variables";
-@import "atoms/wt-loader/variables";
-@import "atoms/wt-tooltip/variables";
-
-@import "molecules/wt-icon-btn/variables";
-@import "molecules/wt-popup/variables";
-@import "molecules/wt-radio/variables";
-@import "molecules/wt-checkbox/variables";
-@import "molecules/wt-datepicker/variables";
-@import "molecules/wt-datetimepicker/variables";
-@import "molecules/wt-input/variables";
-@import "molecules/wt-notification/variables";
-@import "molecules/wt-search-bar/variables";
-@import "molecules/wt-select/variables";
-@import "molecules/wt-switcher/variables";
-@import "molecules/wt-tabs/variables";
-@import "molecules/wt-textarea/variables";
-@import "molecules/wt-timepicker/variables";
-
-@import "organisms/wt-pagination/variables";
+@import "atoms/wt-badge/variables";
+@import "atoms/wt-button/variables";
+@import "atoms/wt-icon/variables";
+@import "atoms/wt-indicator/variables";
+@import "atoms/wt-input-info/variables";
+@import "atoms/wt-divider/variables";
+@import "atoms/wt-label/variables";
+@import "atoms/wt-loader/variables";
+@import "atoms/wt-rounded-action/variables";
+@import "atoms/wt-tooltip/variables";
+@import "atoms/wt-context-menu/variables";
+
+@import "molecules/wt-icon-btn/variables";
+@import "molecules/wt-popup/variables";
+@import "molecules/wt-progress-bar/variables";
+@import "molecules/wt-radio/variables";
+@import "molecules/wt-checkbox/variables";
+@import "molecules/wt-datepicker/variables";
+@import "molecules/wt-datetimepicker/variables";
+@import "molecules/wt-input/variables";
+@import "molecules/wt-notification/variables";
+@import "molecules/wt-search-bar/variables";
+@import "molecules/wt-select/variables";
+@import "molecules/wt-slider/variables";
+@import "molecules/wt-switcher/variables";
+@import "molecules/wt-tabs/variables";
+@import "molecules/wt-tags-input/variables";
+@import "molecules/wt-textarea/variables";
+@import "molecules/wt-timepicker/variables";
+@import "molecules/wt-button-select/variables";
+
+@import "organisms/wt-headline/variables";
+@import "organisms/wt-app-header/variables";
+@import "organisms/wt-navigation-bar/variables";
+@import "organisms/wt-notifications-bar/variables";
+@import "organisms/wt-page-wrapper/variables";
+@import "organisms/wt-pagination/variables";
+@import "organisms/wt-status-select/variables";
+@import "organisms/wt-table/variables";
+@import "organisms/wt-table-actions/variables";
+@import "organisms/wt-player/variables";

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -1,6 +1,7 @@
-
-:root {
-  --badge-padding: 5px 10px;
-  --badge-border-radius: 20px;
-  --badge-bg-color: var(--main-secondary-accent-color);
+
+:root {
+  --badge-padding: 5px 10px;
+  --badge-border-radius: 20px;
+  --badge-bg-color: var(--main-secondary-accent-color);
+  --badge-bg-color--outline: var(--main-outline-color);
 }

package/src/css/components/atoms/wt-badge/wt-badge.scss

@@ -1,8 +1,40 @@
-.wt-badge {
-  @extend %typo-body-md;
-
-  display: inline-block;
-  padding: var(--badge-padding);
-  background: var(--badge-bg-color);
-  border-radius: var(--badge-border-radius);
-}
+.wt-badge {
+  @extend %typo-body-md;
+
+  display: inline-block;
+  padding: var(--badge-padding);
+  background: var(--badge-bg-color);
+  border-radius: var(--badge-border-radius);
+
+  &--main-color {
+    background: var(--badge-bg-color);
+  }
+
+  &--outline-color {
+    background: var(--badge-bg-color--outline);
+  }
+
+  &--accent-color {
+    background: var(--accent-color);
+  }
+
+  &--secondary-color {
+    background: var(--secondary-color);
+  }
+
+  &--secondary-50-color {
+    background: var(--secondary-color-50);
+  }
+
+  &--success-color {
+    background: var(--true-color);
+  }
+
+  &--danger-color {
+    background: var(--false-color);
+  }
+
+  &--transfer-color {
+    background: var(--transfer-color);
+  }
+}

package/src/css/components/atoms/wt-button/_variables.scss

@@ -1,47 +1,46 @@
-%typo-btn {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-btn-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 24px;
-}
-
-:root {
-  --btn-padding: 11px 19px;
-  --btn-lg-padding: 10px 29px;
-  --btn-border: 1px solid;
-
-  // BUTTON COLORS
-  --btn-dark-font-color: #000;
-  --btn-light-font-color: #fff;
-
-  --btn-primary-color: var(--main-accent-color);
-  --btn-primary--hover-color: #EFB917;
-
-  --btn-secondary-color: #808080;
-  --btn-secondary-bg-color: transparent;
-  --btn-secondary--hover-color: #000;
-
-  --btn-disabled-color: var(--disabled-color);
-  --btn-disabled-bg-color: transparent;
-
-  --btn-true-color: var(--true-color);
-  --btn-true--hover-color: var(--true--hover-color);
-
-  --btn-false-color: var(--false-color);
-  --btn-false--hover-color: var(--false--hover-color);
-
-  --btn-hold-color: var(--hold-color);
-  --btn-hold--hover-color: var(--hold--hover-color);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer--hover-color: var(--transfer--hover-color);
+%typo-btn {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 12px;
+  }
+  line-height: 14px;
+}
+
+%typo-btn-lg {
+  font: {
+    family: 'Montserrat Semi', monospace;
+    size: 20px;
+  }
+  line-height: 24px;
+}
+
+:root {
+  --btn-padding: 11px 19px;
+  --btn-lg-padding: 10px 29px;
+  --btn-border: 1px solid;
+
+  // BUTTON COLORS
+  --btn-dark-font-color: #000;
+  --btn-light-font-color: #fff;
+
+  --btn-primary-color: var(--main-accent-color);
+  --btn-primary--hover-color: #EFB917;
+
+  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
+  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
+
+  --btn-disabled-color: var(--disabled-color);
+  --btn-disabled-bg-color: transparent;
+
+  --btn-true-color: var(--true-color);
+  --btn-true--hover-color: var(--true--hover-color);
+
+  --btn-false-color: var(--false-color);
+  --btn-false--hover-color: var(--false--hover-color);
+
+  --btn-hold-color: var(--hold-color);
+  --btn-hold--hover-color: var(--hold--hover-color);
+
+  --btn-transfer-color: var(--transfer-color);
+  --btn-transfer--hover-color: var(--transfer--hover-color);
 }

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -0,0 +1,10 @@
+.wt-context-menu {
+  --context-menu-min-width : 160px;
+  --context-menu-max-width : 300px;
+
+  --context-menu-option-color--hover: var(--secondary-color);
+
+  --context-menu-background-color: var(--main-color);
+
+  --context-menu-option-padding: var(--spacing--sm);
+}

package/src/css/components/atoms/wt-divider/_variables.scss

@@ -1,5 +1,5 @@
-
-:root {
-  --divider-border: 1px solid;
-  --divider-border-color: var(--main-page-bg-color);
+
+:root {
+  --divider-border: 1px solid;
+  --divider-border-color: var(--main-page-bg-color);
 }

package/src/css/components/atoms/wt-icon/_variables.scss

@@ -1,29 +1,8 @@
-
-:root {
-  --icon-xl-size: 50px;
-  --icon-lg-size: 32px;
-  --icon-md-size: 24px;
-  --icon-sm-size: 16px;
-  --icon-xs-size: 8px;
-
-  // ICON COLORS
-  --icon-primary-color: #808080;
-  --icon--active-color: #000;
-  --icon--hover-color: #000;
-  --icon-outline-color: var(--main-ouline-color);
-  --icon-outline--active-color: #808080;
-  --icon-outline--hover-color: #808080;
-  --icon--disabled-color: #EAEAEA;
-
-  --icon-hold-color: var(--hold-color);
-  --icon-hold--hover-color: var(--hold--hover-color);
-
-  --icon-true-color: var(--true-color);
-  --icon-true--hover-color: var(--true--hover-color);
-
-  --icon-false-color: var(--false-color);
-  --icon-false--hover-color: var(--false--hover-color);
-
-  --icon-transfer-color: var(--transfer-color);
-  --icon-transfer--hover-color: var(--transfer--hover-color);
+
+:root {
+  --icon-xl-size: 40px;
+  --icon-lg-size: 32px;
+  --icon-md-size: 24px;
+  --icon-sm-size: 16px;
+  --icon-xs-size: 8px;
 }

package/src/css/components/atoms/wt-indicator/_variables.scss

@@ -0,0 +1,18 @@
+:root {
+  --indicator-size: 14px;
+  --indicator-text-margin: 10px;
+  
+  --indicator-primary-color: var(--accent-color);
+
+  --indicator-secondary-color: var(--secondary-color);
+
+  --indicator-disabled-color: var(--disabled-color);
+
+  --indicator-true-color: var(--true-color);
+
+  --indicator-false-color: var(--false-color);
+
+  --indicator-transfer-color: var(--transfer-color);
+
+  --indicator-break-out-color: hsla(36, 90%, 50%, 1);
+}

package/src/css/components/atoms/wt-input-info/_variables.scss

@@ -1,6 +1,7 @@
-
-:root {
-  --input-info-margin: 5px;
-  --input-info-color: var(--form-label-color);
-  --input-info--invalid-color: var(--false-color);
+
+:root {
+  --input-info-min-height: 12px;
+  --input-info-margin: 5px;
+  --input-info-color: var(--form-label-color);
+  --input-info--invalid-color: var(--false-color);
 }

package/src/css/components/atoms/wt-label/_variables.scss

@@ -1,5 +1,5 @@
-
-:root {
-  --label-margin: 10px;
-  --label--invalid-color: var(--false-color);
+
+:root {
+  --label-margin: 10px;
+  --label--invalid-color: var(--false-color);
 }

package/src/css/components/atoms/wt-loader/_variables.scss

@@ -1,8 +1,8 @@
-
-:root {
-  --loader-size: 44px;
-  --loader-dot-size: 6px;
-  --loader-path-color: var(--main-primary-accent-color);
-  --loader-dot-color: var(--main-accent-color);
-  --loader-animation-duration: 3s;
+
+:root {
+  --loader-size: 44px;
+  --loader-dot-size: 6px;
+  --loader-path-color: var(--main-primary-accent-color);
+  --loader-dot-color: var(--main-accent-color);
+  --loader-animation-duration: 3s;
 }

package/src/css/components/atoms/wt-rounded-action/_variables.scss

@@ -0,0 +1,30 @@
+:root {
+  --rounded-action-size--lg: 60px;
+  --rounded-action-size--md: 50px; // default
+  --rounded-action-size--sm: 40px;
+  --rounded-action-border: 1px solid;
+
+  // BUTTON COLORS
+  --rounded-action-primary-color: var(--main-accent-color);
+  --rounded-action-primary--hover-color: #EFB917;
+
+  --rounded-action-secondary-color: #808080;
+  --rounded-action-secondary-bg-color: transparent;
+  --rounded-action-secondary--hover-color: #000;
+  --rounded-action-secondary--active-color: #000;
+
+  --rounded-action-disabled-color: var(--disabled-color);
+  --rounded-action-disabled-bg-color: transparent;
+
+  --rounded-action-true-color: var(--true-color);
+  --rounded-action-true--hover-color: var(--true--hover-color);
+
+  --rounded-action-false-color: var(--false-color);
+  --rounded-action-false--hover-color: var(--false--hover-color);
+
+  --rounded-action-hold-color: var(--hold-color);
+  --rounded-action-hold--hover-color: var(--hold--hover-color);
+
+  --rounded-action-transfer-color: var(--transfer-color);
+  --rounded-action-transfer--hover-color: var(--transfer--hover-color);
+}

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,10 +1,10 @@
-
-:root {
-  --tooltip-padding: 10px 20px;
-  --tooltip-z-index: 100;
-
-  --tooltip-light-text-color: #000;
-  --tooltip-light-bg-color: #fff;
-  --tooltip-dark-text-color: #fff;
-  --tooltip-dark-bg-color: #464858;
+
+:root {
+  --tooltip-padding: 10px 20px;
+  --tooltip-z-index: 100;
+
+  --tooltip-light-text-color: #000;
+  --tooltip-light-bg-color: #fff;
+  --tooltip-dark-text-color: #fff;
+  --tooltip-dark-bg-color: #464858;
 }

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -0,0 +1,21 @@
+.wt-button-select {
+  --button-select-button-padding: var(--spacing--md) var(--spacing--lg);
+  /*
+  Reduce 1px from "spacing--md" for align a difference between arrow size in "wt-button-select__select"
+  and line-height of text in "wt-button-select__button"
+  */
+  --button-select-icon-button-padding: calc(var(--spacing--sm) - 1px);
+
+  --button-select-buttons-gap: 1px;
+
+  --button-select-icon-color-primary: var(--btn-primary-color);
+  --button-select-icon-color-secondary: var(--btn-secondary-color);
+  --button-select-icon-color-dark: var(--btn-dark-font-color);
+  --button-select-icon-color-ligth: var(--main-color);
+
+  --button-select-icon-color-primary--hover: var(--btn-primary--hover-color);
+  --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
+  --button-select-icon-color-success--hover: var(--btn-true--hover-color);
+  --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);
+  --button-select-icon-color-secondary--hover: var(--btn-secondary--hover-color);
+}

package/src/css/components/molecules/wt-checkbox/_variables.scss

@@ -1,4 +1,4 @@
-
-:root {
-  --checkbox-icon-margin: 10px;
+
+:root {
+  --checkbox-icon-margin: 10px;
 }