colibri-ui 0.7.62 → 0.7.64

package/esm/theme_default_variables.css

@@ -23,7 +23,7 @@
 --typography-alert: #ff564e;
 --typography-success: #28bc00;
 --typography-secondary: #dbdbdb;
---button-border-radius: 26px;
+--button-border-radius: 18px;
 --button-primary-color: #fff;
 --button-primary-background-color: #067AFF;
 --button-primary-border-color: #067AFF;
@@ -33,7 +33,7 @@
 --button-primary-color-active: #fff;
 --button-primary-background-color-active: #0066DC;
 --button-primary-border-color-active: #0066DC;
---button-primary-color-disabled: #B8D2FF;
+--button-primary-color-disabled: #b3b3b3;
 --button-primary-background-color-disabled: #E8F0FE;
 --button-primary-border-color-disabled: #E8F0FE;
 --button-secondary-color: #fff;
@@ -45,21 +45,21 @@
 --button-secondary-color-active: #fff;
 --button-secondary-background-color-active: #ffab0f;
 --button-secondary-border-color-active: #ffab0f;
---button-secondary-color-disabled: #ffdaa3;
+--button-secondary-color-disabled: #b3b3b3;
 --button-secondary-background-color-disabled: #fff1db;
 --button-secondary-border-color-disabled: #fff1db;
---button-pseudo-color: #fc5200;
---button-pseudo-background-color: #fff;
---button-pseudo-border-color: #fff;
---button-pseudo-color-hovered: #fc5200;
---button-pseudo-background-color-hovered: #FFEAE2;
---button-pseudo-border-color-hovered: #FFEAE2;
---button-pseudo-color-active: #fc5200;
+--button-pseudo-color: #000;
+--button-pseudo-background-color: #FFF5F0;
+--button-pseudo-border-color: #FFF5F0;
+--button-pseudo-color-hovered: #000;
+--button-pseudo-background-color-hovered: #FFF5F0;
+--button-pseudo-border-color-hovered: #FFF5F0;
+--button-pseudo-color-active: #000;
 --button-pseudo-background-color-active: #FFEAE2;
 --button-pseudo-border-color-active: #FFEAE2;
---button-pseudo-color-disabled: #ffdaa3;
---button-pseudo-background-color-disabled: #fff1db;
---button-pseudo-border-color-disabled: #fff1db;
+--button-pseudo-color-disabled: #b3b3b3;
+--button-pseudo-background-color-disabled: #FFF5F0;
+--button-pseudo-border-color-disabled: #FFF5F0;
 --button-outline-color: #000;
 --button-outline-background-color: #fff;
 --button-outline-border-color: #dbdbdb;
@@ -69,28 +69,37 @@
 --button-outline-color-active: #000;
 --button-outline-background-color-active: #e6e6e6;
 --button-outline-border-color-active: #dbdbdb;
---button-outline-color-disabled: #ffdaa3;
---button-outline-background-color-disabled: #fff1db;
+--button-outline-color-disabled: #b3b3b3;
+--button-outline-background-color-disabled: #fff;
 --button-outline-border-color-disabled: #e6e6e6;
 --button-clear-color: #067AFF;
---button-clear-color-hovered: #0066DC;
+--button-clear-color-hovered: #067AFF;
 --button-clear-color-active: #0066DC;
+--button-clear-color-disabled: #b3b3b3;
+--button-clear-background-color-disabled: #fff;
+--button-clear-border-color-disabled: #fff;
 --input-primary-border-color: #dbdbdb;
 --input-primary-plaseholder-color: #e6e6e6;
---checkbox-primary-background-color-checked: #067AFF;
---checkbox-primary-background-color-hovered: #067AFF;
---checkbox-primary-box-shadow-focused: #E8F0FE;
---checkbox-primary-background-color-active: #067AFF;
---checkbox-primary-border-color-active: #067AFF;
---checkbox-primary-box-shadow-active: #067AFF;
---checkbox-primary-background-color-disabled: #E8F0FE;
---inputradio-primary-background-color-checked: #067AFF;
---inputradio-primary-background-color-hovered: #067AFF;
---inputradio-primary-box-shadow-focused: #E8F0FE;
---inputradio-primary-background-color-focused: #E8F0FE;
---inputradio-primary-border-color-focused: #E8F0FE;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #0066DC;
---switch-primary-border-color-checked: #0066DC;
+--input-primary-border-color-error: #ff564e;
+--input-primary-background-color-error: #FFEAE2;
+--input-primary-box-shadow-color-error: #FFEAE2;
+--checkbox-background-color-checked: #067AFF;
+--checkbox-background-color-hovered: #067AFF;
+--checkbox-box-shadow-focused: #E8F0FE;
+--checkbox-background-color-active: #067AFF;
+--checkbox-border-color-active: #067AFF;
+--checkbox-box-shadow-active: #067AFF;
+--checkbox-background-color-disabled: #E8F0FE;
+--input-radio-background-color-checked: #067AFF;
+--input-radio-background-color-hovered: #067AFF;
+--input-radio-box-shadow-focused: #E8F0FE;
+--input-radio-background-color-focused: #E8F0FE;
+--input-radio-border-color-focused: #E8F0FE;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #0066DC;
+--switch-border-color-checked: #0066DC;
+--tooltip-background-color: #000;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }

