diff --git a/apps/storefront/tokens/altinn.ts b/apps/storefront/tokens/altinn.ts index d5fc2d1119..a9a5ead36d 100644 --- a/apps/storefront/tokens/altinn.ts +++ b/apps/storefront/tokens/altinn.ts @@ -2705,6 +2705,78 @@ export const typography = [ attributes: {}, path: ['typography', 'paragraph', 'short', 'xsmall'], }, + { + value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-large', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'large'], + }, + { + value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f0}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-medium', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'medium'], + }, + { + value: "400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-small', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'small'], + }, + { + value: "400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-2}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-xsmall', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'xsmall'], + }, { value: "500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'", type: 'typography', diff --git a/apps/storefront/tokens/brreg.ts b/apps/storefront/tokens/brreg.ts index f7423c26b8..40badd71b3 100644 --- a/apps/storefront/tokens/brreg.ts +++ b/apps/storefront/tokens/brreg.ts @@ -2723,6 +2723,78 @@ export const typography = [ attributes: {}, path: ['typography', 'paragraph', 'short', 'xsmall'], }, + { + value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-large', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'large'], + }, + { + value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f0}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-medium', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'medium'], + }, + { + value: "400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-small', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'small'], + }, + { + value: "400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-2}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-xsmall', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'xsmall'], + }, { value: "500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'", type: 'typography', diff --git a/apps/storefront/tokens/digdir.ts b/apps/storefront/tokens/digdir.ts index ea6b3f120d..ec0cfee8a2 100644 --- a/apps/storefront/tokens/digdir.ts +++ b/apps/storefront/tokens/digdir.ts @@ -2699,6 +2699,78 @@ export const typography = [ attributes: {}, path: ['typography', 'paragraph', 'short', 'xsmall'], }, + { + value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-large', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'large'], + }, + { + value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f0}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-medium', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'medium'], + }, + { + value: "400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-small', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'small'], + }, + { + value: "400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-2}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-xsmall', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'xsmall'], + }, { value: "500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'", type: 'typography', diff --git a/apps/storefront/tokens/tilsynet.ts b/apps/storefront/tokens/tilsynet.ts index ecf98784ab..9976073d95 100644 --- a/apps/storefront/tokens/tilsynet.ts +++ b/apps/storefront/tokens/tilsynet.ts @@ -2645,6 +2645,78 @@ export const typography = [ attributes: {}, path: ['typography', 'paragraph', 'short', 'xsmall'], }, + { + value: "400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-large', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'large'], + }, + { + value: "400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f0}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-medium', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'medium'], + }, + { + value: "400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-1}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-small', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'small'], + }, + { + value: "400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'", + type: 'typography', + filePath: '../../design-tokens/Base/Semantic.json', + isSource: false, + original: { + value: { + fontFamily: '{fontFamilies.inter}', + fontWeight: '{fontWeights.regular}', + lineHeight: '{lineHeights.700}', + fontSize: '{font-size.f-2}', + }, + type: 'typography', + }, + name: '--fds-typography-paragraph-long-xsmall', + attributes: {}, + path: ['typography', 'paragraph', 'long', 'xsmall'], + }, { value: "500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'", type: 'typography', diff --git a/design-tokens/Base/Semantic.json b/design-tokens/Base/Semantic.json index c1904255ab..f5ba26c39c 100644 --- a/design-tokens/Base/Semantic.json +++ b/design-tokens/Base/Semantic.json @@ -608,6 +608,44 @@ }, "type": "typography" } + }, + "long": { + "large": { + "value": { + "fontFamily": "{fontFamilies.inter}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.700}", + "fontSize": "{font-size.f1}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.inter}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.700}", + "fontSize": "{font-size.f0}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.inter}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.700}", + "fontSize": "{font-size.f-1}" + }, + "type": "typography" + }, + "xsmall": { + "value": { + "fontFamily": "{fontFamilies.inter}", + "fontWeight": "{fontWeights.regular}", + "lineHeight": "{lineHeights.700}", + "fontSize": "{font-size.f-2}" + }, + "type": "typography" + } } }, "label": { diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.module.css b/packages/react/src/components/Typography/Paragraph/Paragraph.module.css index a9e07aeb0d..a8d708a088 100644 --- a/packages/react/src/components/Typography/Paragraph/Paragraph.module.css +++ b/packages/react/src/components/Typography/Paragraph/Paragraph.module.css @@ -21,6 +21,10 @@ font-family: inherit; } +.large:where(.long) { + line-height: var(--fds-typography-paragraph-long-large); +} + .medium { --fdsc-bottom-spacing: var(--fds-spacing-5); @@ -35,6 +39,10 @@ font-family: inherit; } +.medium:where(.long) { + line-height: var(--fds-typography-paragraph-long-medium); +} + .small { --fdsc-bottom-spacing: var(--fds-spacing-4); @@ -49,6 +57,10 @@ font-family: inherit; } +.small:where(.long) { + line-height: var(--fds-typography-paragraph-long-small); +} + .xsmall { --fdsc-bottom-spacing: var(--fds-spacing-3); @@ -62,3 +74,7 @@ font: var(--fds-typography-paragraph-short-xsmall); font-family: inherit; } + +.xsmall:where(.long) { + line-height: var(--fds-typography-paragraph-long-xsmall); +} diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx index 1819b0b5f4..42c8697c91 100644 --- a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx +++ b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx @@ -17,6 +17,7 @@ export const Preview: Story = { 'Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har.', spacing: false, short: false, + long: false, size: 'medium', }, }; diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx index 7031f48dbc..639634563e 100644 --- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx +++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx @@ -12,8 +12,12 @@ export type ParagraphProps = { size?: 'xsmall' | 'small' | 'medium' | 'large'; /** Adds margin-bottom */ spacing?: boolean; - /** Reduces line-height for short paragraphs */ + /** Reduces line-height for short paragraphs + * @deprecated Use `variant="short"` instead + */ short?: boolean; + /** Adjusts styling for paragraph length */ + variant?: 'long' | 'short'; /** * Change the default rendered element for the one passed as a child, merging their props and behavior. * @default false @@ -27,7 +31,16 @@ export const Paragraph: OverridableComponent< HTMLParagraphElement > = forwardRef( ( - { className, size = 'medium', spacing, as = 'p', asChild, short, ...rest }, + { + className, + size = 'medium', + spacing, + as = 'p', + asChild, + short, + variant, + ...rest + }, ref, ) => { const Component = asChild ? Slot : as; @@ -42,6 +55,7 @@ export const Paragraph: OverridableComponent< [classes.spacing]: !!spacing, [classes.short]: short, }, + variant && classes[variant], className, )} {...rest} diff --git a/packages/theme/brand/altinn/tokens.css b/packages/theme/brand/altinn/tokens.css index 7b9093575e..5969797e4b 100644 --- a/packages/theme/brand/altinn/tokens.css +++ b/packages/theme/brand/altinn/tokens.css @@ -237,6 +237,10 @@ --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-paragraph-short-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; --fds-typography-paragraph-short-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter'; + --fds-typography-paragraph-long-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'; + --fds-typography-paragraph-long-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'; + --fds-typography-paragraph-long-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'; + --fds-typography-paragraph-long-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'; --fds-typography-label-large: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'; --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; diff --git a/packages/theme/brand/brreg/tokens.css b/packages/theme/brand/brreg/tokens.css index 6fd980bcd1..9bd270a6f5 100644 --- a/packages/theme/brand/brreg/tokens.css +++ b/packages/theme/brand/brreg/tokens.css @@ -243,6 +243,10 @@ --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-paragraph-short-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; --fds-typography-paragraph-short-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter'; + --fds-typography-paragraph-long-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'; + --fds-typography-paragraph-long-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'; + --fds-typography-paragraph-long-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'; + --fds-typography-paragraph-long-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'; --fds-typography-label-large: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'; --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; diff --git a/packages/theme/brand/digdir/tokens.css b/packages/theme/brand/digdir/tokens.css index 17d63b3b7d..f77f2d84b2 100644 --- a/packages/theme/brand/digdir/tokens.css +++ b/packages/theme/brand/digdir/tokens.css @@ -237,6 +237,10 @@ --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-paragraph-short-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; --fds-typography-paragraph-short-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter'; + --fds-typography-paragraph-long-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'; + --fds-typography-paragraph-long-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'; + --fds-typography-paragraph-long-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'; + --fds-typography-paragraph-long-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'; --fds-typography-label-large: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'; --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; diff --git a/packages/theme/brand/tilsynet/tokens.css b/packages/theme/brand/tilsynet/tokens.css index 2fecc920ad..7070942048 100644 --- a/packages/theme/brand/tilsynet/tokens.css +++ b/packages/theme/brand/tilsynet/tokens.css @@ -237,6 +237,10 @@ --fds-typography-paragraph-short-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-paragraph-short-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter'; --fds-typography-paragraph-short-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.3 'Inter'; + --fds-typography-paragraph-long-large: 400 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.7 'Inter'; + --fds-typography-paragraph-long-medium: 400 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.7 'Inter'; + --fds-typography-paragraph-long-small: 400 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.7 'Inter'; + --fds-typography-paragraph-long-xsmall: 400 clamp(0.81rem, calc(0.05vw + 0.80rem), 0.84rem)/1.7 'Inter'; --fds-typography-label-large: 500 clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem)/1.3 'Inter'; --fds-typography-label-medium: 500 clamp(1.00rem, calc(0.19vw + 0.96rem), 1.13rem)/1.3 'Inter'; --fds-typography-label-small: 500 clamp(0.91rem, calc(0.10vw + 0.89rem), 0.97rem)/1.3 'Inter';