npm - @alfalab/core-components - Versions diffs - 26.12.0 → 27.0.0-beta.0 - Mend

@alfalab/core-components 26.12.0 → 27.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (726) hide show

package/icon-button/cssm/inverted.module.css CHANGED Viewed

@@ -1,7 +1,11 @@
 :root {
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary-inverted: #fff;
-    --color-light-graphic-secondary-inverted: #f3f4f5;
+    --color-light-graphic-secondary-inverted: #b6bcc3;
+    --color-light-graphic-tertiary-inverted: #6d7986;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
+    --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237);
 }
 :root {
@@ -14,23 +18,44 @@
 :root {
     /* primary */
     --icon-button-inverted-primary-base-color: var(--color-light-graphic-primary-inverted);
-    --icon-button-inverted-primary-hover-color: rgb(230, 230, 230);
-    --icon-button-inverted-primary-active-color: rgb(179, 179, 179);
+    --icon-button-inverted-primary-hover-color: var(--color-light-graphic-primary-inverted-shade-7);
+    --icon-button-inverted-primary-active-color: var(
+        --color-light-graphic-primary-inverted-shade-15
+    );
     /* secondary */
     --icon-button-inverted-secondary-base-color: var(--color-light-graphic-secondary-inverted);
-    --icon-button-inverted-secondary-hover-color: rgb(219, 220, 221);
-    --icon-button-inverted-secondary-active-color: rgb(170, 171, 172);
+    --icon-button-inverted-secondary-hover-color: var(
+        --color-light-graphic-secondary-inverted-tint-15
+    );
+    --icon-button-inverted-secondary-active-color: var(
+        --color-light-graphic-secondary-inverted-tint-20
+    );
     /* transparent */
-    --icon-button-inverted-transparent-base-color: rgba(255, 255, 255, 0.3);
-    --icon-button-inverted-transparent-hover-color: rgba(255, 255, 255, 0.4);
-    --icon-button-inverted-transparent-active-color: rgba(255, 255, 255, 0.5);
+    --icon-button-inverted-transparent-base-color: var(
+        --color-light-graphic-primary-inverted-alpha-30
+    );
+    --icon-button-inverted-transparent-hover-color: var(
+        --color-light-graphic-primary-inverted-alpha-40
+    );
+    --icon-button-inverted-transparent-active-color: var(
+        --color-light-graphic-primary-inverted-alpha-50
+    );
+    /* tertiary */
+    --icon-button-inverted-tertiary-base-color: var(--color-light-graphic-tertiary-inverted);
+    --icon-button-inverted-tertiary-hover-color: var(
+        --color-light-graphic-tertiary-inverted-tint-15
+    );
+    --icon-button-inverted-tertiary-active-color: var(
+        --color-light-graphic-tertiary-inverted-tint-20
+    );
     /* negative */
     --icon-button-inverted-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-inverted-negative-hover-color: rgb(217, 72, 62);
-    --icon-button-inverted-negative-active-color: rgb(169, 56, 48);
+    --icon-button-inverted-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-inverted-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .primary {
     color: var(--icon-button-inverted-primary-base-color)
@@ -68,3 +93,12 @@
 .negative:active {
         color: var(--icon-button-inverted-negative-active-color);
     }
+.tertiary {
+    color: var(--icon-button-inverted-tertiary-base-color)
+}
+.tertiary:hover {
+        color: var(--icon-button-inverted-tertiary-hover-color);
+    }
+.tertiary:active {
+        color: var(--icon-button-inverted-tertiary-active-color);
+    }

package/icon-button/default.css CHANGED Viewed

@@ -3,15 +3,18 @@
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary: #0b1f35;
     --color-light-graphic-secondary: #6d7986;
-    --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
-    --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-20: rgb(60, 76, 93);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
-    --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-secondary-shade-30: rgb(76, 85, 94);
     --color-light-graphic-secondary-shade-50: rgb(55, 61, 67);
+    --color-light-graphic-tertiary-shade-7: rgb(169, 175, 181);
+    --color-light-graphic-tertiary-shade-15: rgb(155, 160, 166);
 }
 :root {
@@ -24,8 +27,8 @@
 :root {
     /* primary */
     --icon-button-primary-base-color: var(--color-light-graphic-primary);
-    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-30);
-    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-50);
+    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-20);
+    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-30);
     /* secondary */
     --icon-button-secondary-base-color: var(--color-light-graphic-secondary);
