@skbkontur/react-ui 0.0.0-7feb61cdde → 0.0.0-80c5917afc

package/internal/themes/DefaultTheme/DefaultTheme.js

@@ -62,64 +62,9 @@ export var DefaultTheme = /*#__PURE__*/function () {
       return this.textColorDisabled;
     }
   }, {
-    key: "linkLineBorderBottomColor",
+    key: "linkLineHoverBorderBottomStyle",
     get: function get() {
-      return ColorFunctions.fade(this.linkColor, 0.5);
-    }
-  }, {
-    key: "linkLineHoverBorderBottomColor",
-    get: function get() {
-      return this.linkHoverColor;
-    }
-  }, {
-    key: "linkLineActiveBorderBottomColor",
-    get: function get() {
-      return this.linkActiveColor;
-    }
-  }, {
-    key: "linkLineBorderBottomColorSuccess",
-    get: function get() {
-      return ColorFunctions.fade(this.linkSuccessColor, 0.5);
-    }
-  }, {
-    key: "linkLineHoverBorderBottomColorSuccess",
-    get: function get() {
-      return this.linkSuccessHoverColor;
-    }
-  }, {
-    key: "linkLineActiveBorderBottomColorSuccess",
-    get: function get() {
-      return this.linkSuccessActiveColor;
-    }
-  }, {
-    key: "linkLineBorderBottomColorDanger",
-    get: function get() {
-      return ColorFunctions.fade(this.linkDangerColor, 0.5);
-    }
-  }, {
-    key: "linkLineHoverBorderBottomColorDanger",
-    get: function get() {
-      return this.linkDangerHoverColor;
-    }
-  }, {
-    key: "linkLineActiveBorderBottomColorDanger",
-    get: function get() {
-      return this.linkDangerActiveColor;
-    }
-  }, {
-    key: "linkLineBorderBottomColorGrayed",
-    get: function get() {
-      return ColorFunctions.fade(this.linkGrayedColor, 0.5);
-    }
-  }, {
-    key: "linkLineHoverBorderBottomColorGrayed",
-    get: function get() {
-      return this.linkGrayedHoverColor;
-    }
-  }, {
-    key: "linkLineActiveBorderBottomColorGrayed",
-    get: function get() {
-      return this.linkGrayedActiveColor;
+      return this.linkLineBorderBottomStyle;
     }
   }, {
     key: "tokenTextColorDisabled",
@@ -483,19 +428,14 @@ export var DefaultTheme = /*#__PURE__*/function () {
       return this.linkHoverTextDecoration;
     }
   }, {
-    key: "btnLinkLineBorderBottomColor",
+    key: "btnLinkHoverLineBorderBottomStyle",
     get: function get() {
-      return this.linkLineBorderBottomColor;
+      return this.btnLinkLineBorderBottomStyle;
     }
   }, {
-    key: "btnLinkLineHoverBorderBottomColor",
+    key: "btnLinkLineBorderBottomOpacity",
     get: function get() {
-      return this.linkLineHoverBorderBottomColor;
-    }
-  }, {
-    key: "btnLinkLineActiveBorderBottomColor",
-    get: function get() {
-      return this.linkLineActiveBorderBottomColor;
+      return this.linkLineBorderBottomOpacity;
     }
   }, {
     key: "btnLinkIconMarginRight",
@@ -557,6 +497,11 @@ export var DefaultTheme = /*#__PURE__*/function () {
     get: function get() {
       return this.btnDefaultTextColor;
     }
+  }, {
+    key: "btnTextHoverBorderColor",
+    get: function get() {
+      return this.btnTextHoverBg;
+    }
   }, {
     key: "selectDefaultBg",
     get: //#endregion
@@ -683,9 +628,12 @@ export var DefaultTheme = /*#__PURE__*/function () {
     key: "selectMenuOffsetY",
     get: function get() {
       return this.menuOffsetY;
-    } //#endregion
-    //#region Tooltip
-
+    }
+  }, {
+    key: "selectBorderColorHover",
+    get: function get() {
+      return this.btnDefaultHoverBorderColor;
+    }
   }, {
     key: "tooltipTextColor",
     get: function get() {
@@ -992,10 +940,14 @@ export var DefaultTheme = /*#__PURE__*/function () {
     get: function get() {
       return this.controlLineHeightSmall;
     }
+  }, {
+    key: "dropdownMenuHoverBorderColor",
+    get: function get() {
+      return this.btnDefaultHoverBorderColor;
+    }
   }, {
     key: "dropdownMenuHoverBg",
-    get: //deprecated
-    function get() {
+    get: function get() {
       //deprecated
       return this.bgActive;
     }
@@ -1008,12 +960,12 @@ export var DefaultTheme = /*#__PURE__*/function () {
     key: "dropdownMenuMenuOffsetY",
     get: function get() {
       return this.menuOffsetY;
-    } //#endregion
-    //#region Menu
-
+    }
   }, {
     key: "menuBgDefault",
-    get: function get() {
+    get: //#endregion
+    //#region Menu
+    function get() {
       return this.bgSecondary;
     }
   }, {
@@ -1138,14 +1090,52 @@ export var DefaultTheme = /*#__PURE__*/function () {
     key: "toggleFontSize",
     get: //#endregion
     //#region Toggle
+
+    /**
+     * @deprecated use toggleFontSizeSmall
+     */
     function get() {
       return this.fontSizeSmall;
     }
+    /**
+     * @deprecated use toggleLineHeightSmall
+     */
+
   }, {
     key: "toggleLineHeight",
     get: function get() {
       return this.controlLineHeightSmall;
     }
+  }, {
+    key: "toggleLineHeightSmall",
+    get: function get() {
+      return this.toggleLineHeight;
+    }
+  }, {
+    key: "toggleLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "toggleLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "toggleFontSizeSmall",
+    get: function get() {
+      return this.toggleFontSize;
+    }
+  }, {
+    key: "toggleFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "toggleFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
   }, {
     key: "toggleTextColor",
     get: function get() {
@@ -1153,16 +1143,74 @@ export var DefaultTheme = /*#__PURE__*/function () {
     }
   }, {
     key: "toggleHandleBorderRadius",
+    get:
+    /**
+     * @deprecated use toggleHandleBorderRadiusSmall
+     */
+    function get() {
+      var height = parseInt(this.toggleHeightSmall, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      var handleSize = height - 2 * borderWidth;
+      return handleSize / 2 + "px";
+    }
+  }, {
+    key: "toggleHandleBorderRadiusSmall",
     get: function get() {
-      var height = parseInt(this.toggleHeight, 10) || 0;
+      return this.toggleHandleBorderRadius;
+    }
+  }, {
+    key: "toggleHandleBorderRadiusMedium",
+    get: function get() {
+      var height = parseInt(this.toggleHeightMedium, 10) || 0;
       var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
       var handleSize = height - 2 * borderWidth;
       return handleSize / 2 + "px";
     }
+  }, {
+    key: "toggleHandleBorderRadiusLarge",
+    get: function get() {
+      var height = parseInt(this.toggleHeightLarge, 10) || 0;
+      var borderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      var handleSize = height - 2 * borderWidth;
+      return handleSize / 2 + "px";
+    }
+    /**
+     * @deprecated use toggleHeightSmall
+     */
+
+  }, {
+    key: "toggleHeightSmall",
+    get: function get() {
+      return this.toggleHeight;
+    }
+  }, {
+    key: "toggleWidthSmall",
+    get: function get() {
+      return this.toggleWidth;
+    }
   }, {
     key: "toggleBorderRadius",
+    get:
+    /**
+     * @deprecated use toggleBorderRadiusSmall
+     */
+    function get() {
+      return "calc(" + this.toggleHeightSmall + " * 0.5)";
+    }
+  }, {
+    key: "toggleBorderRadiusSmall",
+    get: function get() {
+      return this.toggleBorderRadius;
+    }
+  }, {
+    key: "toggleBorderRadiusMedium",
     get: function get() {
-      return "calc(" + this.toggleHeight + " * 0.5)";
+      return "calc(" + this.toggleHeightMedium + " * 0.5)";
+    }
+  }, {
+    key: "toggleBorderRadiusLarge",
+    get: function get() {
+      return "calc(" + this.toggleHeightLarge + " * 0.5)";
     }
     /**
      * @deprecated use toggleHandleBg
@@ -1195,10 +1243,33 @@ export var DefaultTheme = /*#__PURE__*/function () {
     get: function get() {
       return this.toggleBorderColor;
     }
+    /**
+     * @deprecated use toggleHandleSizeSmall
+     */
+
   }, {
     key: "toggleHandleSize",
     get: function get() {
-      var toggleHeight = parseInt(this.toggleHeight, 10) || 0;
+      var toggleHeight = parseInt(this.toggleHeightSmall, 10) || 0;
+      var toggleBorderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      return toggleHeight - 2 * toggleBorderWidth + "px";
+    }
+  }, {
+    key: "toggleHandleSizeSmall",
+    get: function get() {
+      return this.toggleHandleSize;
+    }
+  }, {
+    key: "toggleHandleSizeMedium",
+    get: function get() {
+      var toggleHeight = parseInt(this.toggleHeightMedium, 10) || 0;
+      var toggleBorderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
+      return toggleHeight - 2 * toggleBorderWidth + "px";
+    }
+  }, {
+    key: "toggleHandleSizeLarge",
+    get: function get() {
+      var toggleHeight = parseInt(this.toggleHeightLarge, 10) || 0;
       var toggleBorderWidth = parseInt(this.toggleBorderWidth, 10) || 0;
       return toggleHeight - 2 * toggleBorderWidth + "px";
     }
@@ -1422,19 +1493,84 @@ export var DefaultTheme = /*#__PURE__*/function () {
     key: "checkboxFontSize",
     get: //#endregion
     //#region Checkbox
+
+    /**
+     * @ deprecated use checkboxFontSizeSmall
+     */
     function get() {
       return this.fontSizeSmall;
     }
+  }, {
+    key: "checkboxFontSizeSmall",
+    get: function get() {
+      return this.checkboxFontSize;
+    }
+  }, {
+    key: "checkboxFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "checkboxFontSizeLarge",
+    get: function get() {
+      return this.fontSizeLarge;
+    }
+    /**
+     * @ deprecated use checkboxLineHeightSmall
+     */
+
   }, {
     key: "checkboxLineHeight",
     get: function get() {
       return this.controlLineHeightSmall;
     }
   }, {
-    key: "checkboxPaddingY",
+    key: "checkboxLineHeightSmall",
     get: function get() {
+      return this.checkboxLineHeight;
+    }
+  }, {
+    key: "checkboxLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "checkboxLineHeightLarge",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+    /**
+     * @ deprecated use checkboxBoxSizeSmall
+     */
+
+  }, {
+    key: "checkboxPaddingY",
+    get:
+    /**
+     * @ deprecated use checkboxPaddingYSmall
+     */
+    function get() {
       var controlHeight = parseInt(this.controlHeightSmall, 10) || 0;
-      var lineHeight = parseInt(this.checkboxLineHeight, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightSmall, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "checkboxPaddingYSmall",
+    get: function get() {
+      return this.checkboxPaddingY;
+    }
+  }, {
+    key: "checkboxPaddingYMedium",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightMedium, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightMedium, 10) || 0;
+      return (controlHeight - lineHeight) / 2 + "px";
+    }
+  }, {
+    key: "checkboxPaddingYLarge",
+    get: function get() {
+      var controlHeight = parseInt(this.controlHeightLarge, 10) || 0;
+      var lineHeight = parseInt(this.checkboxLineHeightLarge, 10) || 0;
       return (controlHeight - lineHeight) / 2 + "px";
     }
   }, {
@@ -1760,25 +1896,99 @@ export var DefaultTheme = /*#__PURE__*/function () {
     key: "tabFontSize",
     get: //#endregion
     //#region Tabs
+
+    /**
+     * @deprecated use tabFontSizeLarge
+     */
     function get() {
       return this.fontSizeLarge;
     }
+  }, {
+    key: "tabFontSizeSmall",
+    get: function get() {
+      return this.fontSizeSmall;
+    }
+  }, {
+    key: "tabFontSizeMedium",
+    get: function get() {
+      return this.fontSizeMedium;
+    }
+  }, {
+    key: "tabFontSizeLarge",
+    get: function get() {
+      return this.tabFontSize;
+    }
+    /**
+     * @deprecated use tabLineHeightLarge
+     */
+
+  }, {
+    key: "tabLineHeight",
+    get: function get() {
+      return this.controlLineHeightLarge;
+    }
+  }, {
+    key: "tabLineHeightSmall",
+    get: function get() {
+      return this.controlLineHeightSmall;
+    }
+  }, {
+    key: "tabLineHeightMedium",
+    get: function get() {
+      return this.controlLineHeightMedium;
+    }
+  }, {
+    key: "tabLineHeightLarge",
+    get: function get() {
+      return this.tabLineHeight;
+    }
+    /**
+     * @deprecated use tabPaddingXLarge
+     */
+
+  }, {
+    key: "tabPaddingXLarge",
+    get: function get() {
+      return this.tabPaddingX;
+    }
+    /**
+     * @deprecated use tabPaddingXLarge
+     */
+
   }, {
     key: "tabsMarginX",
     get: function get() {
       return this.tabPaddingX;
     }
+    /**
+     * @deprecated use tabPaddingYLarge
+     */
+
   }, {
     key: "tabPaddingY",
     get: function get() {
-      var paddingY = parseInt(this.controlPaddingYLarge, 10) || 0;
-      var borderWidth = parseInt(this.controlBorderWidth, 10) || 0;
+      var paddingY = parseInt(this.controlPaddingYLarge);
+      var borderWidth = parseInt(this.controlBorderWidth);
       return paddingY + borderWidth + "px";
     }
   }, {
-    key: "tabLineHeight",
+    key: "tabPaddingYSmall",
     get: function get() {
-      return this.controlLineHeightLarge;
+      var paddingY = parseInt(this.controlPaddingYSmall);
+      var borderWidth = parseInt(this.controlBorderWidth);
+      return paddingY + borderWidth + "px";
+    }
+  }, {
+    key: "tabPaddingYMedium",
+    get: function get() {
+      var paddingY = parseInt(this.controlPaddingYMedium);
+      var borderWidth = parseInt(this.controlBorderWidth);
+      return paddingY + borderWidth + "px";
+    }
+  }, {
+    key: "tabPaddingYLarge",
+    get: function get() {
+      return this.tabPaddingY;
     }
   }, {
     key: "tabOutlineWidth",
@@ -2239,6 +2449,8 @@ DefaultTheme.controlHeightSmall = '32px';
 DefaultTheme.controlHeightMedium = '40px';
 DefaultTheme.controlHeightLarge = '48px';
 DefaultTheme.mobileMediaQuery = '(max-width: 576px) and (hover: none) and (pointer: coarse)';
+DefaultTheme.transitionDuration = '100ms';
+DefaultTheme.transitionTimingFunction = 'cubic-bezier(0.5, 1, 0.89, 1)';
 DefaultTheme.linkColor = '#1874cf';
 DefaultTheme.linkActiveColor = '#1260ae';
 DefaultTheme.linkHoverTextDecoration = 'underline';
@@ -2253,6 +2465,7 @@ DefaultTheme.linkButtonLineHeight = '34px';
 DefaultTheme.linkButtonPaddingX = '10px';
 DefaultTheme.linkLineBorderBottomStyle = '';
 DefaultTheme.linkLineBorderBottomWidth = '0px';
+DefaultTheme.linkLineBorderBottomOpacity = '0.5';
 DefaultTheme.tokenDisabledBg = 'rgba(0, 0, 0, 0.05)';
 DefaultTheme.tokenMarginY = '2px';
 DefaultTheme.tokenMarginX = '4px';
@@ -2291,6 +2504,7 @@ DefaultTheme.btnArrowBgImageActive = 'none';
 DefaultTheme.btnArrowBgImageChecked = 'none';
 DefaultTheme.btnLinkBorderRadius = '2px';
 DefaultTheme.btnFocusShadowWidth = '2px';
+DefaultTheme.btnBorderColorTransition = '';
 DefaultTheme.btnDisabledBorderColor = 'rgba(0, 0, 0, 0.05)';
 DefaultTheme.btnCheckedBg = '#7e7e7e';
 DefaultTheme.btnCheckedDisabledBg = '#a0a0a0';
@@ -2394,7 +2608,6 @@ DefaultTheme.btnBacklessActiveBg = 'rgba(0, 0, 0, 0.1) !important';
 DefaultTheme.btnTextBg = 'transparent';
 DefaultTheme.btnTextHoverBg = 'rgba(0, 0, 0, 0.04)';
 DefaultTheme.btnTextActiveBg = 'rgba(0, 0, 0, 0.1)';
-DefaultTheme.btnTextHoverBorderColor = 'transparent';
 DefaultTheme.btnWithIconPaddingLeftSmall = '';
 DefaultTheme.btnWithIconPaddingLeftMedium = '';
 DefaultTheme.btnWithIconPaddingLeftLarge = '';
@@ -2409,6 +2622,8 @@ DefaultTheme.selectIconGapMedium = '8px';
 DefaultTheme.selectPaddingXLarge = '15px';
 DefaultTheme.selectIconGapLarge = '12px';
 DefaultTheme.selectRootWidthMobile = 'auto';
+DefaultTheme.mobileSelectMaxWidth = '100%';
+DefaultTheme.selectBorderColorTransition = "box-shadow " + DefaultTheme.transitionDuration + " " + DefaultTheme.transitionTimingFunction + ";";
 DefaultTheme.tooltipPaddingY = '16px';
 DefaultTheme.tooltipPaddingX = '16px';
 DefaultTheme.tooltipCloseBtnPadding = '8px';
@@ -2602,12 +2817,17 @@ DefaultTheme.toastCloseColor = 'rgba(255, 255, 255, 0.6)';
 DefaultTheme.toastCloseHoverColor = 'white';
 DefaultTheme.toastCloseSize = '8px';
 DefaultTheme.dropdownMenuSelectedBg = '#f1f1f1';
+DefaultTheme.dropdownMenuBorderColorTransition = '';
+DefaultTheme.dropdownMenuMenuBoxSizing = 'content-box';
 DefaultTheme.menuBorder = 'none';
 DefaultTheme.menuShadow = '0 4px 12px rgba(0, 0, 0, 0.16)';
-DefaultTheme.menuPaddingY = '4px';
+DefaultTheme.menuPaddingY = '0px';
+DefaultTheme.menuLegacyPaddingY = '5px';
+DefaultTheme.menuScrollContainerContentWrapperPaddingY = '4px';
 DefaultTheme.mobileMenuPaddingY = '0px';
+DefaultTheme.mobileMenuScrollContainerContentWrapperPaddingY = '0px';
 DefaultTheme.menuPaddingX = '0px';
-DefaultTheme.mobileMenuPaddingX = '0px';
+DefaultTheme.mobileMenuPaddingX = '8px';
 DefaultTheme.menuOffsetY = '0px';
 DefaultTheme.menuBoxSizing = 'content-box';
 DefaultTheme.menuItemIconWidth = '16px';
@@ -2641,6 +2861,10 @@ DefaultTheme.mobileMenuSeparatorMarginX = '24px';
 DefaultTheme.toggleHandleActiveWidthIncrement = '4px';
 DefaultTheme.toggleHeight = '20px';
 DefaultTheme.toggleWidth = '32px';
+DefaultTheme.toggleHeightMedium = '22px';
+DefaultTheme.toggleWidthMedium = '34px';
+DefaultTheme.toggleHeightLarge = '24px';
+DefaultTheme.toggleWidthLarge = '36px';
 DefaultTheme.toggleBg = '#fff';
 DefaultTheme.toggleCheckedBg = '#fff';
 DefaultTheme.toggleDisabledHandleBg = '#fff';
@@ -2652,7 +2876,7 @@ DefaultTheme.toggleBgChecked = '#1874cf';
 DefaultTheme.toggleBorderColor = 'rgba(0, 0, 0, 0.16)';
 DefaultTheme.toggleBgFocus = 'linear-gradient(-180deg, #f1f1f1, #dedede)';
 DefaultTheme.toggleBgActive = '#e5e5e5';
-DefaultTheme.toggleCaptionGap = '10px';
+DefaultTheme.toggleCaptionGap = '8px';
 DefaultTheme.toggleButtonOffsetY = '0px';
 DefaultTheme.toggleContainerBg = '';
 DefaultTheme.toggleContainerBgHover = '';
@@ -2687,6 +2911,7 @@ DefaultTheme.popupPinOffsetX = '16px';
 DefaultTheme.popupPinOffsetY = '16px';
 DefaultTheme.popupMargin = '10px';
 DefaultTheme.popupPinSize = '8px';
+DefaultTheme.popupMenuMenuOffsetY = '0px';
 DefaultTheme.inputShadow = 'none';
 DefaultTheme.inputBg = 'white';
 DefaultTheme.inputIconColor = '#a9a9a9';
@@ -2709,6 +2934,9 @@ DefaultTheme.inputDisabledBackgroundClip = '';
 DefaultTheme.inputBorderTopColor = 'rgba(0, 0, 0, 0.15)';
 DefaultTheme.inputColorScheme = 'light';
 DefaultTheme.checkboxBoxSize = '16px';
+DefaultTheme.checkboxBoxSizeSmall = '16px';
+DefaultTheme.checkboxBoxSizeMedium = '20px';
+DefaultTheme.checkboxBoxSizeLarge = '24px';
 DefaultTheme.checkboxCaptionGap = '8px';
 DefaultTheme.checkboxBoxOffsetY = '1px';
 DefaultTheme.checkboxBgStart = '#fdfdfd';
@@ -2742,6 +2970,8 @@ DefaultTheme.radioBorderWidthCompensation = '0px';
 DefaultTheme.radioCircleOffsetY = '1px';
 DefaultTheme.radioGroupLegacyItemGap = '0px';
 DefaultTheme.tabPaddingX = '12px';
+DefaultTheme.tabPaddingXSmall = '8px';
+DefaultTheme.tabPaddingXMedium = '10px';
 DefaultTheme.tabBorderWidth = '2px';
 DefaultTheme.tabIndicatorBorderRadius = '0px';
 DefaultTheme.spinnerCaptionGapSmall = '6px';
@@ -2766,6 +2996,8 @@ DefaultTheme.scrollContainerScrollBarSize = '4px';
 DefaultTheme.scrollContainerScrollBarHoverSize = '10px';
 DefaultTheme.scrollContainerScrollBarColor = 'rgba(183, 183, 183, 0.7)';
 DefaultTheme.scrollContainerScrollBarInvertColor = 'rgba(255, 255, 255, 0.5)';
+DefaultTheme.scrollContainerScrollBarOffsetY = '4px';
+DefaultTheme.dropdownMenuScrollContainerScrollBarOffsetY = '0px';
 DefaultTheme.passwordInputVisibilityIconColor = '#000';
 DefaultTheme.passwordInputVisibilityIconOpacity = '0.6';
 DefaultTheme.passwordInputVisibilityIconHoverColor = '#000';