@alfalab/core-components 30.8.0-beta.0 → 31.2.0

package/toast/index.css

@@ -15,45 +15,48 @@
     --border-radius-m: 8px;
 }
 :root {
+    /* default */
     --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
 }
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_8ond8 {
+.toast__toastPlate_znxan {
     box-shadow: var(--toast-box-shadow);
     word-break: break-word;
 }
-.toast__title_8ond8 {
+.toast__title_znxan {
     font-weight: 400;
 }
-.toast__popoverInner_8ond8 {
+.toast__popoverInner_znxan {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_8ond8 {
+.toast__block_znxan {
     width: 100%;
 }
-.toast__fixed_8ond8 {
+.toast__fixed_znxan {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_8ond8.toast__enter_8ond8 {
+.toast__fixed_znxan.toast__enter_znxan {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_8ond8.toast__enterActive_8ond8 {
+.toast__fixed_znxan.toast__enterActive_znxan {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8ond8.toast__exit_8ond8 {
+.toast__fixed_znxan.toast__exit_znxan {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8ond8.toast__exitActive_8ond8 {
+.toast__fixed_znxan.toast__exitActive_znxan {
         opacity: 0;
         transform: scale(0.98);
     }

package/toast/modern/component.d.ts

@@ -33,24 +33,25 @@ type ToastProps = ToastPlateProps & Pick<PopoverProps, 'position' | 'offset' | '
 };
 declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
-    titleClassName?: string | undefined;
+    titleClassName?: string | undefined; /**
+     * Элемент, относительного которого появляется тост.
+     * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+     */
     contentClassName?: string | undefined;
     actionSectionClassName?: string | undefined;
     children?: React.ReactNode;
     title?: React.ReactNode;
-    badge?: "negative" | "positive" | "attention" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined; /**
+     * z-index компонента
+     */
     leftAddons?: React.ReactNode;
     actionButton?: React.ReactNode;
-    dataTestId?: string | undefined; /**
-     * Обработчик закрытия компонента.
-     */
-    hasCloser?: boolean | undefined; /**
-     * Плашка тоста.
-     * По-дефолту рендерит компонент ToastPlate
-     */
+    dataTestId?: string | undefined;
+    hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+    colors?: "default" | "inverted" | undefined;
 } & Pick<PopoverProps, "offset" | "getPortalContainer" | "transition" | "useAnchorWidth" | "position" | "preventFlip" | "open"> & {
     /**
      * Элемент, относительного которого появляется тост.
@@ -79,24 +80,25 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
      */
     ToastPlate?: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         className?: string | undefined;
-        titleClassName?: string | undefined;
+        titleClassName?: string | undefined; /**
+         * Элемент, относительного которого появляется тост.
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+         */
         contentClassName?: string | undefined;
         actionSectionClassName?: string | undefined;
         children?: React.ReactNode;
         title?: React.ReactNode;
-        badge?: "negative" | "positive" | "attention" | undefined;
+        badge?: "negative" | "positive" | "attention" | undefined; /**
+         * z-index компонента
+         */
         leftAddons?: React.ReactNode;
         actionButton?: React.ReactNode;
-        dataTestId?: string | undefined; /**
-         * Обработчик закрытия компонента.
-         */
-        hasCloser?: boolean | undefined; /**
-         * Плашка тоста.
-         * По-дефолту рендерит компонент ToastPlate
-         */
+        dataTestId?: string | undefined;
+        hasCloser?: boolean | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+        colors?: "default" | "inverted" | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ToastProps, Toast };

package/toast/modern/component.js

@@ -8,7 +8,7 @@ import { Popover } from '../../popover/modern';
 import { Portal } from '../../portal/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
 
-var styles = {"toastPlate":"toast__toastPlate_8ond8","title":"toast__title_8ond8","popoverInner":"toast__popoverInner_8ond8","block":"toast__block_8ond8","fixed":"toast__fixed_8ond8","enter":"toast__enter_8ond8","enterActive":"toast__enterActive_8ond8","exit":"toast__exit_8ond8","exitActive":"toast__exitActive_8ond8"};
+var styles = {"toastPlate":"toast__toastPlate_znxan","title":"toast__title_znxan","popoverInner":"toast__popoverInner_znxan","block":"toast__block_znxan","fixed":"toast__fixed_znxan","enter":"toast__enter_znxan","enterActive":"toast__enterActive_znxan","exit":"toast__exit_znxan","exitActive":"toast__exitActive_znxan"};
 require('./index.css');
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/toast/modern/index.css

@@ -15,45 +15,48 @@
     --border-radius-m: 8px;
 }
 :root {
+    /* default */
     --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
 }
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_8ond8 {
+.toast__toastPlate_znxan {
     box-shadow: var(--toast-box-shadow);
     word-break: break-word;
 }
-.toast__title_8ond8 {
+.toast__title_znxan {
     font-weight: 400;
 }
-.toast__popoverInner_8ond8 {
+.toast__popoverInner_znxan {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_8ond8 {
+.toast__block_znxan {
     width: 100%;
 }
-.toast__fixed_8ond8 {
+.toast__fixed_znxan {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_8ond8.toast__enter_8ond8 {
+.toast__fixed_znxan.toast__enter_znxan {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_8ond8.toast__enterActive_8ond8 {
+.toast__fixed_znxan.toast__enterActive_znxan {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8ond8.toast__exit_8ond8 {
+.toast__fixed_znxan.toast__exit_znxan {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8ond8.toast__exitActive_8ond8 {
+.toast__fixed_znxan.toast__exitActive_znxan {
         opacity: 0;
         transform: scale(0.98);
     }

package/toast-plate/component.d.ts

@@ -63,6 +63,10 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -121,5 +125,9 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { BadgeIcons, ToastPlateProps, ToastPlate };

package/toast-plate/component.js

@@ -53,9 +53,19 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"toast-plate__component_kw0dq","hasCloser":"toast-plate__hasCloser_kw0dq","contentWrap":"toast-plate__contentWrap_kw0dq","block":"toast-plate__block_kw0dq","content":"toast-plate__content_kw0dq","hasActionButton":"toast-plate__hasActionButton_kw0dq","actionSection":"toast-plate__actionSection_kw0dq","leftAddons":"toast-plate__leftAddons_kw0dq","title":"toast-plate__title_kw0dq","children":"toast-plate__children_kw0dq","closeButtonWrapper":"toast-plate__closeButtonWrapper_kw0dq","closeButton":"toast-plate__closeButton_kw0dq"};
+var styles = {"component":"toast-plate__component_1q31v","hasCloser":"toast-plate__hasCloser_1q31v","contentWrap":"toast-plate__contentWrap_1q31v","block":"toast-plate__block_1q31v","content":"toast-plate__content_1q31v","hasActionButton":"toast-plate__hasActionButton_1q31v","actionSection":"toast-plate__actionSection_1q31v","leftAddons":"toast-plate__leftAddons_1q31v","title":"toast-plate__title_1q31v","children":"toast-plate__children_1q31v","closeButtonWrapper":"toast-plate__closeButtonWrapper_1q31v","closeButton":"toast-plate__closeButton_1q31v"};
 require('./index.css');
 
+var defaultColors = {"component":"toast-plate__component_ktvcy","closeButtonWrapper":"toast-plate__closeButtonWrapper_ktvcy"};
+require('./default.css');
+
+var invertedColors = {"component":"toast-plate__component_12fgh","closeButtonWrapper":"toast-plate__closeButtonWrapper_12fgh"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var iconDefaultComponents = {
     negative: React__default['default'].createElement(CrossCircleMIcon.CrossCircleMIcon, { className: styles.badgeIcon }),
     positive: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles.badgeIcon }),
@@ -63,7 +73,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -73,7 +83,7 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles.component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
+    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles.component, colorStyles[colors].component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
         React__default['default'].createElement("div", { className: styles.contentWrap },
             React__default['default'].createElement("div", { className: cn__default['default'](contentClassName, styles.content, (_c = {},
                     _c[styles.hasCloser] = hasCloser,
@@ -86,8 +96,8 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             actionButton && (React__default['default'].createElement("div", { className: cn__default['default'](actionSectionClassName, styles.actionSection, (_d = {},
                     _d[styles.hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React__default['default'].createElement("div", { className: styles.closeButtonWrapper },
-                React__default['default'].createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', className: cn__default['default'](styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React__default['default'].createElement("div", { className: cn__default['default'](styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
+                React__default['default'].createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default['default'](styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 exports.ToastPlate = ToastPlate;

package/toast-plate/cssm/component.d.ts

@@ -63,6 +63,10 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -121,5 +125,9 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { BadgeIcons, ToastPlateProps, ToastPlate };

package/toast-plate/cssm/component.js

@@ -9,12 +9,16 @@ var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
 var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
 var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
 var styles = require('./index.module.css');
+var defaultColors = require('./default.module.css');
+var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -55,6 +59,10 @@ function __rest(s, e) {
     return t;
 }
 
+var colorStyles = {
+    default: defaultColors__default['default'],
+    inverted: invertedColors__default['default'],
+};
 var iconDefaultComponents = {
     negative: React__default['default'].createElement(CrossCircleMIcon.CrossCircleMIcon, { className: styles__default['default'].badgeIcon }),
     positive: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default['default'].badgeIcon }),
@@ -62,7 +70,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -72,7 +80,7 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles__default['default'].component, (_b = {}, _b[styles__default['default'].block] = block, _b[styles__default['default'].hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
+    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles__default['default'].component, colorStyles[colors].component, (_b = {}, _b[styles__default['default'].block] = block, _b[styles__default['default'].hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
         React__default['default'].createElement("div", { className: styles__default['default'].contentWrap },
             React__default['default'].createElement("div", { className: cn__default['default'](contentClassName, styles__default['default'].content, (_c = {},
                     _c[styles__default['default'].hasCloser] = hasCloser,
@@ -85,8 +93,8 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             actionButton && (React__default['default'].createElement("div", { className: cn__default['default'](actionSectionClassName, styles__default['default'].actionSection, (_d = {},
                     _d[styles__default['default'].hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React__default['default'].createElement("div", { className: styles__default['default'].closeButtonWrapper },
-                React__default['default'].createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', className: cn__default['default'](styles__default['default'].closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
+                React__default['default'].createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default['default'](styles__default['default'].closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 exports.ToastPlate = ToastPlate;

package/toast-plate/cssm/default.module.css

@@ -0,0 +1,27 @@
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* default */
+    --toast-plate-bg-color: var(--color-light-bg-primary-inverted);
+    --toast-plate-color: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+}
+.component {
+    color: var(--toast-plate-color);
+    background-color: var(--toast-plate-bg-color);
+}
+.closeButtonWrapper:before {
+        background-color: var(--color-light-border-secondary-inverted);
+    }

package/toast-plate/cssm/index.js

@@ -10,6 +10,8 @@ require('@alfalab/icons-glyph/CrossCircleMIcon');
 require('@alfalab/icons-glyph/AlertCircleMIcon');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('./index.module.css');
+require('./default.module.css');
+require('./inverted.module.css');
 
 
 

package/toast-plate/cssm/index.module.css

@@ -1,8 +1,3 @@
-:root {
-    --color-light-bg-primary-inverted: #0b1f35;
-    --color-light-border-secondary-inverted: #3c4c5d;
-    --color-light-text-primary-inverted: #fff;
-}
 :root {
 
     /* Hard */
@@ -22,8 +17,7 @@
     --border-radius-m: 8px;
 }
 :root {
-    --toast-plate-bg-color: var(--color-light-bg-primary-inverted);
-    --toast-plate-color: var(--color-light-text-primary-inverted);
+    /* default */
     --toast-plate-border-radius: var(--border-radius-m);
     --toast-plate-title-font-weight: 700;
     --toast-plate-action-align: center;
@@ -31,6 +25,8 @@
     --toast-plate-action-divider-display: block;
     --toast-plate-content-with-closer-right-padding: var(--gap-m);
     --toast-plate-close-button-align: center;
+
+    /* inverted */
 }
 .component {
     position: relative;
@@ -38,10 +34,8 @@
     flex-direction: column;
     box-sizing: border-box;
     border-radius: var(--toast-plate-border-radius);
-    color: var(--toast-plate-color);
     min-height: 56px;
-    padding: var(--gap-m);
-    background-color: var(--toast-plate-bg-color)
+    padding: var(--gap-m)
 }
 .component.hasCloser {
         /* 2×16 + 24 */
@@ -107,7 +101,6 @@
         top: var(--gap-s);
         bottom: var(--gap-s);
         width: 1px;
-        background-color: var(--color-light-border-secondary-inverted);
         content: '';
     }
 .closeButton {

package/toast-plate/cssm/inverted.module.css

@@ -0,0 +1,27 @@
+:root {
+    --color-light-bg-primary: #fff;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* default */
+
+    /* inverted */
+    --toast-plate-inverted-color: var(--color-light-text-primary);
+    --toast-plate-inverted-bg-color: var(--color-light-bg-primary);
+}
+.component {
+    color: var(--toast-plate-inverted-color);
+    background-color: var(--toast-plate-inverted-bg-color);
+}
+.closeButtonWrapper:before {
+        background-color: var(--color-light-border-secondary);
+    }

package/toast-plate/cssm/vars.css

@@ -6,3 +6,8 @@
 
     /* Hard up */
 }
+:root {
+    /* default */
+
+    /* inverted */
+}

package/toast-plate/default.css

@@ -0,0 +1,28 @@
+/* hash: j55m3 */
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* default */
+    --toast-plate-bg-color: var(--color-light-bg-primary-inverted);
+    --toast-plate-color: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+}
+.toast-plate__component_ktvcy {
+    color: var(--toast-plate-color);
+    background-color: var(--toast-plate-bg-color);
+}
+.toast-plate__closeButtonWrapper_ktvcy:before {
+        background-color: var(--color-light-border-secondary-inverted);
+    }

package/toast-plate/esm/component.d.ts

@@ -63,6 +63,10 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -121,5 +125,9 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { BadgeIcons, ToastPlateProps, ToastPlate };

package/toast-plate/esm/component.js

@@ -46,9 +46,19 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"toast-plate__component_kw0dq","hasCloser":"toast-plate__hasCloser_kw0dq","contentWrap":"toast-plate__contentWrap_kw0dq","block":"toast-plate__block_kw0dq","content":"toast-plate__content_kw0dq","hasActionButton":"toast-plate__hasActionButton_kw0dq","actionSection":"toast-plate__actionSection_kw0dq","leftAddons":"toast-plate__leftAddons_kw0dq","title":"toast-plate__title_kw0dq","children":"toast-plate__children_kw0dq","closeButtonWrapper":"toast-plate__closeButtonWrapper_kw0dq","closeButton":"toast-plate__closeButton_kw0dq"};
+var styles = {"component":"toast-plate__component_1q31v","hasCloser":"toast-plate__hasCloser_1q31v","contentWrap":"toast-plate__contentWrap_1q31v","block":"toast-plate__block_1q31v","content":"toast-plate__content_1q31v","hasActionButton":"toast-plate__hasActionButton_1q31v","actionSection":"toast-plate__actionSection_1q31v","leftAddons":"toast-plate__leftAddons_1q31v","title":"toast-plate__title_1q31v","children":"toast-plate__children_1q31v","closeButtonWrapper":"toast-plate__closeButtonWrapper_1q31v","closeButton":"toast-plate__closeButton_1q31v"};
 require('./index.css');
 
+var defaultColors = {"component":"toast-plate__component_ktvcy","closeButtonWrapper":"toast-plate__closeButtonWrapper_ktvcy"};
+require('./default.css');
+
+var invertedColors = {"component":"toast-plate__component_12fgh","closeButtonWrapper":"toast-plate__closeButtonWrapper_12fgh"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var iconDefaultComponents = {
     negative: React.createElement(CrossCircleMIcon, { className: styles.badgeIcon }),
     positive: React.createElement(CheckmarkCircleMIcon, { className: styles.badgeIcon }),
@@ -56,7 +66,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -66,7 +76,7 @@ var ToastPlate = forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    return (React.createElement("div", __assign({ className: cn(styles.component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
+    return (React.createElement("div", __assign({ className: cn(styles.component, colorStyles[colors].component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
         React.createElement("div", { className: styles.contentWrap },
             React.createElement("div", { className: cn(contentClassName, styles.content, (_c = {},
                     _c[styles.hasCloser] = hasCloser,
@@ -79,8 +89,8 @@ var ToastPlate = forwardRef(function (_a, ref) {
             actionButton && (React.createElement("div", { className: cn(actionSectionClassName, styles.actionSection, (_d = {},
                     _d[styles.hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React.createElement("div", { className: styles.closeButtonWrapper },
-                React.createElement(IconButton, { icon: CrossMIcon, colors: 'inverted', className: cn(styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React.createElement("div", { className: cn(styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
+                React.createElement(IconButton, { icon: CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn(styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 export { ToastPlate };

package/toast-plate/esm/default.css

@@ -0,0 +1,28 @@
+/* hash: j55m3 */
+:root {
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
+    --color-light-text-primary-inverted: #fff;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    /* default */
+    --toast-plate-bg-color: var(--color-light-bg-primary-inverted);
+    --toast-plate-color: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+}
+.toast-plate__component_ktvcy {
+    color: var(--toast-plate-color);
+    background-color: var(--toast-plate-bg-color);
+}
+.toast-plate__closeButtonWrapper_ktvcy:before {
+        background-color: var(--color-light-border-secondary-inverted);
+    }