colibri-ui 0.7.62 → 0.7.64

package/esm/Theme/themes/default.js

@@ -25,7 +25,7 @@ var THEME_DEFAULT = {
   "typography-alert": Color.ALERT,
   "typography-success": Color.SUCCESS,
   "typography-secondary": Color.BG_3,
-  "button-border-radius": "26px",
+  "button-border-radius": "18px",
   "button-primary-color": Color.WHITE,
   "button-primary-background-color": Color.PRIMARY_DEFAULT_4,
   "button-primary-border-color": Color.PRIMARY_DEFAULT_4,
@@ -35,7 +35,7 @@ var THEME_DEFAULT = {
   "button-primary-color-active": Color.WHITE,
   "button-primary-background-color-active": Color.PRIMARY_DEFAULT_5,
   "button-primary-border-color-active": Color.PRIMARY_DEFAULT_5,
-  "button-primary-color-disabled": Color.PRIMARY_DEFAULT_2,
+  "button-primary-color-disabled": Color.BG_4,
   "button-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
   "button-primary-border-color-disabled": Color.PRIMARY_DEFAULT_1,
   "button-secondary-color": Color.WHITE,
@@ -47,21 +47,21 @@ var THEME_DEFAULT = {
   "button-secondary-color-active": Color.WHITE,
   "button-secondary-background-color-active": Color.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-active": Color.SECONDARY_DEFAULT_5,
-  "button-secondary-color-disabled": Color.SECONDARY_DEFAULT_2,
+  "button-secondary-color-disabled": Color.BG_4,
   "button-secondary-background-color-disabled": Color.SECONDARY_DEFAULT_1,
   "button-secondary-border-color-disabled": Color.SECONDARY_DEFAULT_1,
-  "button-pseudo-color": Color.TRETIARY_DEFAULT_5,
-  "button-pseudo-background-color": Color.WHITE,
-  "button-pseudo-border-color": Color.WHITE,
-  "button-pseudo-color-hovered": Color.TRETIARY_DEFAULT_5,
-  "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_2,
-  "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_2,
-  "button-pseudo-color-active": Color.TRETIARY_DEFAULT_5,
+  "button-pseudo-color": Color.BLACK,
+  "button-pseudo-background-color": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-color-hovered": Color.BLACK,
+  "button-pseudo-background-color-hovered": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color-hovered": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-color-active": Color.BLACK,
   "button-pseudo-background-color-active": Color.TRETIARY_DEFAULT_2,
   "button-pseudo-border-color-active": Color.TRETIARY_DEFAULT_2,
-  "button-pseudo-color-disabled": Color.SECONDARY_DEFAULT_2,
-  "button-pseudo-background-color-disabled": Color.SECONDARY_DEFAULT_1,
-  "button-pseudo-border-color-disabled": Color.SECONDARY_DEFAULT_1,
+  "button-pseudo-color-disabled": Color.BG_4,
+  "button-pseudo-background-color-disabled": Color.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color-disabled": Color.TRETIARY_DEFAULT_1,
   "button-outline-color": Color.BLACK,
   "button-outline-background-color": Color.WHITE,
   "button-outline-border-color": Color.BG_3,
@@ -71,30 +71,39 @@ var THEME_DEFAULT = {
   "button-outline-color-active": Color.BLACK,
   "button-outline-background-color-active": Color.BG_2,
   "button-outline-border-color-active": Color.BG_3,
-  "button-outline-color-disabled": Color.SECONDARY_DEFAULT_2,
-  "button-outline-background-color-disabled": Color.SECONDARY_DEFAULT_1,
+  "button-outline-color-disabled": Color.BG_4,
+  "button-outline-background-color-disabled": Color.WHITE,
   "button-outline-border-color-disabled": Color.BG_2,
   "button-clear-color": Color.PRIMARY_DEFAULT_4,
-  "button-clear-color-hovered": Color.PRIMARY_DEFAULT_5,
+  "button-clear-color-hovered": Color.PRIMARY_DEFAULT_4,
   "button-clear-color-active": Color.PRIMARY_DEFAULT_5,
+  "button-clear-color-disabled": Color.BG_4,
+  "button-clear-background-color-disabled": Color.WHITE,
+  "button-clear-border-color-disabled": Color.WHITE,
   "input-primary-border-color": Color.BG_3,
   "input-primary-plaseholder-color": Color.BG_2,
-  "checkbox-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "checkbox-primary-background-color-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-border-color-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "inputradio-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
-  "inputradio-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-focused": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-border-color-focused": Color.PRIMARY_DEFAULT_1,
-  "switch-primary-background-color": Color.BG_2,
-  "switch-primary-border-color": Color.BG_2,
-  "switch-primary-background-color-checked": Color.PRIMARY_DEFAULT_5,
-  "switch-primary-border-color-checked": Color.PRIMARY_DEFAULT_5
+  "input-primary-border-color-error": Color.ALERT,
+  "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
+  "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
+  "checkbox-background-color-checked": Color.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
+  "checkbox-background-color-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-border-color-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-disabled": Color.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-checked": Color.PRIMARY_DEFAULT_4,
+  "input-radio-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "input-radio-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-focused": Color.PRIMARY_DEFAULT_1,
+  "input-radio-border-color-focused": Color.PRIMARY_DEFAULT_1,
+  "switch-background-color": Color.BG_2,
+  "switch-border-color": Color.BG_2,
+  "switch-background-color-checked": Color.PRIMARY_DEFAULT_5,
+  "switch-border-color-checked": Color.PRIMARY_DEFAULT_5,
+  "tooltip-background-color": Color.BLACK,
+  "tooltip-color": Color.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 export { THEME_DEFAULT as default };

package/esm/TimeSelect/Label/index.js

@@ -0,0 +1,15 @@
+import React__default, { useRef } from 'react';
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = useRef(null);
+  return /*#__PURE__*/React__default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+export { OptionLabel as default };

package/esm/TimeSelect/helpers.js

@@ -0,0 +1,24 @@
+import { format, addMinutes } from 'date-fns';
+
+var day = new Date();
+day.setHours(24, 0, 0, 0);
+var DEFAULT_TIME = {
+  index: 24,
+  time: "12:00"
+};
+var formatTime = function formatTime(date) {
+  return format(date, "HH:mm");
+};
+var generateSuggest = function generateSuggest(interval) {
+  if (interval === void 0) {
+    interval = 15;
+  }
+  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
+    var date = addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+
+export { DEFAULT_TIME, formatTime, generateSuggest };

package/esm/TimeSelect/index.js

@@ -0,0 +1,33 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { useMemo } from 'react';
+import Select from '../Select/index.js';
+import { generateSuggest } from './helpers.js';
+import OptionLabel from './Label/index.js';
+
+var TimeSelect = function TimeSelect(_a) {
+  var value = _a.value,
+    _b = _a.label,
+    label = _b === void 0 ? "Start time" : _b,
+    _c = _a.interval,
+    interval = _c === void 0 ? 15 : _c,
+    onChange = _a.onChange,
+    props = __rest(_a, ["value", "label", "interval", "onChange"]);
+  var options = useMemo(function () {
+    return generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.createElement(OptionLabel, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  return /*#__PURE__*/React__default.createElement(Select, __assign({}, props, {
+    value: value,
+    label: label,
+    options: options,
+    onChange: onChange
+  }));
+};
+
+export { TimeSelect as default };

package/esm/Tooltip/Tooltip.module.css

@@ -0,0 +1,122 @@
+.root[data-popper-placement=bottom-start] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-start]::before {
+  left: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom-end] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-end]::before {
+  right: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom]::before {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
+.root[data-popper-placement=right] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right]::before {
+  left: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(-90deg);
+}
+.root[data-popper-placement=right-start] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-start]::before {
+  left: -6px;
+  top: 6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=right-end] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-end]::before {
+  bottom: 6px;
+  left: -6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=left] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left]::before {
+  right: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(90deg);
+}
+.root[data-popper-placement=left-start] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-start]::before {
+  right: -6px;
+  top: 6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=left-end] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-end]::before {
+  bottom: 6px;
+  right: -6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=top] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top]::before {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0) rotate(180deg);
+}
+.root[data-popper-placement=top-start] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-start]::before {
+  bottom: 0;
+  left: 6px;
+  transform: rotate(180deg);
+}
+.root[data-popper-placement=top-end] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-end]::before {
+  bottom: 0;
+  right: 6px;
+  transform: rotate(180deg);
+}
+
+.tail {
+  position: relative;
+}
+.tail::before {
+  border-bottom: 5px solid var(--tooltip-background-color);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: "";
+  height: 0;
+  position: absolute;
+  width: 0;
+  z-index: 3000;
+}
+
+.overlay {
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  max-width: 200px;
+  overflow: hidden;
+  padding: 4px 10px;
+  position: relative;
+}

