@salutejs/plasma-new-hope 0.131.1-canary.1396.10560424945.0 → 0.132.0-canary.1368.10558535646.0

package/emotion/es/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { PopoverPlacement } from '../Popover/Popover';
+import { IconDisclosureRight } from '../../../../components/_Icon';
+
+import { Tooltip } from './Tooltip';
+import type { TooltipProps } from './Tooltip';
+
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
+
+const meta: Meta<TooltipProps> = {
+    title: 'sds_engineer/Tooltip',
+    decorators: [WithTheme],
+    component: Tooltip,
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '20rem' } },
+    },
+};
+
+export default meta;
+
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: 1rem 3.5rem;
+    padding: 3.5rem;
+`;
+
+const StoryDefault = ({ size }: TooltipProps) => {
+    return (
+        <StyledGrid>
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="left"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="left"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-start"
+                size={size}
+                opened
+                hasArrow
+                text="top-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="top"
+                size={size}
+                opened
+                hasArrow
+                text="top"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="right"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="right"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-end"
+                size={size}
+                opened
+                hasArrow
+                text="top-end"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-start"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom"
+                size={size}
+                opened
+                hasArrow
+                text="bottom"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-end"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-end"
+                frame="theme-root"
+            />
+        </StyledGrid>
+    );
+};
+
+export const Default: StoryObj<TooltipProps> = {
+    argTypes: {
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        size: 'm',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    width: 150vw;
+    height: 150vh;
+    padding: 10rem;
+`;
+
+const StoryLive = (args: TooltipProps) => {
+    const [text, setText] = useState('Type here');
+
+    return (
+        <>
+            <StyledRow>
+                <Tooltip
+                    target={
+                        <input
+                            name="Имя"
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                            aria-describedby="example-tooltip-firstname"
+                        />
+                    }
+                    contentLeft={<IconDisclosureRight size="xs" />}
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text={text}
+                    opened
+                    frame="theme-root"
+                />
+            </StyledRow>
+        </>
+    );
+};
+
+export const Live: StoryObj<TooltipProps> = {
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            mapping: placements,
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        placement: 'bottom',
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        size: 'm',
+    },
+    render: (args) => <StoryLive {...args} />,
+};

package/emotion/es/examples/themes/index.js

@@ -1,7 +1,9 @@
 /* eslint-disable camelcase */
 import plasma_b2c from './plasma_b2c.module.css';
 import plasma_web from './plasma_web.module.css';
+import sds_engineer from './sds_engineer.module.css';
 export var themes = {
   plasma_b2c: plasma_b2c,
-  plasma_web: plasma_web
+  plasma_web: plasma_web,
+  sds_engineer: sds_engineer
 };

package/emotion/es/examples/themes/sds_engineer.module.css

