@steroidsjs/bootstrap 3.0.0-beta.46 → 3.0.0-beta.48

package/form/AutoCompleteField/AutoCompleteFieldView.js

@@ -33,23 +33,77 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
+var Text_1 = __importDefault(require("@steroidsjs/core/ui/typography/Text/Text"));
+var content_1 = require("@steroidsjs/core/ui/content");
 require("./AutoCompleteFieldView.scss");
+var normalizeItems = function (items) {
+    var categories = {};
+    var itemsWithoutCategory = [];
+    items.forEach(function (item) {
+        if (item.category) {
+            if (categories[item.category]) {
+                categories[item.category].push(item);
+                return;
+            }
+            categories[item.category] = [item];
+            return;
+        }
+        itemsWithoutCategory.push(item);
+    });
+    return {
+        categories: categories,
+        itemsWithoutCategory: itemsWithoutCategory
+    };
+};
+var renderItem = function (item, props, bem) {
+    var _a, _b, _c;
+    var hasAdditionalIcon = !!((_a = item.additional) === null || _a === void 0 ? void 0 : _a.icon);
+    var hasAdditionalText = !!((_b = item.additional) === null || _b === void 0 ? void 0 : _b.text);
+    var hasSomeAdditional = hasAdditionalText || hasAdditionalIcon;
+    var uniqId = item[props.primaryKey];
+    return (React.createElement("button", { key: String(uniqId), className: bem.element('item', {
+            hover: props.hoveredId === uniqId,
+            select: props.selectedIds.includes(uniqId)
+        }), onClick: function () { return props.onItemSelect(uniqId); }, onFocus: function () { return props.onItemHover(uniqId); }, onMouseOver: function () { return props.onItemHover(uniqId); } },
+        React.createElement("span", { className: bem.element('item-label') }, item.label),
+        hasSomeAdditional && (React.createElement("div", { className: bem.element('item-additional') },
+            hasAdditionalIcon && (React.createElement(content_1.Icon, { name: (_c = item.additional) === null || _c === void 0 ? void 0 : _c.icon, className: bem.element('item-additional-icon') })),
+            hasAdditionalText && (React.createElement("span", { className: bem.element('item-additional-text') }, item.additional.text))))));
+};
 function AutoCompleteFieldView(props) {
     var bem = (0, hooks_1.useBem)('AutoCompleteFieldView');
-    return (React.createElement("div", { ref: props.forwardedRef, className: bem.block({ size: props.size }) },
-        React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.block({
-                size: props.size
-            }), 'form-control', 'form-control-' + props.size, !!props.errors && 'is-invalid', props.inputProps.className, props.className), onClick: function (e) {
+    var renderItems = React.useCallback(function () {
+        if (!(0, isEmpty_1["default"])(props.categories)) {
+            var _a = normalizeItems(props.items), categories = _a.categories, itemsWithoutCategory = _a.itemsWithoutCategory;
+            return (React.createElement(React.Fragment, null,
+                Object.entries(categories).map(function (_a) {
+                    var category = _a[0], categoryItems = _a[1];
+                    return (React.createElement("div", { key: category, className: bem.element('category') },
+                        React.createElement("span", { className: bem.element('category__label') }, category),
+                        React.createElement("div", { className: bem.element('category__content') }, categoryItems.map(function (item) { return renderItem(item, props, bem); }))));
+                }),
+                itemsWithoutCategory.map(function (item) { return renderItem(item, props, bem); })));
+        }
+        return (React.createElement(React.Fragment, null, props.items.map(function (item) { return renderItem(item, props, bem); })));
+    }, [bem, props]);
+    return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({
+            size: props.size,
+            opened: props.isOpened
+        }), props.className), style: props.style },
+        React.createElement("input", __assign({}, props.inputProps, { className: bem(bem.element('input'), props.inputProps.className), onClick: function (e) {
                 e.preventDefault();
                 props.onOpen();
             }, onChange: function (e) { return props.inputProps.onChange(e.target.value); }, placeholder: props.placeholder, disabled: props.disabled, required: props.required })),
         props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
-            React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return (React.createElement("button", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
-                    hover: props.hoveredId === item[props.primaryKey],
-                    select: props.selectedIds.includes(item[props.primaryKey])
-                }), onClick: function () { return props.onItemSelect(item[props.primaryKey]); }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label)); }))))));
+            React.createElement("div", { className: bem.element('list') }, !(0, isEmpty_1["default"])(props.items)
+                ? renderItems()
+                : (React.createElement(Text_1["default"], { type: 'textSm', content: __('Nothing was found'), className: bem.element('nothing') })))))));
 }
 exports["default"] = AutoCompleteFieldView;