package/index.d.ts

@@ -19,6 +19,10 @@ export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES } from "./Theme";
+export { default as Tooltip } from "./Tooltip";
+export { default as TimeSelect } from "./TimeSelect";
 export { default as Typography } from "./Typography";
 export { default as useMediaSizes } from "./hooks/useMediaSizes";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
+export { default as useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";

package/index.js

@@ -21,8 +21,12 @@ var index$h = require('./Separator/index.js');
 var index$i = require('./Skeleton/index.js');
 var index$j = require('./Switch/index.js');
 var index$k = require('./Theme/index.js');
-var index$l = require('./Typography/index.js');
-var index$m = require('./hooks/useMediaSizes/index.js');
+var index$l = require('./Tooltip/index.js');
+var index$m = require('./TimeSelect/index.js');
+var index$n = require('./Typography/index.js');
+var index$o = require('./hooks/useMediaSizes/index.js');
+var index$p = require('./hooks/useOnClickOutside/index.js');
+var index$q = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -35,6 +39,7 @@ var Info = require('./Icons/Info.js');
 var Minus = require('./Icons/Minus.js');
 var More = require('./Icons/More.js');
 var Plus = require('./Icons/Plus.js');
+var Setting = require('./Icons/Setting.js');
 var Trash = require('./Icons/Trash.js');
 var User = require('./Icons/User.js');
 
@@ -62,8 +67,12 @@ exports.SkeletonRect = index$i.SkeletonRect;
 exports.SkeletonText = index$i.SkeletonText;
 exports.Switch = index$j.default;
 exports.THEMES = index$k.THEMES;
-exports.Typography = index$l.default;
-exports.useMediaSizes = index$m.default;
+exports.Tooltip = index$l.default;
+exports.TimeSelect = index$m.default;
+exports.Typography = index$n.default;
+exports.useMediaSizes = index$o.default;
+exports.useOnClickOutside = index$p.default;
+exports.useScrollLock = index$q.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
@@ -75,5 +84,6 @@ exports.Info = Info.default;
 exports.Minus = Minus.default;
 exports.More = More.default;
 exports.Plus = Plus.default;
+exports.Setting = Setting.default;
 exports.Trash = Trash.default;
 exports.User = User.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.62",
+  "version": "0.7.64",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},

package/theme_ba_variables.css

@@ -6,18 +6,97 @@
 --palette-bg-3: #dbdbdb;
 --palette-bg-4: #b3b3b3;
 --palette-bg-5: #999;
---palette-brand-default-1: #B54141;
---palette-brand-default-2: #fffbe9;
---palette-brand-default-3: #D5D500;
---palette-primary-1: rgba(38, 49, 129, .07);
---palette-primary-2: rgba(38, 49, 129, .3);
---palette-primary-3: rgba(38, 49, 129, .4);
---palette-primary-4: rgba(38, 49, 129, .6);
---palette-primary-5: rgba(38, 49, 129, .8);
---palette-tretiary-1: #EDF1F5;
---palette-tretiary-2: #d3dbe3;
---palette-tretiary-3: #c5cfda;
---palette-tretiary-4: #b1bcc8;
---palette-tretiary-5: #87929d;
+--palette-brand-default-1: #fcdfe2;
+--palette-brand-default-2: #facdd2;
+--palette-brand-default-3: #F59fa7;
+--palette-primary-1: #ffe695;
+--palette-primary-2: #ffe07b;
+--palette-primary-3: #ffd85a;
+--palette-primary-4: #ffce31;
+--palette-primary-5: #ffc818;
+--palette-tretiary-1: #DFE7FA;
+--palette-tretiary-2: #C0CFF8;
+--palette-tretiary-3: #AFC3F5;
+--palette-tretiary-4: #80A0ED;
+--palette-tretiary-5: #6088ea;
 --palette-alert: #ff564e;
