@salutejs/plasma-new-hope 0.248.0-canary.1719.12929292229.0 → 0.248.0-canary.1722.12945590646.0

package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx

@@ -4,39 +4,21 @@ import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { toastConfig } from '../../../../components/Toast';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopupProvider } from '../Popup/Popup';
 import { addNotification } from '../../../../../src/components/Notification';
 import { NotificationsProvider } from '../Notification/Notification';
 import { Modal } from '../Modal/Modal';
 
+import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
-const views = ['default', 'positive', 'negative'];
-const closeIconTypes = ['default', 'thin'];
-
 const meta: Meta<typeof ToastController> = {
     title: 'b2c/Overlay/Toast',
     decorators: [WithTheme],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        closeIconType: {
-            options: closeIconTypes,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        ...disableProps(['size']),
-    },
 };
 
 export default meta;
@@ -79,7 +61,6 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
-        textColor: undefined,
         view: 'default',
         closeIconType: 'default',
         size: 'm',
@@ -87,6 +68,14 @@ export const ToastComponent: StoryComponent = {
         enableContentLeft: true,
         pilled: false,
     },
+    argTypes: {
+        closeIconType: {
+            options: ['default', 'thin'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
     render: ({ enableContentLeft, ...args }) => (
         <ToastContainer>
             <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
@@ -105,8 +94,6 @@ const StoryLiveDemo = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const { showToast, hideToast } = useToast();
     const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
@@ -127,8 +114,6 @@ const StoryLiveDemo = ({
                         view,
                         size,
                         hasClose,
-                        closeIconType,
-                        textColor,
                         onHide: action('onHide'),
                         onShow: action('onShow'),
                     });
@@ -156,6 +141,7 @@ export const LiveDemo: Story = {
                 type: 'inline-radio',
             },
         },
+        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
         ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
     },
     parameters: {
@@ -181,8 +167,6 @@ const StoryComplex = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -201,8 +185,6 @@ const StoryComplex = ({
             view,
             size,
             hasClose,
-            closeIconType,
-            textColor,
             onHide: action('onHide'),
             onShow: action('onShow'),
         });

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js

@@ -15,24 +15,14 @@ var config = exports.config = {
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;"], _Toast.toastTokens.closeIconButtonSize, _Toast.toastTokens.closeIconSize),

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx

@@ -4,39 +4,21 @@ import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { toastConfig } from '../../../../components/Toast';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopupProvider } from '../Popup/Popup';
 import { addNotification } from '../../../../../src/components/Notification';
 import { NotificationsProvider } from '../Notification/Notification';
 import { Modal } from '../Modal/Modal';
 
+import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
-const views = ['default', 'positive', 'negative'];
-const closeIconTypes = ['default', 'thin'];
-
 const meta: Meta<typeof ToastController> = {
     title: 'web/Overlay/Toast',
     decorators: [WithTheme],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        closeIconType: {
-            options: closeIconTypes,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        ...disableProps(['size']),
-    },
 };
 
 export default meta;
@@ -79,7 +61,6 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
-        textColor: undefined,
         view: 'default',
         closeIconType: 'default',
         size: 'm',
@@ -87,6 +68,14 @@ export const ToastComponent: StoryComponent = {
         enableContentLeft: true,
         pilled: false,
     },
+    argTypes: {
+        closeIconType: {
+            options: ['default', 'thin'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
     render: ({ enableContentLeft, ...args }) => (
         <ToastContainer>
             <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
@@ -105,8 +94,6 @@ const StoryLiveDemo = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const { showToast, hideToast } = useToast();
     const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
@@ -127,8 +114,6 @@ const StoryLiveDemo = ({
                         view,
                         size,
                         hasClose,
-                        closeIconType,
-                        textColor,
                         onHide: action('onHide'),
                         onShow: action('onShow'),
                     });
@@ -156,6 +141,7 @@ export const LiveDemo: Story = {
                 type: 'inline-radio',
             },
         },
+        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
         ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
     },
     parameters: {
@@ -181,8 +167,6 @@ const StoryComplex = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -201,8 +185,6 @@ const StoryComplex = ({
             view,
             size,
             hasClose,
-            closeIconType,
-            textColor,
             onHide: action('onHide'),
             onShow: action('onShow'),
         });

package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx

@@ -32,7 +32,7 @@ type Items = Array<{
         /**
         * Сторона открытия вложенного дропдауна относительно текущего элемента;
         */
-        placement: DropdownPlacement;
+        placement?: DropdownPlacement;
         /**
          * Список дочерних items.
          */

package/styled-components/es/components/Toast/Toast.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick", "textColor"];
+var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -35,7 +35,6 @@ export var toastRoot = function toastRoot(Root) {
       style = props.style,
       closeIconType = props.closeIconType,
       onCloseButtonClick = props.onCloseButtonClick,
-      textColor = props.textColor,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? classes.toastPilled : undefined;
     var fixedWidth = !Number.isNaN(Number(width)) ? "".concat(width, "%") : width;
@@ -59,9 +58,7 @@ export var toastRoot = function toastRoot(Root) {
       role: role,
       "aria-live": ariaLive,
       "aria-atomic": ariaAtomic
-    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {
-      textColor: textColor
-    }, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
+    }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledContent, null, text), hasClose && /*#__PURE__*/React.createElement(CloseIconWrapper, {
       view: "clear",
       size: "s",
       onClick: onCloseButtonClick,

package/styled-components/es/components/Toast/Toast.styles.js

@@ -34,10 +34,7 @@ export var StyledOverlay = /*#__PURE__*/styled(Overlay).withConfig({
 })(["&&.", "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"], /*#__PURE__*/String(classes.toastFadeShowed), /*#__PURE__*/String(classes.toastFadeHidden));
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-3"
-})(["display:flex;--plasma_private-content-left-margin:var(", ");margin:var(--plasma_private-content-left-margin);color:var(", ");"], tokens.contentLeftMargin, tokens.contentLeftColor);
+})(["display:flex;--plasma_private-left-content-margin:var(", ");margin:var(--plasma_private-left-content-margin);"], tokens.leftContentMargin);
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-4"
-})(["color:", ";"], function (_ref5) {
-  var textColor = _ref5.textColor;
-  return textColor || 'currentColor';
-});
+})([""]);

package/styled-components/es/components/Toast/Toast.template-doc.mdx

@@ -104,10 +104,6 @@ export interface ShowToastArgs {
      * Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
      */
     timeout?: number;
-    /**
-     * Цвет текста (по умолчанию берётся цвет из view)
-     */
-    textColor?: string;
     /**
      * callback срабатывающий в момент события hideToast
      */
@@ -121,11 +117,9 @@ export interface ShowToastArgs {
 
 ## Пример использования
 
-Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
-
 ```jsx live
 import React from 'react'
-import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ package }}'
+import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
 
 export function App() {
 
@@ -136,13 +130,12 @@ export function App() {
         const onHide = () => {}
         const toastData = {
             text: 'Подсказка вызванная showToast',
-            textColor: 'cyan',
             position: 'bottom',
             role: 'status',
             hasClose: true,
             fade: false,
             size: 'm',
-            view: 'default',
+            view: 'dark',
             timeout: 3000,
             onShow,
             onHide
@@ -152,19 +145,9 @@ export function App() {
     }
 
     return (
-        <div style=\{{ display: 'flex', gap: '1rem' }}>
-            <ViewContainer view="onLight">
-                <ToastProvider>
-                    <ToastExample />
-                </ToastProvider>
-            </ViewContainer>
-
-            <ViewContainer view="onDark">
-                <ToastProvider>
-                    <ToastExample />
-                </ToastProvider>
-            </ViewContainer>
-        </div>
+        <ToastProvider>
+            <ToastExample />
+        </ToastProvider>
     )
 }
 ```

package/styled-components/es/components/Toast/Toast.tokens.js

@@ -19,8 +19,7 @@ export var tokens = {
   letterSpacing: '--plasma-toast-letter-spacing',
   lineHeight: '--plasma-toast-lineheight',
   pilledBorderRadius: '--plasma-toast-pilled-border-radius',
-  contentLeftMargin: '--plasma-toast-content-left-margin',
-  contentLeftColor: '--plasma-toast-content-left-color',
+  leftContentMargin: '--plasma-toast-left-content-margin',
   closeIconMargin: '--plasma-toast-close-icon-margin',
   closeIconColor: '--plasma-toast-close-icon-color',
   closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',

package/styled-components/es/components/Toast/ToastProvider/ToastProvider.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { DEFAULT_CLOSE_ICON_TYPE, DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
+import { DEFAULT_FADE, DEFAULT_POSITION, TIMER_DELAY } from '../utils';
 export var ToastContext = /*#__PURE__*/createContext(null);
 export var useToastInner = function useToastInner() {
   var context = useContext(ToastContext);
@@ -118,9 +118,6 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
         size = _getShowToastCallSign.size,
         view = _getShowToastCallSign.view,
         width = _getShowToastCallSign.width,
-        _getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
-        closeIconType = _getShowToastCallSign4 === void 0 ? DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
-        textColor = _getShowToastCallSign.textColor,
         onHide = _getShowToastCallSign.onHide,
         onShow = _getShowToastCallSign.onShow;
       setToastProps({
@@ -134,9 +131,7 @@ export var ToastProviderHoc = function ToastProviderHoc(ToastComponent) {
         pilled: pilled,
         hasClose: hasClose,
         size: size,
-        view: view,
-        closeIconType: closeIconType,
-        textColor: textColor
+        view: view
       });
       setToastInfo({
         timeout: timeout,

package/styled-components/es/components/Toast/utils.js

@@ -2,7 +2,6 @@ import { buttonConfig } from '../Button';
 import { component, mergeConfig } from '../../engines';
 export var DEFAULT_FADE = true;
 export var DEFAULT_POSITION = 'bottom';
-export var DEFAULT_CLOSE_ICON_TYPE = 'default';
 export var TIMER_DELAY = 300;
 export var FADE_Z_INDEX = '9900';
 export var TOAST_Z_INDEX = '9901';

package/styled-components/es/components/Toast/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Toast.tokens';
-export var base = /*#__PURE__*/css(["&.", "{--plasma_private-content-left-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.contentLeftMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);
+export var base = /*#__PURE__*/css(["&.", "{--plasma_private-left-content-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(classes.toastPilled), tokens.leftContentMargin, tokens.closeIconMargin, tokens.pilledBorderRadius);

package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js

@@ -9,24 +9,14 @@ export var config = {
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),

package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.stories.tsx

@@ -4,39 +4,21 @@ import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { WithTheme } from '../../../_helpers';
+import { toastConfig } from '../../../../components/Toast';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopupProvider } from '../Popup/Popup';
 import { addNotification } from '../../../../../src/components/Notification';
 import { NotificationsProvider } from '../Notification/Notification';
 import { Modal } from '../Modal/Modal';
 
+import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
-const views = ['default', 'positive', 'negative'];
-const closeIconTypes = ['default', 'thin'];
-
 const meta: Meta<typeof ToastController> = {
     title: 'b2c/Overlay/Toast',
     decorators: [WithTheme],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        closeIconType: {
-            options: closeIconTypes,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        ...disableProps(['size']),
-    },
 };
 
 export default meta;
@@ -79,7 +61,6 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
-        textColor: undefined,
         view: 'default',
         closeIconType: 'default',
         size: 'm',
@@ -87,6 +68,14 @@ export const ToastComponent: StoryComponent = {
         enableContentLeft: true,
         pilled: false,
     },
+    argTypes: {
+        closeIconType: {
+            options: ['default', 'thin'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
     render: ({ enableContentLeft, ...args }) => (
         <ToastContainer>
             <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
@@ -105,8 +94,6 @@ const StoryLiveDemo = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const { showToast, hideToast } = useToast();
     const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
@@ -127,8 +114,6 @@ const StoryLiveDemo = ({
                         view,
                         size,
                         hasClose,
-                        closeIconType,
-                        textColor,
                         onHide: action('onHide'),
                         onShow: action('onShow'),
                     });
@@ -156,6 +141,7 @@ export const LiveDemo: Story = {
                 type: 'inline-radio',
             },
         },
+        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
         ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
     },
     parameters: {
@@ -181,8 +167,6 @@ const StoryComplex = ({
     size,
     hasClose,
     enableContentLeft,
-    closeIconType,
-    textColor,
 }: StoryProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -201,8 +185,6 @@ const StoryComplex = ({
             view,
             size,
             hasClose,
-            closeIconType,
-            textColor,
             onHide: action('onHide'),
             onShow: action('onShow'),
         });

package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js

@@ -9,24 +9,14 @@ export var config = {
   variations: {
     view: {
       "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.contentLeftColor, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
-      /**
-       * @deprecated
-       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
-       */
       light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], toastTokens.borderRadius, toastTokens.maxWidth, toastTokens.padding, toastTokens.fontFamily, toastTokens.fontSize, toastTokens.fontStyle, toastTokens.fontWeight, toastTokens.letterSpacing, toastTokens.lineHeight, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.contentLeftMargin, toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/css(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], toastTokens.pilledBorderRadius, toastTokens.leftContentMargin, toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/css(["", ":1rem;", ":1.5rem;"], toastTokens.closeIconButtonSize, toastTokens.closeIconSize),