@skbkontur/react-ui 5.6.0 → 5.6.1-85c65.0

package/internal/themes/BasicTheme/BasicTheme.js

@@ -1,7 +1,7 @@
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 var _BasicThemeClass;
+import * as colors from '@skbkontur/colors/default-light';
 import { createTheme } from "../../../lib/theming/ThemeHelpers";
-import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 export var BasicThemeClass = /*#__PURE__*/function () {
   function BasicThemeClass() {}
   return _createClass(BasicThemeClass, null, [{
@@ -147,6 +147,11 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.tokenMarginXSmall;
     }
+  }, {
+    key: "tokenColorHover",
+    get: function get() {
+      return this.tokenColor;
+    }
   }, {
     key: "tokenInputLineHeightSmall",
     get:
@@ -301,6 +306,36 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.btnDefaultBorderColor;
     }
+  }, {
+    key: "btnSuccessBorderColor",
+    get: function get() {
+      return this.btnSuccessBg;
+    }
+  }, {
+    key: "btnSuccessHoverBorderColor",
+    get: function get() {
+      return this.btnSuccessHoverBg;
+    }
+  }, {
+    key: "btnSuccessActiveBorderColor",
+    get: function get() {
+      return this.btnSuccessActiveBg;
+    }
+  }, {
+    key: "btnPrimaryBorderColor",
+    get: function get() {
+      return this.btnPrimaryBg;
+    }
+  }, {
+    key: "btnPrimaryHoverBorderColor",
+    get: function get() {
+      return this.btnPrimaryHoverBg;
+    }
+  }, {
+    key: "btnPrimaryActiveBorderColor",
+    get: function get() {
+      return this.btnPrimaryActiveBg;
+    }
   }, {
     key: "btnDangerBg",
     get: function get() {
@@ -311,16 +346,36 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.btnDangerBg;
     }
+  }, {
+    key: "btnDangerHoverBorderColor",
+    get: function get() {
+      return this.btnDangerHoverBg;
+    }
   }, {
     key: "btnDangerActiveBorderColor",
     get: function get() {
       return this.btnDangerActiveBg;
     }
+  }, {
+    key: "btnPayHoverBorderColor",
+    get: function get() {
+      return this.btnPayHoverBg;
+    }
+  }, {
+    key: "btnPayBorderColor",
+    get: function get() {
+      return this.btnPayBg;
+    }
   }, {
     key: "btnPayTextColor",
     get: function get() {
       return this.textColorDefault;
     }
+  }, {
+    key: "btnPayActiveBorderColor",
+    get: function get() {
+      return this.btnPayActiveBg;
+    }
   }, {
     key: "btnFontSizeSmall",
     get: function get() {
@@ -550,13 +605,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.btnTextHoverBg;
     }
-
-    /** @deprecated use btnWithIconPadding[Small/Medium/Large] instead */
-  }, {
-    key: "btnWithIconPaddingLeftSmall",
-    get: function get() {
-      return this.btnWithIconPaddingSmall;
-    }
   }, {
     key: "btnWithIconPaddingLeftMedium",
     get: function get() {
@@ -730,24 +778,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.popupBorder;
     }
-    /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-     * @see {@link tooltipBorderRadiusSmall `tooltipBorderRadiusSmall`} */
-  }, {
-    key: "tooltipPinSize",
-    get:
-    /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-     * @see {@link tooltipPinSizeSmall `tooltipPinSizeSmall`} */
-    function get() {
-      return this.popupPinSize;
-    }
-  }, {
-    key: "tooltipFontSize",
-    get:
-    /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-     * @see {@link tooltipFontSizeSmall `tooltipFontSizeSmall`} */
-    function get() {
-      return this.fontSizeSmall;
-    }
   }, {
     key: "tooltipFontSizeSmall",
     get: function get() {
@@ -763,13 +793,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.fontSizeLarge;
     }
-    /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-     * @see {@link tooltipLineHeightSmall `tooltipLineHeightSmall`} */
-  }, {
-    key: "tooltipLineHeight",
-    get: function get() {
-      return this.controlLineHeightSmall;
-    }
   }, {
     key: "tooltipLineHeightSmall",
     get: function get() {
@@ -790,12 +813,12 @@ export var BasicThemeClass = /*#__PURE__*/function () {
   }, {
     key: "tooltipMenuPinOffsetX",
     get: function get() {
-      return this.tooltipPinOffsetX;
+      return this.tooltipPinOffsetXSmall;
     }
   }, {
     key: "tooltipMenuPinOffsetY",
     get: function get() {
-      return this.tooltipPinOffsetY;
+      return this.tooltipPinOffsetYSmall;
     }
   }, {
     key: "tooltipMenuMargin",
@@ -865,6 +888,16 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.modalFooterPaddingBottom;
     }
+  }, {
+    key: "mobileModalCloseButtonRightPadding",
+    get: function get() {
+      return this.mobileModalCloseButtonClickArea;
+    }
+  }, {
+    key: "mobileModalCloseButtonTopPadding",
+    get: function get() {
+      return this.mobileModalCloseButtonClickArea;
+    }
   }, {
     key: "mobileModalWithoutHeaderCloseButtonWidth",
     get: function get() {
@@ -883,6 +916,11 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.textColorDefault;
     }
+  }, {
+    key: "mobileSidePageCloseButtonPadding",
+    get: function get() {
+      return this.mobileSidePageCloseButtonClickArea;
+    }
   }, {
     key: "sidePageFooterPanelPaddingTop",
     get: function get() {
@@ -893,6 +931,26 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.sidePageFooterPanelPaddingTop;
     }
+  }, {
+    key: "sidePageCloseButtonClickAreaTop",
+    get: function get() {
+      return this.modalCloseButtonClickAreaTop;
+    }
+  }, {
+    key: "sidePageCloseButtonClickAreaBottom",
+    get: function get() {
+      return this.modalCloseButtonClickAreaBottom;
+    }
+  }, {
+    key: "sidePageCloseButtonClickAreaLeft",
+    get: function get() {
+      return this.modalCloseButtonClickAreaLeft;
+    }
+  }, {
+    key: "sidePageCloseButtonClickAreaRight",
+    get: function get() {
+      return this.modalCloseButtonClickAreaRight;
+    }
   }, {
     key: "sidePageCloseButtonFixedClickAreaTop",
     get: function get() {
@@ -916,14 +974,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     function get() {
       return this.textColorDefault;
     }
-  }, {
-    key: "calendarBottomSeparatorBorderColor",
-    get:
-    //#endregion DateInput
-    //#region Calendar
-    function get() {
-      return ColorFunctions.fade(this.calendarMonthTitleBorderBottomColor, 1);
-    }
   }, {
     key: "calendarBottomSeparatorBorderWidth",
     get: function get() {
@@ -1022,18 +1072,12 @@ export var BasicThemeClass = /*#__PURE__*/function () {
       return this.popupBoxShadow;
     }
   }, {
-    key: "pagingFontSize",
+    key: "pagingFontSizeSmall",
     get:
     //#endregion DateSelect
     //#region Paging
-    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
-     * @see {@link pagingFontSizeSmall `pagingFontSizeSmall`} */
+
     function get() {
-      return this.fontSizeMedium;
-    }
-  }, {
-    key: "pagingFontSizeSmall",
-    get: function get() {
       return this.fontSizeSmall;
     }
   }, {
@@ -1046,8 +1090,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.fontSizeLarge;
     }
-    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
-     * @see {@link pagingLineHeightSmall `pagingLineHeightSmall`} */
   }, {
     key: "pagingLineHeightSmall",
     get: function get() {
@@ -1073,18 +1115,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.textColorDefault;
     }
-  }, {
-    key: "pagingPageForwardLinkPaddingRight",
-    get: /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-    function get() {
-      return this.pagingPageLinkPaddingX;
-    }
-  }, {
-    key: "pagingForwardIconSize",
-    get: /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-    function get() {
-      return this.pagingFontSize;
-    }
   }, {
     key: "pagingForwardLinkColor",
     get: function get() {
@@ -1095,8 +1125,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.linkDisabledColor;
     }
-    /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
-     * @see {@link pagingDotsPaddingSmall `pagingDotsPaddingSmall`} */
   }, {
     key: "pagingDotsDisabledColor",
     get: function get() {
@@ -1326,14 +1354,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.menuItemTextColor;
     }
-    /**
-     * @deprecated
-     */
-  }, {
-    key: "menuItemLinkColor",
-    get: function get() {
-      return this.linkColor;
-    }
   }, {
     key: "menuItemCommentColor",
     get: function get() {
@@ -1974,11 +1994,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.bgDisabled;
     }
-  }, {
-    key: "checkboxCheckedActiveBg",
-    get: function get() {
-      return ColorFunctions.darken(this.checkboxCheckedBg, '15%');
-    }
   }, {
     key: "checkboxShadowActive",
     get: function get() {
@@ -2132,11 +2147,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.gray;
     }
-  }, {
-    key: "textareaCounterBg",
-    get: function get() {
-      return ColorFunctions.fade(this.textareaBg, 0.9);
-    }
   }, {
     key: "textareaCounterErrorColor",
     get: function get() {
@@ -2258,10 +2268,20 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.checkboxCheckedBg;
     }
+  }, {
+    key: "radioCheckedBulletColor",
+    get: function get() {
+      return this.checkboxCheckedColor;
+    }
   }, {
     key: "radioCheckedHoverBgColor",
     get: function get() {
-      return ColorFunctions.darken(this.checkboxCheckedBg, '5%');
+      return this.checkboxCheckedHoverBg;
+    }
+  }, {
+    key: "radioDisabledBg",
+    get: function get() {
+      return this.checkboxBgDisabled;
     }
   }, {
     key: "radioDisabledShadow",
@@ -2361,26 +2381,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.btnPrimaryBg;
     }
-  }, {
-    key: "tabColorHoverError",
-    get: function get() {
-      return ColorFunctions.lighten(this.tabColorError, '25%');
-    }
-  }, {
-    key: "tabColorHoverWarning",
-    get: function get() {
-      return ColorFunctions.lighten(this.tabColorWarning, '25%');
-    }
-  }, {
-    key: "tabColorHoverSuccess",
-    get: function get() {
-      return ColorFunctions.lighten(this.tabColorSuccess, '25%');
-    }
-  }, {
-    key: "tabColorHoverPrimary",
-    get: function get() {
-      return ColorFunctions.lighten(this.tabColorPrimary, '25%');
-    }
   }, {
     key: "spinnerBgColor",
     get:
@@ -2599,21 +2599,6 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.controlPaddingYLarge;
     }
-  }, {
-    key: "fileUploaderPaddingXSmall",
-    get: function get() {
-      return this.inputPaddingXSmall;
-    }
-  }, {
-    key: "fileUploaderPaddingXMedium",
-    get: function get() {
-      return this.inputPaddingXMedium;
-    }
-  }, {
-    key: "fileUploaderPaddingXLarge",
-    get: function get() {
-      return this.inputPaddingXLarge;
-    }
   }, {
     key: "fileUploaderTileIconActionPositionSmall",
     get: function get() {
@@ -2664,6 +2649,11 @@ export var BasicThemeClass = /*#__PURE__*/function () {
     get: function get() {
       return this.textColorDefault;
     }
+  }, {
+    key: "fileUploaderBorderColor",
+    get: function get() {
+      return this.borderColorGrayLight;
+    }
   }, {
     key: "fileUploaderBorderWidth",
     get: function get() {
@@ -2702,7 +2692,7 @@ export var BasicThemeClass = /*#__PURE__*/function () {
   }, {
     key: "fileUploaderDisabledTextColor",
     get: function get() {
-      return this.textColorDisabled;
+      return this.fileUploaderDisabledColor;
     }
   }, {
     key: "fileUploaderDisabledLinkColor",
@@ -2767,26 +2757,7 @@ export var BasicThemeClass = /*#__PURE__*/function () {
   }, {
     key: "fileUploaderDisabledFileTypeIcon",
     get: function get() {
-      return this.closeGrayColor;
-    }
-  }, {
-    key: "clearCrossIconWidthSmall",
-    get:
-    //#endregion FileUploader
-
-    //#region ClearCrossIcon
-    function get() {
-      return this.inputHeightSmall;
-    }
-  }, {
-    key: "clearCrossIconWidthMedium",
-    get: function get() {
-      return this.inputHeightMedium;
-    }
-  }, {
-    key: "clearCrossIconWidthLarge",
-    get: function get() {
-      return this.inputHeightLarge;
+      return this.fileUploaderDisabledIconColor;
     }
   }, {
     key: "clearCrossIconHeightSmall",
@@ -2888,7 +2859,7 @@ export var BasicThemeClass = /*#__PURE__*/function () {
 _BasicThemeClass = BasicThemeClass; //#region Common variables
 BasicThemeClass.baseFontFamily = '"Lab Grotesque", "Lab Grotesque K", Arial, sans-serif';
 BasicThemeClass.labGrotesqueBaselineCompensation = '1';
-BasicThemeClass.brand = '#2291ff';
+BasicThemeClass.brand = colors.shapeBoldBrandOriginal;
 BasicThemeClass.white = '#fff';
 BasicThemeClass.grayXLight = '#ebebeb';
 BasicThemeClass.gray = '#858585';
@@ -2906,8 +2877,8 @@ BasicThemeClass.redDark = '#CC2626';
 BasicThemeClass.yellowXxLight = '#ffeec2';
 BasicThemeClass.yellow = '#fcb73e';
 BasicThemeClass.yellowDark = '#ef8b17';
-BasicThemeClass.bgDefault = '#fff';
-BasicThemeClass.bgDisabled = '#F0F0F0';
+BasicThemeClass.bgDefault = colors.surfaceHigh;
+BasicThemeClass.bgDisabled = colors.shapeOtherDisabled;
 BasicThemeClass.warningMain = '#fcb73e';
 BasicThemeClass.warningSecondary = '#fff0bc';
 BasicThemeClass.warningText = '#d97e00';
@@ -2915,10 +2886,10 @@ BasicThemeClass.closeGrayColor = 'rgba(0, 0, 0, 0.32)';
 BasicThemeClass.borderColorFocusLight = '#cdedff';
 BasicThemeClass.borderColorGrayDark = 'rgba(0, 0, 0, 0.28)';
 BasicThemeClass.borderColorGrayLight = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.borderColorDisabled = 'rgba(0, 0, 0, 0.10)';
-BasicThemeClass.placeholderColor = '#adadad';
-BasicThemeClass.outlineColorFocus = '#fff';
-BasicThemeClass.placeholderColorLight = '#cdcdcd';
+BasicThemeClass.borderColorDisabled = colors.lineNeutralFaint;
+BasicThemeClass.placeholderColor = colors.textNeutralFaint;
+BasicThemeClass.outlineColorFocus = colors.surfaceBase;
+BasicThemeClass.placeholderColorLight = "color-mix(in srgb, " + colors.textNeutralFaint + ", transparent 40%)";
 BasicThemeClass.blinkColor = 'rgba(0, 136, 255, 0.2)';
 BasicThemeClass.controlBorderWidth = '1px';
 BasicThemeClass.controlOutlineWidth = '2px';
@@ -2928,9 +2899,9 @@ BasicThemeClass.controlLineHeightLarge = '24px';
 BasicThemeClass.controlPaddingYSmall = '5px';
 BasicThemeClass.controlPaddingYMedium = '8px';
 BasicThemeClass.controlPaddingYLarge = '11px';
-BasicThemeClass.textColorDefault = '#222222';
+BasicThemeClass.textColorDefault = colors.textNeutralHeavy;
 BasicThemeClass.textColorInvert = '#fff';
-BasicThemeClass.textColorDisabled = '#adadad';
+BasicThemeClass.textColorDisabled = colors.textNeutralFaint;
 BasicThemeClass.textColorDisabledContrast = '#858585';
 BasicThemeClass.fontSizeSmall = '14px';
 BasicThemeClass.fontSizeMedium = '16px';
@@ -2941,26 +2912,26 @@ BasicThemeClass.specificityLevel = '0';
 BasicThemeClass.fixedPanelShadow = 'none';
 BasicThemeClass.bgActive = '#141414';
 BasicThemeClass.bgChecked = '#3D3D3D';
-BasicThemeClass.borderColorFocus = '#3D3D3D';
+BasicThemeClass.borderColorFocus = colors.lineAccentBold;
 BasicThemeClass.controlHeightSmall = '32px';
 BasicThemeClass.controlHeightMedium = '40px';
 BasicThemeClass.controlHeightLarge = '48px';
-BasicThemeClass.mobileMediaQuery = '(max-width: 576px) and (pointer: coarse)';
+BasicThemeClass.mobileMediaQuery = '(max-width: 576px)';
 BasicThemeClass.transitionDuration = '100ms';
 BasicThemeClass.transitionTimingFunction = 'cubic-bezier(0.5, 1, 0.89, 1)'; //#endregion Common variables
 //#region Link
-BasicThemeClass.linkColor = '#222222';
+BasicThemeClass.linkColor = colors.textAccentHeavy;
 BasicThemeClass.linkTextDecoration = 'underline';
-BasicThemeClass.linkActiveColor = '#141414';
+BasicThemeClass.linkActiveColor = colors.textAccentHeavyPressed;
 BasicThemeClass.linkHoverTextDecoration = 'none';
-BasicThemeClass.linkSuccessActiveColor = '#167333';
-BasicThemeClass.linkDangerHoverColor = '#BB1919';
-BasicThemeClass.linkDangerActiveColor = '#AB0D0D';
+BasicThemeClass.linkSuccessActiveColor = colors.textSuccessHeavyPressed;
+BasicThemeClass.linkDangerHoverColor = colors.textErrorHeavyHover;
+BasicThemeClass.linkDangerActiveColor = colors.textErrorHeavyPressed;
 BasicThemeClass.linkIconMarginRight = '4px';
 BasicThemeClass.linkIconMarginLeft = '4px';
-BasicThemeClass.linkGrayedColor = '#858585';
-BasicThemeClass.linkGrayedHoverColor = '#292929';
-BasicThemeClass.linkGrayedActiveColor = '#141414';
+BasicThemeClass.linkGrayedColor = colors.textNeutralSoft;
+BasicThemeClass.linkGrayedHoverColor = colors.textNeutralHeavy;
+BasicThemeClass.linkGrayedActiveColor = colors.textNeutralHeavy;
 BasicThemeClass.linkButtonLineHeight = '34px';
 BasicThemeClass.linkButtonPaddingX = '10px';
 BasicThemeClass.linkTextDecorationStyle = 'solid';
@@ -2972,8 +2943,8 @@ BasicThemeClass.linkLineBorderBottomStyle = 'solid';
 BasicThemeClass.linkLineBorderBottomWidth = '1px';
 BasicThemeClass.linkLineBorderBottomOpacity = '0.5';
 BasicThemeClass.linkLineBorderBottomColor = "color-mix(in srgb, currentColor " + parseFloat(_BasicThemeClass.linkLineBorderBottomOpacity) * 100 + "%, transparent)";
-BasicThemeClass.linkFocusOutlineColor = '#3D3D3D';
-BasicThemeClass.tokenDisabledBg = 'rgba(0, 0, 0, 0.05)';
+BasicThemeClass.linkFocusOutlineColor = colors.lineAccentBold;
+BasicThemeClass.tokenDisabledBg = colors.shapeOtherDisabled;
 BasicThemeClass.tokenMarginYSmall = '2px';
 BasicThemeClass.tokenMarginXSmall = '1px';
 BasicThemeClass.tokenMarginYMedium = '2px';
@@ -2997,14 +2968,13 @@ BasicThemeClass.tokenBorderWidth = '1px';
 BasicThemeClass.tokenBorderColorDisabled = 'transparent';
 BasicThemeClass.tokenOutlineWidth = '1px';
 BasicThemeClass.tokenShadowDisabled = '';
-BasicThemeClass.tokenBg = 'rgba(0, 0, 0, 0.1)';
-BasicThemeClass.tokenColor = '#222222';
-BasicThemeClass.tokenBorderColor = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.tokenBgHover = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.tokenColorHover = '#222222';
-BasicThemeClass.tokenBorderColorHover = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.tokenBgActive = '#3D3D3D';
-BasicThemeClass.tokenColorActive = '#FFFFFF';
+BasicThemeClass.tokenBg = colors.shapeFaintNeutralAlpha;
+BasicThemeClass.tokenColor = colors.textNeutralHeavy;
+BasicThemeClass.tokenBorderColor = colors.lineNeutralPale;
+BasicThemeClass.tokenBgHover = colors.shapeFaintNeutralAlphaHover;
+BasicThemeClass.tokenBorderColorHover = colors.lineNeutralPale;
+BasicThemeClass.tokenBgActive = colors.shapeBoldAccent;
+BasicThemeClass.tokenColorActive = colors.textOnAccentBoldHeavy;
 BasicThemeClass.tokenBorderColorActive = 'transparent';
 BasicThemeClass.tokenInputBorderRadius = '2px';
 BasicThemeClass.tokenInputMenuPopupBg = 'transparent';
@@ -3019,7 +2989,7 @@ BasicThemeClass.tokenInputPopupMarginSmall = '7px';
 BasicThemeClass.tokenInputPopupMarginMedium = '10px';
 BasicThemeClass.tokenInputPopupMarginLarge = '13px'; //#endregion TokenInput
 //#region Loader
-BasicThemeClass.loaderBg = 'rgba(255, 255, 255, 0.8)';
+BasicThemeClass.loaderBg = colors.shapeInvertedNeutralHeavy;
 BasicThemeClass.loaderOpacity = '0.8';
 BasicThemeClass.loaderBorderRadius = '0px'; //#endregion
 //#region Button
@@ -3027,11 +2997,11 @@ BasicThemeClass.btnBackgroundClip = 'padding-box';
 BasicThemeClass.btnLinkBorderRadius = '2px';
 BasicThemeClass.btnFocusShadowWidth = '2px';
 BasicThemeClass.btnBorderColorTransition = '';
-BasicThemeClass.btnDisabledBorderColor = 'rgba(0, 0, 0, 0.10)';
-BasicThemeClass.btnCheckedBg = '#3D3D3D';
-BasicThemeClass.btnCheckedDisabledBg = '#ADADAD';
-BasicThemeClass.btnCheckedDisabledColor = '#E6E6E6';
-BasicThemeClass.btnCheckedTextColor = '#fff';
+BasicThemeClass.btnDisabledBorderColor = colors.lineNeutralFaint;
+BasicThemeClass.btnCheckedBg = colors.shapeBoldAccent;
+BasicThemeClass.btnCheckedDisabledBg = colors.shapeOtherAccentBoldDisabled;
+BasicThemeClass.btnCheckedDisabledColor = colors.textInvertedNeutralSoft;
+BasicThemeClass.btnCheckedTextColor = colors.textOnAccentBoldHeavy;
 BasicThemeClass.btnCheckedShadow = 'none';
 BasicThemeClass.btnCheckedDisabledShadow = 'none';
 BasicThemeClass.btnBorderRadiusSmall = '8px';
@@ -3047,74 +3017,64 @@ BasicThemeClass.btnIconGapLargeLeft = '8px';
 BasicThemeClass.btnIconSizeSmall = '16px';
 BasicThemeClass.btnIconSizeMedium = '20px';
 BasicThemeClass.btnIconSizeLarge = '24px';
-BasicThemeClass.btnDefaultBg = '#fff';
+BasicThemeClass.btnDefaultBg = colors.shapeOtherBase;
 BasicThemeClass.btnDefaultBgStart = 'none';
 BasicThemeClass.btnDefaultBgEnd = 'none';
-BasicThemeClass.btnDefaultHoverBg = '#F0F0F0';
+BasicThemeClass.btnDefaultHoverBg = colors.shapeOtherBaseHover;
 BasicThemeClass.btnDefaultHoverBgStart = 'none';
 BasicThemeClass.btnDefaultHoverBgEnd = 'none';
-BasicThemeClass.btnDefaultActiveBg = '#E6E6E6';
-BasicThemeClass.btnDefaultHoverTextColor = '';
-BasicThemeClass.btnDefaultBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.btnDefaultActiveBg = colors.shapeOtherBasePressed;
+BasicThemeClass.btnDefaultHoverTextColor = colors.textNeutralHeavy;
+BasicThemeClass.btnDefaultBorderColor = colors.lineNeutralPale;
 BasicThemeClass.btnDefaultActiveShadow = 'none';
-BasicThemeClass.btnSuccessBg = '#26AD50';
-BasicThemeClass.btnSuccessBorderColor = '#26AD50';
-BasicThemeClass.btnSuccessHoverBg = '#23A14A';
-BasicThemeClass.btnSuccessHoverBorderColor = '#23A14A';
-BasicThemeClass.btnSuccessHoverTextColor = '';
+BasicThemeClass.btnSuccessBg = colors.shapeBoldSuccess;
+BasicThemeClass.btnSuccessHoverBg = colors.shapeBoldSuccessHover;
+BasicThemeClass.btnSuccessHoverTextColor = colors.textConstHeavyWhite;
 BasicThemeClass.btnSuccessBgStart = 'none';
 BasicThemeClass.btnSuccessBgEnd = 'none';
-BasicThemeClass.btnSuccessTextColor = '#fff';
+BasicThemeClass.btnSuccessTextColor = colors.textConstHeavyWhite;
 BasicThemeClass.btnSuccessHoverBgStart = 'none';
 BasicThemeClass.btnSuccessHoverBgEnd = 'none';
-BasicThemeClass.btnSuccessActiveBg = '#209644';
-BasicThemeClass.btnSuccessActiveBorderColor = '#209644';
+BasicThemeClass.btnSuccessActiveBg = colors.shapeBoldSuccessPressed;
 BasicThemeClass.btnSuccessActiveShadow = 'none';
-BasicThemeClass.btnPrimaryBg = '#3D3D3D';
-BasicThemeClass.btnPrimaryHoverBg = '#292929';
-BasicThemeClass.btnPrimaryActiveBg = '#141414';
+BasicThemeClass.btnPrimaryBg = colors.shapeBoldAccent;
+BasicThemeClass.btnPrimaryHoverBg = colors.shapeBoldAccentHover;
+BasicThemeClass.btnPrimaryActiveBg = colors.shapeBoldAccentPressed;
 BasicThemeClass.btnPrimaryHoverTextColor = '';
-BasicThemeClass.btnPrimaryBorderColor = '#3D3D3D';
-BasicThemeClass.btnPrimaryHoverBorderColor = '#292929';
-BasicThemeClass.btnPrimaryActiveBorderColor = '#141414';
 BasicThemeClass.btnPrimaryBgStart = 'none';
 BasicThemeClass.btnPrimaryBgEnd = 'none';
-BasicThemeClass.btnPrimaryTextColor = '#fff';
+BasicThemeClass.btnPrimaryTextColor = colors.textOnAccentBoldHeavy;
 BasicThemeClass.btnPrimaryHoverBgStart = 'none';
 BasicThemeClass.btnPrimaryHoverBgEnd = 'none';
 BasicThemeClass.btnPrimaryActiveShadow = 'none';
-BasicThemeClass.btnDangerHoverBg = '#ED3F3F';
-BasicThemeClass.btnDangerHoverBorderColor = '#ED3F3F';
+BasicThemeClass.btnDangerHoverBg = colors.shapeBoldErrorHover;
 BasicThemeClass.btnDangerHoverTextColor = '';
 BasicThemeClass.btnDangerBgStart = 'none';
 BasicThemeClass.btnDangerBgEnd = 'none';
-BasicThemeClass.btnDangerTextColor = '#fff';
+BasicThemeClass.btnDangerTextColor = colors.textConstHeavyWhite;
 BasicThemeClass.btnDangerHoverBgStart = 'none';
 BasicThemeClass.btnDangerHoverBgEnd = 'none';
-BasicThemeClass.btnDangerActiveBg = '#DD3333';
+BasicThemeClass.btnDangerActiveBg = colors.shapeBoldErrorPressed;
 BasicThemeClass.btnDangerActiveShadow = 'none';
-BasicThemeClass.btnPayBg = '#fcb73e';
-BasicThemeClass.btnPayHoverBg = '#fda70c';
-BasicThemeClass.btnPayHoverBorderColor = '#fda70c';
+BasicThemeClass.btnPayBg = colors.shapeBoldWarning;
+BasicThemeClass.btnPayHoverBg = colors.shapeBoldWarningHover;
 BasicThemeClass.btnPayHoverTextColor = '';
-BasicThemeClass.btnPayBorderColor = '#fcb73e';
 BasicThemeClass.btnPayBgStart = 'none';
 BasicThemeClass.btnPayBgEnd = 'none';
 BasicThemeClass.btnPayHoverBgStart = 'none';
 BasicThemeClass.btnPayHoverBgEnd = 'none';
-BasicThemeClass.btnPayActiveBg = '#f69912';
-BasicThemeClass.btnPayActiveBorderColor = '#f69912';
+BasicThemeClass.btnPayActiveBg = colors.shapeBoldWarningPressed;
 BasicThemeClass.btnPayActiveShadow = 'none';
-BasicThemeClass.btnMenuArrowColor = '#a6a6a6';
-BasicThemeClass.btnDisabledBg = 'rgba(0, 0, 0, 0.06)';
-BasicThemeClass.btnInsetColor = '#fff';
+BasicThemeClass.btnMenuArrowColor = colors.textNeutralSoft;
+BasicThemeClass.btnDisabledBg = colors.shapeOtherDisabled;
+BasicThemeClass.btnInsetColor = colors.surfaceBase;
 BasicThemeClass.btnBacklessBg = 'transparent';
-BasicThemeClass.btnBacklessHoverBg = 'rgba(0, 0, 0, 0.06)';
-BasicThemeClass.btnBacklessActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.btnBacklessHoverBg = colors.shapeOtherBacklessHover;
+BasicThemeClass.btnBacklessActiveBg = colors.shapeOtherBacklessPressed;
 BasicThemeClass.btnBacklessHoverTextColor = '';
 BasicThemeClass.btnTextBg = 'transparent';
-BasicThemeClass.btnTextHoverBg = 'rgba(0, 0, 0, 0.06)';
-BasicThemeClass.btnTextActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.btnTextHoverBg = colors.shapeOtherBacklessHover;
+BasicThemeClass.btnTextActiveBg = colors.shapeOtherBacklessPressed;
 BasicThemeClass.btnTextHoverTextColor = '';
 BasicThemeClass.btnWithIconPaddingSmall = '8px';
 BasicThemeClass.btnWithIconPaddingMedium = '10px';
@@ -3122,7 +3082,7 @@ BasicThemeClass.btnWithIconPaddingLarge = '12px';
 BasicThemeClass.btnIconColor = '';
 BasicThemeClass.btnIconHoverColor = '';
 BasicThemeClass.btnIconDisabledColor = '';
-BasicThemeClass.selectPlaceholderColor = '#adadad';
+BasicThemeClass.selectPlaceholderColor = _BasicThemeClass.placeholderColor;
 BasicThemeClass.selectPaddingXSmall = '7px';
 BasicThemeClass.selectPaddingXMedium = '11px';
 BasicThemeClass.selectPaddingXLarge = '15px';
@@ -3130,41 +3090,27 @@ BasicThemeClass.selectRootWidthMobile = 'auto';
 BasicThemeClass.mobileSelectMaxWidth = '100%';
 BasicThemeClass.selectBorderColorTransition = "box-shadow " + _BasicThemeClass.transitionDuration + " " + _BasicThemeClass.transitionTimingFunction + ";"; //#endregion Select
 //#region Tooltip
-/** @deprecated Эта переменная устарела при появлении размеров у `Tooltip` и будет удалена в `6.0`.
- * @see {@link tooltipPaddingYSmall `tooltipPaddingYSmall`} */
-BasicThemeClass.tooltipPaddingY = '16px'; /** @deprecated Эта переменная устарела при появлении размеров у `Tooltip` и будет удалена в `6.0`.
-                                          * @see {@link tooltipPaddingXSmall `tooltipPaddingXSmall`} */
-BasicThemeClass.tooltipPaddingX = '16px';
 BasicThemeClass.tooltipPaddingYSmall = '16px';
 BasicThemeClass.tooltipPaddingXSmall = '16px';
 BasicThemeClass.tooltipPaddingYMedium = '20px';
 BasicThemeClass.tooltipPaddingXMedium = '20px';
 BasicThemeClass.tooltipPaddingYLarge = '24px';
-BasicThemeClass.tooltipPaddingXLarge = '24px'; /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-                                               * @see {@link tooltipCloseBtnPaddingSmall `tooltipCloseBtnPaddingSmall`} */
-BasicThemeClass.tooltipCloseBtnPadding = '4px';
+BasicThemeClass.tooltipPaddingXLarge = '24px';
 BasicThemeClass.tooltipCloseBtnPaddingSmall = '4px';
 BasicThemeClass.tooltipCloseBtnPaddingMedium = '6px';
 BasicThemeClass.tooltipCloseBtnPaddingLarge = '8px';
 BasicThemeClass.tooltipCloseBtnSide = '16px';
-BasicThemeClass.tooltipCloseBtnHoverColor = 'rgba(0, 0, 0, 0.5)';
-BasicThemeClass.tooltipBg = '#fff';
-BasicThemeClass.tooltipBorderRadius = '8px';
+BasicThemeClass.tooltipCloseBtnHoverColor = colors.textNeutralHeavy;
+BasicThemeClass.tooltipBg = colors.surfaceHigh;
 BasicThemeClass.tooltipBorderRadiusSmall = '8px';
 BasicThemeClass.tooltipBorderRadiusMedium = '10px';
-BasicThemeClass.tooltipBorderRadiusLarge = '12px'; /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-                                                   * @see {@link tooltipPinOffsetYSmall `tooltipPinOffsetYSmall`} */
-BasicThemeClass.tooltipPinOffsetY = '18px';
+BasicThemeClass.tooltipBorderRadiusLarge = '12px';
 BasicThemeClass.tooltipPinOffsetYSmall = '18px';
 BasicThemeClass.tooltipPinOffsetYMedium = '21px';
-BasicThemeClass.tooltipPinOffsetYLarge = '24px'; /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-                                                 * @see {@link tooltipPinOffsetXSmall `tooltipPinOffsetXSmall` */
-BasicThemeClass.tooltipPinOffsetX = '16px';
+BasicThemeClass.tooltipPinOffsetYLarge = '24px';
 BasicThemeClass.tooltipPinOffsetXSmall = '16px';
 BasicThemeClass.tooltipPinOffsetXMedium = '20px';
-BasicThemeClass.tooltipPinOffsetXLarge = '24px'; /** @deprecated Переменная устарела с появлением размеров у `Tooltip` и будет удалена в `6.0`.
-                                                 * @see {@link tooltipMarginSmall `tooltipMarginSmall`} */
-BasicThemeClass.tooltipMargin = '10px';
+BasicThemeClass.tooltipPinOffsetXLarge = '24px';
 BasicThemeClass.tooltipMarginSmall = '10px';
 BasicThemeClass.tooltipMarginMedium = '12px';
 BasicThemeClass.tooltipMarginLarge = '14px';
@@ -3173,8 +3119,8 @@ BasicThemeClass.tooltipPinSizeMedium = '10px';
 BasicThemeClass.tooltipPinSizeLarge = '12px';
 BasicThemeClass.kebabMargin = '4px';
 BasicThemeClass.kebabBackground = 'transparent';
-BasicThemeClass.kebabBackgroundHover = 'rgba(0, 0, 0, 0.06)';
-BasicThemeClass.kebabBackgroundActive = 'rgba(0, 0, 0, 0.10)';
+BasicThemeClass.kebabBackgroundHover = colors.shapeOtherBacklessHover;
+BasicThemeClass.kebabBackgroundActive = colors.shapeOtherBacklessPressed;
 BasicThemeClass.kebabBorderRadius = '50%';
 BasicThemeClass.kebabBorder = '2px solid transparent';
 BasicThemeClass.kebabSizeSmall = '24px';
@@ -3183,20 +3129,19 @@ BasicThemeClass.kebabSizeLarge = '40px';
 BasicThemeClass.kebabIconSizeSmall = '16px';
 BasicThemeClass.kebabIconSizeMedium = '20px';
 BasicThemeClass.kebabIconSizeLarge = '24px';
-BasicThemeClass.kebabIconColor = '#757575'; //#endregion
+BasicThemeClass.kebabIconColor = colors.textNeutralSoft; //#endregion
 //#region Modal
 BasicThemeClass.modalWindowShadow = '0px 16px 32px 0px rgba(0, 0, 0, 0.06)';
-BasicThemeClass.modalBackBg = '#000';
-BasicThemeClass.modalBackOpacity = '0.16';
-BasicThemeClass.modalCloseButtonDisabledColor = '#8b8b8b';
-BasicThemeClass.modalCloseButtonHoverColor = 'rgba(0, 0, 0, 0.865)';
+BasicThemeClass.modalBackBg = colors.surfaceModalBackdrop;
+BasicThemeClass.modalBackOpacity = '1';
+BasicThemeClass.modalCloseButtonDisabledColor = colors.textNeutralFaint;
+BasicThemeClass.modalCloseButtonHoverColor = colors.textNeutralHeavy;
 BasicThemeClass.modalCloseButtonPadding = '32px';
-BasicThemeClass.modalCloseButtonBottomPadding = '20px'; /** @deprecated use modalCloseButtonClickArea[Top/Bottom/Left/Right] instead */
-BasicThemeClass.modalCloseButtonClickArea = '6px';
-BasicThemeClass.modalCloseButtonClickAreaTop = '6px';
-BasicThemeClass.modalCloseButtonClickAreaBottom = '6px';
-BasicThemeClass.modalCloseButtonClickAreaLeft = '6px';
-BasicThemeClass.modalCloseButtonClickAreaRight = '6px';
+BasicThemeClass.modalCloseButtonBottomPadding = '20px';
+BasicThemeClass.modalCloseButtonClickAreaTop = '30px';
+BasicThemeClass.modalCloseButtonClickAreaBottom = '22px';
+BasicThemeClass.modalCloseButtonClickAreaLeft = '24px';
+BasicThemeClass.modalCloseButtonClickAreaRight = '28px';
 BasicThemeClass.modalCloseIconSize = '20px';
 BasicThemeClass.modalBorderRadius = '16px';
 BasicThemeClass.modalFixedHeaderBorder = 'none';
@@ -3213,7 +3158,7 @@ BasicThemeClass.modalHeaderPaddingBottom = '16px';
 BasicThemeClass.modalHeaderPaddingTop = '24px';
 BasicThemeClass.modalFixedHeaderMarginBottom = '0px';
 BasicThemeClass.modalFixedFooterMarginTop = '0px';
-BasicThemeClass.modalSeparatorBorderBottom = '1px solid #E6E6E6';
+BasicThemeClass.modalSeparatorBorderBottom = "1px solid " + colors.lineNeutralFaint;
 BasicThemeClass.modalSeparatorMargin = '0 32px';
 BasicThemeClass.modalSeparatorFixedMargin = '0 16px';
 BasicThemeClass.modalBodyTextColor = 'inherit';
@@ -3225,29 +3170,27 @@ BasicThemeClass.modalFooterPaddingTop = '0px';
 BasicThemeClass.modalFooterPaddingBottom = '20px';
 BasicThemeClass.modalPaddingBottom = '40px';
 BasicThemeClass.modalFooterPanelPaddingTop = '20px';
-BasicThemeClass.mobileModalCloseButtonRightPadding = '16px';
-BasicThemeClass.mobileModalCloseButtonTopPadding = '8px';
-BasicThemeClass.mobileModalCloseButtonClickArea = '16px';
+BasicThemeClass.mobileModalCloseButtonClickArea = '22px';
 BasicThemeClass.mobileModalWithoutHeaderCloseButtonPadding = '10px';
 BasicThemeClass.mobileModalCloseIconSize = '20px';
 BasicThemeClass.mobileModalHeaderFontSize = '24px';
 BasicThemeClass.mobileModalHeaderLineHeight = '32px';
 BasicThemeClass.mobileModalHeaderPadding = '16px';
-BasicThemeClass.mobileModalBodyPadding = '0 16px 16px 16px';
+BasicThemeClass.mobileModalBodyPadding = '0 16px 0 16px';
 BasicThemeClass.mobileModalBodyPaddingTop = '16px';
 BasicThemeClass.mobileModalBodyPaddingBottom = '16px';
 BasicThemeClass.mobileModalBodyFontSize = '16px';
 BasicThemeClass.mobileModalFooterPadding = '16px';
 BasicThemeClass.mobileModalPaddingBottom = '16px';
 BasicThemeClass.mobileModalContainerHeight = '100%';
-BasicThemeClass.mobileModalContainerMarginTop = '0';
-BasicThemeClass.mobileModalContainerMarginRight = '0';
-BasicThemeClass.mobileModalContainerMarginBottom = '0';
-BasicThemeClass.mobileModalContainerMarginLeft = '0';
-BasicThemeClass.sidePageBackingBg = '#000';
-BasicThemeClass.sidePageBackingBgOpacity = '0.16';
-BasicThemeClass.sidePageCloseButtonColor = 'rgba(0, 0, 0, 0.374)';
-BasicThemeClass.sidePageCloseButtonHoverColor = 'rgba(0, 0, 0, 0.5)';
+BasicThemeClass.mobileModalContainerMarginTop = '16px';
+BasicThemeClass.mobileModalContainerMarginRight = '16px';
+BasicThemeClass.mobileModalContainerMarginBottom = '16px';
+BasicThemeClass.mobileModalContainerMarginLeft = '16px';
+BasicThemeClass.sidePageBackingBg = colors.surfaceModalBackdrop;
+BasicThemeClass.sidePageBackingBgOpacity = '1';
+BasicThemeClass.sidePageCloseButtonColor = colors.textNeutralPale;
+BasicThemeClass.sidePageCloseButtonHoverColor = colors.textNeutralHeavy;
 BasicThemeClass.sidePageContainerShadow = '0 5px 10px rgba(0, 0, 0, 0.2)';
 BasicThemeClass.mobileSidePagePaddingLeft = '16px';
 BasicThemeClass.mobileSidePagePaddingRight = '16px';
@@ -3260,50 +3203,41 @@ BasicThemeClass.sidePagePaddingTop = '24px';
 BasicThemeClass.sidePagePaddingBottom = '40px';
 BasicThemeClass.sidePageFooterPaddingTop = '20px';
 BasicThemeClass.sidePageFooterPaddingBottom = '20px';
-BasicThemeClass.sidePageBgDefault = '#fff';
+BasicThemeClass.sidePageBgDefault = colors.surfaceHigh;
 BasicThemeClass.sidePageBodyTextColor = 'inherit';
 BasicThemeClass.sidePageFooterTextColor = 'inherit';
 BasicThemeClass.sidePageHeaderFontSize = '24px';
 BasicThemeClass.sidePageHeaderLineHeight = '32px';
 BasicThemeClass.sidePageHeaderPaddingBottom = '16px';
 BasicThemeClass.sidePageHeaderPaddingTop = '24px';
-BasicThemeClass.sidePageHeaderFixedFontSize = '18px';
-BasicThemeClass.sidePageHeaderFixedLineHeight = '28px';
-BasicThemeClass.sidePageHeaderFixedPaddingY = '10px';
-BasicThemeClass.sidePageHeaderStickyOffset = '9px'; /** @deprecated use sidePageCloseButtonClickAreaLeft and sidePageCloseButtonClickAreaRight instead */
-BasicThemeClass.sidePageCloseButtonPadding = '32px';
-BasicThemeClass.mobileSidePageCloseButtonPadding = '16px';
-BasicThemeClass.sidePageCloseIconSize = '20px'; /** @deprecated use sidePageCloseButtonClickArea[Top/Bottom/Left/Right] instead */
-BasicThemeClass.sidePageCloseButtonClickArea = '6px';
-BasicThemeClass.sidePageCloseButtonClickAreaTop = '6px';
-BasicThemeClass.sidePageCloseButtonClickAreaBottom = '6px';
-BasicThemeClass.sidePageCloseButtonClickAreaLeft = '6px';
-BasicThemeClass.sidePageCloseButtonClickAreaRight = '6px';
+BasicThemeClass.sidePageHeaderStickyOffset = '10px';
+BasicThemeClass.sidePageCloseIconSize = '20px';
 BasicThemeClass.sidePageCloseButtonFixedClickAreaBottom = '14px';
-BasicThemeClass.mobileSidePageCloseButtonClickArea = '16px';
+BasicThemeClass.mobileSidePageCloseButtonClickArea = '22px';
 BasicThemeClass.sidePageFixedPanelShadow = 'none';
 BasicThemeClass.mobileSidePageHeaderFontSize = '24px';
 BasicThemeClass.mobileSidePageHeaderLineHeight = '32px';
 BasicThemeClass.mobileSidePageHeaderPaddingBottom = '16px';
-BasicThemeClass.mobileSidePageHeaderPaddingTop = '16px'; /** @deprecated use mobileSidePageCloseButtonPadding instead */
-BasicThemeClass.mobileSidePageCloseButtonRightPadding = '12px';
+BasicThemeClass.mobileSidePageHeaderPaddingTop = '16px';
 BasicThemeClass.sidePageHeaderFontWeight = 'bold';
-BasicThemeClass.sidePageCloseButtonWrapperOffsetTop = '4px';
+BasicThemeClass.sidePageCloseButtonWrapperOffsetTop = '2px';
 BasicThemeClass.sidePageCloseButtonWrapperFixedOffsetTop = '4px';
-BasicThemeClass.dateInputMaskColor = '#b8b8b8';
+BasicThemeClass.dateInputMaskColor = colors.textNeutralFaint;
 BasicThemeClass.dateInputComponentSelectedBgColor = '';
-BasicThemeClass.dateInputComponentSelectedTextColor = '';
+BasicThemeClass.dateInputComponentSelectedTextColor = ''; //#endregion DateInput
+//#region Calendar
+BasicThemeClass.calendarBottomSeparatorBorderColor = colors.lineNeutralFaint;
 BasicThemeClass.calendarBorderRadius = '8px';
 BasicThemeClass.calendarCellHoverColor = '';
 BasicThemeClass.calendarCellActiveHoverColor = '';
 BasicThemeClass.calendarCellTodayBorder = '1px solid';
 BasicThemeClass.calendarCellBorderRadius = '9999px';
-BasicThemeClass.calendarCellSelectedBgColor = '#E6E6E6';
-BasicThemeClass.calendarCellSelectedFontColor = 'inherit';
+BasicThemeClass.calendarCellSelectedBgColor = colors.shapeBoldAccent;
+BasicThemeClass.calendarCellSelectedFontColor = colors.textOnAccentBoldHeavy;
 BasicThemeClass.calendarCellHeight = '32px';
 BasicThemeClass.calendarCellFontSize = '14px';
-BasicThemeClass.calendarMonthTitleBorderBottomColor = '#dfdede';
-BasicThemeClass.calendarCellHoverBgColor = '#F0F0F0';
+BasicThemeClass.calendarMonthTitleBorderBottomColor = colors.lineNeutralFaint;
+BasicThemeClass.calendarCellHoverBgColor = colors.shapeOtherBacklessHover;
 BasicThemeClass.calendarPaddingX = '18px';
 BasicThemeClass.calendarMonthTitleLineHeight = '20px';
 BasicThemeClass.calendarMonthTitlePaddingTop = '12px';
@@ -3323,10 +3257,10 @@ BasicThemeClass.mobileCalendarCellFontSize = '16px';
 BasicThemeClass.mobileCalendarGridRowSpacing = '8px';
 BasicThemeClass.mobileCalendarWrapperHeight = '304px'; //#endregion DatePicker
 //#region DateRangePicker
-BasicThemeClass.rangeCalendarCellBg = '#f0f0f0';
-BasicThemeClass.rangeCalendarCellEndBg = '#1e1e1e';
-BasicThemeClass.rangeCalendarCellEndColor = 'white';
-BasicThemeClass.rangeCalendarCellHoverBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.rangeCalendarCellBg = colors.shapeFaintNeutralAlpha;
+BasicThemeClass.rangeCalendarCellEndBg = colors.shapeBoldAccent;
+BasicThemeClass.rangeCalendarCellEndColor = colors.textOnAccentBoldHeavy;
+BasicThemeClass.rangeCalendarCellHoverBg = colors.shapeOtherBacklessHover;
 BasicThemeClass.rangeCalendarWrapperHeight = '450px';
 BasicThemeClass.mobileRangeCalendarCellHeight = '42px';
 BasicThemeClass.mobileRangeCalendarCellWidth = '42px';
@@ -3341,36 +3275,26 @@ BasicThemeClass.dateSelectMenuItemBgSelected = '#ececec';
 BasicThemeClass.dateSelectTextColorInvert = '';
 BasicThemeClass.mobileDateSelectFontSize = '16px';
 BasicThemeClass.mobileDateSelectLineHeight = '20px';
-BasicThemeClass.pagingLineHeight = '22px';
-BasicThemeClass.pagingPageLinkBoxSizing = 'border-box'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-BasicThemeClass.pagingPageLinkMinWidth = '0.75em'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
-                                                   * @see {@link pagingPageLinkPaddingYSmall `pagingPageLinkPaddingYSmall`} */
-BasicThemeClass.pagingPageLinkPaddingY = '0.3125em'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0`
-                                                     * @see {@link pagingPageLinkPaddingXSmall `pagingPageLinkPaddingXSmall`} */
-BasicThemeClass.pagingPageLinkPaddingX = '12px';
+BasicThemeClass.pagingPageLinkBoxSizing = 'border-box';
 BasicThemeClass.pagingPageLinkPaddingYSmall = '6px';
 BasicThemeClass.pagingPageLinkPaddingXSmall = '11.5px';
 BasicThemeClass.pagingPageLinkPaddingYMedium = '9px';
 BasicThemeClass.pagingPageLinkPaddingXMedium = '15px';
 BasicThemeClass.pagingPageLinkPaddingYLarge = '12px';
-BasicThemeClass.pagingPageLinkPaddingXLarge = '18.5px'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-BasicThemeClass.pagingPageLinkMargin = '0px 1px';
+BasicThemeClass.pagingPageLinkPaddingXLarge = '18.5px';
 BasicThemeClass.pagingPageLinkBorderRadius = '9999px';
-BasicThemeClass.pagingPageLinkActiveBg = 'rgba(0, 0, 0, 0.1)';
-BasicThemeClass.pagingPageLinkDisabledActiveBg = 'rgba(0, 0, 0, 0.04)';
-BasicThemeClass.pagingPageLinkHoverBg = 'rgba(0, 0, 0, 0.06)'; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-BasicThemeClass.pagingPageForwardLinkMarginTop = ''; /** @deprecated Это переменная старого размера `Paging` и будет удалена в `6.0` */
-BasicThemeClass.pagingPageForwardLinkMarginLeft = '0px';
+BasicThemeClass.pagingPageLinkActiveBg = colors.shapeOtherBacklessPressed;
+BasicThemeClass.pagingPageLinkDisabledActiveBg = colors.shapeOtherDisabled;
+BasicThemeClass.pagingPageLinkHoverBg = colors.shapeOtherBacklessHover;
 BasicThemeClass.pagingForwardLinkPaddingSmall = '6px 8px 6px 12px';
 BasicThemeClass.pagingForwardLinkPaddingMedium = '9px 12px 9px 16px';
 BasicThemeClass.pagingForwardLinkPaddingLarge = '12px 16px 12px 20px';
 BasicThemeClass.pagingForwardLinkPaddingMediumMobile = '10px';
 BasicThemeClass.pagingForwardLinkPaddingLargeMobile = '12px';
-BasicThemeClass.pagingDotsPadding = '0.375em 0.625em 0';
 BasicThemeClass.pagingDotsPaddingSmall = '11px 8px 5px 8px';
 BasicThemeClass.pagingDotsPaddingMedium = '14px 12px 10px 12px';
 BasicThemeClass.pagingDotsPaddingLarge = '19px 16px 13px 16px';
-BasicThemeClass.pagingDotsColor = '#ADADAD';
+BasicThemeClass.pagingDotsColor = colors.textNeutralFaint;
 BasicThemeClass.pagingPageLinkHintFontSize = '12px';
 BasicThemeClass.pagingPageLinkHintLineHeight = '16px';
 BasicThemeClass.pagingPageLinkHintMargin = '4px -20px 0px';
@@ -3378,7 +3302,7 @@ BasicThemeClass.hintMaxWidth = '200px';
 BasicThemeClass.hintPaddingY = '4px';
 BasicThemeClass.hintPaddingX = '8px';
 BasicThemeClass.hintTextAlign = 'center';
-BasicThemeClass.hintBgColor = 'rgba(0, 0, 0, 0.76)';
+BasicThemeClass.hintBgColor = colors.shapeHeavyNeutral;
 BasicThemeClass.hintBorder = 'none';
 BasicThemeClass.hintBorderRadius = '6px';
 BasicThemeClass.hintMargin = '8px';
@@ -3387,24 +3311,24 @@ BasicThemeClass.toastPaddingX = '16px';
 BasicThemeClass.toastBorderRadius = '8px';
 BasicThemeClass.toastBorder = 'none';
 BasicThemeClass.toastTop = '24px';
-BasicThemeClass.toastBg = 'rgba(0, 0, 0, 0.76)';
-BasicThemeClass.toastErrorBg = '#F63B3F';
-BasicThemeClass.toastColor = 'white';
-BasicThemeClass.toastColorError = '#fff';
-BasicThemeClass.toastLinkColor = '#fff';
-BasicThemeClass.toastLinkColorError = '#fff';
+BasicThemeClass.toastBg = colors.shapeHeavyNeutral;
+BasicThemeClass.toastErrorBg = colors.shapeBoldError;
+BasicThemeClass.toastColor = colors.textInvertedNeutralHeavy;
+BasicThemeClass.toastColorError = colors.textConstHeavyWhite;
+BasicThemeClass.toastLinkColor = colors.textInvertedNeutralHeavy;
+BasicThemeClass.toastLinkColorError = colors.textConstHeavyWhite;
 BasicThemeClass.toastLinkTextDecorationHover = '';
-BasicThemeClass.toastLinkBgHover = 'rgba(255, 255, 255, 0.12)';
-BasicThemeClass.toastLinkBgHoverError = 'rgba(255, 255, 255, 0.08)';
-BasicThemeClass.toastLinkBgActive = 'rgba(0, 0, 0, 0.87)';
-BasicThemeClass.toastLinkBgActiveError = 'rgba(255, 255, 255, 0.04)';
-BasicThemeClass.toastLinkColorActiveError = 'rgba(255, 255, 255, 0.64)';
+BasicThemeClass.toastLinkBgHover = colors.shapeInvertedBacklessHover;
+BasicThemeClass.toastLinkBgHoverError = colors.shapeConstBacklessWhiteHover;
+BasicThemeClass.toastLinkBgActive = colors.shapeInvertedBacklessPressed;
+BasicThemeClass.toastLinkBgActiveError = colors.shapeConstBacklessWhiteHover;
+BasicThemeClass.toastLinkColorActiveError = colors.textConstHeavyWhite;
 BasicThemeClass.toastLinkPadding = '12px';
 BasicThemeClass.toastClosePadding = '16px';
-BasicThemeClass.toastCloseColor = 'rgba(255, 255, 255, 0.6)';
-BasicThemeClass.toastCloseColorError = 'rgba(255, 255, 255, 0.6)';
-BasicThemeClass.toastCloseHoverColor = 'white';
-BasicThemeClass.toastCloseHoverColorError = 'white';
+BasicThemeClass.toastCloseColor = colors.textInvertedNeutralSoft;
+BasicThemeClass.toastCloseColorError = colors.textConstSoftWhite;
+BasicThemeClass.toastCloseHoverColor = colors.textInvertedNeutralHeavy;
+BasicThemeClass.toastCloseHoverColorError = colors.textConstHeavyWhite;
 BasicThemeClass.toastCloseSize = '16px'; //#endregion Toast
 //#region Dropdown
 BasicThemeClass.dropdownMenuBorderColorTransition = '';
@@ -3423,8 +3347,8 @@ BasicThemeClass.menuPaddingX = '4px';
 BasicThemeClass.mobileMenuPaddingX = '8px';
 BasicThemeClass.menuOffsetY = '4px';
 BasicThemeClass.menuBoxSizing = 'border-box';
-BasicThemeClass.menuItemSelectedBg = '#E6E6E6';
-BasicThemeClass.menuItemHoverBg = '#F0F0F0';
+BasicThemeClass.menuItemSelectedBg = colors.shapeOtherBacklessPressed;
+BasicThemeClass.menuItemHoverBg = colors.shapeOtherBacklessHover;
 BasicThemeClass.menuItemIconWidthSmall = '16px';
 BasicThemeClass.menuItemIconWidthMedium = '20px';
 BasicThemeClass.menuItemIconWidthLarge = '24px';
@@ -3436,13 +3360,13 @@ BasicThemeClass.menuItemPaddingYMedium = '9px';
 BasicThemeClass.menuItemPaddingXLarge = '16px';
 BasicThemeClass.menuItemPaddingYLarge = '12px';
 BasicThemeClass.menuItemBorderRadius = '6px';
-BasicThemeClass.menuItemCommentOpacity = '0.6';
+BasicThemeClass.menuItemCommentOpacity = '1';
 BasicThemeClass.menuItemCommentOpacityHover = '0.6';
 BasicThemeClass.menuItemDisplay = 'block';
 BasicThemeClass.menuItemPaddingMobile = '12px 16px';
 BasicThemeClass.menuItemDisabledBg = 'transparent';
 BasicThemeClass.menuItemGap = '1px'; //menuHeader
-BasicThemeClass.menuHeaderColor = '#757575';
+BasicThemeClass.menuHeaderColor = colors.textNeutralSoft;
 BasicThemeClass.menuHeaderLineHeightSmall = '16px';
 BasicThemeClass.menuHeaderLineHeightMedium = '20px';
 BasicThemeClass.menuHeaderLineHeightLarge = '22px';
@@ -3464,7 +3388,7 @@ BasicThemeClass.menuHeaderTotalCountPaddingTopLarge = '8px';
 BasicThemeClass.menuHeaderTotalCountPaddingBottomSmall = '12px';
 BasicThemeClass.menuHeaderTotalCountPaddingBottomMedium = '14px';
 BasicThemeClass.menuHeaderTotalCountPaddingBottomLarge = '18px';
-BasicThemeClass.menuSeparatorBorderColor = '#ebebeb';
+BasicThemeClass.menuSeparatorBorderColor = colors.lineNeutralFaint;
 BasicThemeClass.menuSeparatorMarginY = '2px';
 BasicThemeClass.menuSeparatorMarginX = '8px';
 BasicThemeClass.menuSeparatorBorderWidth = '1px'; // mobileMenuSeparator
@@ -3477,9 +3401,9 @@ BasicThemeClass.toggleHeightMedium = '22px';
 BasicThemeClass.toggleWidthMedium = '34px';
 BasicThemeClass.toggleHeightLarge = '24px';
 BasicThemeClass.toggleWidthLarge = '36px';
-BasicThemeClass.toggleBaseBg = '#fff';
-BasicThemeClass.toggleBgHover = '#F0F0F0';
-BasicThemeClass.toggleBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleBaseBg = 'transparent';
+BasicThemeClass.toggleBgHover = colors.shapeOtherFieldHover;
+BasicThemeClass.toggleBorderColor = colors.lineNeutralPale;
 BasicThemeClass.toggleHandleSizeSmall = '14px';
 BasicThemeClass.toggleHandleSizeMedium = '16px';
 BasicThemeClass.toggleHandleSizeLarge = '18px';
@@ -3488,30 +3412,30 @@ BasicThemeClass.toggleHandleTop = '3px';
 BasicThemeClass.toggleBgFocus = 'linear-gradient(-180deg, #f1f1f1, #dedede)';
 BasicThemeClass.toggleCaptionGap = '8px';
 BasicThemeClass.toggleButtonOffsetY = '0px';
-BasicThemeClass.toggleContainerBg = '#FFFFFF';
-BasicThemeClass.toggleHandleBg = '#FFFFFF';
-BasicThemeClass.toggleHandleBoxShadow = '0 0 0 1px rgba(0, 0, 0, 0.16)';
-BasicThemeClass.toggleContainerBoxShadow = 'inset 0 0 0 1px rgba(0, 0, 0, 0.16)'; // idle :hover
-BasicThemeClass.toggleContainerBoxShadowHover = 'inset 0 0 0 1px rgba(0, 0, 0, 0.16)';
-BasicThemeClass.toggleHandleBgHover = '#FFFFFF';
-BasicThemeClass.toggleHandleBoxShadowHover = '0 0 0 1px rgba(0, 0, 0, 0.16)';
+BasicThemeClass.toggleContainerBg = colors.shapeOtherField;
+BasicThemeClass.toggleHandleBg = colors.shapeOtherBase;
+BasicThemeClass.toggleHandleBoxShadow = "0 0 0 1px " + colors.lineNeutralPale;
+BasicThemeClass.toggleContainerBoxShadow = "inset 0 0 0 1px " + colors.lineNeutralPale; // idle :hover
+BasicThemeClass.toggleContainerBoxShadowHover = "inset 0 0 0 1px " + colors.lineNeutralPaleHover;
+BasicThemeClass.toggleHandleBgHover = colors.shapeOtherBase;
+BasicThemeClass.toggleHandleBoxShadowHover = "0 0 0 1px " + colors.lineNeutralPale;
 BasicThemeClass.toggleContainerBoxShadowChecked = 'none';
 BasicThemeClass.toggleHandleBoxShadowChecked = 'none';
-BasicThemeClass.toggleHandleBgChecked = '#FFFFFF';
-BasicThemeClass.toggleBgChecked = '#3D3D3D';
+BasicThemeClass.toggleHandleBgChecked = colors.shapeInvertedNeutralHeavy;
+BasicThemeClass.toggleBgChecked = colors.shapeBoldAccent;
 BasicThemeClass.toggleCheckedBg = '#fff';
 BasicThemeClass.toggleCheckedBgHover = '#fff'; // checked :hover
 BasicThemeClass.toggleContainerBoxShadowCheckedHover = 'none';
-BasicThemeClass.toggleContainerBgCheckedHover = '#292929';
+BasicThemeClass.toggleContainerBgCheckedHover = colors.shapeBoldAccentHover;
 BasicThemeClass.toggleHandleBoxShadowCheckedHover = 'none';
-BasicThemeClass.toggleHandleBgCheckedHover = '#F0F0F0'; // disabled
-BasicThemeClass.toggleContainerBgDisabled = '#F0F0F0';
+BasicThemeClass.toggleHandleBgCheckedHover = colors.shapeInvertedNeutralHeavyHover; // disabled
+BasicThemeClass.toggleContainerBgDisabled = colors.shapeOtherDisabled;
 BasicThemeClass.toggleHandleBgDisabled = 'transparent';
-BasicThemeClass.toggleContainerBoxShadowDisabled = 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)';
-BasicThemeClass.toggleHandleBoxShadowDisabled = '0 0 0 1px rgba(0, 0, 0, 0.1)';
-BasicThemeClass.toggleDisabledHandleBg = '#fff';
-BasicThemeClass.toggleContainerBgDisabledChecked = '#D6D6D6';
-BasicThemeClass.toggleHandleBgDisabledChecked = '#F0F0F0';
+BasicThemeClass.toggleContainerBoxShadowDisabled = "inset 0 0 0 1px " + colors.lineNeutralFaint;
+BasicThemeClass.toggleHandleBoxShadowDisabled = "0 0 0 1px " + colors.lineNeutralFaint;
+BasicThemeClass.toggleDisabledHandleBg = 'transparent';
+BasicThemeClass.toggleContainerBgDisabledChecked = colors.shapeOtherAccentBoldDisabled;
+BasicThemeClass.toggleHandleBgDisabledChecked = colors.shapeInvertedNeutralHeavy;
 BasicThemeClass.toggleContainerBoxShadowDisabledChecked = 'none';
 BasicThemeClass.toggleHandleBoxShadowDisabledChecked = 'none';
 BasicThemeClass.toggleBgDisabledChecked = '#dadada'; //#endregion Toggle
@@ -3527,8 +3451,8 @@ BasicThemeClass.popupMargin = '10px';
 BasicThemeClass.popupPinSize = '8px';
 BasicThemeClass.popupMenuMenuOffsetY = '0px';
 BasicThemeClass.inputShadow = 'none';
-BasicThemeClass.inputBg = 'white';
-BasicThemeClass.inputIconColor = '#858585';
+BasicThemeClass.inputBg = colors.shapeOtherField;
+BasicThemeClass.inputIconColor = colors.textNeutralSoft;
 BasicThemeClass.inputColor = 'inherit';
 BasicThemeClass.inputWidth = '200px';
 BasicThemeClass.inputPaddingXSmall = '7px';
@@ -3545,8 +3469,8 @@ BasicThemeClass.inputBorderRadiusSmall = '2px';
 BasicThemeClass.inputBorderRadiusMedium = '2px';
 BasicThemeClass.inputBorderRadiusLarge = '2px';
 BasicThemeClass.inputDisabledBackgroundClip = 'padding-box';
-BasicThemeClass.inputBorderColor = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.inputBlinkColor = 'rgba(61, 61, 61, 0.2)';
+BasicThemeClass.inputBorderColor = colors.lineNeutralPale;
+BasicThemeClass.inputBlinkColor = colors.shapeFaintNeutralAlpha;
 BasicThemeClass.inputColorScheme = 'light';
 BasicThemeClass.checkboxBoxSizeSmall = '16px';
 BasicThemeClass.checkboxBoxSizeMedium = '20px';
@@ -3559,11 +3483,12 @@ BasicThemeClass.checkboxBoxOffsetY = '1px';
 BasicThemeClass.checkboxBgStart = '#fdfdfd';
 BasicThemeClass.checkboxBgEnd = '#ededed';
 BasicThemeClass.checkboxBorder = 'none';
-BasicThemeClass.checkboxCheckedColor = '#fff';
+BasicThemeClass.checkboxCheckedColor = colors.shapeInvertedNeutralHeavy;
 BasicThemeClass.checkboxBorderRadius = '4px';
-BasicThemeClass.checkboxBg = '#fff';
-BasicThemeClass.checkboxCheckedHoverBg = '#292929';
-BasicThemeClass.textareaBg = '#fff';
+BasicThemeClass.checkboxBg = colors.shapeOtherField;
+BasicThemeClass.checkboxCheckedHoverBg = colors.shapeBoldAccentHover;
+BasicThemeClass.checkboxCheckedActiveBg = colors.shapeBoldAccentPressed;
+BasicThemeClass.textareaBg = colors.shapeOtherField;
 BasicThemeClass.textareaShadow = 'none';
 BasicThemeClass.textareaBackgroundClip = 'padding-box';
 BasicThemeClass.textareaBorderRadius = '2px';
@@ -3571,9 +3496,10 @@ BasicThemeClass.textareaWidth = '250px';
 BasicThemeClass.textareaPaddingXSmall = '7px';
 BasicThemeClass.textareaPaddingXMedium = '11px';
 BasicThemeClass.textareaPaddingXLarge = '15px';
-BasicThemeClass.textareaBorderTopColor = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.textareaMargin = '';
-BasicThemeClass.textareaVerticalAlign = 'middle'; //#endregion Textarea
+BasicThemeClass.textareaBorderTopColor = colors.lineNeutralPale;
+BasicThemeClass.textareaCounterBg = 'transparent';
+BasicThemeClass.textareaMargin = '0px'; // обнуление вертикального браузерного margin в firefox
+BasicThemeClass.textareaVerticalAlign = 'top'; //#endregion Textarea
 //#region Radio
 BasicThemeClass.radioBulletSizeSmall = '6px';
 BasicThemeClass.radioBulletSizeMedium = '10px';
@@ -3584,13 +3510,11 @@ BasicThemeClass.radioSizeLarge = '24px';
 BasicThemeClass.radioCaptionGap = '8px';
 BasicThemeClass.radioVerticalAlign = 'top';
 BasicThemeClass.radioBgImage = 'none';
-BasicThemeClass.radioBgColor = '#fff';
+BasicThemeClass.radioBgColor = colors.shapeOtherField;
 BasicThemeClass.radioBoxShadow = 'none';
 BasicThemeClass.radioHoverShadow = 'none';
 BasicThemeClass.radioActiveShadow = 'none';
 BasicThemeClass.radioCheckedBorderColor = 'transparent';
-BasicThemeClass.radioCheckedBulletColor = '#fff';
-BasicThemeClass.radioDisabledBg = '#F0F0F0';
 BasicThemeClass.radioCaptionDisplay = 'inline-flex';
 BasicThemeClass.radioBorderWidthCompensation = '0px';
 BasicThemeClass.radioCircleOffsetY = '1px';
@@ -3598,7 +3522,11 @@ BasicThemeClass.tabPaddingXSmall = '8px';
 BasicThemeClass.tabPaddingXMedium = '10px';
 BasicThemeClass.tabPaddingXLarge = '12px';
 BasicThemeClass.tabBorderWidth = '2px';
-BasicThemeClass.tabColorHover = '#D6D6D6';
+BasicThemeClass.tabColorHover = colors.lineNeutralPale;
+BasicThemeClass.tabColorHoverError = colors.shapeBoldErrorHover;
+BasicThemeClass.tabColorHoverWarning = colors.shapeBoldWarningHover;
+BasicThemeClass.tabColorHoverSuccess = colors.shapeBoldSuccessHover;
+BasicThemeClass.tabColorHoverPrimary = colors.lineAccentPale;
 BasicThemeClass.tabIndicatorBorderRadius = '2px';
 BasicThemeClass.spinnerCaptionGapSmall = '6px';
 BasicThemeClass.spinnerCaptionGapMedium = '-4px';
@@ -3611,7 +3539,7 @@ BasicThemeClass.switcherBorderRadius = '8px';
 BasicThemeClass.switcherButtonPaddingXSmall = '7px';
 BasicThemeClass.switcherButtonPaddingXMedium = '11px';
 BasicThemeClass.switcherButtonPaddingXLarge = '15px';
-BasicThemeClass.switcherBtnDisabledBorderColor = 'rgba(0, 0, 0, 0.16)';
+BasicThemeClass.switcherBtnDisabledBorderColor = colors.lineNeutralPale;
 BasicThemeClass.mobilePopupTopPadding = '80px';
 BasicThemeClass.mobilePopupContainerBottomPadding = '8px';
 BasicThemeClass.mobilePopupHeaderPadding = '16px 16px 8px 16px';
@@ -3623,14 +3551,14 @@ BasicThemeClass.mobilePopupOuterIndentY = '24px'; //#endregion
 //#region ScrollContainer
 BasicThemeClass.scrollContainerScrollBarSize = '4px';
 BasicThemeClass.scrollContainerScrollBarHoverSize = '10px';
-BasicThemeClass.scrollContainerScrollBarColor = 'rgba(183, 183, 183, 0.7)';
-BasicThemeClass.scrollContainerScrollBarInvertColor = 'rgba(255, 255, 255, 0.5)';
+BasicThemeClass.scrollContainerScrollBarColor = colors.shapeSoftNeutralAlpha;
+BasicThemeClass.scrollContainerScrollBarInvertColor = colors.shapeInvertedNeutralSoftAlpha;
 BasicThemeClass.scrollContainerScrollBarOffsetY = '4px';
 BasicThemeClass.dropdownMenuScrollContainerScrollBarOffsetY = '0px'; //#endregion
 //#region PasswordInput
-BasicThemeClass.passwordInputVisibilityIconColor = '#000';
-BasicThemeClass.passwordInputVisibilityIconOpacity = '0.6';
-BasicThemeClass.passwordInputVisibilityIconHoverColor = '#000';
+BasicThemeClass.passwordInputVisibilityIconColor = colors.textNeutralHeavy;
+BasicThemeClass.passwordInputVisibilityIconOpacity = '0.64';
+BasicThemeClass.passwordInputVisibilityIconHoverColor = colors.textNeutralHeavy;
 BasicThemeClass.passwordInputVisibilityIconHoverOpacity = '1';
 BasicThemeClass.globalLoaderHeight = '4px';
 BasicThemeClass.globalLoaderWidth = '100%';
@@ -3649,7 +3577,10 @@ BasicThemeClass.globalLoaderTransitionFromSpinnerDuration = '200'; //ms
 BasicThemeClass.fileUploaderWidth = '362px';
 BasicThemeClass.fileUploaderTileWidth = 'auto';
 BasicThemeClass.fileUploaderBg = '';
-BasicThemeClass.fileUploaderUploadButtonBg = '#fff';
+BasicThemeClass.fileUploaderUploadButtonBg = 'transparent';
+BasicThemeClass.fileUploaderPaddingXSmall = '7px';
+BasicThemeClass.fileUploaderPaddingXMedium = '9px';
+BasicThemeClass.fileUploaderPaddingXLarge = '11px';
 BasicThemeClass.fileUploaderTilePaddingSmall = '3px';
 BasicThemeClass.fileUploaderTilePaddingMedium = '5px';
 BasicThemeClass.fileUploaderTilePaddingLarge = '7px';
@@ -3660,41 +3591,39 @@ BasicThemeClass.fileUploaderTileIconActionPaddingSmall = '8px';
 BasicThemeClass.fileUploaderTileIconActionPaddingMedium = '6px';
 BasicThemeClass.fileUploaderTileIconActionPaddingLarge = '8px';
 BasicThemeClass.fileUploaderBorderRadius = '8px';
-BasicThemeClass.fileUploaderBorderColor = 'rgba(0, 0, 0, 0.37)';
 BasicThemeClass.fileUploaderBorderStyle = 'dashed';
-BasicThemeClass.fileUploaderAfterLinkColor = '#858585';
 BasicThemeClass.fileUploaderIconSize = '14px';
-BasicThemeClass.fileUploaderIconColor = '#222222';
-BasicThemeClass.fileUploaderIconHoverColor = '#333';
-BasicThemeClass.fileUploaderTileIconColorBg = 'rgba(0, 0, 0, 0.4)';
-BasicThemeClass.fileUploaderTileIconHoverColorBg = 'rgba(0, 0, 0, 0.48)';
-BasicThemeClass.fileUploaderTileIconActiveColorBg = 'rgba(0, 0, 0, 0.24)';
-BasicThemeClass.fileUploaderTileIconColor = '#ffffff';
-BasicThemeClass.fileUploaderTileIconHoverColor = '#ffffff';
+BasicThemeClass.fileUploaderIconColor = colors.textNeutralPale;
+BasicThemeClass.fileUploaderIconHoverColor = colors.textNeutralHeavy;
+BasicThemeClass.fileUploaderTileIconColorBg = colors.shapeFaintAccent;
+BasicThemeClass.fileUploaderTileIconHoverColorBg = colors.shapeFaintAccentHover;
+BasicThemeClass.fileUploaderTileIconActiveColorBg = colors.shapeFaintAccentPressed;
+BasicThemeClass.fileUploaderTileIconColor = colors.textInvertedAccentHeavy;
+BasicThemeClass.fileUploaderTileIconHoverColor = colors.textInvertedAccentHeavyHover;
 BasicThemeClass.fileUploaderDisabledBgClip = 'padding-box';
-BasicThemeClass.fileUploaderDisabledBorderColor = 'rgba(0, 0, 0, 0.16)';
-BasicThemeClass.fileUploaderErrorBgColor = '#FFECEF';
-BasicThemeClass.fileUploaderErrorBgHoverColor = '#FFDADD';
-BasicThemeClass.fileUploaderWarningBgColor = '#FFF1CA';
-BasicThemeClass.fileUploaderWarningBgHoverColor = '#FAE2AB';
-BasicThemeClass.fileUploaderValidationTextColor = 'rgba(0, 0, 0, 0.87)';
+BasicThemeClass.fileUploaderDisabledBorderColor = colors.lineNeutralFaint;
+BasicThemeClass.fileUploaderErrorBgColor = colors.shapeFaintError;
+BasicThemeClass.fileUploaderErrorBgHoverColor = colors.shapeFaintErrorHover;
+BasicThemeClass.fileUploaderWarningBgColor = colors.shapeFaintWarning;
+BasicThemeClass.fileUploaderWarningBgHoverColor = colors.shapeFaintWarningHover;
+BasicThemeClass.fileUploaderValidationTextColor = colors.textWarningHeavy;
 BasicThemeClass.fileUploaderLinkHoverTextDecoration = 'none';
-BasicThemeClass.fileUploaderHoveredBg = 'rgba(0, 0, 0, 0.06)';
-BasicThemeClass.fileUploaderActiveBg = 'rgba(0, 0, 0, 0.1)';
+BasicThemeClass.fileUploaderHoveredBg = colors.shapeOtherBacklessHover;
+BasicThemeClass.fileUploaderActiveBg = colors.shapeOtherBacklessPressed;
 BasicThemeClass.fileUploaderHoveredBorderColor = 'transparent';
 BasicThemeClass.fileUploaderIconGapSmall = '4px';
 BasicThemeClass.fileUploaderIconGapMedium = '6px';
 BasicThemeClass.fileUploaderIconGapLarge = '8px';
 BasicThemeClass.fileUploaderDragOverShadow = '0px 0px 0px 3px rgb(149, 149, 149), 0px 0px 0px 8px rgba(61, 61, 61, 0.2)';
-BasicThemeClass.fileUploaderFileTypeCodeIconColor = '#B750D1';
-BasicThemeClass.fileUploaderFileTypePictureIconColor = '#51ADFF';
-BasicThemeClass.fileUploaderFileTypePresentationIconColor = '#FC7630';
-BasicThemeClass.fileUploaderFileTypeTableIconColor = '#26AD50';
-BasicThemeClass.fileUploaderFileTypeTextIconColor = '#2291FF';
-BasicThemeClass.fileUploaderFileTypeArchiveIconColor = '#D46421';
-BasicThemeClass.fileUploaderFileTypeFolderIconColor = '#FECA42';
-BasicThemeClass.fileUploaderFileTypeUnknownIconColor = '#ADADAD';
-BasicThemeClass.fileUploaderDisabledColor = 'rgba(0, 0, 0, 0.54)';
+BasicThemeClass.fileUploaderFileTypeCodeIconColor = colors.customizableBoldPurple;
+BasicThemeClass.fileUploaderFileTypePictureIconColor = colors.customizableBoldBlue;
+BasicThemeClass.fileUploaderFileTypePresentationIconColor = colors.customizableBoldOrange;
+BasicThemeClass.fileUploaderFileTypeTableIconColor = colors.customizableBoldGreen;
+BasicThemeClass.fileUploaderFileTypeTextIconColor = colors.customizableBoldBlue;
+BasicThemeClass.fileUploaderFileTypeArchiveIconColor = colors.customizableHeavyOrange;
+BasicThemeClass.fileUploaderFileTypeFolderIconColor = colors.customizableBoldYellow;
+BasicThemeClass.fileUploaderFileTypeUnknownIconColor = colors.textNeutralSoft;
+BasicThemeClass.fileUploaderDisabledColor = colors.textNeutralFaint;
 BasicThemeClass.fileUploaderFileHeightSmall = '32px';
 BasicThemeClass.fileUploaderFileHeightMedium = '40px';
 BasicThemeClass.fileUploaderFileHeightLarge = '48px';
@@ -3724,18 +3653,22 @@ BasicThemeClass.fileUploaderTileTypeIconHeightSmall = '116px';
 BasicThemeClass.fileUploaderTileTypeIconHeightMedium = '126px';
 BasicThemeClass.fileUploaderTileTypeIconHeightLarge = '152px';
 BasicThemeClass.fileUploaderListGap = '8px';
-BasicThemeClass.fileUploaderListSummaryTextGap = '12px';
-BasicThemeClass.clearCrossIconColor = 'rgba(0, 0, 0, 0.54)';
-BasicThemeClass.clearCrossIconHoverColor = 'rgba(0, 0, 0, 0.87)';
-BasicThemeClass.clearCrossIconAlign = 'center';
-BasicThemeClass.closeBtnIconDisabledColor = '#8b8b8b';
-BasicThemeClass.closeBtnIconHoverColor = 'rgba(0, 0, 0, 0.865)';
+BasicThemeClass.fileUploaderListSummaryTextGap = '12px'; //#endregion FileUploader
+//#region ClearCrossIcon
+BasicThemeClass.clearCrossIconWidthSmall = '24px';
+BasicThemeClass.clearCrossIconWidthMedium = '30px';
+BasicThemeClass.clearCrossIconWidthLarge = '36px';
+BasicThemeClass.clearCrossIconColor = colors.textNeutralSoft;
+BasicThemeClass.clearCrossIconHoverColor = colors.textNeutralHeavy;
+BasicThemeClass.clearCrossIconAlign = 'flex-start';
+BasicThemeClass.closeBtnIconDisabledColor = colors.textNeutralFaint;
+BasicThemeClass.closeBtnIconHoverColor = colors.textNeutralHeavy;
 BasicThemeClass.closeBtnIconBorderRadius = '4px';
 BasicThemeClass.miniModalHeaderPaddingBottom = '0';
 BasicThemeClass.miniModalBodyPaddingTop = '16px';
 BasicThemeClass.miniModalBodyPaddingBottom = '0';
-BasicThemeClass.miniModalDescriptionFontSize = 'inherit';
-BasicThemeClass.miniModalDescriptionLineHeight = 'normal';
+BasicThemeClass.miniModalDescriptionFontSize = '16px';
+BasicThemeClass.miniModalDescriptionLineHeight = '22px';
 BasicThemeClass.miniModalHeaderPaddingTop = '32px';
 BasicThemeClass.miniModalActionGap = '8px';
 BasicThemeClass.miniModalCancelIndent = '8px';
@@ -3743,13 +3676,13 @@ BasicThemeClass.miniModalFooterPaddingTop = '24px';
 BasicThemeClass.miniModalFooterPaddingBottom = '32px';
 BasicThemeClass.miniModalTitleMarginTop = '16px';
 BasicThemeClass.miniModalHeightMobile = 'auto';
-BasicThemeClass.miniModalMarginTopMobile = '80px';
-BasicThemeClass.miniModalMarginLeftMobile = '24px';
-BasicThemeClass.miniModalMarginRightMobile = '24px';
+BasicThemeClass.miniModalMarginTopMobile = '16px';
+BasicThemeClass.miniModalMarginLeftMobile = '16px';
+BasicThemeClass.miniModalMarginRightMobile = '16px';
 BasicThemeClass.miniModalFooterPaddingMobile = '24px 16px 16px';
 BasicThemeClass.miniModalHeaderPaddingMobile = '32px 16px 0';
 BasicThemeClass.miniModalBodyPaddingMobile = '16px 16px 0';
-BasicThemeClass.validationsTextColorWarning = '#ef8b17';
+BasicThemeClass.validationsTextColorWarning = colors.textWarningHeavy;
 export var BasicTheme = createTheme({
   themeClass: BasicThemeClass
 });