+--button-border-radius: 18px;
+--button-primary-color: #000;
+--button-primary-background-color: #ffce31;
+--button-primary-border-color: #ffce31;
+--button-primary-color-hovered: #000;
+--button-primary-background-color-hovered: #ffce31;
+--button-primary-border-color-hovered: #ffce31;
+--button-primary-color-active: #000;
+--button-primary-background-color-active: #ffc818;
+--button-primary-border-color-active: #ffc818;
+--button-primary-color-disabled: #b3b3b3;
+--button-primary-background-color-disabled: #ffe695;
+--button-primary-border-color-disabled: #ffe695;
+--button-secondary-color: #fff;
+--button-secondary-background-color: #1f1f1f;
+--button-secondary-border-color: #1f1f1f;
+--button-secondary-color-hovered: #fff;
+--button-secondary-background-color-hovered: #1f1f1f;
+--button-secondary-border-color-hovered: #1f1f1f;
+--button-secondary-color-active: #fff;
+--button-secondary-background-color-active: #000;
+--button-secondary-border-color-active: #000;
+--button-secondary-color-disabled: #b3b3b3;
+--button-secondary-background-color-disabled: #f2f2f2;
+--button-secondary-border-color-disabled: #f2f2f2;
+--button-outline-color: #000;
+--button-outline-background-color: #fff;
+--button-outline-border-color: #1f1f1f;
+--button-outline-color-hovered: #000;
+--button-outline-background-color-hovered: #f2f2f2;
+--button-outline-border-color-hovered: #1f1f1f;
+--button-outline-color-active: #000;
+--button-outline-background-color-active: #e6e6e6;
+--button-outline-border-color-active: #1f1f1f;
+--button-outline-color-disabled: #b3b3b3;
+--button-outline-background-color-disabled: #fff;
+--button-outline-border-color-disabled: #e6e6e6;
+--button-pseudo-color: #000;
+--button-pseudo-background-color: #DFE7FA;
+--button-pseudo-border-color: #DFE7FA;
+--button-pseudo-color-hovered: #000;
+--button-pseudo-background-color-hovered: #DFE7FA;
+--button-pseudo-border-color-hovered: #DFE7FA;
+--button-pseudo-color-active: #000;
+--button-pseudo-background-color-active: #C0CFF8;
+--button-pseudo-border-color-active: #C0CFF8;
+--button-pseudo-color-disabled: #b3b3b3;
+--button-pseudo-background-color-disabled: #DFE7FA;
+--button-pseudo-border-color-disabled: #DFE7FA;
+--button-clear-color: #1f1f1f;
+--button-clear-color-hovered: #1f1f1f;
+--button-clear-color-active: #000;
+--button-clear-color-disabled: #b3b3b3;
+--button-clear-background-color-disabled: #fff;
+--button-clear-border-color-disabled: #fff;
+--input-primary-border-color: #dbdbdb;
+--input-primary-plaseholder-color: #e6e6e6;
+--input-primary-border-color-error: #ff564e;
+--input-primary-background-color-error: #FFEAE2;
+--input-primary-box-shadow-color-error: #FFEAE2;
+--checkbox-background-color-checked: #ffce31;
+--checkbox-background-color-hovered: #ffce31;
+--checkbox-box-shadow-focused: #ffe695;
+--checkbox-background-color-active: #ffce31;
+--checkbox-border-color-active: #ffce31;
+--checkbox-box-shadow-active: #ffce31;
+--checkbox-background-color-disabled: #ffe695;
+--input-radio-background-color-checked: #ffce31;
+--input-radio-background-color-hovered: #ffce31;
+--input-radio-box-shadow-focused: #ffe695;
+--input-radio-background-color-focused: #ffe695;
+--input-radio-border-color-focused: #ffe695;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #ffc818;
+--switch-border-color-checked: #ffc818;
+--tooltip-background-color: #333;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }

package/theme_default_variables.css

@@ -23,7 +23,7 @@
 --typography-alert: #ff564e;
 --typography-success: #28bc00;
 --typography-secondary: #dbdbdb;
---button-border-radius: 26px;
+--button-border-radius: 18px;
 --button-primary-color: #fff;
 --button-primary-background-color: #067AFF;
 --button-primary-border-color: #067AFF;
@@ -33,7 +33,7 @@
 --button-primary-color-active: #fff;
 --button-primary-background-color-active: #0066DC;
 --button-primary-border-color-active: #0066DC;
