@salutejs/plasma-new-hope 0.74.0-canary.1170.8646376541.0 → 0.74.0-canary.1171.8646985900.0

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

@@ -22,7 +22,7 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),

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

@@ -18,7 +18,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":36px;"], _Spinner.spinnerTokens.size)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);"], _Spinner.spinnerTokens.color),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);"], _Spinner.spinnerTokens.color),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);"], _Spinner.spinnerTokens.color),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);"], _Spinner.spinnerTokens.color),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);"], _Spinner.spinnerTokens.color),

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

@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextArea = /*#__PURE__*/require("../../../../components/TextArea");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true'
   },
   variations: {
@@ -19,7 +19,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":6.812rem;", ":1.625rem;", ":0.875rem;", ":0.875rem;", ":1.063rem;", ":1.125rem;", ":3.625rem;", ":0.75rem;", ":0.75rem;", ":1.125rem;", ":0.25rem;", ":0rem;", ":0rem;", ":0rem;", ":0.375rem;", ":1.063rem;", ":1rem;", ":1.25rem;", ":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);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.borderRadiusWithHelpers, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingRightWithRightContent, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingBottomWithHelpers, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.helpersPaddingTop, _TextArea.textAreaTokens.helpersPaddingRight, _TextArea.textAreaTokens.helpersPaddingBottom, _TextArea.textAreaTokens.helpersPaddingLeft, _TextArea.textAreaTokens.helpersOffset, _TextArea.textAreaTokens.rightContentTop, _TextArea.textAreaTokens.rightContentRight, _TextArea.textAreaTokens.rightContentHeight, _TextArea.textAreaTokens.labelMarginBottom, _TextArea.textAreaTokens.labelInnerFontFamily, _TextArea.textAreaTokens.labelInnerFontSize, _TextArea.textAreaTokens.labelInnerFontStyle, _TextArea.textAreaTokens.labelInnerFontWeight, _TextArea.textAreaTokens.labelInnerLetterSpacing, _TextArea.textAreaTokens.labelInnerLineHeight, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight, _TextArea.textAreaTokens.helpersFontFamily, _TextArea.textAreaTokens.helpersFontSize, _TextArea.textAreaTokens.helpersFontStyle, _TextArea.textAreaTokens.helpersFontWeight, _TextArea.textAreaTokens.helpersLetterSpacing, _TextArea.textAreaTokens.helpersLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--text-tertiary-hover);", ":var(--text-tertiary-hover);", ":var(--text-accent);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--text-positive-hover);", ":var(--text-positive-hover);", ":var(--text-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--text-warning-hover);", ":var(--text-warning-hover);", ":var(--text-warning);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor),
       negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--text-negative-hover);", ":var(--text-negative-hover);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.inputCaretColor, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus, _TextArea.textAreaTokens.leftHelperColor, _TextArea.textAreaTokens.rightHelperColor)

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

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Toast = /*#__PURE__*/require("../../../../components/Toast");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },

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

@@ -57,7 +57,7 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         hasClose: true,
         enableContentLeft: true,
@@ -196,7 +196,7 @@ const StoryComplex = ({
                 <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
                     <div>Hello!</div>
-                    <Button view="default" text="Add notification" onClick={handleShowNotification} />
+                    <Button view="primary" text="Add notification" onClick={handleShowNotification} />
                 </Modal>
             </PopupProvider>
         </NotificationsProvider>

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

@@ -34,6 +34,9 @@ const meta: Meta<TooltipProps> = {
     title: 'plasma_web/Tooltip',
     decorators: [WithTheme],
     component: Tooltip,
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '20rem' } },
+    },
 };
 
 export default meta;

package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.config.js

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Badge = /*#__PURE__*/require("../../../../components/Badge");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
       accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),

