@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

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

@@ -11,98 +11,46 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-Перед использованием убедитесь, что `PopupProvider` подключен.
-Компонент Modal во многом схож с Popup, добавляет при этом подложку(`overlay`), а также блокирует scroll и focus.
+### Провайдер контекста
+Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
 
-```tsx live
-import React, { useState } from 'react';
-import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
-import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { ModalsProvider } from '@salutejs/{{ package }}';
 
-export function App() {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
+import { App } from './App';
 
-    return (
-        <SSRProvider>
-            <PopupProvider>
-                <div style=\{{ height: "300px" }}>
-                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </div>
-                    <Modal
-                        id="modalA"
-                        onClose={() => setIsOpenA(false)}
-                        isOpen={isOpenA}
-                        placement="center"
-                        offset={[0, 0]}
-                    >
-                        <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
-                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                            <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
-                            Content
-                        </div>
-                        <Modal
-                            id="modalB"
-                            onClose={() => setIsOpenB(false)}
-                            isOpen={isOpenB}
-                            placement="right"
-                            offset={[0, 0]}
-                        >
-                            <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
-                                <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                                Content
-                            </div>
-                        </Modal>
-                    </Modal>
-                </div>
-            </PopupProvider>
-        </SSRProvider>
-    );
-}
+ReactDOM.render(
+    <ModalsProvider>
+        <App />
+    </ModalsProvider>,
+    document.getElementById('root')
+);
 ```
 
-## Подключение анимации
-Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
-Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.
-
-Пример:
-
-```tsx
-import styled from 'styled-components';
-import { Modal } from '@salutejs/{{ package }}';
-
-const StyledModal = styled(Modal)`
-    && > .${popupClasses.root}, .${modalClasses.overlay} {
-        animation: fadeIn 1s forwards;
-    }
+### Вызов модального окна
+После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
 
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
-        animation: fadeOut 1s forwards;
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
+```tsx live
+import React from 'react';
+import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
 
-        to {
-            opacity: 1;
-        }
-    }
+export function App() {
+    const [isOpen, setIsOpen] = React.useState(false);
 
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-        }
+    const close = React.useCallback(() => {
+      setIsOpen(false);
+    }, []);
 
-        to {
-            opacity: 0;
-        }
-    }
-`;
+    return (
+        <div>
+            <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
+            <Modal isOpen={isOpen} onClose={close}>
+                <Headline3 mb={10}>Модальное окно</Headline3>
+                <P1>Содержимое модального окна.</P1>
+                <Button text="Закрыть" onClick={close} />
+            </Modal>
+        </div>
+    );
+}
 ```

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

@@ -34,7 +34,8 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
+который приведет к отображению оповещения.
 Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live

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

@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
 ```tsx live
 import React from 'react';
 import styled from "styled-components";