package/esm/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ITooltipProps } from "./index.props";
+declare const Tooltip: React.FC<ITooltipProps>;
+export default Tooltip;

package/esm/Tooltip/index.js

@@ -0,0 +1,101 @@
+import { __assign } from 'tslib';
+import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import classNames from 'classnames/bind';
+import Portal from '../Portal/index.js';
+import { on } from '../helpers/on.js';
+import ClickOutside from '../ClickOutside/index.js';
+import styles from './Tooltip.module.css';
+
+var clx = classNames.bind(styles);
+var Tooltip = function Tooltip(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    content = _a.content,
+    _b = _a.withTail,
+    withTail = _b === void 0 ? false : _b,
+    _c = _a.placement,
+    placement = _c === void 0 ? "bottom" : _c,
+    _d = _a.strategy,
+    strategy = _d === void 0 ? "absolute" : _d;
+  var _e = useState(null),
+    controlElement = _e[0],
+    setControlElement = _e[1];
+  var _f = useState(null),
+    popperElement = _f[0],
+    setPopperElement = _f[1];
+  var _g = useState(false),
+    visible = _g[0],
+    setVisible = _g[1];
+  var _h = usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: true
+      }, {
+        name: "preventOverflow",
+        enabled: true
+      }]
+    }),
+    styles = _h.styles,
+    attributes = _h.attributes,
+    update = _h.update;
+  var isNotComponent = typeof children === "string";
+  var reference = useMemo(function () {
+    return Children.only(isNotComponent ? /*#__PURE__*/React__default.createElement("button", null, children) : children);
+  }, [children, isNotComponent]);
+  var onToggle = useCallback(function (e) {
+    e.stopPropagation();
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = useCallback(function (e) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = useCallback(function (e) {
+    e.stopPropagation();
+    onHide();
+  }, [onHide]);
+  useEffect(function () {
+    var unsubscribes = [];
+    unsubscribes.push(on(controlElement, "mouseenter", onShow, false));
+    unsubscribes.push(on(controlElement, "mouseleave", onHide, false));
+    unsubscribes.push(on(popperElement, "mouseenter", onShow, false));
+    unsubscribes.push(on(popperElement, "mouseleave", onHide, false));
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
+    ref: setControlElement
+  }, reference.props)), visible && ( /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React__default.createElement("div", __assign({
+    className: clx("root", {
+      tail: !!withTail
+    }),
+    ref: setPopperElement,
+    style: __assign(__assign({}, styles.popper), {
+      zIndex: zIndex
+    })
+  }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
+    className: clx("overlay"),
+    onClick: onClickOverlay
+  }, content))))));
+};
+
+export { Tooltip as default };