package/form/AutoCompleteField/AutoCompleteFieldView.scss

@@ -1,157 +1,214 @@
+@import "../../scss/variables";
+@import "../../scss/mixins";
+
+:root {
+    --autocomplete-hover-color: #f1f5f7;
+    --autocomplete-selected-color: #dbe2e6;
+    --autocomplete-icon-color: #313131;
+}
+
+html[data-theme="dark"] {
+    --autocomplete-hover-color: #4e4f57;
+    --autocomplete-selected-color: #5b5c6b;
+    --autocomplete-icon-color: #ffffff;
+}
+
+$autocomplete-hover-color: var(--autocomplete-hover-color);
+$autocomplete-selected-color: var(--autocomplete-selected-color);
+$autocomplete-icon-color: var(--autocomplete-icon-color);
+
 .AutoCompleteFieldView {
-  position: relative;
-
-  font-size: 1rem;
-  &_size_sm {
-    font-size: 0.7875rem;
-  }
-  &_size_lg {
-    font-size: 1.25rem;
-  }
-
-  &__selected-items {
-    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-    min-width: 100px;
-    //height: 38px;
-    cursor: pointer;
-    background-color: black; //changed
-    background-clip: blue; //changed
-    border: 1px solid red; //changed
-    border-radius: 0.25rem;
-    line-height: 1.5;
-    color: red; //changed
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: 10px;
-      transform: translateY(-50%);
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border-top: 0.3em solid;
-      border-right: 0.3em solid transparent;
-      border-bottom: 0;
-      border-left: 0.3em solid transparent;
+    $root: &;
+
+    position: relative;
+
+    &__input {
+        width: 100%;
+        border: 1px solid $border-color;
+        background-color: $element-background-color;
+        color: $text-color;
+        transition: border-color 150ms ease-in-out;
+        font-size: inherit;
+        line-height: inherit;
     }
 
-    &_reset {
-      padding-right: 3rem;
+    &_opened {
+        #{$root}__input {
+            border-color: $primary;
+        }
     }
 
-    &_is-invalid {
-      border-color: black; //changed
-    }
-  }
-  &_size_sm &__selected-items {
-    padding: 0.25rem 0.5rem;
-    line-height: 1.5;
-    border-radius: 0.2rem;
-    //height: 31px;
-  }
-  &_size_lg &__selected-items {
-    padding: 0.5rem 1rem;
-    line-height: 1.5;
-    border-radius: 0.3rem;
-    //height: 48px;
-  }
-
-  &__reset {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 20px;
-    width: 30px;
-    height: 100%;
-    cursor: pointer;
-
-    &::before,
-    &::after
-    {
-      display: block;
-      position: absolute;
-      top: 50%;
-      margin-top: -5px;
-      left: 50%;
-      width: 1px;
-      height: 10px;
-      background-color: yellow; //
-      content: '';
+    &__drop-down {
+        width: 100%;
+        top: 100%;
+        left: 0;
+        position: absolute;
+        z-index: 9999;
+        margin-top: 8px;
+        border-radius: $radius-large;
+        background-color: $element-background-color;
+        border: 1px solid $border-color;
+        overflow: hidden;
     }
 
-    &::before {
-      transform: rotate(45deg);
+    &__list {
+        display: flex;
+        flex-flow: column nowrap;
+        @include scrollWrapper(240px, 0, $scroll-thumb-color, $scroll-track-color);
     }
 
-    &::after {
-      transform: rotate(-45deg);
+    &__item {
+        width: 100%;
+        background-color: $element-background-color;
+        outline: none;
+        border: none;
+        text-align: left;
+
+        color: $text-color;
+        cursor: pointer;
+
+        font-size: inherit;
+        line-height: inherit;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        &-label {
+            display: inline-block;
+        }
+
+        &_hover {
+            background-color: $autocomplete-hover-color;
+        }
+
+        &_select {
+            background-color: $autocomplete-selected-color;
+        }
+
+        &-additional {
+            display: flex;
+            align-items: center;
+            column-gap: 4px;
+
+            &-icon {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+
+                path,
+                circle {
+                    stroke: $autocomplete-icon-color;
+                }
+            }
+        }
     }
-  }
-
-  &__drop-down {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 0;
-    width: 100%;
-    z-index: 10;  //changed
-    background-color: #fff; //changed
-    line-height: 1.5;
-    padding: 5.5px 0;
-    border: 1px solid #CCCCCC;
-    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
-    border-radius: 10px;
-  }
-
-  &__drop-down-list {
-    display: flex;
-    flex-direction: column;
-    max-height: 273px;
-    overflow: auto;
-  }
-
-  &__search {
-    padding: 0.25rem 0.5rem;
-
-    > .form-control {
-      width: 100%;
+
+    &__category {
+        background-color: $element-background-color;
+        width: 100%;
+
+        &__label {
+            display: block;
+            padding: 12px 8px;
+            color: $placeholder-color;
+        }
+        &__content {
+            width: 100%;
+        }
+
+        &_hidden {
+            display: none;
+        }
     }
-  }
-  &_size_sm &__search {
-    padding: 0.1rem 0.2rem;
-  }
-
-  &__drop-down-item {
-    display: flex;
-    justify-content: flex-start;
-    padding: 10px 34px;
-    cursor: pointer;
-    border: unset;
-    background-color: #fff;
-    font-size: 14px;
-    line-height: 140%;
-    &_hover {
-      background-color: #F8F8F8; //
+
+    &__nothing {
+        color: $placeholder-color;
+        width: 100%;
+        margin-bottom: 48px;
+        padding: 8px 12px;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
     }
 
-    &_select {
-      background-color: #F8F8F8; //
-      color: #152536; //
+    &_size {
+        &_lg {
+            font-size: $font-size-lg;
+            line-height: $line-height-lg;
+
+            #{$root}__input {
+                padding: 16px 8px;
+                height: $input-height-lg;
+                border-radius: $radius-large;
+            }
+
+            #{$root}__item {
+                padding: 16px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 16px 24px;
+                }
+
+               
+                &__label {
+                    font-size: $font-size-base;
+                    line-height: $line-height-base;
+                }
+            }
+        }
+
+        &_md {
+            font-size: $font-size-base;
+            line-height: $line-height-lg;
+
+            #{$root}__input {
+                padding: 11px 8px;
+                height: $input-height-md;
+                border-radius: $radius-large;
+            }
+
+            #{$root}__item {
+                padding: 12px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 12px 20px;
+                }
+
+                &__label {
+                    font-size: $font-size-sm;
+                    line-height: $line-height-sm;
+                }
+            }
+        }
+
+        &_sm {
+            font-size: $font-size-sm;
+            line-height: $line-height-lg;
+
+            #{$root}__input {
+                padding: 5px 8px;
+                height: $input-height-sm;
+                border-radius: $radius-small;
+            }
+
+            #{$root}__item {
+                padding: 8px;
+            }
+
+            #{$root}__category {
+                #{$root}__item {
+                    padding: 8px 16px;
+                }
+
+                &__label {
+                    font-size: $font-size-xs;
+                    line-height: $line-height-xs;
+                }
+            }
+        }
     }