@@ -37,10 +40,15 @@
     --icon-button-transparent-hover-color: var(--color-light-graphic-primary-alpha-40);
     --icon-button-transparent-active-color: var(--color-light-graphic-primary-alpha-50);
+    /* tertiary */
+    --icon-button-tertiary-base-color: var(--color-light-graphic-tertiary);
+    --icon-button-tertiary-hover-color: var(--color-light-graphic-tertiary-shade-7);
+    --icon-button-tertiary-active-color: var(--color-light-graphic-tertiary-shade-15);
     /* negative */
     --icon-button-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-negative-hover-color: var(--color-light-graphic-negative-tint-30);
-    --icon-button-negative-active-color: var(--color-light-graphic-negative-tint-50);
+    --icon-button-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .icon-button__primary_12z4x {
     color: var(--icon-button-primary-base-color)
@@ -51,6 +59,9 @@
 .icon-button__primary_12z4x:active {
         color: var(--icon-button-primary-active-color);
     }
+.icon-button__primary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-primary-base-color);
+}
 .icon-button__secondary_12z4x {
     color: var(--icon-button-secondary-base-color)
 }
@@ -60,6 +71,9 @@
 .icon-button__secondary_12z4x:active {
         color: var(--icon-button-secondary-active-color);
     }
+.icon-button__secondary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-secondary-base-color);
+}
 .icon-button__transparent_12z4x {
     color: var(--icon-button-transparent-base-color)
 }
@@ -78,3 +92,18 @@
 .icon-button__negative_12z4x:active {
         color: var(--icon-button-negative-active-color);
     }
+.icon-button__negative_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-negative-base-color);
+}
+.icon-button__tertiary_12z4x {
+    color: var(--icon-button-tertiary-base-color)
+}
+.icon-button__tertiary_12z4x:hover {
+        color: var(--icon-button-tertiary-hover-color);
+    }
+.icon-button__tertiary_12z4x:active {
+        color: var(--icon-button-tertiary-active-color);
+    }
+.icon-button__tertiary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-tertiary-base-color);
+}

package/icon-button/esm/Component.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ type IconButtonProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'transparent' | 'negative';
+    view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
     /**
      * Размер компонента
      */