@@ -0,0 +1,373 @@
+/* Generated by robots, do not change this manually! */
+
+.dark {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(245, 245, 245, 0.96);
+  --text-secondary: rgba(245, 245, 245, 0.56);
+  --text-tertiary: rgba(245, 245, 245, 0.4);
+  --text-paragraph: rgba(245, 245, 245, 0.8);
+  --text-accent: #FFFFFF;
+  --text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --text-positive: #1A9E32;
+  --text-warning: #FA5F05;
+  --text-negative: #FF293E;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(8, 8, 8, 0.96);
+  --inverse-text-secondary: rgba(8, 8, 8, 0.56);
+  --inverse-text-tertiary: rgba(8, 8, 8, 0.4);
+  --inverse-text-paragraph: rgba(8, 8, 8, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-text-positive: #108E25;
+  --inverse-text-warning: #E85702;
+  --inverse-text-negative: #F31B30;
+  --surface-solid-default: #FFFFFF;
+  --surface-solid-primary: #171717;
+  --surface-solid-secondary: #262626;
+  --surface-solid-tertiary: #363636;
+  --surface-solid-card: #171717;
+  --surface-transparent-default: #FFFFFF;
+  --surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --surface-accent: #FFFFFF;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #FF293E;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #080808;
+  --inverse-surface-solid-primary: #F5F5F5;
+  --inverse-surface-solid-secondary: #ECECEC;
+  --inverse-surface-solid-tertiary: #DDDDDD;
+  --inverse-surface-solid-card: #F7F7F7;
+  --inverse-surface-transparent-default: #080808;
+  --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --inverse-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #108E25;
+  --inverse-surface-warning: #E85702;
+  --inverse-surface-negative: #F31B30;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #000000;
+  --background-secondary: #080808;
+  --background-tertiary: #171717;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #FFFFFF;
+  --inverse-background-secondary: #FFFFFF;
+  --inverse-background-tertiary: #FFFFFF;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #0D0D0DFF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A78C2FF;
+  --surface-positive-hover:  #1DAF37FF;
+  --surface-positive-active:  #18952FFF;
+  --surface-warning-hover:  #FB7223FF;
+  --surface-warning-active:  #F05B05FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #D21427FF;
+  --surface-transparent-secondary-hover:  #0808081F;
+  --surface-transparent-secondary-active:  #0808080A;
+  --on-light-surface-solid-default-hover:  #0D0D0DFF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #080808C2;
+  --on-light-surface-transparent-deep-active: #08080894;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+  --surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+.light {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(23, 23, 23, 0.96);
+  --text-secondary: rgba(23, 23, 23, 0.56);
+  --text-tertiary: rgba(23, 23, 23, 0.4);
+  --text-paragraph: rgba(23, 23, 23, 0.8);
+  --text-accent: #0C72B6;
+  --text-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --text-positive: #108E25;
+  --text-warning: #E85702;
+  --text-negative: #F31B31;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(245, 245, 245, 0.96);
+  --inverse-text-secondary: rgba(245, 245, 245, 0.56);
+  --inverse-text-tertiary: rgba(245, 245, 245, 0.4);
+  --inverse-text-paragraph: rgba(245, 245, 245, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-text-positive: #1A9E32;
+  --inverse-text-warning: #FA5F05;
+  --inverse-text-negative: #FF293E;
+  --surface-solid-default: #080808;
+  --surface-solid-primary: #F5F5F5;
+  --surface-solid-secondary: #ECECEC;
+  --surface-solid-tertiary: #DDDDDD;
+  --surface-solid-card: #FFFFFF;
+  --surface-transparent-default: #080808;
+  --surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --surface-transparent-card: #FFFFFF;
+  --surface-accent: #0B7ECB;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #DD1428;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #FFFFFF;
+  --inverse-surface-solid-primary: #171717;
+  --inverse-surface-solid-secondary: #262626;
+  --inverse-surface-solid-tertiary: #363636;
+  --inverse-surface-solid-card: #171717;
+  --inverse-surface-transparent-default: #FFFFFF;
+  --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --inverse-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #1A9E32;
+  --inverse-surface-warning: #FA5F05;
+  --inverse-surface-negative: #FF293E;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #F9F9F9;
+  --background-secondary: #FFFFFF;
+  --background-tertiary: #FFFFFF;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #000000;
+  --inverse-background-secondary: #080808;
+  --inverse-background-tertiary: #171717;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #262626FF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A72B8FF;
+  --surface-positive-hover:  #1EB83AFF;
+  --surface-positive-active:  #178C2CFF;
+  --surface-warning-hover:  #FB782DFF;
+  --surface-warning-active:  #E65705FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #C91325FF;
+  --surface-transparent-secondary-hover:  #08080805;
+  --surface-transparent-secondary-active:  #0808081A;
+  --on-light-surface-solid-default-hover:  #262626FF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #0808088F;
+  --on-light-surface-transparent-deep-active: #080808AD;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}

package/es/components/Button/Button.css

@@ -1,4 +1,4 @@
-.base_x95x4p_b1ty39ru__349bf40b{color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.base_x95x4p_b1ty39ru__349bf40b:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_x95x4p_b1ty39ru__349bf40b:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
+.base_1x0spnh_b1ty39ru__fb659d61{color:var(--plasma-button-color);background-color:var(--plasma-button-background-color);}.base_1x0spnh_b1ty39ru__fb659d61.base_1x0spnh_buttonLoading__fb659d61{background-color:var(--plasma-button-loading-background-color);}.base_1x0spnh_b1ty39ru__fb659d61:hover{color:var(--plasma-button-color-hover,var(--plasma-button-color));background-color:var(--plasma-button-background-color-hover,var(--plasma-button-background-color));scale:var(--plasma-button-scale-hover);}.base_1x0spnh_b1ty39ru__fb659d61:active{color:var(--plasma-button-color-active,var(--plasma-button-color));background-color:var(--plasma-button-background-color-active,var(--plasma-button-background-color));scale:var(---plasma-button-scale-active);}
 
 .base_1alzrso_be0ha5g__cdc67255{height:var(--plasma-button-height);padding:0 var(--plasma-button-padding,calc(var(--plasma-button-height) * 1.618 / 4));font-family:var(--plasma-button-font-family);font-size:var(--plasma-button-font-size);font-style:var(--plasma-button-font-style);font-weight:var(--plasma-button-font-weight);-webkit-letter-spacing:var(--plasma-button-letter-spacing);-moz-letter-spacing:var(--plasma-button-letter-spacing);-ms-letter-spacing:var(--plasma-button-letter-spacing);letter-spacing:var(--plasma-button-letter-spacing);line-height:var(--plasma-button-line-height);--plasma_private-btn-outline-size:var(--plasma-button-outline-size,0.0625rem);}
 

package/es/components/Button/Button.js

@@ -42,6 +42,7 @@ var buttonRoot = function buttonRoot(Root) {
     var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
     var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
     var squareClass = square ? classes.buttonSquare : undefined;
+    var isLoadingClass = isLoading ? classes.buttonLoading : undefined;
     var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
     var contentPlacingMapper = {
       "default": 'center',
@@ -57,7 +58,7 @@ var buttonRoot = function buttonRoot(Root) {
       disabled: disabled,
       focused: focused || outlined,
       contentPlacing: contentPlacing,
-      className: cx(squareClass, stretchingClass, classes.buttonItem, className),
+      className: cx(squareClass, stretchingClass, classes.buttonItem, className, isLoadingClass),
       style: _objectSpread2(_objectSpread2({}, style), {}, {
         '--plasma_computed-btn-br': buttonBorderRadius,
         '--plasma_private-blur': blur

package/es/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { convertRoundnessMatrix } from '../../utils/roundness';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { base as blurredCSS } from './variations/_blurred/base';\nimport type { ButtonProps, ContentPlacementMapper } from './Button.types';\nimport {\n    base,\n    ButtonText,\n    ButtonValue,\n    Loader,\n    LoadWrap,\n    StyledContentLeft,\n    StyledContentRight,\n    StyledSpinner,\n} from './Button.styles';\nimport { classes, tokens } from './Button.tokens';\n\nexport const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>\n    forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n        const {\n            children,\n            view,\n            size,\n            text,\n            value,\n            contentLeft,\n            contentRight,\n            contentPlacing = 'default',\n            isLoading,\n            loader,\n            stretch,\n            square,\n            pin,\n            disabled,\n            focused,\n            outlined,\n            className,\n            blur,\n            style,\n            stretching = 'auto',\n            ...rest\n        } = props;\n\n        const txt = typeof children === 'string' ? children : text;\n\n        const stretchingClass = stretch\n            ? classes.filledStretching\n            : classes[`${stretching}Stretching` as keyof typeof classes];\n        const contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;\n        const squareClass = square ? classes.buttonSquare : undefined;\n        const buttonBorderRadius = pin\n            ? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)\n            : `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;\n\n        const contentPlacingMapper: ContentPlacementMapper = {\n            default: 'center',\n            relaxed: 'space-between',\n        };\n\n        const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';\n\n        return (\n            <Root\n                type=\"button\"\n                ref={ref}\n                view={view}\n                size={size}\n                value={value}\n                disabled={disabled}\n                focused={focused || outlined}\n                contentPlacing={contentPlacing}\n                className={cx(squareClass, stretchingClass, classes.buttonItem, className)}\n                style={\n                    {\n                        ...style,\n                        '--plasma_computed-btn-br': buttonBorderRadius,\n                        '--plasma_private-blur': blur,\n                    } as CSSProperties\n                }\n                {...rest}\n            >\n                <LoadWrap contentPlacing={contentPlacementValue} isLoading={isLoading}>\n                    {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n                    {txt ? <ButtonText className={contentRelaxedClass}>{txt}</ButtonText> : children}\n                    {value && <ButtonValue>{value}</ButtonValue>}\n                    {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n                </LoadWrap>\n                {isLoading && <Loader>{loader || <StyledSpinner />}</Loader>}\n            </Root>\n        );\n    });\n\nexport const buttonConfig = {\n    name: 'Button',\n    tag: 'button',\n    layout: buttonRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        focused: {\n            css: focusedCSS,\n            // TODO: isLoading => disabled\n        },\n        blurred: {\n            css: blurredCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'secondary',\n        size: 'm',\n        stretching: 'auto',\n    },\n};\n"],"names":["buttonRoot","Root","forwardRef","props","ref","children","view","size","text","value","contentLeft","contentRight","_props$contentPlacing","contentPlacing","isLoading","loader","stretch","square","pin","disabled","focused","outlined","className","blur","style","_props$stretching","stretching","rest","_objectWithoutProperties","_excluded","txt","stretchingClass","classes","filledStretching","concat","contentRelaxedClass","contentRelaxed","undefined","squareClass","buttonSquare","buttonBorderRadius","convertRoundnessMatrix","tokens","buttonRadius","buttonHeight","contentPlacingMapper","relaxed","contentPlacementValue","React","createElement","_extends","type","cx","buttonItem","_objectSpread","LoadWrap","StyledContentLeft","ButtonText","ButtonValue","StyledContentRight","Loader","_StyledSpinner","StyledSpinner","buttonConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","focusedCSS","blurred","blurredCSS","stretchingCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport type { CSSProperties } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { convertRoundnessMatrix } from '../../utils/roundness';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as stretchingCSS } from './variations/_stretching/base';\nimport { base as blurredCSS } from './variations/_blurred/base';\nimport type { ButtonProps, ContentPlacementMapper } from './Button.types';\nimport {\n    base,\n    ButtonText,\n    ButtonValue,\n    Loader,\n    LoadWrap,\n    StyledContentLeft,\n    StyledContentRight,\n    StyledSpinner,\n} from './Button.styles';\nimport { classes, tokens } from './Button.tokens';\n\nexport const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>\n    forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n        const {\n            children,\n            view,\n            size,\n            text,\n            value,\n            contentLeft,\n            contentRight,\n            contentPlacing = 'default',\n            isLoading,\n            loader,\n            stretch,\n            square,\n            pin,\n            disabled,\n            focused,\n            outlined,\n            className,\n            blur,\n            style,\n            stretching = 'auto',\n            ...rest\n        } = props;\n\n        const txt = typeof children === 'string' ? children : text;\n\n        const stretchingClass = stretch\n            ? classes.filledStretching\n            : classes[`${stretching}Stretching` as keyof typeof classes];\n        const contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;\n        const squareClass = square ? classes.buttonSquare : undefined;\n        const isLoadingClass = isLoading ? classes.buttonLoading : undefined;\n        const buttonBorderRadius = pin\n            ? convertRoundnessMatrix(pin, `var(${tokens.buttonRadius})`, `var(${tokens.buttonHeight})`)\n            : `var(${tokens.buttonRadius}, calc(var(${tokens.buttonHeight}) / 4))`;\n\n        const contentPlacingMapper: ContentPlacementMapper = {\n            default: 'center',\n            relaxed: 'space-between',\n        };\n\n        const contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';\n\n        return (\n            <Root\n                type=\"button\"\n                ref={ref}\n                view={view}\n                size={size}\n                value={value}\n                disabled={disabled}\n                focused={focused || outlined}\n                contentPlacing={contentPlacing}\n                className={cx(squareClass, stretchingClass, classes.buttonItem, className, isLoadingClass)}\n                style={\n                    {\n                        ...style,\n                        '--plasma_computed-btn-br': buttonBorderRadius,\n                        '--plasma_private-blur': blur,\n                    } as CSSProperties\n                }\n                {...rest}\n            >\n                <LoadWrap contentPlacing={contentPlacementValue} isLoading={isLoading}>\n                    {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n                    {txt ? <ButtonText className={contentRelaxedClass}>{txt}</ButtonText> : children}\n                    {value && <ButtonValue>{value}</ButtonValue>}\n                    {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n                </LoadWrap>\n                {isLoading && <Loader>{loader || <StyledSpinner />}</Loader>}\n            </Root>\n        );\n    });\n\nexport const buttonConfig = {\n    name: 'Button',\n    tag: 'button',\n    layout: buttonRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n        disabled: {\n            css: disabledCSS,\n            attrs: true,\n        },\n        focused: {\n            css: focusedCSS,\n            // TODO: isLoading => disabled\n        },\n        blurred: {\n            css: blurredCSS,\n        },\n        stretching: {\n            css: stretchingCSS,\n        },\n    },\n    defaults: {\n        view: 'secondary',\n        size: 'm',\n        stretching: 'auto',\n    },\n};\n"],"names":["buttonRoot","Root","forwardRef","props","ref","children","view","size","text","value","contentLeft","contentRight","_props$contentPlacing","contentPlacing","isLoading","loader","stretch","square","pin","disabled","focused","outlined","className","blur","style","_props$stretching","stretching","rest","_objectWithoutProperties","_excluded","txt","stretchingClass","classes","filledStretching","concat","contentRelaxedClass","contentRelaxed","undefined","squareClass","buttonSquare","isLoadingClass","buttonLoading","buttonBorderRadius","convertRoundnessMatrix","tokens","buttonRadius","buttonHeight","contentPlacingMapper","relaxed","contentPlacementValue","React","createElement","_extends","type","cx","buttonItem","_objectSpread","LoadWrap","StyledContentLeft","ButtonText","ButtonValue","StyledContentRight","Loader","_StyledSpinner","StyledSpinner","buttonConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","disabledCSS","attrs","focusedCSS","blurred","blurredCSS","stretchingCSS","defaults"],"mappings":"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"}