---button-primary-color-disabled: #B8D2FF;
+--button-primary-color-disabled: #b3b3b3;
 --button-primary-background-color-disabled: #E8F0FE;
 --button-primary-border-color-disabled: #E8F0FE;
 --button-secondary-color: #fff;
@@ -45,21 +45,21 @@
 --button-secondary-color-active: #fff;
 --button-secondary-background-color-active: #ffab0f;
 --button-secondary-border-color-active: #ffab0f;
---button-secondary-color-disabled: #ffdaa3;
+--button-secondary-color-disabled: #b3b3b3;
 --button-secondary-background-color-disabled: #fff1db;
 --button-secondary-border-color-disabled: #fff1db;
---button-pseudo-color: #fc5200;
---button-pseudo-background-color: #fff;
---button-pseudo-border-color: #fff;
---button-pseudo-color-hovered: #fc5200;
---button-pseudo-background-color-hovered: #FFEAE2;
---button-pseudo-border-color-hovered: #FFEAE2;
---button-pseudo-color-active: #fc5200;
+--button-pseudo-color: #000;
+--button-pseudo-background-color: #FFF5F0;
+--button-pseudo-border-color: #FFF5F0;
+--button-pseudo-color-hovered: #000;
+--button-pseudo-background-color-hovered: #FFF5F0;
+--button-pseudo-border-color-hovered: #FFF5F0;
+--button-pseudo-color-active: #000;
 --button-pseudo-background-color-active: #FFEAE2;
 --button-pseudo-border-color-active: #FFEAE2;
---button-pseudo-color-disabled: #ffdaa3;
---button-pseudo-background-color-disabled: #fff1db;
---button-pseudo-border-color-disabled: #fff1db;
+--button-pseudo-color-disabled: #b3b3b3;
+--button-pseudo-background-color-disabled: #FFF5F0;
+--button-pseudo-border-color-disabled: #FFF5F0;
 --button-outline-color: #000;
 --button-outline-background-color: #fff;
 --button-outline-border-color: #dbdbdb;
@@ -69,28 +69,37 @@
 --button-outline-color-active: #000;
 --button-outline-background-color-active: #e6e6e6;
 --button-outline-border-color-active: #dbdbdb;
---button-outline-color-disabled: #ffdaa3;
---button-outline-background-color-disabled: #fff1db;
+--button-outline-color-disabled: #b3b3b3;
+--button-outline-background-color-disabled: #fff;
 --button-outline-border-color-disabled: #e6e6e6;
 --button-clear-color: #067AFF;
---button-clear-color-hovered: #0066DC;
+--button-clear-color-hovered: #067AFF;
 --button-clear-color-active: #0066DC;
+--button-clear-color-disabled: #b3b3b3;
+--button-clear-background-color-disabled: #fff;
+--button-clear-border-color-disabled: #fff;
 --input-primary-border-color: #dbdbdb;
 --input-primary-plaseholder-color: #e6e6e6;
---checkbox-primary-background-color-checked: #067AFF;
---checkbox-primary-background-color-hovered: #067AFF;
---checkbox-primary-box-shadow-focused: #E8F0FE;
---checkbox-primary-background-color-active: #067AFF;
---checkbox-primary-border-color-active: #067AFF;
---checkbox-primary-box-shadow-active: #067AFF;
---checkbox-primary-background-color-disabled: #E8F0FE;
---inputradio-primary-background-color-checked: #067AFF;
---inputradio-primary-background-color-hovered: #067AFF;
---inputradio-primary-box-shadow-focused: #E8F0FE;
---inputradio-primary-background-color-focused: #E8F0FE;
---inputradio-primary-border-color-focused: #E8F0FE;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #0066DC;
---switch-primary-border-color-checked: #0066DC;
+--input-primary-border-color-error: #ff564e;
+--input-primary-background-color-error: #FFEAE2;
+--input-primary-box-shadow-color-error: #FFEAE2;
+--checkbox-background-color-checked: #067AFF;
+--checkbox-background-color-hovered: #067AFF;
+--checkbox-box-shadow-focused: #E8F0FE;
+--checkbox-background-color-active: #067AFF;
+--checkbox-border-color-active: #067AFF;
+--checkbox-box-shadow-active: #067AFF;
+--checkbox-background-color-disabled: #E8F0FE;
+--input-radio-background-color-checked: #067AFF;
+--input-radio-background-color-hovered: #067AFF;
+--input-radio-box-shadow-focused: #E8F0FE;
+--input-radio-background-color-focused: #E8F0FE;
+--input-radio-border-color-focused: #E8F0FE;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #0066DC;
+--switch-border-color-checked: #0066DC;
+--tooltip-background-color: #000;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }