colibri-ui 0.7.85 → 0.7.86

package/esm/theme_ba_variables.css

@@ -1,106 +1,114 @@
 .theme {
 --palette-black: #000;
---palette-white: #fff;
+--palette-white: #FFF;
 --palette-bg-1: #ECEEF2;
 --palette-bg-2: #E4E6EA;
 --palette-bg-3: #D6D9E0;
 --palette-bg-4: #C9CDD6;
 --palette-bg-5: #BCC1CC;
---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-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;
---palette-success: #28bc00;
---typography-alert: #ff564e;
---typography-success: #28bc00;
+--palette-tretiary-5: #6088EA;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
 --typography-secondary: #D6D9E0;
---button-border-radius: 18px;
 --button-primary-color: #000;
---button-primary-background-color: #ffce31;
---button-primary-border-color: #ffce31;
+--button-primary-bg: #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-bg-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-bg-active: #FFC818;
+--button-primary-border-color-active: #FFC818;
 --button-primary-color-disabled: #C9CDD6;
---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-primary-bg-disabled: #FFE695;
+--button-primary-border-color-disabled: #FFE695;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #1F1F1F;
+--button-secondary-border-color: #1F1F1F;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #1F1F1F;
+--button-secondary-border-color-hovered: #1F1F1F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #000;
 --button-secondary-border-color-active: #000;
 --button-secondary-color-disabled: #C9CDD6;
---button-secondary-background-color-disabled: #ECEEF2;
+--button-secondary-bg-disabled: #ECEEF2;
 --button-secondary-border-color-disabled: #ECEEF2;
 --button-outline-color: #000;
---button-outline-background-color: #fff;
---button-outline-border-color: #1f1f1f;
+--button-outline-bg: #FFF;
+--button-outline-border-color: #1F1F1F;
 --button-outline-color-hovered: #000;
---button-outline-background-color-hovered: #ECEEF2;
---button-outline-border-color-hovered: #1f1f1f;
+--button-outline-bg-hovered: #ECEEF2;
+--button-outline-border-color-hovered: #1F1F1F;
 --button-outline-color-active: #000;
---button-outline-background-color-active: #E4E6EA;
---button-outline-border-color-active: #1f1f1f;
+--button-outline-bg-active: #E4E6EA;
+--button-outline-border-color-active: #1F1F1F;
 --button-outline-color-disabled: #C9CDD6;
---button-outline-background-color-disabled: #fff;
+--button-outline-bg-disabled: #FFF;
 --button-outline-border-color-disabled: #E4E6EA;
 --button-pseudo-color: #000;
---button-pseudo-background-color: #DFE7FA;
+--button-pseudo-bg: #DFE7FA;
 --button-pseudo-border-color: #DFE7FA;
 --button-pseudo-color-hovered: #000;
---button-pseudo-background-color-hovered: #DFE7FA;
+--button-pseudo-bg-hovered: #DFE7FA;
 --button-pseudo-border-color-hovered: #DFE7FA;
 --button-pseudo-color-active: #000;
---button-pseudo-background-color-active: #C0CFF8;
+--button-pseudo-bg-active: #C0CFF8;
 --button-pseudo-border-color-active: #C0CFF8;
 --button-pseudo-color-disabled: #C9CDD6;
---button-pseudo-background-color-disabled: #DFE7FA;
+--button-pseudo-bg-disabled: #DFE7FA;
 --button-pseudo-border-color-disabled: #DFE7FA;
---button-clear-color: #1f1f1f;
---button-clear-color-hovered: #1f1f1f;
+--button-clear-color: #1F1F1F;
+--button-clear-color-hovered: #1F1F1F;
 --button-clear-color-active: #000;
 --button-clear-color-disabled: #C9CDD6;
---button-clear-background-color-disabled: #fff;
---button-clear-border-color-disabled: #fff;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
 --input-primary-border-color: #D6D9E0;
 --input-primary-plaseholder-color: #E4E6EA;
---input-primary-border-color-error: #ff564e;
---input-primary-background-color-error: #FFEAE2;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-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: #E4E6EA;
+--checkbox-bg-checked: #FFCE31;
+--checkbox-bg-hovered: #FFCE31;
+--checkbox-box-shadow-focused: #FFE695;
+--checkbox-bg-active: #FFCE31;
+--checkbox-border-color-active: #FFCE31;
+--checkbox-box-shadow-active: #FFCE31;
+--checkbox-bg-disabled: #FFE695;
+--input-radio-bg-checked: #FFCE31;
+--input-radio-bg-hovered: #FFCE31;
+--input-radio-box-shadow-focused: #FFE695;
+--input-radio-bg-focused: #FFE695;
+--input-radio-border-color-focused: #FFE695;
+--switch-bg: #E4E6EA;
 --switch-border-color: #E4E6EA;
---switch-background-color-checked: #ffc818;
---switch-border-color-checked: #ffc818;
---tooltip-background-color: #333;
---tooltip-color: #fff;
---tooltip-border-radius: 4px;
+--switch-bg-checked: #FFC818;
+--switch-border-color-checked: #FFC818;
+--tooltip-bg: #333;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: rgba(244, 87, 37, .12);
+--status-success: #4AC99B;
+--status-success-bg: rgba(74, 201, 155, .12);
+--status-warning: #ffc700;
+--status-warning-bg: rgba(255, 199, 0, .12);
+--status-info: #70b6f6;
+--status-info-bg: rgba(112, 182, 246, .12);
+--status-neutral: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
 }

package/esm/theme_default_variables.css

@@ -1,6 +1,6 @@
 .theme {
 --palette-black: #000;
---palette-white: #fff;
+--palette-white: #FFF;
 --palette-bg-1: #ECEEF2;
 --palette-bg-2: #E4E6EA;
 --palette-bg-3: #D6D9E0;
@@ -17,90 +17,98 @@
 --palette-tretiary-1: #FFF5F0;
 --palette-tretiary-2: #FFEAE2;
 --palette-tretiary-3: #FFD8CA;
---palette-tretiary-4: #FFA384 ;
---palette-tretiary-5: #fc5200;
---palette-alert: #ff564e;
---palette-success: #28bc00;
---typography-alert: #ff564e;
---typography-success: #28bc00;
+--palette-tretiary-4: #FFA384;
+--palette-tretiary-5: #FC5200;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
 --typography-secondary: #D6D9E0;
---button-border-radius: 18px;
---button-primary-color: #fff;
---button-primary-background-color: #067AFF;
+--button-primary-color: #FFF;
+--button-primary-bg: #067AFF;
 --button-primary-border-color: #067AFF;
---button-primary-color-hovered: #fff;
---button-primary-background-color-hovered: #0066DC;
+--button-primary-color-hovered: #FFF;
+--button-primary-bg-hovered: #0066DC;
 --button-primary-border-color-hovered: #0066DC;
---button-primary-color-active: #fff;
---button-primary-background-color-active: #0066DC;
+--button-primary-color-active: #FFF;
+--button-primary-bg-active: #0066DC;
 --button-primary-border-color-active: #0066DC;
 --button-primary-color-disabled: #C9CDD6;
---button-primary-background-color-disabled: #E8F0FE;
+--button-primary-bg-disabled: #E8F0FE;
 --button-primary-border-color-disabled: #E8F0FE;
---button-secondary-color: #fff;
---button-secondary-background-color: #f4b968;
---button-secondary-border-color: #f4b968;
---button-secondary-color-hovered: #fff;
---button-secondary-background-color-hovered: #ffab0f;
---button-secondary-border-color-hovered: #ffab0f;
---button-secondary-color-active: #fff;
---button-secondary-background-color-active: #ffab0f;
---button-secondary-border-color-active: #ffab0f;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #F4B968;
+--button-secondary-border-color: #F4B968;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #FFAB0F;
+--button-secondary-border-color-hovered: #FFAB0F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #FFAB0F;
+--button-secondary-border-color-active: #FFAB0F;
 --button-secondary-color-disabled: #C9CDD6;
---button-secondary-background-color-disabled: #fff1db;
---button-secondary-border-color-disabled: #fff1db;
+--button-secondary-bg-disabled: #FFF1DB;
+--button-secondary-border-color-disabled: #FFF1DB;
 --button-pseudo-color: #000;
---button-pseudo-background-color: #FFF5F0;
+--button-pseudo-bg: #FFF5F0;
 --button-pseudo-border-color: #FFF5F0;
 --button-pseudo-color-hovered: #000;
---button-pseudo-background-color-hovered: #FFF5F0;
+--button-pseudo-bg-hovered: #FFF5F0;
 --button-pseudo-border-color-hovered: #FFF5F0;
 --button-pseudo-color-active: #000;
---button-pseudo-background-color-active: #FFEAE2;
+--button-pseudo-bg-active: #FFEAE2;
 --button-pseudo-border-color-active: #FFEAE2;
 --button-pseudo-color-disabled: #C9CDD6;
---button-pseudo-background-color-disabled: #FFF5F0;
+--button-pseudo-bg-disabled: #FFF5F0;
 --button-pseudo-border-color-disabled: #FFF5F0;
 --button-outline-color: #000;
---button-outline-background-color: #fff;
+--button-outline-bg: #FFF;
 --button-outline-border-color: #D6D9E0;
 --button-outline-color-hovered: #000;
---button-outline-background-color-hovered: #ECEEF2;
+--button-outline-bg-hovered: #ECEEF2;
 --button-outline-border-color-hovered: #D6D9E0;
 --button-outline-color-active: #000;
---button-outline-background-color-active: #E4E6EA;
+--button-outline-bg-active: #E4E6EA;
 --button-outline-border-color-active: #D6D9E0;
 --button-outline-color-disabled: #C9CDD6;
---button-outline-background-color-disabled: #fff;
+--button-outline-bg-disabled: #FFF;
 --button-outline-border-color-disabled: #E4E6EA;
 --button-clear-color: #067AFF;
 --button-clear-color-hovered: #067AFF;
 --button-clear-color-active: #0066DC;
 --button-clear-color-disabled: #C9CDD6;
---button-clear-background-color-disabled: #fff;
---button-clear-border-color-disabled: #fff;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
 --input-primary-border-color: #D6D9E0;
 --input-primary-plaseholder-color: #E4E6EA;
---input-primary-border-color-error: #ff564e;
---input-primary-background-color-error: #FFEAE2;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-background-color-checked: #067AFF;
---checkbox-background-color-hovered: #067AFF;
+--checkbox-bg-checked: #067AFF;
+--checkbox-bg-hovered: #067AFF;
 --checkbox-box-shadow-focused: #E8F0FE;
---checkbox-background-color-active: #067AFF;
+--checkbox-bg-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;
+--checkbox-bg-disabled: #E8F0FE;
+--input-radio-bg-checked: #067AFF;
+--input-radio-bg-hovered: #067AFF;
 --input-radio-box-shadow-focused: #E8F0FE;
---input-radio-background-color-focused: #E8F0FE;
+--input-radio-bg-focused: #E8F0FE;
 --input-radio-border-color-focused: #E8F0FE;
---switch-background-color: #E4E6EA;
+--switch-bg: #E4E6EA;
 --switch-border-color: #E4E6EA;
---switch-background-color-checked: #0066DC;
+--switch-bg-checked: #0066DC;
 --switch-border-color-checked: #0066DC;
---tooltip-background-color: #000;
---tooltip-color: #fff;
---tooltip-border-radius: 4px;
+--tooltip-bg: #000;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: rgba(244, 87, 37, .12);
+--status-success: #4AC99B;
+--status-success-bg: rgba(74, 201, 155, .12);
+--status-warning: #ffc700;
+--status-warning-bg: rgba(255, 199, 0, .12);
+--status-info: #70b6f6;
+--status-info-bg: rgba(112, 182, 246, .12);
+--status-neutral: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
 }

