@alfalab/core-components 47.24.0 → 47.25.0

package/icon-button/cssm/vars.css

@@ -0,0 +1,108 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root {
+} :root {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+    /* misc */
+
+    /* border-radius desktop */
+
+    /* primary */
+
+    /* accent */
+
+    /* secondary */
+
+    /* tertiary */
+
+    /* outlined */
+
+    /* ghost */
+
+    /* text */
+
+    /* link */
+
+    /* transparent */
+
+    /* loader */
+
+    /* primary inverted */
+
+    /* accent inverted */
+
+    /* secondary inverted */
+
+    /* tertiary inverted */
+
+    /* outlined inverted */
+
+    /* ghost inverted */
+
+    /* text inverted */
+
+    /* link inverted */
+
+    /* transparent inverted */
+
+    /* loader inverted */
+
+    /* border-radius mobile */
+
+    /* primary mobile */
+
+    /* primary inverted mobile */
+
+    /* secondary mobile */
+
+    /* secondary inverted mobile */
+
+    /* tertiary mobile */
+
+    /* tertiary inverted mobile */
+
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
+    /* link mobile */
+
+    /* link inverted mobile */
+
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
+    /* ghost mobile */
+
+    /* ghost mobile inverted */
+
+    /* text mobile */
+
+    /* text mobile inverted */
+
+    /* loader mobile */
+} :root {
+
+    /* border */
+
+    /*
+        в компоненте жестко зашит размер для кнопки size='s'
+        поэтому изначальный радиус можно указать вне компонента Button для последующей темизации (так как радиус внутри Button меняться не будет)
+    */
+}

package/icon-button/default.css

@@ -66,76 +66,76 @@
     --icon-button-negative-hover-color: var(--color-light-status-negative-hover);
     --icon-button-negative-active-color: var(--color-light-status-negative-press);
     --icon-button-negative-disabled-color: var(--color-light-neutral-translucent-300);
