feat(DisplayTitle): Add adaptivity (#7553)

Добавили compact, чтобы в теме, где указаты токены compact режима, они применялись

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

@@ -5,23 +5,183 @@
   font-family: var(--vkui--font_display_title1--font_family--regular);
 }
 
+.DisplayTitle--sizeY-compact.DisplayTitle--level-1 {
+  font-size: var(
+    --vkui--font_display_title1--font_size--compact,
+    var(--vkui--font_display_title1--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_display_title1--line_height--compact,
+    var(--vkui--font_display_title1--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_display_title1--font_weight--compact,
+    var(--vkui--font_display_title1--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_display_title1--font_family--compact,
+    var(--vkui--font_display_title1--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .DisplayTitle--sizeY-none.DisplayTitle--level-1 {
+    font-size: var(
+      --vkui--font_display_title1--font_size--compact,
+      var(--vkui--font_display_title1--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_display_title1--line_height--compact,
+      var(--vkui--font_display_title1--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_display_title1--font_weight--compact,
+      var(--vkui--font_display_title1--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_display_title1--font_family--compact,
+      var(--vkui--font_display_title1--font_family--regular)
+    );
+  }
+}
+
 .DisplayTitle--level-2 {
   font-size: var(--vkui--font_display_title2--font_size--regular);
   line-height: var(--vkui--font_display_title2--line_height--regular);
   font-weight: var(--vkui--font_display_title2--font_weight--regular);
   font-family: var(--vkui--font_display_title2--font_family--regular);
 }
 
+.DisplayTitle--sizeY-compact.DisplayTitle--level-2 {
+  font-size: var(
+    --vkui--font_display_title2--font_size--compact,
+    var(--vkui--font_display_title2--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_display_title2--line_height--compact,
+    var(--vkui--font_display_title2--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_display_title2--font_weight--compact,
+    var(--vkui--font_display_title2--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_display_title2--font_family--compact,
+    var(--vkui--font_display_title2--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .DisplayTitle--sizeY-none.DisplayTitle--level-2 {
+    font-size: var(
+      --vkui--font_display_title2--font_size--compact,
+      var(--vkui--font_display_title2--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_display_title2--line_height--compact,
+      var(--vkui--font_display_title2--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_display_title2--font_weight--compact,
+      var(--vkui--font_display_title2--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_display_title2--font_family--compact,
+      var(--vkui--font_display_title2--font_family--regular)
+    );
+  }
+}
+
 .DisplayTitle--level-3 {
   font-size: var(--vkui--font_display_title3--font_size--regular);
   line-height: var(--vkui--font_display_title3--line_height--regular);
   font-weight: var(--vkui--font_display_title3--font_weight--regular);
   font-family: var(--vkui--font_display_title3--font_family--regular);
 }
 
+.DisplayTitle--sizeY-compact.DisplayTitle--level-3 {
+  font-size: var(
+    --vkui--font_display_title3--font_size--compact,
+    var(--vkui--font_display_title3--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_display_title3--line_height--compact,
+    var(--vkui--font_display_title3--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_display_title3--font_weight--compact,
+    var(--vkui--font_display_title3--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_display_title3--font_family--compact,
+    var(--vkui--font_display_title3--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .DisplayTitle--sizeY-none.DisplayTitle--level-3 {
+    font-size: var(
+      --vkui--font_display_title3--font_size--compact,
+      var(--vkui--font_display_title3--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_display_title3--line_height--compact,
+      var(--vkui--font_display_title3--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_display_title3--font_weight--compact,
+      var(--vkui--font_display_title3--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_display_title3--font_family--compact,
+      var(--vkui--font_display_title3--font_family--regular)
+    );
+  }
+}
+
 .DisplayTitle--level-4 {
   font-size: var(--vkui--font_display_title4--font_size--regular);
   line-height: var(--vkui--font_display_title4--line_height--regular);
   font-weight: var(--vkui--font_display_title4--font_weight--regular);
   font-family: var(--vkui--font_display_title4--font_family--regular);
 }
+
+.DisplayTitle--sizeY-compact.DisplayTitle--level-4 {
+  font-size: var(
+    --vkui--font_display_title4--font_size--compact,
+    var(--vkui--font_display_title4--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_display_title4--line_height--compact,
+    var(--vkui--font_display_title4--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_display_title4--font_weight--compact,
+    var(--vkui--font_display_title4--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_display_title4--font_family--compact,
+    var(--vkui--font_display_title4--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .DisplayTitle--sizeY-none.DisplayTitle--level-4 {
+    font-size: var(
+      --vkui--font_display_title4--font_size--compact,
+      var(--vkui--font_display_title4--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_display_title4--line_height--compact,
+      var(--vkui--font_display_title4--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_display_title4--font_weight--compact,
+      var(--vkui--font_display_title4--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_display_title4--font_family--compact,
+      var(--vkui--font_display_title4--font_family--regular)
+    );
+  }
+}

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

@@ -1,4 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { Typography, type TypographyProps } from '../Typography';
 import styles from './DisplayTitle.module.css';
 
@@ -9,6 +10,11 @@ const stylesLevel = {
   '4': styles['DisplayTitle--level-4'],
 };
 
+const sizeYClassNames = {
+  none: styles['DisplayTitle--sizeY-none'],
+  compact: styles['DisplayTitle--sizeY-compact'],
+};
+
 export interface DisplayTitleProps extends TypographyProps {
   level?: '1' | '2' | '3' | '4';
 }
@@ -26,12 +32,18 @@ export const DisplayTitle = ({
   inline = false,
   ...restProps
 }: DisplayTitleProps): React.ReactNode => {
+  const { sizeY = 'none' } = useAdaptivity();
+
   return (
     <Typography
       Component={Component}
       normalize={normalize}
       inline={inline}
-      className={classNames(className, stylesLevel[level])}
+      className={classNames(
+        className,
+        sizeY !== 'regular' && sizeYClassNames[sizeY],
+        stylesLevel[level],
+      )}
       {...restProps}
     />
   );