From dad587431a8738d7505b1cd85780af61e4fcc8e1 Mon Sep 17 00:00:00 2001 From: tischsoic Date: Fri, 11 Sep 2026 11:14:50 +0200 Subject: [PATCH] IBX-12331: Updated typography tokens and Storybook to the Figma spec Co-Authored-By: Claude Fable 5.1 --- packages/assets/src/scss/_body.scss | 38 +++++++ packages/assets/src/scss/_code.scss | 25 +++++ packages/assets/src/scss/styles.scss | 2 + .../src/scss/variables/_typography.scss | 13 +++ stories/typography/Typography.stories.tsx | 10 +- stories/typography/TypographyBase.tsx | 75 ------------- stories/typography/TypographyBody.tsx | 40 +++++++ stories/typography/TypographyCode.tsx | 27 +++++ stories/typography/TypographyHeaders.tsx | 4 +- stories/typography/TypographyHighlighted.tsx | 33 ++++++ stories/typography/TypographyLinks.tsx | 55 --------- stories/typography/TypographyTable.tsx | 56 ++++++++++ stories/typography/typography.styles.scss | 104 +++++++++--------- 13 files changed, 293 insertions(+), 189 deletions(-) create mode 100644 packages/assets/src/scss/_body.scss create mode 100644 packages/assets/src/scss/_code.scss delete mode 100644 stories/typography/TypographyBase.tsx create mode 100644 stories/typography/TypographyBody.tsx create mode 100644 stories/typography/TypographyCode.tsx create mode 100644 stories/typography/TypographyHighlighted.tsx delete mode 100644 stories/typography/TypographyLinks.tsx create mode 100644 stories/typography/TypographyTable.tsx diff --git a/packages/assets/src/scss/_body.scss b/packages/assets/src/scss/_body.scss new file mode 100644 index 00000000..c5d48a0f --- /dev/null +++ b/packages/assets/src/scss/_body.scss @@ -0,0 +1,38 @@ +@use 'variables' as *; + +@mixin body($weight: $text-font-weight-normal, $style: normal) { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + line-height: $body-line-height; +} + +@mixin body-xl($weight: $text-font-weight-normal, $style: normal) { + @include body($weight, $style); + + font-size: $body-xl-font-size; +} + +@mixin body-l($weight: $text-font-weight-normal, $style: normal) { + @include body($weight, $style); + + font-size: $body-l-font-size; +} + +@mixin body-m($weight: $text-font-weight-normal, $style: normal) { + @include body($weight, $style); + + font-size: $body-m-font-size; +} + +@mixin body-s($weight: $text-font-weight-normal, $style: normal) { + @include body($weight, $style); + + font-size: $body-s-font-size; +} + +@mixin body-xs($weight: $text-font-weight-normal, $style: normal) { + @include body($weight, $style); + + font-size: $body-xs-font-size; +} diff --git a/packages/assets/src/scss/_code.scss b/packages/assets/src/scss/_code.scss new file mode 100644 index 00000000..91af66e2 --- /dev/null +++ b/packages/assets/src/scss/_code.scss @@ -0,0 +1,25 @@ +@use 'variables' as *; + +@mixin code { + font-family: $font-family-code; + font-weight: $text-font-weight-normal; + line-height: $code-line-height; +} + +@mixin code-l { + @include code; + + font-size: $code-l-font-size; +} + +@mixin code-m { + @include code; + + font-size: $code-m-font-size; +} + +@mixin code-s { + @include code; + + font-size: $code-s-font-size; +} diff --git a/packages/assets/src/scss/styles.scss b/packages/assets/src/scss/styles.scss index 0f2feb5d..63eb85ff 100644 --- a/packages/assets/src/scss/styles.scss +++ b/packages/assets/src/scss/styles.scss @@ -5,11 +5,13 @@ @use 'alert'; @use 'autosave'; @use 'badge'; +@use 'body'; @use 'buttons'; @use 'chips'; @use 'choice-input'; @use 'choice-input-field'; @use 'choice-input-label'; +@use 'code'; @use 'expander'; @use 'fonts'; @use 'field'; diff --git a/packages/assets/src/scss/variables/_typography.scss b/packages/assets/src/scss/variables/_typography.scss index 6e221608..089b0a5e 100644 --- a/packages/assets/src/scss/variables/_typography.scss +++ b/packages/assets/src/scss/variables/_typography.scss @@ -12,6 +12,7 @@ $text-highlighted-font-size-6xl: calculateRem(48px) !default; $text-highlighted-font-size-5xl: calculateRem(40px) !default; $text-highlighted-font-size-4xl: calculateRem(32px) !default; $text-highlighted-font-size-3xl: calculateRem(24px) !default; +$text-highlighted-font-size-2xl: calculateRem(18px) !default; $text-highlighted-font-size-xl: calculateRem(16px) !default; $text-highlighted-font-size-l: calculateRem(15px) !default; $text-highlighted-font-size-m: calculateRem(14px) !default; @@ -24,8 +25,20 @@ $h4-font-size: calculateRem(15px) !default; $h5-font-size: calculateRem(14px) !default; $h6-font-size: calculateRem(12px) !default; +$body-xl-font-size: $text-font-size-xl !default; +$body-l-font-size: $text-font-size-l !default; +$body-m-font-size: $text-font-size-m !default; +$body-s-font-size: $text-font-size-s !default; +$body-xs-font-size: $text-font-size-xs !default; + +$code-l-font-size: calculateRem(16px) !default; +$code-m-font-size: calculateRem(14px) !default; +$code-s-font-size: calculateRem(12px) !default; + $base-line-height: 1.5 !default; $heading-line-height: $base-line-height !default; +$body-line-height: $base-line-height !default; +$code-line-height: $base-line-height !default; $text-font-weight-normal: 400 !default; $text-font-weight-semi: 600 !default; diff --git a/stories/typography/Typography.stories.tsx b/stories/typography/Typography.stories.tsx index 74ee1cd9..4c726842 100644 --- a/stories/typography/Typography.stories.tsx +++ b/stories/typography/Typography.stories.tsx @@ -2,9 +2,10 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import TypographyBase from './TypographyBase'; +import TypographyBody from './TypographyBody'; +import TypographyCode from './TypographyCode'; import TypographyHeaders from './TypographyHeaders'; -import TypographyLinks from './TypographyLinks'; +import TypographyHighlighted from './TypographyHighlighted'; import './typography.styles.scss'; @@ -12,8 +13,9 @@ const Typography = () => { return (
- - + + +
); }; diff --git a/stories/typography/TypographyBase.tsx b/stories/typography/TypographyBase.tsx deleted file mode 100644 index ef038c08..00000000 --- a/stories/typography/TypographyBase.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; - -const TypographyBase = () => { - const sentence = 'The quick brown fox jumps over the lazy dog'; - const fontSizesBase = [ - { lineHeight: 30, name: '2xl', size: 20 }, - { lineHeight: 28, name: 'xl', size: 18 }, - { lineHeight: 24, name: 'l', size: 16 }, - { lineHeight: 21, name: 'm', size: 14 }, - { lineHeight: 18, name: 's', size: 12 }, - { lineHeight: 15, name: 'xs', size: 10 }, - ]; - const fontSizesHighlighted = [ - { lineHeight: 72, name: '6xl', size: 48 }, - { lineHeight: 60, name: '5xl', size: 40 }, - { lineHeight: 48, name: '4xl', size: 32 }, - { lineHeight: 36, name: '3xl', size: 24 }, - { lineHeight: 24, name: 'xl', size: 16 }, - { lineHeight: 22.5, name: 'l', size: 15 }, - { lineHeight: 21, name: 'm', size: 14 }, - { lineHeight: 18, name: 's', size: 12 }, - ]; - const fontWeights = [ - { name: 'normal', weight: '400' }, - { name: 'semi', weight: '600' }, - ]; - const fontStyles = [ - { name: 'normal', style: 'normal' }, - { name: 'italic', style: 'italic' }, - ]; - const renderRow = (className: string, name: string, style: string, weight: string, size: number, lineHeight: number) => { - return ( - - - {sentence} - - {name} - {style} - {weight} - {size}px - {lineHeight}px - - ); - }; - - return ( - - - - - - - - - - - - - - {fontWeights.map(({ name: weightName, weight }) => { - return fontStyles.map(({ name: styleName, style }) => { - return fontSizesBase.map(({ name: sizeName, size, lineHeight }) => { - return renderRow(`base-${sizeName}-${weightName}-${styleName}`, 'Mulish', style, weight, size, lineHeight); - }); - }); - })} - {fontSizesHighlighted.map(({ name: sizeName, size, lineHeight }) => { - return renderRow(`highlighted-${sizeName}`, 'Manrope', 'normal', '600', size, lineHeight); - })} - -
Base font
SentenceNameStyleWeightSizeLine-height
- ); -}; - -export default TypographyBase; diff --git a/stories/typography/TypographyBody.tsx b/stories/typography/TypographyBody.tsx new file mode 100644 index 00000000..3574ae3e --- /dev/null +++ b/stories/typography/TypographyBody.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import TypographyTable, { type TypographyRow } from './TypographyTable'; + +const BODY_FAMILY = 'Mulish'; +const BODY_SIZES = [ + { lineHeight: 27, name: 'xl', size: 18 }, + { lineHeight: 24, name: 'l', size: 16 }, + { lineHeight: 21, name: 'm', size: 14 }, + { lineHeight: 18, name: 's', size: 12 }, + { lineHeight: 15, name: 'xs', size: 10 }, +]; +const BODY_VARIANTS = [ + { caption: 'Body Regular', name: 'regular', style: 'normal', weight: 400 }, + { caption: 'Body Italic', name: 'italic', style: 'italic', weight: 400 }, + { caption: 'Body Semibold', name: 'semibold', style: 'normal', weight: 600 }, + { caption: 'Body Semibold Italic', name: 'semibold-italic', style: 'italic', weight: 600 }, +]; + +const TypographyBody = () => { + return ( + <> + {BODY_VARIANTS.map(({ caption, name: variantName, style, weight }) => { + const rows: TypographyRow[] = BODY_SIZES.map(({ lineHeight, name: sizeName, size }) => ({ + className: `dev-body-${sizeName}-${variantName}`, + family: BODY_FAMILY, + lineHeight, + name: `body-${sizeName}`, + size, + style, + weight, + })); + + return ; + })} + + ); +}; + +export default TypographyBody; diff --git a/stories/typography/TypographyCode.tsx b/stories/typography/TypographyCode.tsx new file mode 100644 index 00000000..90cfb466 --- /dev/null +++ b/stories/typography/TypographyCode.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import TypographyTable, { type TypographyRow } from './TypographyTable'; + +const CODE_FAMILY = 'JetBrains Mono'; +const CODE_WEIGHT = 400; +const CODE_SIZES = [ + { lineHeight: 24, name: 'l', size: 16 }, + { lineHeight: 21, name: 'm', size: 14 }, + { lineHeight: 18, name: 's', size: 12 }, +]; + +const TypographyCode = () => { + const rows: TypographyRow[] = CODE_SIZES.map(({ lineHeight, name, size }) => ({ + className: `dev-code-${name}`, + family: CODE_FAMILY, + lineHeight, + name: `code-${name}`, + size, + style: 'normal', + weight: CODE_WEIGHT, + })); + + return ; +}; + +export default TypographyCode; diff --git a/stories/typography/TypographyHeaders.tsx b/stories/typography/TypographyHeaders.tsx index 3fc049c4..f4054bb6 100644 --- a/stories/typography/TypographyHeaders.tsx +++ b/stories/typography/TypographyHeaders.tsx @@ -17,8 +17,8 @@ const TypographyHeaders = () => { Sentence - Tag Name + Family Style Weight Size @@ -33,7 +33,7 @@ const TypographyHeaders = () => { {name} Manrope normal - semi-bold + 600 {size}px {lineHeight}px diff --git a/stories/typography/TypographyHighlighted.tsx b/stories/typography/TypographyHighlighted.tsx new file mode 100644 index 00000000..7a2e13c2 --- /dev/null +++ b/stories/typography/TypographyHighlighted.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import TypographyTable, { type TypographyRow } from './TypographyTable'; + +const HIGHLIGHTED_FAMILY = 'Manrope'; +const HIGHLIGHTED_WEIGHT = 600; +const HIGHLIGHTED_SIZES = [ + { lineHeight: 72, name: '6xl', size: 48 }, + { lineHeight: 60, name: '5xl', size: 40 }, + { lineHeight: 48, name: '4xl', size: 32 }, + { lineHeight: 36, name: '3xl', size: 24 }, + { lineHeight: 27, name: '2xl', size: 18 }, + { lineHeight: 24, name: 'xl', size: 16 }, + { lineHeight: 22.5, name: 'l', size: 15 }, + { lineHeight: 21, name: 'm', size: 14 }, + { lineHeight: 18, name: 's', size: 12 }, +]; + +const TypographyHighlighted = () => { + const rows: TypographyRow[] = HIGHLIGHTED_SIZES.map(({ lineHeight, name, size }) => ({ + className: `dev-highlighted-${name}`, + family: HIGHLIGHTED_FAMILY, + lineHeight, + name: `highlighted-${name}`, + size, + style: 'normal', + weight: HIGHLIGHTED_WEIGHT, + })); + + return ; +}; + +export default TypographyHighlighted; diff --git a/stories/typography/TypographyLinks.tsx b/stories/typography/TypographyLinks.tsx deleted file mode 100644 index 21589b4f..00000000 --- a/stories/typography/TypographyLinks.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -const TypographyLinks = () => { - const sentence = 'The quick brown fox jumps over the lazy dog'; - const fontSizesLinks = [ - { lineHeight: 24, name: 'l', size: 16 }, - { lineHeight: 21, name: 'm', size: 14 }, - { lineHeight: 18, name: 's', size: 12 }, - { lineHeight: 15, name: 'xs', size: 10 }, - ]; - const fontWeights = [ - { name: 'normal', weight: '400' }, - { name: 'semi', weight: '600' }, - ]; - - return ( - - - - - - - - - - - - - - {fontWeights.map(({ name: weightName, weight }) => { - return fontSizesLinks.map(({ name: sizeName, size, lineHeight }) => { - const className = `link-${sizeName}-${weightName} ids-link`; - - return ( - - - - - - - - - ); - }); - })} - -
Links
SentenceNameStyleWeightSizeLine-height
- - {sentence} - - Manropenormal{weight}{size}px{lineHeight}px
- ); -}; - -export default TypographyLinks; diff --git a/stories/typography/TypographyTable.tsx b/stories/typography/TypographyTable.tsx new file mode 100644 index 00000000..edebd3a5 --- /dev/null +++ b/stories/typography/TypographyTable.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +export interface TypographyRow { + className: string; + family: string; + lineHeight: number; + name: string; + size: number; + style: string; + weight: number; +} + +interface TypographyTableProps { + caption: string; + rows: TypographyRow[]; +} + +const SENTENCE = 'The quick brown fox jumps over the lazy dog'; + +const TypographyTable = ({ caption, rows }: TypographyTableProps) => { + return ( + + + + + + + + + + + + + + + {rows.map(({ className, family, lineHeight, name, size, style, weight }) => { + return ( + + + + + + + + + + ); + })} + +
{caption}
SentenceNameFamilyStyleWeightSizeLine-height
+ {SENTENCE} + {name}{family}{style}{weight}{size}px{lineHeight}px
+ ); +}; + +export default TypographyTable; diff --git a/stories/typography/typography.styles.scss b/stories/typography/typography.styles.scss index 796fed0b..c3dc2b0c 100644 --- a/stories/typography/typography.styles.scss +++ b/stories/typography/typography.styles.scss @@ -1,39 +1,26 @@ @use '../../packages/assets/src/scss/functions/calculate.rem' as *; @use '../../packages/assets/src/scss/variables/colors' as *; @use '../../packages/assets/src/scss/variables/typography' as *; +@use '../../packages/assets/src/scss/body' as body; +@use '../../packages/assets/src/scss/code' as code; @use '../../packages/assets/src/scss/headers' as headers; -$font-sizes-base: ( - '2xl': $text-font-size-2xl, - 'xl': $text-font-size-xl, - 'l': $text-font-size-l, - 'm': $text-font-size-m, - 's': $text-font-size-s, - 'xs': $text-font-size-xs, -); $font-sizes-highlighted: ( '6xl': $text-highlighted-font-size-6xl, '5xl': $text-highlighted-font-size-5xl, '4xl': $text-highlighted-font-size-4xl, '3xl': $text-highlighted-font-size-3xl, + '2xl': $text-highlighted-font-size-2xl, 'xl': $text-highlighted-font-size-xl, 'l': $text-highlighted-font-size-l, 'm': $text-highlighted-font-size-m, 's': $text-highlighted-font-size-s, ); -$font-sizes-links: ( - 'l': $text-font-size-l, - 'm': $text-font-size-m, - 's': $text-font-size-s, - 'xs': $text-font-size-xs, -); -$font-weights: ( - 'normal': $text-font-weight-normal, - 'semi': $text-font-weight-semi, -); -$font-styles: ( - 'normal': normal, - 'italic': italic, +$body-variants: ( + 'regular' $text-font-weight-normal normal, + 'italic' $text-font-weight-normal italic, + 'semibold' $text-font-weight-semi normal, + 'semibold-italic' $text-font-weight-semi italic ); .dev-typography-container { @@ -54,32 +41,9 @@ $font-styles: ( } .ids-table .ids-table__caption { - caption-side: top; - font-size: $text-font-size-2xl; - font-weight: $text-font-weight-semi; - } - - @each $weight-name, $weight in $font-weights { - @each $style-name, $style in $font-styles { - @each $size-name, $size in $font-sizes-base { - .base-#{$size-name}-#{$weight-name}-#{$style-name} { - font-size: $size; - font-weight: $weight; - font-style: $style; - font-family: $font-family; - } - } - } - } + @include headers.h2; - @each $size-name, $size in $font-sizes-highlighted { - .highlighted-#{$size-name} { - font-size: $size; - font-weight: $text-font-weight-semi; - font-style: normal; - font-family: $font-family-alt; - line-height: $heading-line-height; - } + caption-side: top; } .dev-h1 { @@ -106,13 +70,47 @@ $font-styles: ( @include headers.h6; } - @each $weight-name, $weight in $font-weights { - @each $size-name, $size in $font-sizes-links { - .link-#{$size-name}-#{$weight-name} { - font-size: $size; - font-weight: $weight; - font-family: $font-family-alt; - } + @each $size-name, $size in $font-sizes-highlighted { + .dev-highlighted-#{$size-name} { + font-size: $size; + font-weight: $text-font-weight-semi; + font-style: normal; + font-family: $font-family-alt; + line-height: $heading-line-height; + } + } + + @each $variant, $weight, $style in $body-variants { + .dev-body-xl-#{$variant} { + @include body.body-xl($weight, $style); + } + + .dev-body-l-#{$variant} { + @include body.body-l($weight, $style); + } + + .dev-body-m-#{$variant} { + @include body.body-m($weight, $style); } + + .dev-body-s-#{$variant} { + @include body.body-s($weight, $style); + } + + .dev-body-xs-#{$variant} { + @include body.body-xs($weight, $style); + } + } + + .dev-code-l { + @include code.code-l; + } + + .dev-code-m { + @include code.code-m; + } + + .dev-code-s { + @include code.code-s; } }