feat(Spacing): Use vkui-tokens in the Spacing component

packages/vkui/src/components/Spacing/Spacing.e2e-playground.tsx

@@ -0,0 +1,25 @@
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Div } from '../Div/Div';
+import { Separator } from '../Separator/Separator';
+import { ALLOWED_SIZES, Spacing, SpacingProps } from './Spacing';
+
+export const SpacingPlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          size: [undefined, ...ALLOWED_SIZES, 8, 16, 24],
+        },
+      ]}
+    >
+      {({ size }: SpacingProps) => (
+        <Div style={{ width: 100 }}>
+          <Separator />
+          <Spacing size={size} />
+          <Separator />
+        </Div>
+      )}
+    </ComponentPlayground>
+  );
+};

packages/vkui/src/components/Spacing/Spacing.e2e.tsx

@@ -0,0 +1,9 @@
+import { test } from '@vkui-e2e/test';
+import { SpacingPlayground } from './Spacing.e2e-playground';
+
+test.use({ onlyForPlatforms: ['vkcom'], onlyForAppearances: ['light'] });
+
+test('Spacing', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
+  await mount(<SpacingPlayground {...componentPlaygroundProps} />);
+  await expectScreenshotClippedToContent();
+});

packages/vkui/src/components/Spacing/Spacing.tsx

@@ -3,22 +3,47 @@ import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Spacing.module.css';
 
+export const ALLOWED_SIZES = [
+  '3xs',
+  '2xs',
+  'xs',
+  's',
+  'm',
+  'l',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+] as const;
+type Size = (typeof ALLOWED_SIZES)[number];
+
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Высота спэйсинга
    */
-  size?: number;
+  size?: number | Size;
 }
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing = ({ size = 8, style: styleProp, ...restProps }: SpacingProps) => {
+export const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {
   const style: React.CSSProperties = {
-    height: size,
-    padding: `${size / 2}px 0`,
+    ...getSizeStyle(size),
     ...styleProp,
   };
 
   return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;
 };
+
+function getSizeStyle(size: number | Size): React.CSSProperties {
+  const sizeValue = getSizeValue(size);
+
+  return {
+    height: sizeValue,
+    padding: `calc(${sizeValue} / 2px) 0`,
+  };
+}
+
+function getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {
+  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
+}