package/styled-components/cjs/examples/sds_engineer/components/Badge/Badge.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof Badge> = {
             },
         },
         view: {
-            options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
+            options: ['primary', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
             control: {
                 type: 'select',
             },
@@ -43,7 +43,7 @@ const BellIcon = (props) => (
 export const Default: Story = {
     args: {
         text: 'Hello',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         pilled: false,
         transparent: false,

package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js

@@ -8,13 +8,13 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Button = /*#__PURE__*/require("../../../../components/Button");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
       accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),
       clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _Button.buttonTokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive),

package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx

@@ -44,7 +44,7 @@ export default meta;
 export const Default: StoryObj<ComponentProps<typeof Button>> = {
     args: {
         children: 'Hello',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         disabled: false,
         focused: true,

package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js

@@ -8,21 +8,18 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _ButtonGroup = /*#__PURE__*/require("../../../../components/ButtonGroup");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-accent) 85%);", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-accent) 80%);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 95%);", ":var(--text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-clear) 90%);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-warning) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-warning) 85%);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-negative) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-negative) 85%);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),

package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
 type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
 type Story = StoryObj<StoryProps>;
 
-const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
+const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear'];
 const sizes = ['l', 'm', 's', 'xs', 'xxs'];
 const orientationValues = ['horizontal', 'vertical'];
 const gapValues = ['none', 'dense', 'wide'];
@@ -65,7 +65,7 @@ export default meta;
 
 export const Default: Story = {
     args: {
-        view: 'default',
+        view: 'primary',
         size: 'm',
         gap: 'dense',
         orientation: 'horizontal',
@@ -99,7 +99,7 @@ export const CustomButtons: Story = {
             <>
                 <h3>Группа кнопок с разными темами</h3>
                 <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" />
+                    <Button text="Primary" view="primary" />
                     <Button text="Negative" view="negative" />
                     <Button text="Positive" view="positive" />
                     <Button text="Clear" view="clear" />
@@ -107,7 +107,7 @@ export const CustomButtons: Story = {
 
                 <h3>Группа кнопок с разными размерами</h3>
                 <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" size="l" />
+                    <Button text="Primary" view="primary" size="l" />
                     <Button text="Negative" view="negative" size="m" />
                     <Button text="Positive" view="positive" size="s" />
                     <Button text="Clear" view="clear" size="l" />

package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarBase.config.js

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Calendar = /*#__PURE__*/require("../../../../components/Calendar/Calendar.tokens");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
     },
     size: {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":5.5rem;", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], _Calendar.tokens.calendarHeaderArrowContainerWidth, _Calendar.tokens.calendarItemBorderRadius, _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarHeaderFontWeight, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarYearFontFamily, _Calendar.tokens.calendarYearFontSize, _Calendar.tokens.calendarYearFontStyle, _Calendar.tokens.calendarYearFontLetterSpacing, _Calendar.tokens.calendarYearFontLineHeight, _Calendar.tokens.calendarYearFontWeight, _Calendar.tokens.calendarMonthFontFamily, _Calendar.tokens.calendarMonthFontSize, _Calendar.tokens.calendarMonthFontStyle, _Calendar.tokens.calendarMonthFontLetterSpacing, _Calendar.tokens.calendarMonthFontLineHeight, _Calendar.tokens.calendarMonthFontWeight, _Calendar.tokens.calendarDayFontFamily, _Calendar.tokens.calendarDayFontSize, _Calendar.tokens.calendarDayFontStyle, _Calendar.tokens.calendarDayFontLetterSpacing, _Calendar.tokens.calendarDayFontLineHeight, _Calendar.tokens.calendarDayFontWeight)

package/styled-components/cjs/examples/sds_engineer/components/Calendar/CalendarDouble.config.js

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Calendar = /*#__PURE__*/require("../../../../components/Calendar/Calendar.tokens");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarSeparatorBackground, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":transparent;", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-surface-solid03);", ":var(--plasma-colors-accent);", ":var(--plasma-colors-background-primary);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-surface-liquid02);", ":var(--plasma-colors-button-focused);", ":var(--plasma-colors-primary);", ":var(--plasma-colors-secondary);"], _Calendar.tokens.calendarBackgroundColor, _Calendar.tokens.calendarSelectedItemBackground, _Calendar.tokens.calendarSelectedItemColor, _Calendar.tokens.calendarSelectableItemBackgroundHover, _Calendar.tokens.calendarCurrentItemBorderColor, _Calendar.tokens.calendarCurrentItemBackgroundHover, _Calendar.tokens.calendarCurrentItemColorHover, _Calendar.tokens.calendarCurrentItemChildBackgroundHover, _Calendar.tokens.calendarActiveItemBackground, _Calendar.tokens.calendarActiveItemColor, _Calendar.tokens.calendarHoveredItemBackground, _Calendar.tokens.calendarHoveredItemColor, _Calendar.tokens.calendarSeparatorBackground, _Calendar.tokens.calendarRangeBackground, _Calendar.tokens.calendarOutlineFocusColor, _Calendar.tokens.calendarContentPrimaryColor, _Calendar.tokens.calendarContentSecondaryColor)
     },
     size: {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-bold-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-weight);"], _Calendar.tokens.calendarItemBorderRadius, _Calendar.tokens.calendarHeaderFontFamily, _Calendar.tokens.calendarHeaderFontSize, _Calendar.tokens.calendarHeaderFontStyle, _Calendar.tokens.calendarHeaderFontLetterSpacing, _Calendar.tokens.calendarHeaderFontLineHeight, _Calendar.tokens.calendarHeaderFontWeight, _Calendar.tokens.calendarHeaderFontWeightBold, _Calendar.tokens.calendarYearFontFamily, _Calendar.tokens.calendarYearFontSize, _Calendar.tokens.calendarYearFontStyle, _Calendar.tokens.calendarYearFontLetterSpacing, _Calendar.tokens.calendarYearFontLineHeight, _Calendar.tokens.calendarYearFontWeight, _Calendar.tokens.calendarMonthFontFamily, _Calendar.tokens.calendarMonthFontSize, _Calendar.tokens.calendarMonthFontStyle, _Calendar.tokens.calendarMonthFontLetterSpacing, _Calendar.tokens.calendarMonthFontLineHeight, _Calendar.tokens.calendarMonthFontWeight, _Calendar.tokens.calendarDayFontFamily, _Calendar.tokens.calendarDayFontSize, _Calendar.tokens.calendarDayFontStyle, _Calendar.tokens.calendarDayFontLetterSpacing, _Calendar.tokens.calendarDayFontLineHeight, _Calendar.tokens.calendarDayFontWeight)

package/styled-components/cjs/examples/sds_engineer/components/Checkbox/Checkbox.config.js

@@ -22,7 +22,7 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),

package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.config.js

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Counter = /*#__PURE__*/require("../../../../components/Counter");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'xs'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
       accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
       positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], _Counter.counterTokens.color, _Counter.counterTokens.background),
       warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], _Counter.counterTokens.color, _Counter.counterTokens.background),