package/index.d.ts

@@ -20,6 +20,7 @@ export { default as RadioGroup } from "./RadioGroup";
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
+export { default as Status } from "./Status";
 export { default as Switch } from "./Switch";
 export { default as TabsMenu } from "./TabsMenu";
 export { default as TabsPanes } from "./TabsPanes";

package/index.js

@@ -22,16 +22,17 @@ var index$i = require('./RadioGroup/index.js');
 var index$j = require('./Select/index.js');
 var index$k = require('./Separator/index.js');
 var index$l = require('./Skeleton/index.js');
-var index$m = require('./Switch/index.js');
-var index$n = require('./TabsMenu/index.js');
-var index$o = require('./TabsPanes/index.js');
-var index$p = require('./Theme/index.js');
-var index$q = require('./Tooltip/index.js');
-var index$r = require('./TimeSelect/index.js');
-var index$s = require('./Typography/index.js');
-var index$t = require('./hooks/useMediaSizes/index.js');
-var index$u = require('./hooks/useOnClickOutside/index.js');
-var index$v = require('./hooks/useScrollLock/index.js');
+var index$m = require('./Status/index.js');
+var index$n = require('./Switch/index.js');
+var index$o = require('./TabsMenu/index.js');
+var index$p = require('./TabsPanes/index.js');
+var index$q = require('./Theme/index.js');
+var index$r = require('./Tooltip/index.js');
+var index$s = require('./TimeSelect/index.js');
+var index$t = require('./Typography/index.js');
+var index$u = require('./hooks/useMediaSizes/index.js');
+var index$v = require('./hooks/useOnClickOutside/index.js');
+var index$w = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -74,16 +75,17 @@ exports.Select = index$j.default;
 exports.Separator = index$k.default;
 exports.SkeletonRect = index$l.SkeletonRect;
 exports.SkeletonText = index$l.SkeletonText;
