@salutejs/plasma-new-hope 0.170.0-canary.1488.11387414081.0 → 0.170.0-canary.1490.11387458591.0

package/styled-components/es/examples/plasma_web/components/Drawer/Drawer.stories.tsx

@@ -103,7 +103,7 @@ type StoryDrawerProps = ComponentProps<typeof Drawer> & {
 };
 
 const StyledWrapper = styled.div`
-    height: 100%;
+    height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -188,11 +188,6 @@ const StoryDrawerDemo = ({
                     </StyledContentWrapper>
                     <StyledSection />
                 </StyledWrapper>
-                <StyledContent>
-                    <Heading style={{ margin: '2rem' }} size="h2">
-                        Some basic content
-                    </Heading>
-                </StyledContent>
             </PopupProvider>
         </SSRProvider>
     );

package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx

@@ -65,7 +65,7 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
     argTypes: { ...disableProps(['children']) },
     render: (args) => (
         <IconButton {...args}>
-            <IconChevronLeft size={getSizeForIcon(args.size)} />
+            <IconChevronLeft color="inherit" size={getSizeForIcon(args.size)} />
         </IconButton>
     ),
 };

package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -83,11 +83,11 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 1200px;
+    height: 100vh;
 `;
 
 const Content = styled.div`
-    background: var(--plasma-colors-surface-solid02);
+    background: var(--surface-solid-secondary);
     padding: 1rem;
 `;
 
@@ -285,26 +285,28 @@ const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: Story
 
     return (
         <SSRProvider>
-            <PopupProvider>
-                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
-                <StyledModalAnimation
-                    id="modal"
-                    frame="theme-root"
-                    withAnimation
-                    onClose={() => setIsOpen(false)}
-                    opened={isOpen}
-                    placement={placement}
-                    offset={[offsetX, offsetY]}
-                    initialFocusRef={ref}
-                    {...rest}
-                >
-                    <Content>
-                        <TextField value="Text" onChange={() => {}} />
-                        <TextField ref={ref} value="Text2" onChange={() => {}} />
-                        <Button text="Закрыть" onClick={close} />
-                    </Content>
-                </StyledModalAnimation>
-            </PopupProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                    <StyledModalAnimation
+                        id="modal"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpen(false)}
+                        opened={isOpen}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        initialFocusRef={ref}
+                        {...rest}
+                    >
+                        <Content>
+                            <TextField value="Text" onChange={() => {}} />
+                            <TextField ref={ref} value="Text2" onChange={() => {}} />
+                            <Button text="Закрыть" onClick={close} />
+                        </Content>
+                    </StyledModalAnimation>
+                </PopupProvider>
+            </StyledWrapper>
         </SSRProvider>
     );
 };

package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
+import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -25,6 +26,10 @@ const longText = `JavaScript frameworks are an essential part of modern front-en
 providing developers with proven tools for building scalable, interactive web applications.
 `;
 
+const StyledWrapper = styled.div`
+    height: 100vh;
+`;
+
 const getNotificationProps = (i: number) => ({
     title: titles[i % 3],
     children: texts[i % 3],
@@ -122,7 +127,9 @@ const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
 
     return (
         <NotificationsProvider>
-            <Button text="Добавить уведомление" onClick={handleClick} />
+            <StyledWrapper>
+                <Button text="Добавить уведомление" onClick={handleClick} />
+            </StyledWrapper>
         </NotificationsProvider>
     );
 };
@@ -159,11 +166,13 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     return (
         <NotificationsProvider>
             <PopupProvider>
-                <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <div>Hello!</div>
-                    <Button view="primary" text="Add notification" onClick={handleClick} />
-                </Modal>
+                <StyledWrapper>
+                    <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
+                    <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                        <div>Hello!</div>
+                        <Button view="primary" text="Add notification" onClick={handleClick} />
+                    </Modal>
+                </StyledWrapper>
             </PopupProvider>
         </NotificationsProvider>
     );

package/styled-components/es/examples/plasma_web/components/Popover/Popover.stories.tsx

@@ -77,7 +77,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
 };
 
 const StyledContent = styled.div`
-    background: var(--plasma-colors-surface-solid03);
+    background: var(--surface-solid-tertiary);
     padding: 1rem;
     border-radius: 0.5rem;
 

package/styled-components/es/examples/plasma_web/components/Popup/Popup.stories.tsx

@@ -58,13 +58,13 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 1200px;
+    height: 100vh;
 `;
 
 const OtherContent = styled.div`
     width: 50%;
     height: 50%;
-    background: var(--plasma-colors-surface-solid03);
+    background: var(--surface-solid-tertiary);
     position: absolute;
 
     display: flex;
@@ -77,7 +77,7 @@ const OtherContent = styled.div`
 `;
 
 const Content = styled.div`
