diff --git a/packages/vkui/src/components/Typography/Footnote/Footnote.module.css b/packages/vkui/src/components/Typography/Footnote/Footnote.module.css index 73d715b480..25150a75d1 100644 --- a/packages/vkui/src/components/Typography/Footnote/Footnote.module.css +++ b/packages/vkui/src/components/Typography/Footnote/Footnote.module.css @@ -5,6 +5,46 @@ font-family: var(--vkui--font_footnote--font_family--regular); } +.Footnote--sizeY-compact { + font-size: var( + --vkui--font_footnote--font_size--compact, + var(--vkui--font_footnote--font_size--regular) + ); + line-height: var( + --vkui--font_footnote--line_height--compact, + var(--vkui--font_footnote--line_height--regular) + ); + font-weight: var( + --vkui--font_footnote--font_weight--compact, + var(--vkui--font_footnote--font_weight--regular) + ); + font-family: var( + --vkui--font_footnote--font_family--compact, + var(--vkui--font_footnote--font_family--regular) + ); +} + +@media (--sizeY-compact) { + .Footnote--sizeY-none { + font-size: var( + --vkui--font_footnote--font_size--compact, + var(--vkui--font_footnote--font_size--regular) + ); + line-height: var( + --vkui--font_footnote--line_height--compact, + var(--vkui--font_footnote--line_height--regular) + ); + font-weight: var( + --vkui--font_footnote--font_weight--compact, + var(--vkui--font_footnote--font_weight--regular) + ); + font-family: var( + --vkui--font_footnote--font_family--compact, + var(--vkui--font_footnote--font_family--regular) + ); + } +} + .Footnote--caps { font-size: var(--vkui--font_footnote_caps--font_size--regular); line-height: var(--vkui--font_footnote_caps--line_height--regular); @@ -12,3 +52,43 @@ font-family: var(--vkui--font_footnote_caps--font_family--regular); text-transform: uppercase; } + +.Footnote--sizeY-compact.Footnote--caps { + font-size: var( + --vkui--font_footnote_caps--font_size--compact, + var(--vkui--font_footnote_caps--font_size--regular) + ); + line-height: var( + --vkui--font_footnote_caps--line_height--compact, + var(--vkui--font_footnote_caps--line_height--regular) + ); + font-weight: var( + --vkui--font_footnote_caps--font_weight--compact, + var(--vkui--font_footnote_caps--font_weight--regular) + ); + font-family: var( + --vkui--font_footnote_caps--font_family--compact, + var(--vkui--font_footnote_caps--font_family--regular) + ); +} + +@media (--sizeY-compact) { + .Footnote--sizeY-none.Footnote--caps { + font-size: var( + --vkui--font_footnote_caps--font_size--compact, + var(--vkui--font_footnote_caps--font_size--regular) + ); + line-height: var( + --vkui--font_footnote_caps--line_height--compact, + var(--vkui--font_footnote_caps--line_height--regular) + ); + font-weight: var( + --vkui--font_footnote_caps--font_weight--compact, + var(--vkui--font_footnote_caps--font_weight--regular) + ); + font-family: var( + --vkui--font_footnote_caps--font_family--compact, + var(--vkui--font_footnote_caps--font_family--regular) + ); + } +} diff --git a/packages/vkui/src/components/Typography/Footnote/Footnote.tsx b/packages/vkui/src/components/Typography/Footnote/Footnote.tsx index f5a236123a..f4fd4ea53f 100644 --- a/packages/vkui/src/components/Typography/Footnote/Footnote.tsx +++ b/packages/vkui/src/components/Typography/Footnote/Footnote.tsx @@ -1,7 +1,13 @@ import { classNames } from '@vkontakte/vkjs'; +import { useAdaptivity } from '../../../hooks/useAdaptivity'; import { type HasCaps, Typography, type TypographyProps } from '../Typography'; import styles from './Footnote.module.css'; +const sizeYClassNames = { + none: styles['Footnote--sizeY-none'], + compact: styles['Footnote--sizeY-compact'], +}; + export interface FootnoteProps extends TypographyProps, HasCaps {} /** @@ -16,12 +22,21 @@ export const Footnote = ({ normalize = true, inline = false, ...restProps -}: FootnoteProps): React.ReactNode => ( - -); +}: FootnoteProps): React.ReactNode => { + const { sizeY = 'none' } = useAdaptivity(); + + return ( + + ); +};