@vkontakte/vkui 6.6.0 → 6.7.0

package/src/components/Typography/Headline/Headline.module.css

@@ -6,14 +6,34 @@
 }
 
 .Headline--sizeY-compact.Headline--level-1 {
-  font-size: var(--vkui--font_headline1--font_size--compact);
-  line-height: var(--vkui--font_headline1--line_height--compact);
+  font-size: var(
+    --vkui--font_headline1--font_size--compact,
+    var(--vkui--font_headline1--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_headline1--line_height--compact,
+    var(--vkui--font_headline1--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_headline1--font_weight--compact,
+    var(--vkui--font_headline1--font_weight--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Headline--sizeY-none.Headline--level-1 {
-    font-size: var(--vkui--font_headline1--font_size--compact);
-    line-height: var(--vkui--font_headline1--line_height--compact);
+    font-size: var(
+      --vkui--font_headline1--font_size--compact,
+      var(--vkui--font_headline1--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_headline1--line_height--compact,
+      var(--vkui--font_headline1--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_headline1--font_weight--compact,
+      var(--vkui--font_headline1--font_weight--regular)
+    );
   }
 }
 
@@ -25,13 +45,33 @@
 }
 
 .Headline--sizeY-compact.Headline--level-2 {
-  font-size: var(--vkui--font_headline2--font_size--compact);
-  line-height: var(--vkui--font_headline2--line_height--compact);
+  font-size: var(
+    --vkui--font_headline2--font_size--compact,
+    var(--vkui--font_headline2--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_headline2--line_height--compact,
+    var(--vkui--font_headline2--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_headline2--font_weight--compact,
+    var(--vkui--font_headline2--font_weight--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Headline--sizeY-none.Headline--level-2 {
-    font-size: var(--vkui--font_headline2--font_size--compact);
-    line-height: var(--vkui--font_headline2--line_height--compact);
+    font-size: var(
+      --vkui--font_headline2--font_size--compact,
+      var(--vkui--font_headline2--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_headline2--line_height--compact,
+      var(--vkui--font_headline2--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_headline2--font_weight--compact,
+      var(--vkui--font_headline2--font_weight--regular)
+    );
   }
 }

package/src/components/Typography/Headline/Headline.tsx

@@ -10,7 +10,7 @@ const stylesLevel = {
 
 const sizeYClassNames = {
   none: styles['Headline--sizeY-none'],
-  ['compact']: styles['Headline--sizeY-compact'],
+  compact: styles['Headline--sizeY-compact'],
 };
 
 export interface HeadlineProps extends TypographyProps {
@@ -24,7 +24,6 @@ export interface HeadlineProps extends TypographyProps {
  */
 export const Headline = ({
   className,
-  weight = '3',
   level = '1',
   Component = 'span',
   normalize = true,
@@ -38,7 +37,6 @@ export const Headline = ({
       Component={Component}
       normalize={normalize}
       inline={inline}
-      weight={weight}
       className={classNames(
         className,
         sizeY !== 'regular' && sizeYClassNames[sizeY],

package/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)
+    );
+  }
+}

package/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}
     />
   );

package/src/components/Typography/Subhead/Subhead.module.css

@@ -6,13 +6,41 @@
 }
 
 .Subhead--sizeY-compact {
-  font-size: var(--vkui--font_subhead--font_size--compact);
-  line-height: var(--vkui--font_subhead--line_height--compact);
+  font-size: var(
+    --vkui--font_subhead--font_size--compact,
+    var(--vkui--font_subhead--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_subhead--line_height--compact,
+    var(--vkui--font_subhead--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_subhead--font_weight--compact,
+    var(--vkui--font_subhead--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_subhead--font_family--compact,
+    var(--vkui--font_subhead--font_family--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Subhead--sizeY-none {
-    font-size: var(--vkui--font_subhead--font_size--compact);
-    line-height: var(--vkui--font_subhead--line_height--compact);
+    font-size: var(
+      --vkui--font_subhead--font_size--compact,
+      var(--vkui--font_subhead--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_subhead--line_height--compact,
+      var(--vkui--font_subhead--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_subhead--font_weight--compact,
+      var(--vkui--font_subhead--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_subhead--font_family--compact,
+      var(--vkui--font_subhead--font_family--regular)
+    );
   }
 }

package/src/components/Typography/Subhead/Subhead.tsx

@@ -5,7 +5,7 @@ import styles from './Subhead.module.css';
 
 const sizeYClassNames = {
   none: styles['Subhead--sizeY-none'],
-  ['compact']: styles['Subhead--sizeY-compact'],
+  compact: styles['Subhead--sizeY-compact'],
 };
 
 export type SubheadProps = TypographyProps;

package/src/components/Typography/Text/Text.module.css

@@ -6,13 +6,38 @@
 }
 
 .Text--sizeY-compact {
-  font-size: var(--vkui--font_text--font_size--compact);
-  line-height: var(--vkui--font_text--line_height--compact);
+  font-size: var(--vkui--font_text--font_size--compact, var(--vkui--font_text--font_size--regular));
+  line-height: var(
+    --vkui--font_text--line_height--compact,
+    var(--vkui--font_text--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_text--font_weight--compact,
+    var(--vkui--font_text--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_text--font_family--compact,
+    var(--vkui--font_text--font_family--regular)
+  );
 }
 
 @media (--sizeY-compact) {
   .Text--sizeY-none {
-    font-size: var(--vkui--font_text--font_size--compact);
-    line-height: var(--vkui--font_text--line_height--compact);
+    font-size: var(
+      --vkui--font_text--font_size--compact,
+      var(--vkui--font_text--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_text--line_height--compact,
+      var(--vkui--font_text--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_text--font_weight--compact,
+      var(--vkui--font_text--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_text--font_family--compact,
+      var(--vkui--font_text--font_family--regular)
+    );
   }
 }

package/src/components/Typography/Text/Text.tsx

@@ -5,7 +5,7 @@ import styles from './Text.module.css';
 
 const sizeYClassNames = {
   none: styles['Text--sizeY-none'],
-  ['compact']: styles['Text--sizeY-compact'],
+  compact: styles['Text--sizeY-compact'],
 };
 
 export type TextProps = TypographyProps;

package/src/components/Typography/Title/Title.module.css

@@ -5,6 +5,46 @@
   font-family: var(--vkui--font_title1--font_family--regular);
 }
 
+.Title--sizeY-compact.Title--level-1 {
+  font-size: var(
+    --vkui--font_title1--font_size--compact,
+    var(--vkui--font_title1--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title1--line_height--compact,
+    var(--vkui--font_title1--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title1--font_weight--compact,
+    var(--vkui--font_title1--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title1--font_family--compact,
+    var(--vkui--font_title1--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-1 {
+    font-size: var(
+      --vkui--font_title1--font_size--compact,
+      var(--vkui--font_title1--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title1--line_height--compact,
+      var(--vkui--font_title1--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title1--font_weight--compact,
+      var(--vkui--font_title1--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title1--font_family--compact,
+      var(--vkui--font_title1--font_family--regular)
+    );
+  }
+}
+
 .Title--level-2 {
   font-size: var(--vkui--font_title2--font_size--regular);
   line-height: var(--vkui--font_title2--line_height--regular);
@@ -12,9 +52,89 @@
   font-family: var(--vkui--font_title2--font_family--regular);
 }
 
+.Title--sizeY-compact.Title--level-2 {
+  font-size: var(
+    --vkui--font_title2--font_size--compact,
+    var(--vkui--font_title2--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title2--line_height--compact,
+    var(--vkui--font_title2--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title2--font_weight--compact,
+    var(--vkui--font_title2--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title2--font_family--compact,
+    var(--vkui--font_title2--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-2 {
+    font-size: var(
+      --vkui--font_title2--font_size--compact,
+      var(--vkui--font_title2--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title2--line_height--compact,
+      var(--vkui--font_title2--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title2--font_weight--compact,
+      var(--vkui--font_title2--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title2--font_family--compact,
+      var(--vkui--font_title2--font_family--regular)
+    );
+  }
+}
+
 .Title--level-3 {
   font-size: var(--vkui--font_title3--font_size--regular);
   line-height: var(--vkui--font_title3--line_height--regular);
   font-weight: var(--vkui--font_title3--font_weight--regular);
   font-family: var(--vkui--font_title3--font_family--regular);
 }
+
+.Title--sizeY-compact.Title--level-3 {
+  font-size: var(
+    --vkui--font_title3--font_size--compact,
+    var(--vkui--font_title3--font_size--regular)
+  );
+  line-height: var(
+    --vkui--font_title3--line_height--compact,
+    var(--vkui--font_title3--line_height--regular)
+  );
+  font-weight: var(
+    --vkui--font_title3--font_weight--compact,
+    var(--vkui--font_title3--font_weight--regular)
+  );
+  font-family: var(
+    --vkui--font_title3--font_family--compact,
+    var(--vkui--font_title3--font_family--regular)
+  );
+}
+
+@media (--sizeY-compact) {
+  .Title--sizeY-none.Title--level-3 {
+    font-size: var(
+      --vkui--font_title3--font_size--compact,
+      var(--vkui--font_title3--font_size--regular)
+    );
+    line-height: var(
+      --vkui--font_title3--line_height--compact,
+      var(--vkui--font_title3--line_height--regular)
+    );
+    font-weight: var(
+      --vkui--font_title3--font_weight--compact,
+      var(--vkui--font_title3--font_weight--regular)
+    );
+    font-family: var(
+      --vkui--font_title3--font_family--compact,
+      var(--vkui--font_title3--font_family--regular)
+    );
+  }
+}

package/src/components/Typography/Title/Title.tsx

@@ -1,4 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { Typography, type TypographyProps } from '../Typography';
 import styles from './Title.module.css';
 
@@ -8,6 +9,11 @@ const stylesLevel = {
   '3': styles['Title--level-3'],
 };
 
+const sizeYClassNames = {
+  none: styles['Title--sizeY-none'],
+  compact: styles['Title--sizeY-compact'],
+};
+
 export interface TitleProps extends TypographyProps {
   level?: '1' | '2' | '3';
 }
@@ -25,12 +31,18 @@ export const Title = ({
   inline = false,
   ...restProps
 }: TitleProps): 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}
     />
   );

package/src/components/Typography/Typography.module.css

@@ -9,19 +9,36 @@
 }
 
 /* Мы утяжеляем селектор, чтобы перебить другие селекторы */
-.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
+.Typography--weight-1.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
+  font-weight: var(--vkui--font_weight_base1);
+}
+
+.Typography--accent.Typography--weight-1.Typography--weight-1.Typography--weight-1 {
   font-weight: var(--vkui--font_weight_accent1);
 }
 
-.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
+.Typography--weight-2.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
+  font-weight: var(--vkui--font_weight_base2);
+}
+
+.Typography--accent.Typography--weight-2.Typography--weight-2.Typography--weight-2 {
   font-weight: var(--vkui--font_weight_accent2);
 }
 
-.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
+.Typography--weight-3.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
+  font-weight: var(--vkui--font_weight_base3);
+}
+
+.Typography--accent.Typography--weight-3.Typography--weight-3.Typography--weight-3 {
   font-weight: var(--vkui--font_weight_accent3);
 }
 
 /* stylelint-disable-next-line selector-max-type */
 .Typography b {
+  font-weight: var(--vkui--font_weight_base1);
+}
+
+/* stylelint-disable-next-line selector-max-type */
+.Typography--accent.Typography b {
   font-weight: var(--vkui--font_weight_accent1);
 }

package/src/components/Typography/Typography.tsx

@@ -22,6 +22,12 @@ export interface TypographyProps
    * Задаёт начертание шрифта, отличное от стандартного.
    */
   weight?: '1' | '2' | '3';
+  /**
+   * Включает акцентный тип начертания шрифта.
+   * Используются токены fontWeightAccent[1, 2, 3]
+   * Используется только вместе с `weight`
+   */
+  useAccentWeight?: boolean;
   /**
    * Убирает внешние отступы
    */
@@ -34,6 +40,9 @@ export interface TypographyProps
 
 export const Typography = ({
   weight,
+
+  // TODO [>=7]: сделать по умолчанию false (нужен будет кодмод)
+  useAccentWeight = true,
   Component = 'span',
   normalize,
   inline,
@@ -46,6 +55,7 @@ export const Typography = ({
       normalize && styles['Typography--normalize'],
       inline && styles['Typography--inline'],
       weight && stylesWeight[weight],
+      weight && useAccentWeight && styles['Typography--accent'],
     )}
     {...restProps}
   />

package/src/components/WriteBar/WriteBar.tsx

@@ -45,7 +45,7 @@ const WriteBarTypography = (props: TypographyProps) => {
     return <Title {...props} level="3" weight="3" />;
   }
 
-  return <Headline {...props} />;
+  return <Headline weight="3" {...props} />;
 };
 
 /**

package/src/hooks/useAdaptivityConditionalRender/constants.ts

@@ -2,22 +2,22 @@ import styles from '../../styles/adaptivity.module.css';
 
 export const sizeXCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeX--compact-mq'] },
-  ['compact']: { className: styles['-sizeX--compact-forced'] },
+  compact: { className: styles['-sizeX--compact-forced'] },
 };
 
 export const sizeXRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeX--regular-mq'] },
-  ['regular']: { className: styles['-sizeX--regular-forced'] },
+  regular: { className: styles['-sizeX--regular-forced'] },
 };
 
 export const sizeYCompactClassNames: Record<'mq' | 'compact', { className: string }> = {
   mq: { className: styles['-sizeY--compact-mq'] },
-  ['compact']: { className: styles['-sizeY--compact-forced'] },
+  compact: { className: styles['-sizeY--compact-forced'] },
 };
 
 export const sizeYRegularClassNames: Record<'mq' | 'regular', { className: string }> = {
   mq: { className: styles['-sizeY--regular-mq'] },
-  ['regular']: { className: styles['-sizeY--regular-forced'] },
+  regular: { className: styles['-sizeY--regular-forced'] },
 };
 
 export const viewWidthClassNames: Record<

package/src/hooks/useWaitTransitionFinish.ts

@@ -4,7 +4,7 @@ import { useDOM } from '../lib/dom';
 
 export const useWaitTransitionFinish = (): ((
   element: HTMLElement | undefined | null,
-  eventHandler: VoidFunction,
+  eventHandler: (e?: TransitionEvent) => void,
   durationFallback: number,
 ) => void) => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -19,7 +19,7 @@ export const useWaitTransitionFinish = (): ((
   const waitTransitionFinish = React.useCallback(
     (
       element: HTMLElement | undefined | null,
-      eventHandler: VoidFunction,
+      eventHandler: (e?: TransitionEvent) => void,
       durationFallback: number,
     ) => {
       if (element) {