package/styled-components/cjs/examples/sds_engineer/components/Counter/Counter.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof Counter> = {
             },
         },
         view: {
-            options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
+            options: ['primary', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
             control: {
                 type: 'select',
             },
@@ -35,7 +35,7 @@ export const Default: Story = {
     args: {
         count: 25,
         maxCount: 100,
-        view: 'default',
+        view: 'primary',
         size: 'xs',
     },
 };

package/styled-components/cjs/examples/sds_engineer/components/Link/Link.config.js

@@ -12,7 +12,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;"]),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;"]),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;"]),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;"]),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;"]),

package/styled-components/cjs/examples/sds_engineer/components/Radiobox/Radiobox.config.js

@@ -22,7 +22,7 @@ var config = exports.config = {
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),

package/styled-components/cjs/examples/sds_engineer/components/Spinner/Spinner.config.js

@@ -18,7 +18,7 @@ var config = exports.config = {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":36px;"], _Spinner.spinnerTokens.size)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);"], _Spinner.spinnerTokens.color),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);"], _Spinner.spinnerTokens.color),
       secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);"], _Spinner.spinnerTokens.color),
       tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);"], _Spinner.spinnerTokens.color),
       paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);"], _Spinner.spinnerTokens.color),

package/styled-components/cjs/examples/sds_engineer/components/TextArea/TextArea.config.js