-} .cc-icon-button.icon-button__primary_i7esp {
+} .cc-icon-button.icon-button__primary_1ons0 {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_i7esp:hover {
+    } .cc-icon-button.icon-button__primary_1ons0:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_i7esp:active {
+        } .cc-icon-button.icon-button__primary_1ons0:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_i7esp {
+        } .cc-icon-button.icon-button__secondary_1ons0 {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_i7esp:hover {
+    } .cc-icon-button.icon-button__secondary_1ons0:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_i7esp:active {
+        } .cc-icon-button.icon-button__secondary_1ons0:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_i7esp {
+        } .cc-icon-button.icon-button__transparent_1ons0 {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_i7esp:hover {
+    } .cc-icon-button.icon-button__transparent_1ons0:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_i7esp:active {
+        } .cc-icon-button.icon-button__transparent_1ons0:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_i7esp {
+        } .cc-icon-button.icon-button__negative_1ons0 {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_i7esp:hover {
+    } .cc-icon-button.icon-button__negative_1ons0:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_i7esp:active {
+        } .cc-icon-button.icon-button__negative_1ons0:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_i7esp {
+        } .cc-icon-button.icon-button__tertiary_1ons0 {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_i7esp:hover {
+    } .cc-icon-button.icon-button__tertiary_1ons0:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_i7esp:active {
+        } .cc-icon-button.icon-button__tertiary_1ons0:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0 {
             color: var(--color-light-text-primary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0 {
             color: var(--color-light-text-secondary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0 {
             color: var(--color-light-text-negative)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0 {
             color: var(--color-light-text-tertiary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__primary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__primary_1ons0 {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__primary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__primary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__secondary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__secondary_1ons0 {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__secondary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__secondary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__negative_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__negative_1ons0 {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__negative_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__negative_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__tertiary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__tertiary_1ons0 {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__tertiary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__tertiary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-tertiary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__transparentBg_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__transparentBg_1ons0 {
             background: transparent;
         }

package/icon-button/esm/Component.js

@@ -2,14 +2,15 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../button/esm';
+import { transformSize } from './helpers/transformSize.js';
 
-var defaultColors = {"primary":"icon-button__primary_i7esp","secondary":"icon-button__secondary_i7esp","transparent":"icon-button__transparent_i7esp","negative":"icon-button__negative_i7esp","tertiary":"icon-button__tertiary_i7esp","transparentBg":"icon-button__transparentBg_i7esp","component":"icon-button__component_i7esp","loader":"icon-button__loader_i7esp"};
+var defaultColors = {"primary":"icon-button__primary_1ons0","secondary":"icon-button__secondary_1ons0","transparent":"icon-button__transparent_1ons0","negative":"icon-button__negative_1ons0","tertiary":"icon-button__tertiary_1ons0","transparentBg":"icon-button__transparentBg_1ons0","component":"icon-button__component_1ons0","loader":"icon-button__loader_1ons0"};
 require('./default.css');
 
-var styles = {"size-24":"icon-button__size-24_1qkch","size-32":"icon-button__size-32_1qkch","size-40":"icon-button__size-40_1qkch","size-48":"icon-button__size-48_1qkch","size-56":"icon-button__size-56_1qkch","iconWrapper":"icon-button__iconWrapper_1qkch","center":"icon-button__center_1qkch","left":"icon-button__left_1qkch","right":"icon-button__right_1qkch","icon":"icon-button__icon_1qkch"};
+var styles = {"border-24":"icon-button__border-24_23x2m","border-32":"icon-button__border-32_23x2m","border-40":"icon-button__border-40_23x2m","border-48":"icon-button__border-48_23x2m","border-56":"icon-button__border-56_23x2m","size-24":"icon-button__size-24_23x2m","size-32":"icon-button__size-32_23x2m","size-40":"icon-button__size-40_23x2m","size-48":"icon-button__size-48_23x2m","size-56":"icon-button__size-56_23x2m","iconWrapper":"icon-button__iconWrapper_23x2m","center":"icon-button__center_23x2m","left":"icon-button__left_23x2m","right":"icon-button__right_23x2m","icon":"icon-button__icon_23x2m"};
 require('./index.css');
 
-var invertedColors = {"primary":"icon-button__primary_ird74","secondary":"icon-button__secondary_ird74","transparent":"icon-button__transparent_ird74","negative":"icon-button__negative_ird74","tertiary":"icon-button__tertiary_ird74","transparentBg":"icon-button__transparentBg_ird74","component":"icon-button__component_ird74","loader":"icon-button__loader_ird74"};
+var invertedColors = {"primary":"icon-button__primary_1p7qe","secondary":"icon-button__secondary_1p7qe","transparent":"icon-button__transparent_1p7qe","negative":"icon-button__negative_1p7qe","tertiary":"icon-button__tertiary_1p7qe","transparentBg":"icon-button__transparentBg_1p7qe","component":"icon-button__component_1p7qe","loader":"icon-button__loader_1p7qe"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -29,7 +30,7 @@ var SIZE_TO_CLASSNAME_MAP = {
 var IconButton = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, Icon = _a.icon, _c = _a.view, view = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 48 : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.alignIcon, alignIcon = _f === void 0 ? 'center' : _f, _g = _a.transparentBg, transparentBg = _g === void 0 ? false : _g, restProps = __rest(_a, ["className", "icon", "view", "size", "colors", "alignIcon", "transparentBg"]);
-    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, (_b = {},
+    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'text', className: cn('cc-icon-button', className, colorStyles[colors][view], colorStyles[colors].component, styles["border-".concat(transformSize(size))], (_b = {},
             _b[colorStyles[colors].loader] = restProps.loading,
             _b[colorStyles[colors].transparentBg] = transparentBg,
             _b)), size: 's' }),

package/icon-button/esm/default.css

@@ -66,76 +66,76 @@
     --icon-button-negative-hover-color: var(--color-light-status-negative-hover);
     --icon-button-negative-active-color: var(--color-light-status-negative-press);
     --icon-button-negative-disabled-color: var(--color-light-neutral-translucent-300);
-} .cc-icon-button.icon-button__primary_i7esp {
+} .cc-icon-button.icon-button__primary_1ons0 {
         color: var(--icon-button-primary-base-color)
-    } .cc-icon-button.icon-button__primary_i7esp:hover {
+    } .cc-icon-button.icon-button__primary_1ons0:hover {
             color: var(--icon-button-primary-hover-color);
-        } .cc-icon-button.icon-button__primary_i7esp:active {
+        } .cc-icon-button.icon-button__primary_1ons0:active {
             color: var(--icon-button-primary-active-color);
-        } .cc-icon-button.icon-button__secondary_i7esp {
+        } .cc-icon-button.icon-button__secondary_1ons0 {
         color: var(--icon-button-secondary-base-color)
-    } .cc-icon-button.icon-button__secondary_i7esp:hover {
+    } .cc-icon-button.icon-button__secondary_1ons0:hover {
             color: var(--icon-button-secondary-hover-color);
-        } .cc-icon-button.icon-button__secondary_i7esp:active {
+        } .cc-icon-button.icon-button__secondary_1ons0:active {
             color: var(--icon-button-secondary-active-color);
-        } .cc-icon-button.icon-button__transparent_i7esp {
+        } .cc-icon-button.icon-button__transparent_1ons0 {
         color: var(--icon-button-transparent-base-color)
-    } .cc-icon-button.icon-button__transparent_i7esp:hover {
+    } .cc-icon-button.icon-button__transparent_1ons0:hover {
             color: var(--icon-button-transparent-hover-color);
-        } .cc-icon-button.icon-button__transparent_i7esp:active {
+        } .cc-icon-button.icon-button__transparent_1ons0:active {
             color: var(--icon-button-transparent-active-color);
-        } .cc-icon-button.icon-button__negative_i7esp {
+        } .cc-icon-button.icon-button__negative_1ons0 {
         color: var(--icon-button-negative-base-color)
-    } .cc-icon-button.icon-button__negative_i7esp:hover {
+    } .cc-icon-button.icon-button__negative_1ons0:hover {
             color: var(--icon-button-negative-hover-color);
-        } .cc-icon-button.icon-button__negative_i7esp:active {
+        } .cc-icon-button.icon-button__negative_1ons0:active {
             color: var(--icon-button-negative-active-color);
-        } .cc-icon-button.icon-button__tertiary_i7esp {
+        } .cc-icon-button.icon-button__tertiary_1ons0 {
         color: var(--icon-button-tertiary-base-color)
-    } .cc-icon-button.icon-button__tertiary_i7esp:hover {
+    } .cc-icon-button.icon-button__tertiary_1ons0:hover {
             color: var(--icon-button-tertiary-hover-color);
-        } .cc-icon-button.icon-button__tertiary_i7esp:active {
+        } .cc-icon-button.icon-button__tertiary_1ons0:active {
             color: var(--icon-button-tertiary-active-color);
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0 {
             color: var(--color-light-text-primary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__primary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__primary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0 {
             color: var(--color-light-text-secondary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__secondary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__secondary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0 {
             color: var(--color-light-text-negative)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__negative_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__negative_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0 {
             color: var(--color-light-text-tertiary)
-        } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp:hover {
+        } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0:hover {
                 background: var(--color-light-transparent-default-hover);
-            } .cc-icon-button.icon-button__transparentBg_i7esp.icon-button__tertiary_i7esp:active {
+            } .cc-icon-button.icon-button__transparentBg_1ons0.icon-button__tertiary_1ons0:active {
                 background: var(--color-light-transparent-default-press);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__primary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__primary_1ons0 {
             color: var(--icon-button-primary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__primary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__primary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-primary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__secondary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__secondary_1ons0 {
             color: var(--icon-button-secondary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__secondary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__secondary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-secondary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__negative_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__negative_1ons0 {
             color: var(--icon-button-negative-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__negative_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__negative_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-negative-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__tertiary_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__tertiary_1ons0 {
             color: var(--icon-button-tertiary-disabled-color)
-        } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__tertiary_i7esp.icon-button__loader_i7esp {
+        } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__tertiary_1ons0.icon-button__loader_1ons0 {
                 color: var(--icon-button-tertiary-base-color);
-            } .cc-icon-button.icon-button__component_i7esp:disabled.icon-button__transparentBg_i7esp {
+            } .cc-icon-button.icon-button__component_1ons0:disabled.icon-button__transparentBg_1ons0 {
             background: transparent;
         }

package/icon-button/esm/helpers/transformSize.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from "../index";
+declare const transformSize: (size?: IconButtonProps['size']) => 24 | 48 | 32 | 40 | 56;
+export { transformSize };

package/icon-button/esm/helpers/transformSize.js

@@ -0,0 +1,15 @@
+var transformSize = function (size) {
+    if (size === void 0) { size = 48; }
+    switch (size) {
+        case 'xxs':
+            return 24;
+        case 'xs':
+            return 32;
+        case 's':
+            return 40;
+        default:
+            return size;
+    }
+};
+
+export { transformSize };

package/icon-button/esm/index.css

@@ -10,9 +10,11 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --border-radius-12: var(--border-radius-l);
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
@@ -20,39 +22,142 @@
 } :root {
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ :root {
+    /* misc */
+
+    /* border-radius desktop */
+
+    /* primary */
+
+    /* accent */
+
+    /* secondary */
+
+    /* tertiary */
+
+    /* outlined */
+
+    /* ghost */
+
+    /* text */
+
+    /* link */
+
+    /* transparent */
+
+    /* loader */
+
+    /* primary inverted */
+
+    /* accent inverted */
+
+    /* secondary inverted */
+
+    /* tertiary inverted */
+
+    /* outlined inverted */
+
+    /* ghost inverted */
+
+    /* text inverted */
+
+    /* link inverted */
+
+    /* transparent inverted */
+
+    /* loader inverted */
+
+    /* border-radius mobile */
+    --button-s-size-mobile-border-radius: var(--border-radius-12);
+
+    /* primary mobile */
+
+    /* primary inverted mobile */
+
+    /* secondary mobile */
+
+    /* secondary inverted mobile */
+
+    /* tertiary mobile */
+
+    /* tertiary inverted mobile */
+
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
+    /* link mobile */
+
+    /* link inverted mobile */
+
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
+    /* ghost mobile */
+
+    /* ghost mobile inverted */
+
+    /* text mobile */
+
+    /* text mobile inverted */
+
+    /* loader mobile */
+} :root {
     --icon-button-xxs-size: 24px;
     --icon-button-xs-size: 32px;
     --icon-button-40-size: 40px;
     --icon-button-s-size: 48px;
     --icon-button-56-size: 56px;
-} .icon-button__size-24_1qkch {
+
+    /* border */
+
+    /*
+        в компоненте жестко зашит размер для кнопки size='s'
+        поэтому изначальный радиус можно указать вне компонента Button для последующей темизации (так как радиус внутри Button меняться не будет)
+    */
+    --icon-button-24-size-border-radius: var(--button-s-size-mobile-border-radius);
+    --icon-button-32-size-border-radius: var(--button-s-size-mobile-border-radius);
+    --icon-button-40-size-border-radius: var(--button-s-size-mobile-border-radius);
+    --icon-button-48-size-border-radius: var(--button-s-size-mobile-border-radius);
+    --icon-button-56-size-border-radius: var(--button-s-size-mobile-border-radius);
+} .icon-button__border-24_23x2m {
+    border-radius: var(--icon-button-24-size-border-radius);
+} .icon-button__border-32_23x2m {
+    border-radius: var(--icon-button-32-size-border-radius);
+} .icon-button__border-40_23x2m {
+    border-radius: var(--icon-button-40-size-border-radius);
+} .icon-button__border-48_23x2m {
+    border-radius: var(--icon-button-48-size-border-radius);
+} .icon-button__border-56_23x2m {
+    border-radius: var(--icon-button-56-size-border-radius);
+} .icon-button__size-24_23x2m {
     width: var(--icon-button-xxs-size);
     height: var(--icon-button-xxs-size);
-} .icon-button__size-32_1qkch {
+} .icon-button__size-32_23x2m {
     width: var(--icon-button-xs-size);
     height: var(--icon-button-xs-size);
-} .icon-button__size-40_1qkch {
+} .icon-button__size-40_23x2m {
     width: var(--icon-button-40-size);
     height: var(--icon-button-40-size);
-} .icon-button__size-48_1qkch {
+} .icon-button__size-48_23x2m {
     width: var(--icon-button-s-size);
     height: var(--icon-button-s-size);
-} .icon-button__size-56_1qkch {
+} .icon-button__size-56_23x2m {
     width: var(--icon-button-56-size);
     height: var(--icon-button-56-size);
-} .icon-button__iconWrapper_1qkch {
+} .icon-button__iconWrapper_23x2m {
     display: flex;
     align-items: center
-} .icon-button__iconWrapper_1qkch.icon-button__center_1qkch {
+} .icon-button__iconWrapper_23x2m.icon-button__center_23x2m {
         justify-content: center;
         margin: var(--gap-0) auto;
-    } .icon-button__iconWrapper_1qkch.icon-button__left_1qkch {
+    } .icon-button__iconWrapper_23x2m.icon-button__left_23x2m {
         justify-content: left;
-    } .icon-button__iconWrapper_1qkch.icon-button__right_1qkch {
+    } .icon-button__iconWrapper_23x2m.icon-button__right_23x2m {
         justify-content: right;
-    } .icon-button__icon_1qkch {
+    } .icon-button__icon_23x2m {
     max-width: 100%;
     max-height: 100%;
-} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_1qkch *[fill-rule] {
+} /* Для иконок с заливкой (icons-classic) */ .icon-button__icon_23x2m *[fill-rule] {
     fill: currentColor;
 }

package/icon-button/esm/index.js

@@ -3,3 +3,4 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../button/esm';
+import './helpers/transformSize.js';