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

packages/plasma-b2c/src/mixins/index.ts

@@ -1,3 +1,6 @@
+import { createApplyPaperMixin } from '@salutejs/plasma-new-hope';
+import * as allTokens from '@salutejs/plasma-themes/tokens/plasma_b2c';
+
 export {
     addFocus,
     syntheticFocus,
@@ -34,3 +37,5 @@ export type {
     SpacingProps,
     BreakWordProps,
 } from '@salutejs/plasma-core';
+
+export const applyPaper = createApplyPaperMixin(allTokens);

packages/plasma-web/src/mixins/index.ts

@@ -1,3 +1,6 @@
+import { createApplyPaperMixin } from '@salutejs/plasma-new-hope';
+import * as allTokens from '@salutejs/plasma-themes/tokens/plasma_web';
+
 export {
     addFocus,
     syntheticFocus,
@@ -34,3 +37,5 @@ export type {
     SpacingProps,
     BreakWordProps,
 } from '@salutejs/plasma-core';
+
+export const applyPaper = createApplyPaperMixin(allTokens);

website/plasma-b2c-docs/docs/functions/mixins.mdx

@@ -72,3 +72,34 @@ const ShortenedLine = styled.span`
 
 <ShortenedLine>Текст сократится, если не поместится в строке</ShortenedLine>;
 ```
+
+## `applyPaper`
+
+:::caution
+Данный миксин будет работать только если тема подключена [`новым способом`](../intro/#подключение-тем/)
+:::
+
+Позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы `plasma_b2c`:
+- backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
+- borderRadius - отвечает за скругление углов блока;
+- shadow - отвечает за применение стилей теней для блока;
+- styles - отвечает за все доступные css свойства.
+
+```tsx
+import { applyPaper } from '@salutejs/plasma-b2c';
+
+<div
+    style={applyPaper({
+        backgroundColor: 'surfaceAccent',
+        borderRadius: 'borderRadiusM',
+        shadow: 'shadowDownHardM',
+        styles: {
+            color: 'white',
+            width: '10rem',
+            height: '10rem',
+        },
+    })}
+>
+    Test card
+</div>
+```

website/plasma-web-docs/docs/functions/mixins.mdx

@@ -120,3 +120,34 @@ const ShortenedLine = styled.span`
 
 <ShortenedLine>Текст сократится, если не поместится в строке</ShortenedLine>;
 ```
+
+## `applyPaper`
+
+:::caution
+Данный миксин будет работать только если тема подключена [`новым способом`](../intro/#подключение-тем/)
+:::
+
+Позволяет создать базовый стиль подложки для любого блока, со следующим набором свойств, значения которых доступны из темы `plasma_web`:
+- backgroundColor - отвечает за цвет подложки в котором можно выбрать токены цветов и градиентов;
+- borderRadius - отвечает за скругление углов блока;
+- shadow - отвечает за применение стилей теней для блока;
+- styles - отвечает за все доступные css свойства.
+
+```tsx
+import { applyPaper } from '@salutejs/plasma-web';
+
+<div
+    style={applyPaper({
+        backgroundColor: 'surfaceAccent',
+        borderRadius: 'borderRadiusM',
+        shadow: 'shadowDownHardM',
+        styles: {
+            color: 'white',
+            width: '10rem',
+            height: '10rem',
+        },
+    })}
+>
+    Test card
+</div>
+```