-import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
+import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
 import { Popover, Button } from '@salutejs/{{ package }}';
 
 export function App() {
@@ -26,7 +26,7 @@ export function App() {
             position: absolute;
             width: 0.5rem;
             height: 0.5rem;
-            background: ${surfaceSolidTertiary};
+            background: ${surfaceSolid03};
         }
 
         &::before {
@@ -37,7 +37,7 @@ export function App() {
     `;
 
     const StyledContent = styled.div`
-        background: ${surfaceSolidTertiary};
+        background: ${surfaceSolid03};
         padding: 1rem;
 
         display: flex;

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

@@ -1,79 +1,45 @@
 ---
-id: popup
-title: Popup
+id: popupBase
+title: PopupBase
 ---
 
 import { PropsTable, Description } from '@site/src/components';
 
-# Popup
-<Description name="Popup" />
-<PropsTable name="Popup" />
+# PopupBase
+<Description name="PopupBase" />
+<PropsTable name="PopupBase" />
 
 ### Провайдер контекста
 
-Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
+Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
-import { PopupProvider } from '@salutejs/sdds-serv';
+import { PopupBaseProvider } from '@salutejs/{{ package }}';
 
 import { App } from './App';
 
 ReactDOM.render(
-    <PopupProvider>
+    <PopupBaseProvider>
         <App />
-    </PopupProvider>,
+    </PopupBaseProvider>,
     document.getElementById('root')
 );
 ```
 
 ### Использование
 
-Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
-
+PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
 Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
-
 Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
-а также определить отступы от точки с помощью `offset`.
+ а также определить отступы от точки с помощью `offset`.
 
 ```tsx live
 import React, { useRef } from 'react';
-import styled from 'styled-components';
-import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
-
-import { SSRProvider, Button, Popup, PopupProvider } from  '@salutejs/{{ package }}';
+import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/{{ package }}';
 
 export function App() {
-    const StyledButton = styled(Button)`
-        margin-top: 1rem;
-        width: 15rem;
-    `;
-
-    const StyledWrapper = styled.div`
-        height: 500px;
-    `;
-
-    const OtherContent = styled.div`
-        margin-top: 1rem;
-        width: 400px;
-        height: 500px;
-        background: ${surfaceSolidTertiary};
-        position: absolute;
-
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding: 1rem;
-
-        bottom: 0;
-        right: 0;
-    `;
-
-    const Content = styled.div`
-        background: ${surfaceSolidSecondary};
-        padding: 1rem;
-    `;
-
     const [isOpenA, setIsOpenA] = React.useState(false);
     const [isOpenB, setIsOpenB] = React.useState(false);
 
@@ -81,28 +47,59 @@ export function App() {
 
     return (
         <SSRProvider>
-            <PopupProvider>
-                <StyledWrapper>
+            <PopupBaseProvider>
+                <div style=\{{height: "500px"}}>
                     <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
-                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть в document" 
+                            onClick={() => setIsOpenB(true)} 
+                        />
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть во Frame" 
+                            onClick={() => setIsOpenA(true)} 
+                        />
                     </div>
-                    <Popup
+                    <PopupBase
                         id="popupA"
                         frame={ref}
                         isOpen={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
-                        <Content>
+                        <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
                             <>Content</>
-                        </Content>
-                    </Popup>
-                    <OtherContent ref={ref}>
+                        </div>
+                    </PopupBase>
+                    <div 
+                        ref={ref} 
+                        style=\{{
+                            marginTop: "1rem",
+                            width: "400px",
+                            height: "500px",
+                            background: surfaceSolid03,
+                            position: "absolute",
+
+                            display: "flex",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: "1rem",
+
+                            bottom: 0,
+                            right: 0
+                        }}
+                    >
                         <>Frame</>
-                    </OtherContent>
-                    <Popup
+                    </div>
+                    <PopupBase
                         id="popupB"
                         frame="document"
                         isOpen={isOpenB}
@@ -113,9 +110,9 @@ export function App() {
                             <Button onClick={() => setIsOpenB(false)}>Close</Button>
                             <>Content</>
                         </Content>
-                    </Popup>
-                </StyledWrapper>
-            </PopupProvider>
+                    </PopupBase>
+                </div>
+            </PopupBaseProvider>
         </SSRProvider>
     );
 }
@@ -124,19 +121,19 @@ export function App() {
 ## Подключение анимации
 
 Для подключения анимации нужно добавить параметр `withAnimation`.
-Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
-Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
 
 Пример:
 
 ```tsx
-const StyledPopupTransition = styled(Popup)`
-    && > .${PopupClasses.root} {
+const StyledPopupTransition = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
+    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
@@ -146,12 +143,12 @@ const StyledPopupTransition = styled(Popup)`
 или
 
 ```tsx
-const StyledPopupAnimation = styled(Popup)`
-    && > .${PopupClasses.root} {
+const StyledPopupAnimation = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
+    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -185,7 +182,14 @@ const StyledPopupAnimation = styled(Popup)`
     return (
         <>
             <div>
-                <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
+                <Button 
+                    style=\{{
+                        marginTop: "1rem",
+                        width: "15rem"
+                    }} 
+                    text="Открыть" 
+                    onClick={() => setIsOpen(true)} 
+                />
             </div>
             <StyledPopupAnimation
                 id="popup-id"

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

@@ -27,9 +27,8 @@ export function App() {
 }
 ```
 
-## RadioGroup
+## Группа радиокнопок
 Компоненты `Radiobox` следует объединять в `RadioGroup`
-
 ```tsx live
 <RadioGroup aria-labelledby="radiogroup-title-id">
     <H3 id="radiogroup-title-id">Заголовок</H3>

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

@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
 Внутри данного провайдера есть доступ к хуку `useSegment`.
 
 ```tsx live
-import React from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+import React, { useState } from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
 
 export function App() {
     const items = Array(8).fill(0);

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

@@ -6,7 +6,7 @@ title: Skeleton
 import { PropsTable, Description } from '@site/src/components';
 
 # Skeleton
-Набор компонентов для создания скелетов загрузки (placeholders).
+Набор компонентов для создания скелетов загрузки (плейсхолдеров).
 
 ## LineSkeleton
 <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
 ```
 
 ## Доступность
-При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
 
 ```tsx
 import React, { useState } from 'react';
 import { Button } from '@salutejs/{{ package }}';
 
-const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
 
 export default function App () {
     const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
 }
 ```
 
-Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.
+Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.

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

@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-### Стандартное подключение, без клавиатурной навигации
+### Cтандартное подключение, без клавиатурной навигации
 
 ```tsx live
 import React, { useState } from 'react';

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

@@ -117,7 +117,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { TextField } from '@salutejs/{{ package }}';
+import { TextField } from '@salutejs/{{ package }};
 
 export function App() {
     return (
@@ -133,4 +133,4 @@ export function App() {
         </div>
     );
 }
-```
+```

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

@@ -8,27 +8,27 @@ export var config = {
   },
   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),
-      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),
-      positive: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      warning: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      negative: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      dark: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      black: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
-      white: /*#__PURE__*/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);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":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.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
+      white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":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);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
     },
     size: {
-      l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.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);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
-      xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor)
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":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);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.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);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
+      xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], buttonTokens.buttonDisabledOpacity)