diff --git a/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.module.css b/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.module.css index cd3f9e4039..9eddd1db59 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.module.css +++ b/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.module.css @@ -5,6 +5,46 @@ 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); @@ -12,6 +52,46 @@ 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); @@ -19,9 +99,89 @@ 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) + ); + } +} diff --git a/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.tsx b/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.tsx index 76b29f4b77..30afd24b98 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/DisplayTitle.tsx +++ b/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 ( ); diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-dark-1-snap.png index 3185a17046..d436a382f5 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4975ddad9f121f7bfcd79a9de1609ed488fb519e0233f411445d8fae923822fc -size 73806 +oid sha256:beaf1b8a799f7aff93074242f60a611fc14b66bc7605a6c12e1a0c983b6b23f1 +size 74409 diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-light-1-snap.png index 39d32305d7..f8bab884a7 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b73e4f799be27c9a5df61ef9d7522aae2df97bd3926e8981d3eb6fcc6963d70b -size 69297 +oid sha256:de3558e0528ce0e8512d11cfbca0a47f9dbec278694979eb9c17fb536b9f173c +size 69602 diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-dark-1-snap.png index c6a2fb82f7..703aaf2d99 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eec84eac1e3cb716e213bd368b0f60f3f2e2614a00e62b01da833a0c5dd2b9d4 -size 89359 +oid sha256:b5710ea54ffb10245ee628d9f4c753031d1fd849e38e760a2303caef6d21b009 +size 89610 diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-light-1-snap.png index 69eead9dc7..cc0f5ac0a2 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c80ffb8f50f1c85b799efeaf0f24c059fe6555340bffd9fb2a63a14f7b543745 -size 68825 +oid sha256:b36a828709d7d1ff3cc89c5fe8ecccda47ee872eecd411762decf7ef772f3ad7 +size 68936 diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-dark-1-snap.png index 31e63c15ef..813f757342 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:51e79c0bc9f6b793fddafb3f219f7de20a4c1bb95b1caba1e1e46434c152f44c -size 75499 +oid sha256:25942d6ab777a30460d53700d881bad22b94b15f73ae781d644517d7fb8fe2e4 +size 76023 diff --git a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-light-1-snap.png index 794e899891..11cc561a34 100644 --- a/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Typography/DisplayTitle/__image_snapshots__/displaytitle-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bb423d7c8209bea4bcd6960a43e5bfea0a557ed64a8ebfa01166640f33585090 -size 71210 +oid sha256:cf7a35c1390a06965ee214ed0f15321b7b037714ee48ed70526182b6e3f248cb +size 71662