feat(Paragraph): Add compact mode (#7565)

packages/vkui/src/components/Typography/Paragraph/Paragraph.e2e-playground.tsx

@@ -7,7 +7,7 @@ export const ParagraphPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          weight: ['3', '2', '1'],
+          weight: [undefined, '3', '2', '1'],
         },
         {
           normalize: [true],

packages/vkui/src/components/Typography/Paragraph/Paragraph.module.css

@@ -4,3 +4,43 @@
   font-weight: var(--vkui--font_paragraph--font_weight--regular);
   font-family: var(--vkui--font_paragraph--font_family--regular);
 }
+
+.Paragraph--sizeY-compact {
+  font-size: var(
+    --vkui--font_paragraph--font_size--compact,
+    var(--vkui--font_paragraph--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_paragraph--line_height--compact,
+    var(--vkui--font_paragraph--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_paragraph--font_weight--compact,
+    var(--vkui--font_paragraph--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_paragraph--font_family--compact,
+    var(--vkui--font_paragraph--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Paragraph--sizeY-none {
+    font-size: var(
+      --vkui--font_paragraph--font_size--compact,
+      var(--vkui--font_paragraph--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_paragraph--line_height--compact,
+      var(--vkui--font_paragraph--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_paragraph--font_weight--compact,
+      var(--vkui--font_paragraph--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_paragraph--font_family--compact,
+      var(--vkui--font_paragraph--font_family--regular)
+    );
+  }
+}

packages/vkui/src/components/Typography/Paragraph/Paragraph.tsx

@@ -1,7 +1,13 @@
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { Typography, type TypographyProps } from '../Typography';
 import styles from './Paragraph.module.css';
 
+const sizeYClassNames = {
+  none: styles['Paragraph--sizeY-none'],
+  compact: styles['Paragraph--sizeY-compact'],
+};
+
 export type ParagraphProps = TypographyProps;
 
 /**
@@ -16,12 +22,18 @@ export const Paragraph = ({
   inline = false,
   ...restProps
 }: ParagraphProps): React.ReactNode => {
+  const { sizeY = 'none' } = useAdaptivity();
+
   return (
     <Typography
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(className, styles['Paragraph'])}
+      className={classNames(
+        className,
+        styles['Paragraph'],
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+      )}
       {...restProps}
     />
   );