-    background: var(--plasma-colors-surface-solid02);
+    background: var(--surface-solid-secondary);
     padding: 1rem;
 `;
 

package/styled-components/es/examples/plasma_web/components/Segment/SegmentGroup.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
-      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-accent);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor),
+      filled: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-accent);"], segmentTokens.arrowColor, segmentTokens.groupBackgroundColor, segmentTokens.outlineFocusColor)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.625rem;", ":1.125rem;", ":auto;", ":auto;", ":0.25rem 0.75rem;", ":0.75rem 0;"], segmentTokens.groupBorderRadius, segmentTokens.groupPilledBorderRadius, segmentTokens.groupWidth, segmentTokens.groupHeight, segmentTokens.groupArrowPadding, segmentTokens.groupVerticalArrowPadding),

package/styled-components/es/examples/plasma_web/components/Segment/SegmentItem.config.js

@@ -7,9 +7,9 @@ export var config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-card);", ":var(--text-primary-hover);", ":var(--surface-transparent-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused,var(--text-accent));"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/css(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-accent);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-card);", ":var(--text-primary-hover);", ":var(--surface-transparent-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-accent);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary-hover);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--text-accent);"], segmentTokens.itemColor, segmentTokens.itemBackgroundColor, segmentTokens.itemColorHover, segmentTokens.itemBackgroundColorHover, segmentTokens.itemAdditionalColor, segmentTokens.itemAdditionalColorHover, segmentTokens.itemSelectedColor, segmentTokens.itemSelectedBackgroundColor, segmentTokens.itemSelectedColorHover, segmentTokens.itemSelectedBackgroundColorHover, segmentTokens.itemSelectedAdditionalColor, segmentTokens.itemSelectedAdditionalColorHover, segmentTokens.outlineFocusColor)
     },
     size: {
       xs: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.5rem 0.5rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], segmentTokens.itemBorderRadius, segmentTokens.itemWidth, segmentTokens.itemHeight, segmentTokens.itemPadding, segmentTokens.itemPilledPadding, segmentTokens.itemContentPadding, segmentTokens.itemIconMargin, segmentTokens.itemMarginLeft, segmentTokens.fontFamily, segmentTokens.fontSize, segmentTokens.fontStyle, segmentTokens.fontWeight, segmentTokens.letterSpacing, segmentTokens.lineHeight),

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

@@ -20,7 +20,7 @@ export var config = {
       xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":0.0625rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 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.375rem;", ":0.25rem;", ":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.25rem;", ":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.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":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.375rem;", ":0.375rem;", ":0 0 0 0;", ":0.25rem auto auto -0.625rem;", ":0 0 auto auto;", ":0.125rem -0.6875rem auto auto;", ":0.813rem auto auto -0.625rem;", ":0.813rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.clearLabelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight, tokens.clearIndicatorLabelPlacementInner, tokens.clearIndicatorLabelPlacementInnerRight)
     },
     labelPlacement: {
-      inner: /*#__PURE__*/css(["", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--text-secondary)));", ":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);"], tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight),
+      inner: /*#__PURE__*/css(["", ":var(--text-secondary);", ":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);"], tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight),
       outer: /*#__PURE__*/css([""])
     },
     clear: {

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

@@ -44,6 +44,10 @@ const BellIcon = (props) => (
     </svg>
 );
 
+const StyledWrapper = styled.div`
+    height: 100vh;
+`;
+
 const ToastContainer = styled.div`
     position: fixed;
     transform: translateX(50%);
@@ -193,11 +197,13 @@ const StoryComplex = ({
     return (
         <NotificationsProvider>
             <PopupProvider>
-                <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <div>Hello!</div>
-                    <Button view="default" text="Add notification" onClick={handleShowNotification} />
-                </Modal>
+                <StyledWrapper>
+                    <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
+                    <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                        <div>Hello!</div>
+                        <Button view="default" text="Add notification" onClick={handleShowNotification} />
+                    </Modal>
+                </StyledWrapper>
             </PopupProvider>
         </NotificationsProvider>
     );