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