-exports.Switch = index$m.default;
-exports.TabsMenu = index$n.default;
-exports.TabsPanes = index$o.default;
-exports.THEMES = index$p.THEMES;
-exports.Tooltip = index$q.default;
-exports.TimeSelect = index$r.default;
-exports.Typography = index$s.default;
-exports.useMediaSizes = index$t.default;
-exports.useOnClickOutside = index$u.default;
-exports.useScrollLock = index$v.default;
+exports.Status = index$m.default;
+exports.Switch = index$n.default;
+exports.TabsMenu = index$o.default;
+exports.TabsPanes = index$p.default;
+exports.THEMES = index$q.THEMES;
+exports.Tooltip = index$r.default;
+exports.TimeSelect = index$s.default;
+exports.Typography = index$t.default;
+exports.useMediaSizes = index$u.default;
+exports.useOnClickOutside = index$v.default;
+exports.useScrollLock = index$w.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

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

package/theme_ba_variables.css

@@ -1,106 +1,114 @@
 .theme {
 --palette-black: #000;
---palette-white: #fff;
+--palette-white: #FFF;
 --palette-bg-1: #ECEEF2;
 --palette-bg-2: #E4E6EA;
 --palette-bg-3: #D6D9E0;
 --palette-bg-4: #C9CDD6;
 --palette-bg-5: #BCC1CC;
---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-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;
---palette-success: #28bc00;
---typography-alert: #ff564e;
---typography-success: #28bc00;
+--palette-tretiary-5: #6088EA;
+--palette-alert: #FF564E;
+--palette-success: #4AC99B;
+--typography-alert: #FF564E;
+--typography-success: #4AC99B;
 --typography-secondary: #D6D9E0;
---button-border-radius: 18px;
 --button-primary-color: #000;
---button-primary-background-color: #ffce31;
---button-primary-border-color: #ffce31;
+--button-primary-bg: #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-bg-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-bg-active: #FFC818;
+--button-primary-border-color-active: #FFC818;
 --button-primary-color-disabled: #C9CDD6;
---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-primary-bg-disabled: #FFE695;
+--button-primary-border-color-disabled: #FFE695;
+--button-secondary-color: #FFF;
+--button-secondary-bg: #1F1F1F;
+--button-secondary-border-color: #1F1F1F;
+--button-secondary-color-hovered: #FFF;
+--button-secondary-bg-hovered: #1F1F1F;
+--button-secondary-border-color-hovered: #1F1F1F;
+--button-secondary-color-active: #FFF;
+--button-secondary-bg-active: #000;
 --button-secondary-border-color-active: #000;
 --button-secondary-color-disabled: #C9CDD6;
---button-secondary-background-color-disabled: #ECEEF2;
+--button-secondary-bg-disabled: #ECEEF2;
 --button-secondary-border-color-disabled: #ECEEF2;
 --button-outline-color: #000;
---button-outline-background-color: #fff;
---button-outline-border-color: #1f1f1f;
+--button-outline-bg: #FFF;
+--button-outline-border-color: #1F1F1F;
 --button-outline-color-hovered: #000;
---button-outline-background-color-hovered: #ECEEF2;
---button-outline-border-color-hovered: #1f1f1f;
+--button-outline-bg-hovered: #ECEEF2;
+--button-outline-border-color-hovered: #1F1F1F;
 --button-outline-color-active: #000;
---button-outline-background-color-active: #E4E6EA;
---button-outline-border-color-active: #1f1f1f;
+--button-outline-bg-active: #E4E6EA;
+--button-outline-border-color-active: #1F1F1F;
 --button-outline-color-disabled: #C9CDD6;
---button-outline-background-color-disabled: #fff;
+--button-outline-bg-disabled: #FFF;
 --button-outline-border-color-disabled: #E4E6EA;
 --button-pseudo-color: #000;
---button-pseudo-background-color: #DFE7FA;
+--button-pseudo-bg: #DFE7FA;
 --button-pseudo-border-color: #DFE7FA;
 --button-pseudo-color-hovered: #000;
---button-pseudo-background-color-hovered: #DFE7FA;
+--button-pseudo-bg-hovered: #DFE7FA;
 --button-pseudo-border-color-hovered: #DFE7FA;
 --button-pseudo-color-active: #000;
---button-pseudo-background-color-active: #C0CFF8;
+--button-pseudo-bg-active: #C0CFF8;
 --button-pseudo-border-color-active: #C0CFF8;
 --button-pseudo-color-disabled: #C9CDD6;
---button-pseudo-background-color-disabled: #DFE7FA;
+--button-pseudo-bg-disabled: #DFE7FA;
 --button-pseudo-border-color-disabled: #DFE7FA;
---button-clear-color: #1f1f1f;
---button-clear-color-hovered: #1f1f1f;
+--button-clear-color: #1F1F1F;
+--button-clear-color-hovered: #1F1F1F;
 --button-clear-color-active: #000;
 --button-clear-color-disabled: #C9CDD6;
---button-clear-background-color-disabled: #fff;
---button-clear-border-color-disabled: #fff;
+--button-clear-bg-disabled: #FFF;
+--button-clear-border-color-disabled: #FFF;
 --input-primary-border-color: #D6D9E0;
 --input-primary-plaseholder-color: #E4E6EA;
---input-primary-border-color-error: #ff564e;
---input-primary-background-color-error: #FFEAE2;
+--input-primary-border-color-error: #FF564E;
+--input-primary-bg-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: #E4E6EA;
+--checkbox-bg-checked: #FFCE31;
+--checkbox-bg-hovered: #FFCE31;
+--checkbox-box-shadow-focused: #FFE695;
+--checkbox-bg-active: #FFCE31;
+--checkbox-border-color-active: #FFCE31;
+--checkbox-box-shadow-active: #FFCE31;
+--checkbox-bg-disabled: #FFE695;
+--input-radio-bg-checked: #FFCE31;
+--input-radio-bg-hovered: #FFCE31;
+--input-radio-box-shadow-focused: #FFE695;
+--input-radio-bg-focused: #FFE695;
+--input-radio-border-color-focused: #FFE695;
+--switch-bg: #E4E6EA;
 --switch-border-color: #E4E6EA;
---switch-background-color-checked: #ffc818;
---switch-border-color-checked: #ffc818;
---tooltip-background-color: #333;
---tooltip-color: #fff;
---tooltip-border-radius: 4px;
+--switch-bg-checked: #FFC818;
+--switch-border-color-checked: #FFC818;
+--tooltip-bg: #333;
+--tooltip-color: #FFF;
+--status-failure: #FF564E;
+--status-failure-bg: rgba(244, 87, 37, .12);
+--status-success: #4AC99B;
+--status-success-bg: rgba(74, 201, 155, .12);
+--status-warning: #ffc700;
+--status-warning-bg: rgba(255, 199, 0, .12);
+--status-info: #70b6f6;
+--status-info-bg: rgba(112, 182, 246, .12);
+--status-neutral: #BCC1CC;
+--status-neutral-bg: #ECEEF2;
 }