diff --git a/packages/sdds-dfa/src/components/Chip/Chip.config.tsx b/packages/sdds-dfa/src/components/Chip/Chip.config.tsx index 57d0b2b085..56b700d1d1 100644 --- a/packages/sdds-dfa/src/components/Chip/Chip.config.tsx +++ b/packages/sdds-dfa/src/components/Chip/Chip.config.tsx @@ -154,7 +154,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--plasma-colors-accent); + ${chipTokens.focusColor}: var(--text-accent); `, }, pilled: { diff --git a/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts b/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts index 3eac0dc10f..dde68256e1 100644 --- a/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts @@ -297,7 +297,7 @@ export const config = { ${comboboxTokens.background}: var(--surface-solid-card); ${comboboxTokens.boxShadow}: var(--shadow-down-soft-s); - ${comboboxTokens.itemBackground}: var(--plasma-colors-transparent); + ${comboboxTokens.itemBackground}: var(--surface-clear); ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); ${comboboxTokens.itemColor}: var(--text-primary); diff --git a/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts index fddc8a8387..ad97d882f9 100644 --- a/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts @@ -95,7 +95,7 @@ export const config = { ${dropdownTokens.background}: var(--surface-solid-card); ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); - ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); + ${dropdownTokens.itemBackground}: var(--surface-clear); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${dropdownTokens.itemColor}: var(--text-primary); `, diff --git a/packages/sdds-dfa/src/components/Modal/Modal.config.ts b/packages/sdds-dfa/src/components/Modal/Modal.config.ts index 689f609d41..edc1be758d 100644 --- a/packages/sdds-dfa/src/components/Modal/Modal.config.ts +++ b/packages/sdds-dfa/src/components/Modal/Modal.config.ts @@ -8,7 +8,7 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--plasma-colors-overlay); + ${modalTokens.modalOverlayColor}: var(--overlay-soft); `, }, }, diff --git a/packages/sdds-dfa/src/components/Popover/Popover.config.ts b/packages/sdds-dfa/src/components/Popover/Popover.config.ts index f6a8d7a986..c6ca29bf72 100644 --- a/packages/sdds-dfa/src/components/Popover/Popover.config.ts +++ b/packages/sdds-dfa/src/components/Popover/Popover.config.ts @@ -12,7 +12,7 @@ export const config = { ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--plasma-colors-surface-solid03); + ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); `, }, }, diff --git a/packages/sdds-dfa/src/components/Popover/Popover.stories.tsx b/packages/sdds-dfa/src/components/Popover/Popover.stories.tsx index 6d55d3d21e..edcc3e630c 100644 --- a/packages/sdds-dfa/src/components/Popover/Popover.stories.tsx +++ b/packages/sdds-dfa/src/components/Popover/Popover.stories.tsx @@ -84,7 +84,7 @@ type StoryPopoverProps = ComponentProps & { }; const StyledContent = styled.div` - background: var(--plasma-colors-surface-solid03); + background: var(--surface-solid-tertiary); padding: 1rem; border-radius: 0.5rem; diff --git a/packages/sdds-dfa/src/components/Spinner/Spinner.stories.tsx b/packages/sdds-dfa/src/components/Spinner/Spinner.stories.tsx index 9e6228afd1..123bb2f12d 100644 --- a/packages/sdds-dfa/src/components/Spinner/Spinner.stories.tsx +++ b/packages/sdds-dfa/src/components/Spinner/Spinner.stories.tsx @@ -50,7 +50,7 @@ const StyledWrapper = styled.div<{ $loading?: boolean }>` content: ''; display: none; - background: var(--plasma-colors-surface-liquid01); + background: var(--surface-transparent-primary); } ${({ $loading }) => diff --git a/packages/sdds-dfa/src/components/Tabs/TabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/TabItem.config.ts index 438c0cb6a7..043cadaf6c 100644 --- a/packages/sdds-dfa/src/components/Tabs/TabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/TabItem.config.ts @@ -8,102 +8,102 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--plasma-colors-secondary); + ${tabsTokens.itemColor}: var(--text-secondary); ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemColorHover}: var(--text-primary); ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedColor}: var(--text-primary); ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedColorHover}: var(--text-primary); ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); - ${tabsTokens.additionalContentColor}: var(--plasma-colors-tertiary); - ${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary); + ${tabsTokens.additionalContentColor}: var(--text-tertiary); + ${tabsTokens.additionalContentHoverColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary); `, secondary: css` - ${tabsTokens.itemColor}: var(--plasma-colors-primary); + ${tabsTokens.itemColor}: var(--text-primary); ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemColorHover}: var(--text-primary); ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--plasma-colors-surface-card); - ${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--plasma-colors-surface-card); + ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); + ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); - ${tabsTokens.additionalContentColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary); + ${tabsTokens.additionalContentColor}: var(--text-secondary); + ${tabsTokens.additionalContentHoverColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary); `, divider: css` - ${tabsTokens.itemColor}: var(--plasma-colors-secondary); + ${tabsTokens.itemColor}: var(--text-secondary); ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemColorHover}: var(--text-primary); ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedColor}: var(--text-primary); ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedColorHover}: var(--text-primary); ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); - ${tabsTokens.additionalContentColor}: var(--plasma-colors-tertiary); - ${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-secondary); + ${tabsTokens.additionalContentColor}: var(--text-tertiary); + ${tabsTokens.additionalContentHoverColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedHoverColor}: var(--text-secondary); `, default: css` - ${tabsTokens.itemColor}: var(--plasma-colors-primary); + ${tabsTokens.itemColor}: var(--text-primary); ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemColorHover}: var(--text-primary); ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--plasma-colors-inverse); + ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--plasma-colors-inverse); + ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--plasma-colors-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--plasma-colors-primary); + ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); - ${tabsTokens.additionalContentColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentHoverColor}: var(--plasma-colors-secondary); - ${tabsTokens.additionalContentSelectedColor}: var(--plasma-colors-white-secondary); - ${tabsTokens.additionalContentSelectedHoverColor}: var(--plasma-colors-white-secondary); + ${tabsTokens.additionalContentColor}: var(--text-secondary); + ${tabsTokens.additionalContentHoverColor}: var(--text-secondary); + ${tabsTokens.additionalContentSelectedColor}: var(--on-dark-text-secondary); + ${tabsTokens.additionalContentSelectedHoverColor}: var(--on-dark-text-secondary); `, }, size: { diff --git a/packages/sdds-dfa/src/components/Tabs/Tabs.config.ts b/packages/sdds-dfa/src/components/Tabs/Tabs.config.ts index 99fd790d55..a0ffadb0ba 100644 --- a/packages/sdds-dfa/src/components/Tabs/Tabs.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/Tabs.config.ts @@ -9,27 +9,27 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--plasma-colors-secondary); + ${tabsTokens.arrowColor}: var(--text-secondary); ${tabsTokens.tabsBackgroundColor}: tranparent; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: tranparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--plasma-colors-secondary); + ${tabsTokens.arrowColor}: var(--text-secondary); ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: tranparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--plasma-colors-secondary); + ${tabsTokens.arrowColor}: var(--text-secondary); ${tabsTokens.tabsBackgroundColor}: tranparent; - ${tabsTokens.outlineFocusColor}: var(--plasma-colors-button-focused); + ${tabsTokens.outlineFocusColor}: var(--surface-accent); ${tabsTokens.tabsDividerHeight}: 0.0625rem; ${tabsTokens.tabsDividerColor}: var(--surface-transparent-secondary); diff --git a/packages/sdds-dfa/src/components/TextField/TextField.config.ts b/packages/sdds-dfa/src/components/TextField/TextField.config.ts index e4c6319a94..e2e8210ee2 100644 --- a/packages/sdds-dfa/src/components/TextField/TextField.config.ts +++ b/packages/sdds-dfa/src/components/TextField/TextField.config.ts @@ -35,7 +35,7 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, positive: css` - ${tokens.color}: var(--plasma-colors-primary); + ${tokens.color}: var(--text-primary); ${tokens.backgroundColor}: var(--surface-transparent-positive); ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); ${tokens.caretColor}: var(--text-accent); @@ -61,7 +61,7 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, warning: css` - ${tokens.color}: var(--plasma-colors-primary); + ${tokens.color}: var(--text-primary); ${tokens.backgroundColor}: var(--surface-transparent-warning); ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); ${tokens.caretColor}: var(--text-accent); @@ -87,7 +87,7 @@ export const config = { ${tokens.focusColor}: var(--text-accent); `, negative: css` - ${tokens.color}: var(--plasma-colors-primary); + ${tokens.color}: var(--text-primary); ${tokens.backgroundColor}: var(--surface-transparent-negative); ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); ${tokens.caretColor}: var(--text-accent); @@ -333,7 +333,7 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.placeholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--text-secondary))); ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); diff --git a/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts index d6b4908a86..c062b3d027 100644 --- a/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts @@ -63,7 +63,7 @@ export const config = { default: css` ${tooltipTokens.backgroundColor}: var(--surface-solid-card); ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--plasma-colors-primary); + ${tooltipTokens.color}: var(--text-primary); `, }, }, diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index 96f0746c4d..b124c0e7ca 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -6,7 +6,9 @@ /// +import { AccordionItem } from '@salutejs/plasma-new-hope/styled-components'; import { addFocus } from '@salutejs/plasma-new-hope/styled-components'; +import { addNotification } from '@salutejs/plasma-new-hope/styled-components'; import { AlignProp } from '@salutejs/plasma-new-hope/types/components/Cell/Cell.types'; import { AnchorHTMLAttributes } from 'react'; import { AsProps } from '@salutejs/plasma-new-hope/types/types'; @@ -29,6 +31,7 @@ import { bodyXSBold } from '@salutejs/sdds-themes/tokens'; import { bodyXXS } from '@salutejs/sdds-themes/tokens'; import { bodyXXSBold } from '@salutejs/sdds-themes/tokens'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; +import { ButtonBase } from '@salutejs/plasma-new-hope/styled-components'; import { ButtonGroupProps } from '@salutejs/plasma-new-hope/styled-components'; import { ButtonHTMLAttributes } from 'react'; import { Calendar as Calendar_2 } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; @@ -46,6 +49,7 @@ import { CellTextboxTitle } from '@salutejs/plasma-new-hope/styled-components'; import { ChangeEvent } from 'react'; import { CheckboxProps as CheckboxProps_2 } from '@salutejs/plasma-new-hope/types/components/Checkbox/Checkbox.types'; import { ChipProps } from '@salutejs/plasma-new-hope/styled-components'; +import { closeNotification } from '@salutejs/plasma-new-hope/styled-components'; import { ClosePlacementType } from '@salutejs/plasma-new-hope/styled-components'; import { Col } from '@salutejs/plasma-new-hope/styled-components'; import { ColCount } from '@salutejs/plasma-new-hope/styled-components'; @@ -85,7 +89,7 @@ import { dsplM } from '@salutejs/sdds-themes/tokens'; import { dsplMBold } from '@salutejs/sdds-themes/tokens'; import { dsplS } from '@salutejs/sdds-themes/tokens'; import { dsplSBold } from '@salutejs/sdds-themes/tokens'; -import type { FC } from 'react'; +import { FC } from 'react'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; import { ForwardRefExoticComponent } from 'react'; import { FunctionComponent } from 'react'; @@ -113,6 +117,9 @@ import { mediaQuery } from '@salutejs/plasma-new-hope/styled-components'; import { modalClasses } from '@salutejs/plasma-new-hope/styled-components'; import { ModalProps } from '@salutejs/plasma-new-hope/styled-components'; import { MouseEvent as MouseEvent_2 } from 'react'; +import { NotificationIconPlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { NotificationLayout } from '@salutejs/plasma-new-hope/styled-components'; +import { NotificationProps } from '@salutejs/plasma-new-hope/styled-components'; import { Overlay } from '@salutejs/plasma-new-hope/styled-components'; import { OverlayProps } from '@salutejs/plasma-new-hope/styled-components'; import { PaginationProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -138,10 +145,12 @@ import { RangeInputRefs } from '@salutejs/plasma-new-hope/styled-components'; import { RangeProps } from '@salutejs/plasma-new-hope/styled-components'; import { rangeTokens } from '@salutejs/plasma-new-hope/styled-components'; import { Ratio } from '@salutejs/plasma-new-hope/styled-components'; +import { default as React_2 } from 'react'; import { ReactElement } from 'react'; import { ReactFragment } from 'react'; import { ReactNode } from 'react'; import { ReactPortal } from 'react'; +import { RectSkeleton } from '@salutejs/plasma-new-hope/styled-components'; import { RefAttributes } from 'react'; import { RefObject } from 'react'; import { Row } from '@salutejs/plasma-new-hope/styled-components'; @@ -156,6 +165,8 @@ import { sheetClasses } from '@salutejs/plasma-new-hope/styled-components'; import { SheetProps } from '@salutejs/plasma-new-hope/styled-components'; import { ShowToastArgs } from '@salutejs/plasma-new-hope/styled-components'; import { SingleSliderProps } from '@salutejs/plasma-new-hope/styled-components'; +import { SkeletonGradientProps } from '@salutejs/plasma-new-hope/styled-components'; +import { SkeletonSizeProps } from '@salutejs/plasma-new-hope/types/components/Skeleton/Skeleton.types'; import { SliderProps } from '@salutejs/plasma-new-hope/styled-components'; import { SpacingProps } from '@salutejs/plasma-new-hope/styled-components'; import { SSRProvider } from '@salutejs/plasma-new-hope/styled-components'; @@ -180,6 +191,7 @@ import { textM } from '@salutejs/sdds-themes/tokens'; import { textMBold } from '@salutejs/sdds-themes/tokens'; import { textS } from '@salutejs/sdds-themes/tokens'; import { textSBold } from '@salutejs/sdds-themes/tokens'; +import { TextSkeletonBaseProps } from '@salutejs/plasma-new-hope/types/components/Skeleton/TextSkeleton/TextSkeleton.types'; import { textXS } from '@salutejs/sdds-themes/tokens'; import { textXSBold } from '@salutejs/sdds-themes/tokens'; import { ToastPosition } from '@salutejs/plasma-new-hope/styled-components'; @@ -192,9 +204,38 @@ import { usePopupContext } from '@salutejs/plasma-new-hope/styled-components'; import { useSegment } from '@salutejs/plasma-new-hope/styled-components'; import { useToast } from '@salutejs/plasma-new-hope/styled-components'; import { Variants } from '@salutejs/plasma-new-hope/types/engines/types'; +import { withSkeleton } from '@salutejs/plasma-new-hope/styled-components'; + +// @public (undocumented) +export const Accordion: FunctionComponent & { +view: string; +size?: string | undefined; +singleActive?: boolean | undefined; +defaultActiveEventKey?: number[] | undefined; +disabled?: boolean | undefined; +stretching?: "filled" | "fixed" | undefined; +onChange?: ((index?: number | undefined, value?: boolean | undefined) => void) | undefined; +children?: ReactNode; +className?: string | undefined; +} & RefAttributes>; + +export { AccordionItem } export { addFocus } +export { addNotification } + // @public (undocumented) export const Autocomplete: FunctionComponent))>; +export { ButtonBase } + // @public export const ButtonGroup: FunctionComponent & HTMLAttributes & SkeletonSizeProps & { +customGradientColor?: string | undefined; +roundness?: 0 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250 | undefined; +} & SkeletonGradientProps & RefAttributes>; + // @public export const Link: FunctionComponent>; +export { Notification_2 as Notification } + +export { NotificationIconPlacement } + +export { NotificationLayout } + +export { NotificationProps } + +// @public (undocumented) +export const NotificationsProvider: React_2.FC<{ + children: ReactNode; + frame?: string; +}>; + export { Overlay } export { OverlayProps } @@ -1428,6 +1515,8 @@ export { rangeTokens } export { Ratio } +export { RectSkeleton } + export { Row } export { ScreenConfig } @@ -1895,6 +1984,32 @@ export { textS } export { textSBold } +// @public (undocumented) +export const TextSkeleton: FC & HTMLAttributes & SkeletonSizeProps & { +customGradientColor?: string | undefined; +roundness?: 0 | 8 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 250 | undefined; +} & SkeletonGradientProps & RefAttributes & TextSkeletonBaseProps>; + // @public (undocumented) export const TextXS: FunctionComponent & AccordionItemCustomProps; + +const meta: Meta = { + title: 'Content/Accordion', + decorators: [InSpacingDecorator], + component: Accordion, + args: { + singleActive: false, + view: 'default', + size: 'm', + stretching: 'filled', + disabled: false, + type: 'arrow', + pin: undefined, + title: 'Как оплатить заправку бонусами СберСпасибо?', + body: + 'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива', + }, + argTypes: { + ...disableProps(['text']), + view: { + options: ['default', 'clear'], + control: { + type: 'select', + }, + }, + size: { + options: ['xs', 's', 'm', 'l'], + control: { + type: 'select', + }, + }, + stretching: { + options: ['filled', 'fixed'], + control: { + type: 'select', + }, + }, + type: { + options: ['arrow', 'sign', 'clear'], + control: { + type: 'select', + }, + }, + pin: { + options: [ + 'square-square', + 'square-clear', + 'clear-square', + 'clear-clear', + 'clear-circle', + 'circle-clear', + 'circle-circle', + ], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +export const Default: StoryObj = { + render: (props: AccordionProps) => { + const args = { ...props, text: undefined }; + + return ( + + + {args.body} + + + {args.body} + + + {args.body} + + + ); + }, +}; diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.ts b/packages/sdds-serv/src/components/Accordion/Accordion.ts new file mode 100644 index 0000000000..4498feb929 --- /dev/null +++ b/packages/sdds-serv/src/components/Accordion/Accordion.ts @@ -0,0 +1,9 @@ +import { component, mergeConfig, accordionConfig, AccordionItem } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Accordion.config'; + +const mergedConfig = mergeConfig(accordionConfig, config); + +export const Accordion = component(mergedConfig); + +export { AccordionItem }; diff --git a/packages/sdds-serv/src/components/Accordion/index.ts b/packages/sdds-serv/src/components/Accordion/index.ts new file mode 100644 index 0000000000..3b1514e062 --- /dev/null +++ b/packages/sdds-serv/src/components/Accordion/index.ts @@ -0,0 +1 @@ +export { Accordion, AccordionItem } from './Accordion'; diff --git a/packages/sdds-serv/src/components/ButtonBase/index.ts b/packages/sdds-serv/src/components/ButtonBase/index.ts new file mode 100644 index 0000000000..c0cc88b007 --- /dev/null +++ b/packages/sdds-serv/src/components/ButtonBase/index.ts @@ -0,0 +1 @@ +export { ButtonBase } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-serv/src/components/Calendar/Calendar.tsx b/packages/sdds-serv/src/components/Calendar/Calendar.tsx index f034ca3263..934169ea04 100644 --- a/packages/sdds-serv/src/components/Calendar/Calendar.tsx +++ b/packages/sdds-serv/src/components/Calendar/Calendar.tsx @@ -1,13 +1,14 @@ +import type { FC } from 'react'; import { - boundCalendar, - withRange, + component, calendarBaseConfig, calendarDoubleConfig, - component, + withRange, mergeConfig, + boundCalendar, + CalendarStateType, } from '@salutejs/plasma-new-hope/styled-components'; import type { CalendarBaseProps, CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; -import type { FC } from 'react'; import { config as baseConfig } from './CalendarBase.config'; import { config as doubleConfig } from './CalendarDouble.config'; @@ -26,3 +27,5 @@ export const Calendar = boundCalendar({ double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); + +export type { CalendarStateType }; diff --git a/packages/sdds-serv/src/components/Chip/Chip.config.tsx b/packages/sdds-serv/src/components/Chip/Chip.config.tsx index 57d0b2b085..56b700d1d1 100644 --- a/packages/sdds-serv/src/components/Chip/Chip.config.tsx +++ b/packages/sdds-serv/src/components/Chip/Chip.config.tsx @@ -154,7 +154,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--plasma-colors-accent); + ${chipTokens.focusColor}: var(--text-accent); `, }, pilled: { diff --git a/packages/sdds-serv/src/components/Combobox/Combobox.config.ts b/packages/sdds-serv/src/components/Combobox/Combobox.config.ts index 3eac0dc10f..dde68256e1 100644 --- a/packages/sdds-serv/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-serv/src/components/Combobox/Combobox.config.ts @@ -297,7 +297,7 @@ export const config = { ${comboboxTokens.background}: var(--surface-solid-card); ${comboboxTokens.boxShadow}: var(--shadow-down-soft-s); - ${comboboxTokens.itemBackground}: var(--plasma-colors-transparent); + ${comboboxTokens.itemBackground}: var(--surface-clear); ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); ${comboboxTokens.itemColor}: var(--text-primary); diff --git a/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts index fddc8a8387..ad97d882f9 100644 --- a/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts @@ -95,7 +95,7 @@ export const config = { ${dropdownTokens.background}: var(--surface-solid-card); ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); - ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); + ${dropdownTokens.itemBackground}: var(--surface-clear); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); ${dropdownTokens.itemColor}: var(--text-primary); `, diff --git a/packages/sdds-serv/src/components/Modal/Modal.config.ts b/packages/sdds-serv/src/components/Modal/Modal.config.ts index 689f609d41..edc1be758d 100644 --- a/packages/sdds-serv/src/components/Modal/Modal.config.ts +++ b/packages/sdds-serv/src/components/Modal/Modal.config.ts @@ -8,7 +8,7 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--plasma-colors-overlay); + ${modalTokens.modalOverlayColor}: var(--overlay-soft); `, }, }, diff --git a/packages/sdds-serv/src/components/Notification/Notification.config.ts b/packages/sdds-serv/src/components/Notification/Notification.config.ts new file mode 100644 index 0000000000..4a1cffb442 --- /dev/null +++ b/packages/sdds-serv/src/components/Notification/Notification.config.ts @@ -0,0 +1,103 @@ +import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + }, + variations: { + view: { + default: css` + ${notificationTokens.contentColor}: var(--text-secondary); + ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.borderRadius}: 0.75rem; + ${notificationTokens.padding}: 0.375rem; + + ${notificationTokens.contentPaddingTop}: 0.125rem; + ${notificationTokens.contentPaddingRight}: 0.25rem; + ${notificationTokens.contentPaddingBottom}: 0rem; + ${notificationTokens.contentPaddingLeft}: 0.25rem; + + ${notificationTokens.contentPaddingTopWithoutIcon}: 0.25rem; + ${notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon}: 1rem; + + ${notificationTokens.textboxPaddingTop}: 0.1875rem; + ${notificationTokens.textboxPaddingRight}: 0.125rem; + ${notificationTokens.textboxPaddingBottom}: 0.375rem; + ${notificationTokens.textboxPaddingLeft}: 0.125rem; + + ${notificationTokens.textboxPaddingRightWithCloseIcon}: 1.625rem; + ${notificationTokens.textboxGap}: 0.25rem; + + ${notificationTokens.closeIconTop}: 0.5rem; + ${notificationTokens.closeIconRight}: 0.5rem; + + ${notificationTokens.buttonsMarginTop}: 0.375rem; + + ${notificationTokens.contentLeftIconSize}: 1.5rem; + ${notificationTokens.contentLeftIconMargin}: 0.375rem; + ${notificationTokens.contentTopIconMargin}: 0.5rem; + + ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); + ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); + ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); + ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); + ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); + ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); + ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); + ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${notificationTokens.closeIconColor}: var(--text-tertiary); + ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + + ${notificationTokens.horizontalLayoutGap}: 0.375rem; + ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; + ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; + `, + }, + layout: { + horizontal: css` + ${notificationTokens.width}: 25rem; + ${notificationTokens.horizontalLayoutPadding}: 1rem 0.5rem 1rem 0.875rem; + `, + vertical: css` + ${notificationTokens.width}: 15rem; + ${notificationTokens.padding}: 0.375rem; + `, + }, + size: { + xs: css` + ${notificationTokens.closeIconTop}: 0.5rem; + ${notificationTokens.closeIconRight}: 0.5rem; + + ${notificationTokens.padding}: 0.375rem; + ${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem; + + ${notificationTokens.contentPaddingTop}: 0.125rem; + ${notificationTokens.contentPaddingRight}: 0.25rem; + ${notificationTokens.contentPaddingBottom}: 0rem; + ${notificationTokens.contentPaddingLeft}: 0.25rem; + + ${notificationTokens.buttonsMarginLeft}: 0rem; + `, + xxs: css` + ${notificationTokens.closeIconTop}: 0.8125rem; + ${notificationTokens.closeIconRight}: 1rem; + + ${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem; + ${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem; + + ${notificationTokens.contentPaddingTop}: 0.25rem; + ${notificationTokens.contentPaddingRight}: 0rem; + ${notificationTokens.contentPaddingBottom}: 0rem; + ${notificationTokens.contentPaddingLeft}: 0rem; + + ${notificationTokens.buttonsMarginLeft}: 2rem; + `, + }, + }, +}; diff --git a/packages/sdds-serv/src/components/Notification/Notification.stories.tsx b/packages/sdds-serv/src/components/Notification/Notification.stories.tsx new file mode 100644 index 0000000000..62ee652b7d --- /dev/null +++ b/packages/sdds-serv/src/components/Notification/Notification.stories.tsx @@ -0,0 +1,177 @@ +import React, { useCallback, useRef, useState } from 'react'; +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { IconDisclosureRight } from '@salutejs/plasma-icons'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; + +import { Button } from '../Button/Button'; +import { Modal } from '../Modal/Modal'; +import { PopupProvider } from '../Popup'; + +import { + Notification, + NotificationsProvider, + NotificationIconPlacement, + NotificationLayout, + addNotification, +} from './Notification'; + +const titles = ['Выполнено', 'Внимание', 'Ошибка']; +const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ']; +const size = ['xs', 'xxs']; +const iconPlacement = ['top', 'left']; + +const longText = `JavaScript frameworks are an essential part of modern front-end web development, +providing developers with proven tools for building scalable, interactive web applications. +`; + +const getNotificationProps = (i: number) => ({ + title: titles[i % 3], + children: texts[i % 3], + size: size[i % 2], + iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement, +}); + +const placements = ['top', 'left']; + +const meta: Meta = { + title: 'Controls/Notification', + decorators: [InSpacingDecorator], +}; + +export default meta; + +interface StoryDefaultProps { + title: string; + children: string; + showCloseIcon: boolean; + showLeftIcon: boolean; + layout: NotificationLayout; + size: 'xs' | 'xxs'; + iconPlacement: NotificationIconPlacement; +} + +const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => { + return ( + : ''} + iconPlacement={iconPlacement} + actions={ +