diff --git a/packages/plasma-asdk/src/components/Typography/Heading.config.ts b/packages/plasma-asdk/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/plasma-asdk/src/components/Typography/Heading.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx index 2fdf77496c..a3b9de6a1b 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.tsx b/packages/plasma-asdk/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-asdk/src/components/Typography/index.ts b/packages/plasma-asdk/src/components/Typography/index.ts index 402cd635f5..58b513eee3 100644 --- a/packages/plasma-asdk/src/components/Typography/index.ts +++ b/packages/plasma-asdk/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-asdk/src/tokens/typography.ts b/packages/plasma-asdk/src/tokens/typography.ts index 8fbc20a4de..b8555b813a 100644 --- a/packages/plasma-asdk/src/tokens/typography.ts +++ b/packages/plasma-asdk/src/tokens/typography.ts @@ -17,6 +17,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts index 3b30890478..6f3fa4f9ca 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts @@ -222,6 +222,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx index fcf63f599a..3336be6b5a 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx @@ -7,7 +7,7 @@ import { IconButton } from '../IconButton/IconButton'; import { Accordion, AccordionItem } from '.'; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; @@ -84,6 +84,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx index 8e242520a1..d31db3df24 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx @@ -18,7 +18,7 @@ type RatingDemoProps = { iconSlotHalf?: ReactNode; }; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('plasma-b2c: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/plasma-b2c/src/components/Rating/Rating.config.ts b/packages/plasma-b2c/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.config.ts +++ b/packages/plasma-b2c/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts index 79e93b2766..8eb698da33 100644 --- a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts @@ -139,6 +139,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx index bd2497143f..3233453d89 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx index 7b7efe0cfe..20f3b3be53 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx @@ -55,6 +55,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 79e5bb02d9..70bca47aec 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-b2c/src/components/Typography/Heading.config.ts b/packages/plasma-b2c/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/plasma-b2c/src/components/Typography/Heading.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx index e124ed0cd3..892419d89d 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-core: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx index 730956ce5b..7574da3ed5 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx @@ -15,6 +15,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -151,6 +152,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.tsx b/packages/plasma-b2c/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-b2c/src/components/Typography/index.ts b/packages/plasma-b2c/src/components/Typography/index.ts index 566e532a32..0ee9b95d0d 100644 --- a/packages/plasma-b2c/src/components/Typography/index.ts +++ b/packages/plasma-b2c/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-b2c/src/tokens/typography.ts b/packages/plasma-b2c/src/tokens/typography.ts index 8119e46b77..440eca400c 100644 --- a/packages/plasma-b2c/src/tokens/typography.ts +++ b/packages/plasma-b2c/src/tokens/typography.ts @@ -15,6 +15,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, diff --git a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx index e124ed0cd3..892419d89d 100644 --- a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx +++ b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-core: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx index 5649ffc28d..546486e4be 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx @@ -18,7 +18,7 @@ type RatingDemoProps = { iconSlotHalf?: ReactNode; }; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('plasma-giga: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/plasma-giga/src/components/Rating/Rating.config.ts b/packages/plasma-giga/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.config.ts +++ b/packages/plasma-giga/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx index d32ba51a7d..0369a7166b 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx @@ -17,6 +17,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx index d9c2b25935..22a88ce080 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 9976645526..a7252a1f7c 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-giga/src/components/Typography/Heading.config.ts b/packages/plasma-giga/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/plasma-giga/src/components/Typography/Heading.config.ts +++ b/packages/plasma-giga/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx index bdae840e3d..e307d8c888 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-giga: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-giga: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-giga/src/components/Typography/Typography.tsx b/packages/plasma-giga/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-giga/src/components/Typography/index.ts b/packages/plasma-giga/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/plasma-giga/src/components/Typography/index.ts +++ b/packages/plasma-giga/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx b/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx index c79e1a8dbb..7924212350 100644 --- a/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx +++ b/packages/plasma-new-hope/src/components/Rating/utils/getIcons.tsx @@ -35,6 +35,7 @@ const iconMap = (componentSize?: string) => { case 'h3': case 'h4': case 'h5': + case 'h6': case 'l': case 'm': return { diff --git a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts index ce7cb20b17..8bdfb6cb40 100644 --- a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts @@ -112,7 +112,7 @@ export type CustomHorizontalIconTabItemProps = { /** * Размер TabItem */ - size?: 'xs' | 's' | 'm' | 'l' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size?: 'xs' | 's' | 'm' | 'l' | 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Активен ли TabItem * @deprecated Используйте свойство `selected` @@ -163,7 +163,7 @@ export type CustomHeaderTabItemProps = { /** * Размер TabItem */ - size: 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size: 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Активен ли TabItem * @deprecated Используйте свойство `selected` diff --git a/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts b/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts index 81980d67b2..c2963b7b88 100644 --- a/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts @@ -86,7 +86,7 @@ export type CustomHeaderTabsProps = { /** * Размер табов */ - size: 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; + size: 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1'; /** * Уберет скругление с выбранной стороны и подвинет контейнер * @deprecated diff --git a/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx b/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx index 107fa703ef..75b95958f7 100644 --- a/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx +++ b/packages/plasma-new-hope/src/components/Typography/Typography.template-doc.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/{{ package }}'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/{{ package }}'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts index a6a554d050..604830ad73 100644 --- a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts @@ -198,6 +198,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx index d83277f28b..3a3f549071 100644 --- a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.stories.tsx @@ -108,6 +108,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts index 27f8f446be..10dafc0508 100644 --- a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts @@ -300,6 +300,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx b/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx index afdc911a02..309182108f 100644 --- a/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Rating/Rating.stories.tsx @@ -9,7 +9,7 @@ import { ratingClasses } from '../../../components/Rating'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts index 45aa46bed8..b9be0980e1 100644 --- a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts @@ -69,6 +69,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx b/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx index f92000c3ee..983507df0e 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-new-hope/src/examples/components/Tabs/Tabs.stories.tsx @@ -16,7 +16,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 6e841caac3..20057131e5 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -117,6 +117,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts index 86bde77ed9..e705ac66d3 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -191,6 +191,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts index 5bb6484e7d..1fa1e77127 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -72,6 +72,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts index dd1e6d9043..be669885ce 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts @@ -58,6 +58,16 @@ export const config = { ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${tokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); `, + h6: css` + ${tokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${tokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${tokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, }, }, }; diff --git a/packages/plasma-new-hope/src/mixins/typography.ts b/packages/plasma-new-hope/src/mixins/typography.ts index 1ebe185ba0..f76c7dab0a 100644 --- a/packages/plasma-new-hope/src/mixins/typography.ts +++ b/packages/plasma-new-hope/src/mixins/typography.ts @@ -110,6 +110,20 @@ export const h5Bold = { 'font-weight': 'var(--plasma-typo-h5-bold-font-weight)', }; +export const h6 = { + 'font-family': 'var(--plasma-typo-h6-font-family)', + 'font-size': 'var(--plasma-typo-h6-font-size)', + 'font-style': 'var(--plasma-typo-h6-font-style)', + 'font-weight': 'var(--plasma-typo-h6-font-weight)', + 'letter-spacing': 'var(--plasma-typo-h6-letter-spacing)', + 'line-height': 'var(--plasma-typo-h6-line-height)', +}; + +export const h6Bold = { + ...h6, + 'font-weight': 'var(--plasma-typo-h6-bold-font-weight)', +}; + export const bodyL = { 'font-family': 'var(--plasma-typo-body-l-font-family)', 'font-size': 'var(--plasma-typo-body-l-font-size)', diff --git a/packages/plasma-web/src/components/Accordion/Accordion.config.ts b/packages/plasma-web/src/components/Accordion/Accordion.config.ts index fcd57ddef1..716aee00aa 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-web/src/components/Accordion/Accordion.config.ts @@ -221,6 +221,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx index 9e605061b1..40f89f368b 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-web/src/components/Accordion/Accordion.stories.tsx @@ -7,7 +7,7 @@ import { IconButton } from '../IconButton/IconButton'; import { Accordion, AccordionItem } from '.'; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; @@ -83,6 +83,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-web/src/components/Rating/Rating.component-test.tsx b/packages/plasma-web/src/components/Rating/Rating.component-test.tsx index d5075b0a22..5dea96e1cd 100644 --- a/packages/plasma-web/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-web/src/components/Rating/Rating.component-test.tsx @@ -22,7 +22,7 @@ type RatingDemoProps = { const StandardTypoStyle = createGlobalStyle(standardTypo); -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('plasma-b2c: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/plasma-web/src/components/Rating/Rating.config.ts b/packages/plasma-web/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/plasma-web/src/components/Rating/Rating.config.ts +++ b/packages/plasma-web/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-web/src/components/Rating/Rating.stories.tsx b/packages/plasma-web/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/plasma-web/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-web/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts index 79e93b2766..8eb698da33 100644 --- a/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts @@ -139,6 +139,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx index ffd4155c27..f05acb5c9f 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.component-test.tsx @@ -39,6 +39,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx index 469d525d0f..72b5d8715d 100644 --- a/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-web/src/components/Skeleton/Skeleton.stories.tsx @@ -55,6 +55,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 54e645f8eb..acd89c98f2 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-web/src/components/Typography/Heading.config.ts b/packages/plasma-web/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/plasma-web/src/components/Typography/Heading.config.ts +++ b/packages/plasma-web/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Typography/Typography.stories.tsx b/packages/plasma-web/src/components/Typography/Typography.stories.tsx index dd0c3551b9..b754f6810e 100644 --- a/packages/plasma-web/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-web/src/components/Typography/Typography.stories.tsx @@ -15,6 +15,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -152,6 +153,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-web/src/components/Typography/Typography.tsx b/packages/plasma-web/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/plasma-web/src/components/Typography/Typography.tsx +++ b/packages/plasma-web/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-web/src/components/Typography/index.ts b/packages/plasma-web/src/components/Typography/index.ts index 566e532a32..0ee9b95d0d 100644 --- a/packages/plasma-web/src/components/Typography/index.ts +++ b/packages/plasma-web/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-web/src/tokens/typography.ts b/packages/plasma-web/src/tokens/typography.ts index c6db9652f1..1892c9a424 100644 --- a/packages/plasma-web/src/tokens/typography.ts +++ b/packages/plasma-web/src/tokens/typography.ts @@ -17,6 +17,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, diff --git a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-bizcom/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts +++ b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx b/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-bizcom/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-bizcom/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-bizcom/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx b/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-bizcom/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-bizcom/src/components/Typography/Typography.tsx b/packages/sdds-bizcom/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-bizcom/src/components/Typography/Typography.tsx +++ b/packages/sdds-bizcom/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-bizcom/src/components/Typography/index.ts b/packages/sdds-bizcom/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-bizcom/src/components/Typography/index.ts +++ b/packages/sdds-bizcom/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-crm/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-crm/src/components/Rating/Rating.config.ts b/packages/sdds-crm/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-crm/src/components/Rating/Rating.config.ts +++ b/packages/sdds-crm/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-crm/src/components/Rating/Rating.stories.tsx b/packages/sdds-crm/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-crm/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-crm/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-crm/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-crm/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-crm/src/components/Typography/Heading.config.ts b/packages/sdds-crm/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-crm/src/components/Typography/Heading.config.ts +++ b/packages/sdds-crm/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-crm/src/components/Typography/Typography.stories.tsx b/packages/sdds-crm/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-crm/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-crm/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-crm/src/components/Typography/Typography.tsx b/packages/sdds-crm/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-crm/src/components/Typography/Typography.tsx +++ b/packages/sdds-crm/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-crm/src/components/Typography/index.ts b/packages/sdds-crm/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-crm/src/components/Typography/index.ts +++ b/packages/sdds-crm/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx b/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx index 62073dfb9c..886dbe27bc 100644 --- a/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/sdds-cs/src/components/Skeleton/Skeleton.component-test.tsx @@ -19,6 +19,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-cs/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts index c3d06b06c2..9e68303c0f 100644 --- a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-cs/src/components/Typography/Heading.config.ts b/packages/sdds-cs/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-cs/src/components/Typography/Heading.config.ts +++ b/packages/sdds-cs/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx b/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx index 15818c6057..e3cc13794f 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('sdds-cs: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('sdds-cs: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/sdds-cs/src/components/Typography/Typography.stories.tsx b/packages/sdds-cs/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-cs/src/components/Typography/Typography.tsx b/packages/sdds-cs/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-cs/src/components/Typography/Typography.tsx +++ b/packages/sdds-cs/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-cs/src/components/Typography/index.ts b/packages/sdds-cs/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-cs/src/components/Typography/index.ts +++ b/packages/sdds-cs/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-dfa/src/components/Rating/Rating.config.ts b/packages/sdds-dfa/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-dfa/src/components/Rating/Rating.config.ts +++ b/packages/sdds-dfa/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx b/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-dfa/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-dfa/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts index c0b020b12d..bc9eef7804 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -59,6 +59,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-dfa/src/components/Typography/Heading.config.ts b/packages/sdds-dfa/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-dfa/src/components/Typography/Heading.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx b/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-dfa/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-dfa/src/components/Typography/Typography.tsx b/packages/sdds-dfa/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-dfa/src/components/Typography/Typography.tsx +++ b/packages/sdds-dfa/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-dfa/src/components/Typography/index.ts b/packages/sdds-dfa/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-dfa/src/components/Typography/index.ts +++ b/packages/sdds-dfa/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx index e3708e1a7f..75739295d9 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-finai/src/components/Accordion/Accordion.stories.tsx @@ -33,7 +33,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -133,6 +133,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-finai/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-finai/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-finai/src/components/Typography/Heading.config.ts b/packages/sdds-finai/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-finai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-finai/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-finai/src/components/Typography/Typography.stories.tsx b/packages/sdds-finai/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-finai/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-finai/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-finai/src/components/Typography/Typography.tsx b/packages/sdds-finai/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-finai/src/components/Typography/Typography.tsx +++ b/packages/sdds-finai/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-finai/src/components/Typography/index.ts b/packages/sdds-finai/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-finai/src/components/Typography/index.ts +++ b/packages/sdds-finai/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts index 9a516af682..391fe8875a 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts @@ -212,6 +212,28 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 1.25rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 1.375rem; + ${accordionTokens.accordionItemBodyPaddingBottom}: 1.375rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.875rem; + ${accordionTokens.accordionGap}: 1.25rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx index 3dd79668b2..b24a9ad351 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-insol/src/components/Accordion/Accordion.stories.tsx @@ -26,7 +26,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'clear'] as const; const pins = [ @@ -108,6 +108,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; @@ -124,6 +125,7 @@ const getSizeForArrow = (size) => { case 's': case 'xs': case 'h5': + case 'h6': case 'h4': return 'xs'; default: diff --git a/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx b/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx index a39df2841e..6c9bbd89d1 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx +++ b/packages/sdds-insol/src/components/Rating/Rating.component-test.tsx @@ -18,7 +18,7 @@ type RatingDemoProps = { iconSlotHalf?: ReactNode; }; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('sdds-insol: Rating', () => { const Rating = getComponent('Rating'); diff --git a/packages/sdds-insol/src/components/Rating/Rating.config.ts b/packages/sdds-insol/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.config.ts +++ b/packages/sdds-insol/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-insol/src/components/Rating/Rating.stories.tsx b/packages/sdds-insol/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-insol/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx b/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx index d32ba51a7d..0369a7166b 100644 --- a/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/sdds-insol/src/components/Skeleton/Skeleton.component-test.tsx @@ -17,6 +17,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-insol/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 354c0cdbfd..7e1c769ad9 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index df22e582a4..e2973f8fe7 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-insol/src/components/Typography/Heading.config.ts b/packages/sdds-insol/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-insol/src/components/Typography/Heading.config.ts +++ b/packages/sdds-insol/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx b/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx index e491682d70..be07dad061 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('sdds-insol: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('sdds-insol: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/sdds-insol/src/components/Typography/Typography.stories.tsx b/packages/sdds-insol/src/components/Typography/Typography.stories.tsx index 634d4fc79c..a67927c2d5 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -135,6 +136,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-insol/src/components/Typography/Typography.tsx b/packages/sdds-insol/src/components/Typography/Typography.tsx index bb08397d38..0eac49b13c 100644 --- a/packages/sdds-insol/src/components/Typography/Typography.tsx +++ b/packages/sdds-insol/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -73,6 +74,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -103,6 +107,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-insol/src/components/Typography/index.ts b/packages/sdds-insol/src/components/Typography/index.ts index f0d89c8eb4..50cb06133f 100644 --- a/packages/sdds-insol/src/components/Typography/index.ts +++ b/packages/sdds-insol/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-netology/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-netology/src/components/Rating/Rating.config.ts b/packages/sdds-netology/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.config.ts +++ b/packages/sdds-netology/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-netology/src/components/Rating/Rating.stories.tsx b/packages/sdds-netology/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-netology/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-netology/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-netology/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 9976645526..a7252a1f7c 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-netology/src/components/Typography/Heading.config.ts b/packages/sdds-netology/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-netology/src/components/Typography/Heading.config.ts +++ b/packages/sdds-netology/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-netology/src/components/Typography/Typography.stories.tsx b/packages/sdds-netology/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-netology/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-netology/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-netology/src/components/Typography/Typography.tsx b/packages/sdds-netology/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-netology/src/components/Typography/Typography.tsx +++ b/packages/sdds-netology/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-netology/src/components/Typography/index.ts b/packages/sdds-netology/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-netology/src/components/Typography/index.ts +++ b/packages/sdds-netology/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts index 2e83a636d3..8ec6bce2c7 100644 --- a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts @@ -132,6 +132,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx index 278c9cb0ee..ff927ad375 100644 --- a/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Accordion/Accordion.stories.tsx @@ -122,6 +122,7 @@ const getSizeForIconButton = (size) => { case 'h4': return 's'; case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx index 9db551275b..559c8e7401 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['m'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 5f3d720cb7..02802a5387 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -54,6 +54,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 547651b0c8..26c0984c7c 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -78,6 +78,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx b/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx index 2fdf77496c..a3b9de6a1b 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-platform-ai/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-platform-ai/src/components/Typography/Typography.tsx b/packages/sdds-platform-ai/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Typography.tsx +++ b/packages/sdds-platform-ai/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-platform-ai/src/components/Typography/index.ts b/packages/sdds-platform-ai/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-platform-ai/src/components/Typography/index.ts +++ b/packages/sdds-platform-ai/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-scan/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-scan/src/components/Rating/Rating.config.ts b/packages/sdds-scan/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-scan/src/components/Rating/Rating.config.ts +++ b/packages/sdds-scan/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-scan/src/components/Rating/Rating.stories.tsx b/packages/sdds-scan/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-scan/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-scan/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-scan/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-scan/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-scan/src/components/Typography/Heading.config.ts b/packages/sdds-scan/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-scan/src/components/Typography/Heading.config.ts +++ b/packages/sdds-scan/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-scan/src/components/Typography/Typography.stories.tsx b/packages/sdds-scan/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-scan/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-scan/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-scan/src/components/Typography/Typography.tsx b/packages/sdds-scan/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-scan/src/components/Typography/Typography.tsx +++ b/packages/sdds-scan/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-scan/src/components/Typography/index.ts b/packages/sdds-scan/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-scan/src/components/Typography/index.ts +++ b/packages/sdds-scan/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts index 28793b613d..d70ce2c93e 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0..8f333e4f9e 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx +++ b/packages/sdds-serv/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/sdds-serv/src/components/Rating/Rating.config.ts b/packages/sdds-serv/src/components/Rating/Rating.config.ts index ad64c67e4b..79e9f36f88 100644 --- a/packages/sdds-serv/src/components/Rating/Rating.config.ts +++ b/packages/sdds-serv/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/sdds-serv/src/components/Rating/Rating.stories.tsx b/packages/sdds-serv/src/components/Rating/Rating.stories.tsx index cedead549e..d98a5ea943 100644 --- a/packages/sdds-serv/src/components/Rating/Rating.stories.tsx +++ b/packages/sdds-serv/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b2..aa27b05bc9 100644 --- a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx b/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx index 5e31271191..6e555fcfc9 100644 --- a/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/sdds-serv/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx index eab6deb4bd..ecfdb6b212 100644 --- a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceae..8b2e20b8ce 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588..f70368f502 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be9690610..bc3e5edf5c 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/sdds-serv/src/components/Typography/Heading.config.ts b/packages/sdds-serv/src/components/Typography/Heading.config.ts index 39eeb6b5bb..77f1672912 100644 --- a/packages/sdds-serv/src/components/Typography/Heading.config.ts +++ b/packages/sdds-serv/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/sdds-serv/src/components/Typography/Typography.stories.tsx b/packages/sdds-serv/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e..950b985caa 100644 --- a/packages/sdds-serv/src/components/Typography/Typography.stories.tsx +++ b/packages/sdds-serv/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/sdds-serv/src/components/Typography/Typography.tsx b/packages/sdds-serv/src/components/Typography/Typography.tsx index 1f099f6194..f98e3e0a03 100644 --- a/packages/sdds-serv/src/components/Typography/Typography.tsx +++ b/packages/sdds-serv/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/sdds-serv/src/components/Typography/index.ts b/packages/sdds-serv/src/components/Typography/index.ts index 5d3a07ca0b..b1a1bc4efa 100644 --- a/packages/sdds-serv/src/components/Typography/index.ts +++ b/packages/sdds-serv/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/utils/plasma-sb-utils/src/helpers/typographyTokens.ts b/utils/plasma-sb-utils/src/helpers/typographyTokens.ts index b663233762..358d24296f 100644 --- a/utils/plasma-sb-utils/src/helpers/typographyTokens.ts +++ b/utils/plasma-sb-utils/src/helpers/typographyTokens.ts @@ -1,6 +1,6 @@ export type Breakpoint = 'small' | 'medium' | 'large'; type TypographyCategory = 'dspl' | 'body' | 'header' | 'text'; -type TypographySize = 'l' | 'm' | 's' | 'xs' | 'xxs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5'; +type TypographySize = 'l' | 'm' | 's' | 'xs' | 'xxs' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; export type TypographyWeight = 'normal' | 'bold'; type TypographyRootProperties = { diff --git a/website/plasma-b2c-docs/docs/components/Typography.mdx b/website/plasma-b2c-docs/docs/components/Typography.mdx index 67de14c2ad..bc2c8cdbf3 100644 --- a/website/plasma-b2c-docs/docs/components/Typography.mdx +++ b/website/plasma-b2c-docs/docs/components/Typography.mdx @@ -81,7 +81,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-b2c'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-b2c'; export function App() { return ( @@ -105,6 +105,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-b2c-docs/docs/design/typography.mdx b/website/plasma-b2c-docs/docs/design/typography.mdx index b9a410cc5b..5cb307e8e1 100644 --- a/website/plasma-b2c-docs/docs/design/typography.mdx +++ b/website/plasma-b2c-docs/docs/design/typography.mdx @@ -44,6 +44,7 @@ export default function App() { - H3 - H4 - H5 + - H6 - [Интерфейсы](../../components/typography#интерфейсы): - BodyL - BodyM diff --git a/website/plasma-giga-docs/docs/components/Typography.mdx b/website/plasma-giga-docs/docs/components/Typography.mdx index ce3049ed61..40ed561c24 100644 --- a/website/plasma-giga-docs/docs/components/Typography.mdx +++ b/website/plasma-giga-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-giga'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-giga'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-web-docs/docs/components/Typography.mdx b/website/plasma-web-docs/docs/components/Typography.mdx index 6bcdd96406..2ef27600c2 100644 --- a/website/plasma-web-docs/docs/components/Typography.mdx +++ b/website/plasma-web-docs/docs/components/Typography.mdx @@ -81,7 +81,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/plasma-web'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/plasma-web'; export function App() { return ( @@ -105,6 +105,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/plasma-web-docs/docs/design/typography.mdx b/website/plasma-web-docs/docs/design/typography.mdx index 08039491b8..5f9903e22d 100644 --- a/website/plasma-web-docs/docs/design/typography.mdx +++ b/website/plasma-web-docs/docs/design/typography.mdx @@ -44,6 +44,7 @@ export default function App() { - H3 - H4 - H5 + - H6 - [Интерфейсы](../../components/typography#интерфейсы): - BodyL - BodyM diff --git a/website/sdds-crm-docs/docs/components/Typography.mdx b/website/sdds-crm-docs/docs/components/Typography.mdx index 978e9b3863..a4fa2fcb35 100644 --- a/website/sdds-crm-docs/docs/components/Typography.mdx +++ b/website/sdds-crm-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-crm'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-crm'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-cs-docs/docs/components/Typography.mdx b/website/sdds-cs-docs/docs/components/Typography.mdx index 144793d9d3..00b82ff19b 100644 --- a/website/sdds-cs-docs/docs/components/Typography.mdx +++ b/website/sdds-cs-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-cs'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-cs'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-dfa-docs/docs/components/Typography.mdx b/website/sdds-dfa-docs/docs/components/Typography.mdx index e6b5864177..44cc283f31 100644 --- a/website/sdds-dfa-docs/docs/components/Typography.mdx +++ b/website/sdds-dfa-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-dfa'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-dfa'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-finai-docs/docs/components/Typography.mdx b/website/sdds-finai-docs/docs/components/Typography.mdx index 73b4f6fedb..8f562c9731 100644 --- a/website/sdds-finai-docs/docs/components/Typography.mdx +++ b/website/sdds-finai-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-finai'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-finai'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-insol-docs/docs/components/Typography.mdx b/website/sdds-insol-docs/docs/components/Typography.mdx index d805befe78..355b768759 100644 --- a/website/sdds-insol-docs/docs/components/Typography.mdx +++ b/website/sdds-insol-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-insol'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-insol'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-netology-docs/docs/components/Typography.mdx b/website/sdds-netology-docs/docs/components/Typography.mdx index 0a6ef0094d..9c8d6f9883 100644 --- a/website/sdds-netology-docs/docs/components/Typography.mdx +++ b/website/sdds-netology-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-netology'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-netology'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-scan-docs/docs/components/Typography.mdx b/website/sdds-scan-docs/docs/components/Typography.mdx index 8135fa216c..893ff74e86 100644 --- a/website/sdds-scan-docs/docs/components/Typography.mdx +++ b/website/sdds-scan-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-scan'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-scan'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); } diff --git a/website/sdds-serv-docs/docs/components/Typography.mdx b/website/sdds-serv-docs/docs/components/Typography.mdx index 0cfc88c32b..539983fe38 100644 --- a/website/sdds-serv-docs/docs/components/Typography.mdx +++ b/website/sdds-serv-docs/docs/components/Typography.mdx @@ -77,7 +77,7 @@ export function App() { ```tsx live import React from 'react'; -import { H1, H2, H3, H4, H5 } from '@salutejs/sdds-serv'; +import { H1, H2, H3, H4, H5, H6 } from '@salutejs/sdds-serv'; export function App() { return ( @@ -101,6 +101,10 @@ export function App() {
H5
H5 Bold
H5 Medium
+ +
H6
+
H6 Bold
+
H6 Medium
); }