package/esm/Tooltip/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Trigger = "hover";
+export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
+export interface ITooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    zIndex?: number;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    withTail?: boolean;
+}

package/esm/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
 import { type Props } from "./index.props";
+import type { FC } from "react";
 declare const Typography: FC<Props>;
 export default Typography;

package/esm/base/InputRoot/InputRoot.module.css

@@ -52,17 +52,17 @@
   pointer-events: none;
 }
 .variant_primary_error {
-  background-color: var(--palette-tretiary-2);
-  border-color: var(--palette-alert);
+  background-color: var(--input-primary-background-color-error);
+  border-color: var(--input-primary-border-color-error);
 }
 .variant_primary_error:hover {
   background-color: var(--palette-white);
-  border-color: var(--palette-alert);
-  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
+  border-color: var(--input-primary-border-color-error);
+  box-shadow: 0 0 0 2px var(--input-primary-box-shadow-color-error);
 }
 .variant_primary_error:focus, .variant_primary_error:focus-within {
   background-color: var(--palette-white);
-  border-color: var(--palette-alert);
+  border-color: var(--input-primary-border-color-error);
 }
 
 .size_s {

package/esm/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/esm/index.js

@@ -19,8 +19,12 @@ export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
 export { THEMES } from './Theme/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as TimeSelect } from './TimeSelect/index.js';
 export { default as Typography } from './Typography/index.js';
 export { default as useMediaSizes } from './hooks/useMediaSizes/index.js';
+export { default as useOnClickOutside } from './hooks/useOnClickOutside/index.js';
+export { default as useScrollLock } from './hooks/useScrollLock/index.js';
 import './Icons/index.js';
 export { default as ArrowNext } from './Icons/ArrowNext.js';
 export { default as Cart } from './Icons/Cart.js';
@@ -33,5 +37,6 @@ export { default as Info } from './Icons/Info.js';
 export { default as Minus } from './Icons/Minus.js';
 export { default as More } from './Icons/More.js';
 export { default as Plus } from './Icons/Plus.js';
+export { default as Setting } from './Icons/Setting.js';
 export { default as Trash } from './Icons/Trash.js';
 export { default as User } from './Icons/User.js';

package/esm/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;
 }