@@ -40,7 +40,7 @@ declare const IconButton: React.ForwardRefExoticComponent<{
     /**
      * Тип кнопки
      */
-    view?: "primary" | "secondary" | "transparent" | "negative" | undefined;
+    view?: "primary" | "secondary" | "tertiary" | "transparent" | "negative" | undefined;
     /**
      * Размер компонента
      */

package/icon-button/esm/Component.js CHANGED Viewed

@@ -44,10 +44,10 @@ function __rest(s, e) {
 var styles = {"xxs":"icon-button__xxs_1o376","xs":"icon-button__xs_1o376","s":"icon-button__s_1o376","iconWrapper":"icon-button__iconWrapper_1o376","icon":"icon-button__icon_1o376"};
 require('./index.css');
-var defaultColors = {"primary":"icon-button__primary_12z4x","secondary":"icon-button__secondary_12z4x","transparent":"icon-button__transparent_12z4x","negative":"icon-button__negative_12z4x"};
+var defaultColors = {"primary":"icon-button__primary_12z4x","component":"icon-button__component_12z4x","loader":"icon-button__loader_12z4x","secondary":"icon-button__secondary_12z4x","transparent":"icon-button__transparent_12z4x","negative":"icon-button__negative_12z4x","tertiary":"icon-button__tertiary_12z4x"};
 require('./default.css');
-var invertedColors = {"primary":"icon-button__primary_13j3b","secondary":"icon-button__secondary_13j3b","transparent":"icon-button__transparent_13j3b","negative":"icon-button__negative_13j3b"};
+var invertedColors = {"primary":"icon-button__primary_13j3b","secondary":"icon-button__secondary_13j3b","transparent":"icon-button__transparent_13j3b","negative":"icon-button__negative_13j3b","tertiary":"icon-button__tertiary_13j3b"};
 require('./inverted.css');
 var colorStyles = {
@@ -56,7 +56,7 @@ var colorStyles = {
 };
 var IconButton = forwardRef(function (_a, ref) {
     var className = _a.className, Icon = _a.icon, _b = _a.view, view = _b === void 0 ? 'primary' : _b, _c = _a.size, size = _c === void 0 ? 's' : _c, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, restProps = __rest(_a, ["className", "icon", "view", "size", "colors"]);
-    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'ghost', className: cn(className, colorStyles[colors][view]), size: 's', leftAddons: React.createElement("span", { className: cn(styles.iconWrapper, styles[size]) },
+    return (React.createElement(Button, __assign({}, restProps, { ref: ref, view: 'ghost', className: cn(className, colorStyles[colors][view], colorStyles[colors].component, colorStyles[colors].loader), size: 's', leftAddons: React.createElement("span", { className: cn(styles.iconWrapper, styles[size]) },
             React.createElement(Icon, { className: styles.icon })) })));
 });

package/icon-button/esm/default.css CHANGED Viewed

@@ -3,15 +3,18 @@
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary: #0b1f35;
     --color-light-graphic-secondary: #6d7986;
-    --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
-    --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-20: rgb(60, 76, 93);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
-    --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-secondary-shade-30: rgb(76, 85, 94);
     --color-light-graphic-secondary-shade-50: rgb(55, 61, 67);
+    --color-light-graphic-tertiary-shade-7: rgb(169, 175, 181);
+    --color-light-graphic-tertiary-shade-15: rgb(155, 160, 166);
 }
 :root {
@@ -24,8 +27,8 @@
 :root {
     /* primary */
     --icon-button-primary-base-color: var(--color-light-graphic-primary);
-    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-30);
-    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-50);
+    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-20);
+    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-30);
     /* secondary */
     --icon-button-secondary-base-color: var(--color-light-graphic-secondary);
@@ -37,10 +40,15 @@
     --icon-button-transparent-hover-color: var(--color-light-graphic-primary-alpha-40);
     --icon-button-transparent-active-color: var(--color-light-graphic-primary-alpha-50);
+    /* tertiary */
+    --icon-button-tertiary-base-color: var(--color-light-graphic-tertiary);
+    --icon-button-tertiary-hover-color: var(--color-light-graphic-tertiary-shade-7);
+    --icon-button-tertiary-active-color: var(--color-light-graphic-tertiary-shade-15);
     /* negative */
     --icon-button-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-negative-hover-color: var(--color-light-graphic-negative-tint-30);
-    --icon-button-negative-active-color: var(--color-light-graphic-negative-tint-50);
+    --icon-button-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .icon-button__primary_12z4x {
     color: var(--icon-button-primary-base-color)
@@ -51,6 +59,9 @@
 .icon-button__primary_12z4x:active {
         color: var(--icon-button-primary-active-color);
     }
+.icon-button__primary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-primary-base-color);
+}
 .icon-button__secondary_12z4x {
     color: var(--icon-button-secondary-base-color)
 }
@@ -60,6 +71,9 @@
 .icon-button__secondary_12z4x:active {
         color: var(--icon-button-secondary-active-color);
     }
+.icon-button__secondary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-secondary-base-color);
+}
 .icon-button__transparent_12z4x {
     color: var(--icon-button-transparent-base-color)
 }
@@ -78,3 +92,18 @@
 .icon-button__negative_12z4x:active {
         color: var(--icon-button-negative-active-color);
     }
+.icon-button__negative_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-negative-base-color);
+}
+.icon-button__tertiary_12z4x {
+    color: var(--icon-button-tertiary-base-color)
+}
+.icon-button__tertiary_12z4x:hover {
+        color: var(--icon-button-tertiary-hover-color);
+    }
+.icon-button__tertiary_12z4x:active {
+        color: var(--icon-button-tertiary-active-color);
+    }
+.icon-button__tertiary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-tertiary-base-color);
+}

package/icon-button/esm/inverted.css CHANGED Viewed

