diff --git a/packages/vkui/src/components/Typography/Paragraph/Paragraph.e2e-playground.tsx b/packages/vkui/src/components/Typography/Paragraph/Paragraph.e2e-playground.tsx index f6e3c7e22b..a3ea4c96ae 100644 --- a/packages/vkui/src/components/Typography/Paragraph/Paragraph.e2e-playground.tsx +++ b/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], diff --git a/packages/vkui/src/components/Typography/Paragraph/Paragraph.module.css b/packages/vkui/src/components/Typography/Paragraph/Paragraph.module.css index 1a1e72cd0a..41182faee0 100644 --- a/packages/vkui/src/components/Typography/Paragraph/Paragraph.module.css +++ b/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) + ); + } +} diff --git a/packages/vkui/src/components/Typography/Paragraph/Paragraph.tsx b/packages/vkui/src/components/Typography/Paragraph/Paragraph.tsx index c0f191d4d1..c3f272e2b4 100644 --- a/packages/vkui/src/components/Typography/Paragraph/Paragraph.tsx +++ b/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 ( ); diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-dark-1-snap.png index 1b1fcf4ab9..d42c64dc95 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4426b29bac3197393639b02b417e09cbf1f65616f5791f87d860264294ca8d95 -size 10992 +oid sha256:9e897a9054e893ea244033956eb4e4a63b75820ff420490df9215d913e8f9a86 +size 12445 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-light-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-light-1-snap.png index 6c6968fbf0..36fb9322e8 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a07195276fbcbed1b1d0453ca7f52a0ab42e72517b243d5615b657af47fdea9 -size 10717 +oid sha256:08d068229ef5dc75f2fa3f1d486a87faccb9c6f362ad2bc3a99b0ae07a06e408 +size 12141 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-dark-1-snap.png index fca819c43b..08ff55e950 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c28a75cd10f9cf60d3db6d28d418c0c7641c13bc50b895281b1e9ec935bf0472 -size 10291 +oid sha256:10bb8af6aed2028d4122f67b249997f6db8bcf66e47160b378b1b257bcd4195b +size 12878 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-light-1-snap.png index 27f79d4757..3c5b0ff8d5 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6f1068ec68e95f78c6c5372af3bbdfc34a8682f34f443277d5a3b5a09b3af2e3 -size 9978 +oid sha256:b26f7dc46a1905da54e5a7f3645da751c1e612148d9006af2364af94ba37661c +size 12484 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-dark-1-snap.png index a7de468967..0dbe271367 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a0a34aec7731a37ce3b5a185bb79f575791a9fce481dd2be35954301f93a533a -size 7975 +oid sha256:be1bec652177a45ac7019a1664ca0ad0f6f420683fb8779a7a4787c743b6c594 +size 8186 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-light-1-snap.png index 9c46ce734c..75fb36d854 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:974b4c9dc7b54ecb127b8a40a2d6e0d2b811d5a41b8cc6a6c47dbc997fcb794f -size 7683 +oid sha256:8b3af01e7f61f1f172967304b2888d8be43b609dc8ffde65cfb28a02c711f507 +size 7981 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-dark-1-snap.png index 0a0ccdcf76..9b6fb3988d 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1f498ca921fb05f9706e9fb4e455fb7169424994143762a2de0e99833c95d8c1 -size 9210 +oid sha256:3b93392b498b2eb7cbf47fa75be4ffd99d16ba4eef50ea5bfd0b45698e02ec48 +size 11348 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-light-1-snap.png index 3b4fb5f2c0..4d7537be30 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a9f1ebf9d3d1facc9214dcdfce562adb8024c02934e7b7bf3db1525d47d32bf5 -size 7347 +oid sha256:44c6c3810dd6157ad67c2ef90561a4f94588b1bd0e686e34f303e6ffaebadaf2 +size 9330 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-dark-1-snap.png index 6e98c39996..cfcdea0ed0 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da6e35a542375d8ef8e5e9430e3838f36be3b826452c98b917f8fa21a7bbd621 -size 7649 +oid sha256:f3b403c08331d0f66ce32f5a9539724b288fde20ee8b64e636deda8e892483a1 +size 8673 diff --git a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-light-1-snap.png index 38a6aebbe9..0433af4ae3 100644 --- a/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Typography/Paragraph/__image_snapshots__/paragraph-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fa61480bc171826e04a187434296049ab482612abf4ff27d622240b1282eb7e7 -size 7293 +oid sha256:407878d214d71be1b3b51b9e7bec5aa27f9d2a126aa405b3f817d43644f90461 +size 8376