-  }
-  &_size_sm &__drop-down-item {
-    padding: 0.25rem 0.5rem;
-  }
-  &_size_lg &__drop-down-item {
-    padding: 0.5rem 1rem;
-  }
 }
-
-.form-control:focus{
-  box-shadow: unset;
-  border: 4px solid #A7EFFF;
-  border-radius: 4px;
-}

package/form/Button/ButtonView.scss

@@ -6,8 +6,8 @@ $btn-letter-spacing: 0.1em;
 .ButtonView {
     $root: &;
 
-    transition-property: color, background-color, border-color, box-shadow, stroke;
-    transition-duration: 0.15s;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: $transition-duration;
     transition-timing-function: ease-in-out;
 
     display: flex;

package/form/DropDownField/DropDownFieldView.scss

@@ -7,8 +7,6 @@
     --chevron-background-color-basic: #ffffff;
     --chevron-inner-color: #323232;
     --drop-down-border-color: #e9e9e9;
-    --scroll-thumb-color: #e5e9eb;
-    --scroll-track-color: #f5f8fa;
     --search-color: #626262;
     --search-background-color: #f5f8fa;
     --search-hover-background-color: #eef1f2;
@@ -26,8 +24,6 @@ html[data-theme="dark"] {
     --chevron-background-color-basic: #6f6b76;
     --chevron-inner-color: #ffffff;
     --drop-down-border-color: #595959;
-    --scroll-thumb-color: #5b5c6b;
-    --scroll-track-color: #444147;
     --search-color: #adacac;
     --search-background-color: #4e4f57;
     --search-hover-background-color: #5b5c6b;
@@ -44,8 +40,6 @@ $chevron-background-color-outline: var(--chevron-background-color-outline);
 $chevron-background-color-basic: var(--chevron-background-color-basic);
 $chevron-inner-color: var(--chevron-inner-color);
 $drop-down-border-color: var(--drop-down-border-color);
-$scroll-thumb-color: var(--scroll-thumb-color);
-$scroll-track-color: var(--scroll-track-color);
 $search-color: var(--search-color);
 $search-background-color: var(--search-background-color);
 $search-hover-background-color: var(--search-hover-background-color);

package/form/FieldList/FieldListView.scss

@@ -59,13 +59,14 @@ $background-th: var(--background-th);
   }
 
   &__button-add {
+    svg {
+      path { 
+          stroke: $primary;
+      }
+    }
     > span {
       gap: 4px;
     }
-
-    svg > * {
-      stroke: inherit;
-    }
   }
 
   .FieldLayoutView {

package/form/FileField/FileFieldView.scss

@@ -21,6 +21,7 @@
 
   &__button {
     margin-bottom: 16px;
+    min-width: 200px;
 
     &_isWall {
       width: 128px;

package/icons/index.js

@@ -290,6 +290,7 @@ exports["default"] = (function (customIcons) {
         'field-list-remove',
         'add',
         'file-loading',
+        'loading',
         'Cross_12x12',
     ];
     steroidsIcons.forEach(function (iconName) {

package/icons/svgs/loading.svg

@@ -0,0 +1,9 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5473 4.43087C14.1741 4.4031 11.8459 5.0797 9.85722 6.37509C7.86854 7.67049 6.30864 9.52651 5.3748 11.7084C4.44095 13.8904 4.17509 16.3002 4.61085 18.6333C5.0466 20.9663 6.16439 23.1177 7.82287 24.8155C9.48135 26.5132 11.606 27.681 13.9282 28.1713C16.2504 28.6615 18.6658 28.4521 20.869 27.5696C23.0722 26.687 24.9642 25.171 26.3058 23.2132C27.6474 21.2554 28.3783 18.9437 28.406 16.5705" stroke="url(#paint0_linear_2055_36886)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_2055_36886" x1="16.2664" y1="28.4292" x2="16.5473" y2="4.43087" gradientUnits="userSpaceOnUse">
+<stop stop-color="#651FFF"/>
+<stop offset="1" stop-color="#BA9BFF"/>
+</linearGradient>
+</defs>
+</svg>

package/layout/Loader/LoaderView.d.ts

@@ -1,2 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
-export default function LoaderView(props: IBemHocOutput): JSX.Element;
+import { ILoaderViewProps } from '@steroidsjs/core/ui/layout/Loader/Loader';
+export default function LoaderView(props: ILoaderViewProps): JSX.Element;

package/layout/Loader/LoaderView.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
+var content_1 = require("@steroidsjs/core/ui/content");
 function LoaderView(props) {
     var bem = (0, hooks_1.useBem)('LoaderView');
-    return (React.createElement("div", { className: bem.block() },
-        React.createElement("div", { className: bem.element('loader') })));
+    return (React.createElement("div", { className: bem.block({
+            color: props.color,
+            size: props.size
+        }) },
+        React.createElement(content_1.Icon, { className: bem.element('icon'), name: 'loading' })));
 }
 exports["default"] = LoaderView;

package/layout/Loader/LoaderView.scss

@@ -1,27 +1,72 @@
+:root {
+  --gradient-color-primary-first: #651FFF;
+  --gradient-color-primary-second: #BA9BFF;
+}
+
+html[data-theme="dark"] { 
+  --gradient-color-primary-first: #9362FF;
+  --gradient-color-primary-second: #B898FF;
+}
+
+$gradient-color-primary-first: var(--gradient-color-primary-first);
+$gradient-color-primary-second: var(--gradient-color-primary-second);
+
 .LoaderView {
-  position: relative;
-  width: 100%;
-
-  &__loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -27px 0 0 -27px;
-    z-index: 20;
-    font-size: 10px;
-    text-indent: -9999em;
-    border-top: .9em solid rgba(246, 168, 33, 0.2);
-    border-right: .9em solid rgba(246, 168, 33, 0.2);
-    border-bottom: .9em solid rgba(246, 168, 33, 0.2);
-    border-left: .9em solid #db001f;
-    transform: translateZ(0);
+  $root: &;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &_size {
+    &_sm {
+      svg {
+        height: 33px;
+        width: 33px;
+        path {
+          stroke-width: 4px;
+        }
+      }
+    }
+    &_md {
+      svg {
+        height: 44px;
+        width: 44px;
+        path {
+          stroke-width: 6px;
+        }
+      }
+    }
+    &_lg {
+      svg {
+        height: 55px;
+        width: 55px;
+        path {
+          stroke-width: 7px;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     animation: Loader-spin 1.1s infinite linear;
-    opacity: 1 !important;
+  }
+
+  &_color_gradient {
+    svg stop:first-child {
+      stop-color: $gradient-color-primary-first;
+    }
+    svg stop:last-child {
+      stop-color: $gradient-color-primary-second;
+    }
+  }
 
-    &, &::after {
-      border-radius: 50%;
-      width: 5em;
-      height: 5em;
+  @each $colorName, $colorMap in $color-themes {
+    &_color_#{$colorName} {
+        @include loader-color($colorMap, $colorName, $root);
     }
   }
 }
@@ -35,4 +80,4 @@
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
-}
+}

package/modal/Modal/ModalView.scss

@@ -1,5 +1,6 @@
 .ModalView {
     $root: &;
+    min-width: 300px;
 
     &_overlay {
         z-index: 100;
@@ -24,7 +25,6 @@
 
         &_size {
             &_lg {
-                width: 540px;
                 border-radius: 16px;
 
                 font-size: $font-size-lg;
@@ -39,11 +39,10 @@
                 }
 
                 #{$root}__footer { 
-                    padding: 24px 116px;
+                    padding: 24px;
                 }
             }
             &_md {
-                width: 480px;
                 border-radius: $radius-large;
 
                 font-size: $font-size-base;
@@ -58,11 +57,10 @@
                 }
 
                 #{$root}__footer { 
-                    padding: 20px 86px;
+                    padding: 20px;
                 }
             }
             &_sm {
-                width: 420px;
                 border-radius: $radius-small;
 
                 font-size: $font-size-sm;
@@ -77,7 +75,7 @@
                 }
 
                 #{$root}__footer { 
-                    padding: 16px 56px;
+                    padding: 16px;
                 }
             }
         }

package/nav/Controls/ControlsView.scss

@@ -3,16 +3,9 @@
     flex-flow: row;
     justify-content: space-between;
 
-    width: 24px;
-    height: 24px;
-
     a {
         display: inline-block;
         width: 100%;
         height: 100%;
     }
-
-    .ButtonView {
-        border: none;
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.46",
+    "version": "3.0.0-beta.48",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.26",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.28",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.26"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.28"
     }
 }

package/scss/mixins/customMixins.scss

@@ -0,0 +1,5 @@
+@mixin loader-color($colorMap, $colorName, $root) {
+    svg stop {
+        stop-color: map-get($colorMap, color);
+    }
+}

package/scss/mixins/index.scss

@@ -1,3 +1,4 @@
 @import "button";
 @import "typography";
-@import "scroll";
+@import "scroll";
+@import "customMixins";

package/scss/variables/common/colors.scss

@@ -37,6 +37,8 @@
     --additional-light-gray: #F8F8F8;
     --additional-light: #9088A1;
     --additional-light-blue: #F9FCFF;
+    --scroll-thumb-color: #e5e9eb;
+    --scroll-track-color: #f5f8fa;
 }
 
 html[data-theme="dark"] {
@@ -78,6 +80,8 @@ html[data-theme="dark"] {
     --additional-light-gray: #4A4B53;
     --additional-light: #B7AFC7;
     --additional-light-blue: #DAEAF6;
+    --scroll-thumb-color: #5b5c6b;
+    --scroll-track-color: #444147;
 }
 
 /*
@@ -122,6 +126,8 @@ $additional-gray: var(--additional-gray);
 $additional-light-gray: var(--additional-light-gray);
 $additional-light: var(--additional-light);
 $additional-light-blue: var(--additional-light-blue);
+$scroll-thumb-color: var(--scroll-thumb-color);
+$scroll-track-color: var(--scroll-track-color);
 
 /*
  * Common colors   

package/scss/variables/common/variables.scss

@@ -0,0 +1 @@
+$transition-duration: .15s;

package/scss/variables/index.scss

@@ -4,6 +4,7 @@
 @import 'common/typography';
 @import 'common/radiuses';
 @import 'common/old-variables';
+@import 'common/variables';
 
 @import 'components/button';
 @import 'components/calendar';