@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextArea = /*#__PURE__*/require("../../../../components/TextArea");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true'
   },
   variations: {
@@ -18,7 +18,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":100%;", ":5.825rem;", ":1.125rem;", ":0.125rem;", ":0.25rem;", ":0.438rem;", ":0.5rem;", ":0.563rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _TextArea.textAreaTokens.inputWidth, _TextArea.textAreaTokens.inputHeight, _TextArea.textAreaTokens.inputMinHeight, _TextArea.textAreaTokens.borderSize, _TextArea.textAreaTokens.borderRadius, _TextArea.textAreaTokens.inputPaddingTop, _TextArea.textAreaTokens.inputPaddingRight, _TextArea.textAreaTokens.inputPaddingBottom, _TextArea.textAreaTokens.inputPaddingLeft, _TextArea.textAreaTokens.inputFontFamily, _TextArea.textAreaTokens.inputFontSize, _TextArea.textAreaTokens.inputFontStyle, _TextArea.textAreaTokens.inputFontWeight, _TextArea.textAreaTokens.inputLetterSpacing, _TextArea.textAreaTokens.inputLineHeight)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--surface-accent-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--surface-accent-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus),
       negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-tertiary);", ":var(--surface-accent-hover);", ":var(--surface-accent-active);", ":var(--surface-accent-active);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--plasma-colors-secondary);"], _TextArea.textAreaTokens.inputBackgroundColor, _TextArea.textAreaTokens.inputBackgroundColorHover, _TextArea.textAreaTokens.inputBackgroundColorActive, _TextArea.textAreaTokens.inputBackgroundColorFocus, _TextArea.textAreaTokens.inputBorderColor, _TextArea.textAreaTokens.inputBorderColorHover, _TextArea.textAreaTokens.inputBorderColorActive, _TextArea.textAreaTokens.inputBorderColorFocus, _TextArea.textAreaTokens.inputColor, _TextArea.textAreaTokens.inputColorFocus, _TextArea.textAreaTokens.placeholderColor, _TextArea.textAreaTokens.placeholderColorFocus)
     },
     disabled: {

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

@@ -8,12 +8,12 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Toast = /*#__PURE__*/require("../../../../components/Toast");
 var config = exports.config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      primary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },

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

@@ -57,7 +57,7 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         hasClose: true,
         enableContentLeft: true,
@@ -196,7 +196,7 @@ const StoryComplex = ({
                 <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
                     <div>Hello!</div>
-                    <Button view="default" text="Add notification" onClick={handleShowNotification} />
+                    <Button view="primary" text="Add notification" onClick={handleShowNotification} />
                 </Modal>
             </PopupProvider>
         </NotificationsProvider>

package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -34,6 +34,9 @@ const meta: Meta<TooltipProps> = {
     title: 'sds_engineer/Tooltip',
     decorators: [WithTheme],
     component: Tooltip,
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '20rem' } },
+    },
 };
 
 export default meta;

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

@@ -12,7 +12,7 @@ export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
 })(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskWidth), /*#__PURE__*/String(tokens.arrowMaskHeight), /*#__PURE__*/String(tokens.arrowMaskImage), /*#__PURE__*/String(tokens.arrowBackground));
 export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-tnpyex-3"
-})(["position:absolute;z-index:", ";&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}"], function (_ref) {
+})(["position:absolute;z-index:", ";&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}"], function (_ref) {
   var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;
-}, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin));
+}, classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, /*#__PURE__*/String(tokens.arrowHeight), /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin), classes.arrow, classes.arrow, /*#__PURE__*/String(tokens.arrowEdgeMargin));

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

@@ -11,4 +11,4 @@ export var TooltipRoot = /*#__PURE__*/styled.div.withConfig({
 }, classes.hasContentLeft);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1xahrz2-1"
-})(["margin-right:var(", ");height:var(", ");"], tokens.contentLeftMargin, tokens.textFontLineHeight);
+})(["align-self:center;margin-right:var(", ");height:var(", ");"], tokens.contentLeftMargin, tokens.textFontLineHeight);

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

@@ -2,12 +2,12 @@ import { css } from 'styled-components';
 import { badgeTokens } from '../../../../components/Badge';
 export var config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
+      primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
       accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
       positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
       warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),

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

@@ -18,7 +18,7 @@ const meta: Meta<typeof Badge> = {
             },
         },
         view: {
-            options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
+            options: ['primary', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
             control: {
                 type: 'select',
             },
@@ -43,7 +43,7 @@ const BellIcon = (props) => (
 export const Default: Story = {
     args: {
         text: 'Hello',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         pilled: false,
         transparent: false,

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

@@ -2,13 +2,13 @@ import { css } from 'styled-components';
 import { buttonTokens } from '../../../../components/Button';
 export var config = {
   defaults: {
-    view: 'default',
+    view: 'primary',
     focused: 'true',
     size: 'm'
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
       accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
       secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
       clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),

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

@@ -44,7 +44,7 @@ export default meta;
 export const Default: StoryObj<ComponentProps<typeof Button>> = {
     args: {
         children: 'Hello',
-        view: 'default',
+        view: 'primary',
         size: 'm',
         disabled: false,
         focused: true,