PLASMA-4660: feat(plasma-b2c, plasma-web): Add applyPaper mixin

[neretin-trike]

PLASMA-WEB

applyPaper

• Добавлен миксин applyPaper, который позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы plasma_web:
  • backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
  • borderRadius - отвечает за скругление углов блока;
  • shadow - отвечает за применение стилей теней для блока;
  • styles - отвечает за все доступные css свойства.

Например:

        <div
            style={applyPaper({
                backgroundColor: 'surfaceAccent',
                borderRadius: 'borderRadiusM',
                shadow: 'shadowDownHardM',
                styles: {
                    color: 'white',
                    width: '10rem',
                    height: '10rem',
                },
            })}
        >
            Test card
        </div>

PLASMA-B2C

applyPaper

• Добавлен миксин applyPaper, который позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы plasma_b2c:
  • backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
  • borderRadius - отвечает за скругление углов блока;
  • shadow - отвечает за применение стилей теней для блока;
  • styles - отвечает за все доступные css свойства.

Например:

        <div
            style={applyPaper({
                backgroundColor: 'surfaceAccent',
                borderRadius: 'borderRadiusM',
                shadow: 'shadowDownHardM',
                styles: {
                    color: 'white',
                    width: '10rem',
                    height: '10rem',
                },
            })}
        >
            Test card
        </div>

What/why changed

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

[github-actions]

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-1828/

[github-actions]

Documentation preview deployed!

website: https://plasma.sberdevices.ru/pr/pr-1828/
b2c storybook: https://plasma.sberdevices.ru/pr/pr-1828/b2c-storybook/
web storybook: https://plasma.sberdevices.ru/pr/pr-1828/web-storybook/
giga storybook: https://plasma.sberdevices.ru/pr/pr-1828/giga-storybook/
ui storybook: https://plasma.sberdevices.ru/pr/pr-1828/ui-storybook/
sdds-cs storybook: https://plasma.sberdevices.ru/pr/pr-1828/sdds-cs-storybook/
sdds-dfa storybook: https://plasma.sberdevices.ru/pr/pr-1828/sdds-dfa-storybook/
sdds-insol storybook: https://plasma.sberdevices.ru/pr/pr-1828/sdds-insol-storybook/
sdds-serv storybook: https://plasma.sberdevices.ru/pr/pr-1828/sdds-serv-storybook/