IBX-12331: Updated typography tokens and Storybook to the Figma spec

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

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

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';

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;

stories/typography/Typography.stories.tsx

@@ -2,18 +2,20 @@ 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';
 
 const Typography = () => {
     return (
         <div className="dev-typography-container">
             <TypographyHeaders />
-            <TypographyBase />
-            <TypographyLinks />
+            <TypographyHighlighted />
+            <TypographyBody />
+            <TypographyCode />
         </div>
     );
 };

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 <TypographyTable caption={caption} key={variantName} rows={rows} />;
+            })}
+        </>
+    );
+};
+
+export default TypographyBody;

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 <TypographyTable caption="Code" rows={rows} />;
+};
+
+export default TypographyCode;

stories/typography/TypographyHeaders.tsx

@@ -17,8 +17,8 @@ const TypographyHeaders = () => {
             <thead className="ids-table__header">
                 <tr className="ids-table__row">
                     <th className="ids-table__header-cell">Sentence</th>
-                    <th className="ids-table__header-cell">Tag</th>
                     <th className="ids-table__header-cell">Name</th>
+                    <th className="ids-table__header-cell">Family</th>
                     <th className="ids-table__header-cell">Style</th>
                     <th className="ids-table__header-cell">Weight</th>
                     <th className="ids-table__header-cell">Size</th>
@@ -33,7 +33,7 @@ const TypographyHeaders = () => {
                             <td className="ids-table__cell">{name}</td>
                             <td className="ids-table__cell">Manrope</td>
                             <td className="ids-table__cell">normal</td>
-                            <td className="ids-table__cell">semi-bold</td>
+                            <td className="ids-table__cell">600</td>
                             <td className="ids-table__cell">{size}px</td>
                             <td className="ids-table__cell">{lineHeight}px</td>
                         </tr>

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 <TypographyTable caption="Highlighted" rows={rows} />;
+};
+
+export default TypographyHighlighted;