@@ -2,7 +2,11 @@
 :root {
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary-inverted: #fff;
-    --color-light-graphic-secondary-inverted: #f3f4f5;
+    --color-light-graphic-secondary-inverted: #b6bcc3;
+    --color-light-graphic-tertiary-inverted: #6d7986;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
+    --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237);
 }
 :root {
@@ -15,23 +19,44 @@
 :root {
     /* primary */
     --icon-button-inverted-primary-base-color: var(--color-light-graphic-primary-inverted);
-    --icon-button-inverted-primary-hover-color: rgb(230, 230, 230);
-    --icon-button-inverted-primary-active-color: rgb(179, 179, 179);
+    --icon-button-inverted-primary-hover-color: var(--color-light-graphic-primary-inverted-shade-7);
+    --icon-button-inverted-primary-active-color: var(
+        --color-light-graphic-primary-inverted-shade-15
+    );
     /* secondary */
     --icon-button-inverted-secondary-base-color: var(--color-light-graphic-secondary-inverted);
-    --icon-button-inverted-secondary-hover-color: rgb(219, 220, 221);
-    --icon-button-inverted-secondary-active-color: rgb(170, 171, 172);
+    --icon-button-inverted-secondary-hover-color: var(
+        --color-light-graphic-secondary-inverted-tint-15
+    );
+    --icon-button-inverted-secondary-active-color: var(
+        --color-light-graphic-secondary-inverted-tint-20
+    );
     /* transparent */
-    --icon-button-inverted-transparent-base-color: rgba(255, 255, 255, 0.3);
-    --icon-button-inverted-transparent-hover-color: rgba(255, 255, 255, 0.4);
-    --icon-button-inverted-transparent-active-color: rgba(255, 255, 255, 0.5);
+    --icon-button-inverted-transparent-base-color: var(
+        --color-light-graphic-primary-inverted-alpha-30
+    );
+    --icon-button-inverted-transparent-hover-color: var(
+        --color-light-graphic-primary-inverted-alpha-40
+    );
+    --icon-button-inverted-transparent-active-color: var(
+        --color-light-graphic-primary-inverted-alpha-50
+    );
+    /* tertiary */
+    --icon-button-inverted-tertiary-base-color: var(--color-light-graphic-tertiary-inverted);
+    --icon-button-inverted-tertiary-hover-color: var(
+        --color-light-graphic-tertiary-inverted-tint-15
+    );
+    --icon-button-inverted-tertiary-active-color: var(
+        --color-light-graphic-tertiary-inverted-tint-20
+    );
     /* negative */
     --icon-button-inverted-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-inverted-negative-hover-color: rgb(217, 72, 62);
-    --icon-button-inverted-negative-active-color: rgb(169, 56, 48);
+    --icon-button-inverted-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-inverted-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .icon-button__primary_13j3b {
     color: var(--icon-button-inverted-primary-base-color)
@@ -69,3 +94,12 @@
 .icon-button__negative_13j3b:active {
         color: var(--icon-button-inverted-negative-active-color);
     }
+.icon-button__tertiary_13j3b {
+    color: var(--icon-button-inverted-tertiary-base-color)
+}
+.icon-button__tertiary_13j3b:hover {
+        color: var(--icon-button-inverted-tertiary-hover-color);
+    }
+.icon-button__tertiary_13j3b:active {
+        color: var(--icon-button-inverted-tertiary-active-color);
+    }

package/icon-button/inverted.css CHANGED Viewed

@@ -2,7 +2,11 @@
 :root {
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary-inverted: #fff;
-    --color-light-graphic-secondary-inverted: #f3f4f5;
+    --color-light-graphic-secondary-inverted: #b6bcc3;
+    --color-light-graphic-tertiary-inverted: #6d7986;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
+    --color-light-graphic-primary-inverted-shade-7: rgb(237, 237, 237);
 }
 :root {
@@ -15,23 +19,44 @@
 :root {
     /* primary */
     --icon-button-inverted-primary-base-color: var(--color-light-graphic-primary-inverted);
-    --icon-button-inverted-primary-hover-color: rgb(230, 230, 230);
-    --icon-button-inverted-primary-active-color: rgb(179, 179, 179);
+    --icon-button-inverted-primary-hover-color: var(--color-light-graphic-primary-inverted-shade-7);
+    --icon-button-inverted-primary-active-color: var(
+        --color-light-graphic-primary-inverted-shade-15
+    );
     /* secondary */
     --icon-button-inverted-secondary-base-color: var(--color-light-graphic-secondary-inverted);
-    --icon-button-inverted-secondary-hover-color: rgb(219, 220, 221);
-    --icon-button-inverted-secondary-active-color: rgb(170, 171, 172);
+    --icon-button-inverted-secondary-hover-color: var(
+        --color-light-graphic-secondary-inverted-tint-15
+    );
+    --icon-button-inverted-secondary-active-color: var(
+        --color-light-graphic-secondary-inverted-tint-20
+    );
     /* transparent */
-    --icon-button-inverted-transparent-base-color: rgba(255, 255, 255, 0.3);
-    --icon-button-inverted-transparent-hover-color: rgba(255, 255, 255, 0.4);
-    --icon-button-inverted-transparent-active-color: rgba(255, 255, 255, 0.5);
+    --icon-button-inverted-transparent-base-color: var(
+        --color-light-graphic-primary-inverted-alpha-30
+    );
+    --icon-button-inverted-transparent-hover-color: var(
+        --color-light-graphic-primary-inverted-alpha-40
+    );
+    --icon-button-inverted-transparent-active-color: var(
+        --color-light-graphic-primary-inverted-alpha-50
+    );
+    /* tertiary */
+    --icon-button-inverted-tertiary-base-color: var(--color-light-graphic-tertiary-inverted);
+    --icon-button-inverted-tertiary-hover-color: var(
+        --color-light-graphic-tertiary-inverted-tint-15
+    );
+    --icon-button-inverted-tertiary-active-color: var(
+        --color-light-graphic-tertiary-inverted-tint-20
+    );
     /* negative */
     --icon-button-inverted-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-inverted-negative-hover-color: rgb(217, 72, 62);
-    --icon-button-inverted-negative-active-color: rgb(169, 56, 48);
+    --icon-button-inverted-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-inverted-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .icon-button__primary_13j3b {
     color: var(--icon-button-inverted-primary-base-color)
@@ -69,3 +94,12 @@
 .icon-button__negative_13j3b:active {
         color: var(--icon-button-inverted-negative-active-color);
     }
+.icon-button__tertiary_13j3b {
+    color: var(--icon-button-inverted-tertiary-base-color)
+}
+.icon-button__tertiary_13j3b:hover {
+        color: var(--icon-button-inverted-tertiary-hover-color);
+    }
+.icon-button__tertiary_13j3b:active {
+        color: var(--icon-button-inverted-tertiary-active-color);
+    }

package/icon-button/modern/Component.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ type IconButtonProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'transparent' | 'negative';
+    view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
     /**
      * Размер компонента
      */
@@ -40,7 +40,7 @@ declare const IconButton: React.ForwardRefExoticComponent<{
     /**
      * Тип кнопки
      */
-    view?: "primary" | "secondary" | "transparent" | "negative" | undefined;
+    view?: "primary" | "secondary" | "tertiary" | "transparent" | "negative" | undefined;
     /**
      * Размер компонента
      */

package/icon-button/modern/Component.js CHANGED Viewed

@@ -5,10 +5,10 @@ import { Button } from '../../button/modern';
 var styles = {"xxs":"icon-button__xxs_1o376","xs":"icon-button__xs_1o376","s":"icon-button__s_1o376","iconWrapper":"icon-button__iconWrapper_1o376","icon":"icon-button__icon_1o376"};
 require('./index.css');
-var defaultColors = {"primary":"icon-button__primary_12z4x","secondary":"icon-button__secondary_12z4x","transparent":"icon-button__transparent_12z4x","negative":"icon-button__negative_12z4x"};
+var defaultColors = {"primary":"icon-button__primary_12z4x","component":"icon-button__component_12z4x","loader":"icon-button__loader_12z4x","secondary":"icon-button__secondary_12z4x","transparent":"icon-button__transparent_12z4x","negative":"icon-button__negative_12z4x","tertiary":"icon-button__tertiary_12z4x"};
 require('./default.css');
-var invertedColors = {"primary":"icon-button__primary_13j3b","secondary":"icon-button__secondary_13j3b","transparent":"icon-button__transparent_13j3b","negative":"icon-button__negative_13j3b"};
+var invertedColors = {"primary":"icon-button__primary_13j3b","secondary":"icon-button__secondary_13j3b","transparent":"icon-button__transparent_13j3b","negative":"icon-button__negative_13j3b","tertiary":"icon-button__tertiary_13j3b"};
 require('./inverted.css');
 const colorStyles = {
@@ -16,7 +16,7 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const IconButton = forwardRef(({ className, icon: Icon, view = 'primary', size = 's', colors = 'default', ...restProps }, ref) => {
-    return (React.createElement(Button, Object.assign({}, restProps, { ref: ref, view: 'ghost', className: cn(className, colorStyles[colors][view]), size: 's', leftAddons: React.createElement("span", { className: cn(styles.iconWrapper, styles[size]) },
+    return (React.createElement(Button, Object.assign({}, restProps, { ref: ref, view: 'ghost', className: cn(className, colorStyles[colors][view], colorStyles[colors].component, colorStyles[colors].loader), size: 's', leftAddons: React.createElement("span", { className: cn(styles.iconWrapper, styles[size]) },
             React.createElement(Icon, { className: styles.icon })) })));
 });

package/icon-button/modern/default.css CHANGED Viewed

@@ -3,15 +3,18 @@
     --color-light-graphic-negative: #f15045;
     --color-light-graphic-primary: #0b1f35;
     --color-light-graphic-secondary: #6d7986;
-    --color-light-graphic-negative-tint-30: rgb(245, 133, 125);
-    --color-light-graphic-negative-tint-50: rgb(248, 168, 162);
+    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-graphic-negative-shade-7: rgb(224, 74, 64);
+    --color-light-graphic-negative-shade-15: rgb(205, 68, 59);
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-20: rgb(60, 76, 93);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
-    --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-secondary-shade-30: rgb(76, 85, 94);
     --color-light-graphic-secondary-shade-50: rgb(55, 61, 67);
+    --color-light-graphic-tertiary-shade-7: rgb(169, 175, 181);
+    --color-light-graphic-tertiary-shade-15: rgb(155, 160, 166);
 }
 :root {
@@ -24,8 +27,8 @@
 :root {
     /* primary */
     --icon-button-primary-base-color: var(--color-light-graphic-primary);
-    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-30);
-    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-50);
+    --icon-button-primary-hover-color: var(--color-light-graphic-primary-tint-20);
+    --icon-button-primary-active-color: var(--color-light-graphic-primary-tint-30);
     /* secondary */
     --icon-button-secondary-base-color: var(--color-light-graphic-secondary);
@@ -37,10 +40,15 @@
     --icon-button-transparent-hover-color: var(--color-light-graphic-primary-alpha-40);
     --icon-button-transparent-active-color: var(--color-light-graphic-primary-alpha-50);
+    /* tertiary */
+    --icon-button-tertiary-base-color: var(--color-light-graphic-tertiary);
+    --icon-button-tertiary-hover-color: var(--color-light-graphic-tertiary-shade-7);
+    --icon-button-tertiary-active-color: var(--color-light-graphic-tertiary-shade-15);
     /* negative */
     --icon-button-negative-base-color: var(--color-light-graphic-negative);
-    --icon-button-negative-hover-color: var(--color-light-graphic-negative-tint-30);
-    --icon-button-negative-active-color: var(--color-light-graphic-negative-tint-50);
+    --icon-button-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-negative-active-color: var(--color-light-graphic-negative-shade-15);
 }
 .icon-button__primary_12z4x {
     color: var(--icon-button-primary-base-color)
@@ -51,6 +59,9 @@
 .icon-button__primary_12z4x:active {
         color: var(--icon-button-primary-active-color);
     }
+.icon-button__primary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-primary-base-color);
+}
 .icon-button__secondary_12z4x {
     color: var(--icon-button-secondary-base-color)
 }
@@ -60,6 +71,9 @@
 .icon-button__secondary_12z4x:active {
         color: var(--icon-button-secondary-active-color);
     }
+.icon-button__secondary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-secondary-base-color);
+}
 .icon-button__transparent_12z4x {
     color: var(--icon-button-transparent-base-color)
 }
@@ -78,3 +92,18 @@
 .icon-button__negative_12z4x:active {
         color: var(--icon-button-negative-active-color);
     }
+.icon-button__negative_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-negative-base-color);
+}
+.icon-button__tertiary_12z4x {
+    color: var(--icon-button-tertiary-base-color)
+}
+.icon-button__tertiary_12z4x:hover {
+        color: var(--icon-button-tertiary-hover-color);
+    }
+.icon-button__tertiary_12z4x:active {
+        color: var(--icon-button-tertiary-active-color);
+    }
+.icon-button__tertiary_12z4x.icon-button__component_12z4x:disabled.icon-button__loader_12z4x {
+    color: var(--icon-button-tertiary-base-color);
+}