Replaced Heading-SM-Regular by Body-LG-Medium

docs/Typography.stories.tsx

@@ -72,6 +72,12 @@ export const SmallScreen: ComponentStory<typeof Text> = (...args) => {
       lineHeight: `${typography.sHeadingSMRegular.lineHeight}px`,
       fontWeight: typography.sHeadingSMRegular.fontWeight,
     },
+    bodyLGMedium: {
+      fontFamily: typography.sBodyLGMedium.fontFamily,
+      fontSize: typography.sBodyLGMedium.fontSize,
+      lineHeight: `${typography.sBodyLGMedium.lineHeight}px`,
+      fontWeight: typography.sBodyLGMedium.fontWeight,
+    },
     bodyMD: {
       fontFamily: typography.sBodyMD.fontFamily,
       fontSize: typography.sBodyMD.fontSize,
@@ -129,7 +135,15 @@ export const SmallScreen: ComponentStory<typeof Text> = (...args) => {
       <Text as="h4" style={styles.headingSMRegular} {...args}>
         {`S HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
           styles.headingSMRegular.lineHeight
-        } ${styles.headingSMRegular.fontSize / smallScreenFontSizeBase}rem`}
+        } ${
+          styles.headingSMRegular.fontSize / smallScreenFontSizeBase
+        }rem`}{' '}
+        <span style={{ color: 'var(--color-error-default)' }}>DEPRECATED</span>
+      </Text>
+      <Text as="h4" style={styles.bodyLGMedium} {...args}>
+        {`S BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
+          styles.bodyLGMedium.lineHeight
+        } ${styles.bodyLGMedium.fontSize / smallScreenFontSizeBase}rem`}
       </Text>
       <Text as="p" style={styles.bodyMDBold} {...args}>
         {`S BodyMD Bold ${styles.bodyMDBold.fontSize}px/${
@@ -193,6 +207,12 @@ export const LargeScreen: ComponentStory<typeof Text> = (...args) => {
       lineHeight: `${typography.lHeadingSMRegular.lineHeight}px`,
       fontWeight: typography.lHeadingSMRegular.fontWeight,
     },
+    bodyLGMedium: {
+      fontFamily: typography.lBodyLGMedium.fontFamily,
+      fontSize: typography.lBodyLGMedium.fontSize,
+      lineHeight: `${typography.lBodyLGMedium.lineHeight}px`,
+      fontWeight: typography.lBodyLGMedium.fontWeight,
+    },
     bodyMDBold: {
       fontFamily: typography.lBodyMDBold.fontFamily,
       fontSize: typography.lBodyMDBold.fontSize,
@@ -250,7 +270,15 @@ export const LargeScreen: ComponentStory<typeof Text> = (...args) => {
       <Text as="h4" style={styles.headingSMRegular} {...args}>
         {`L HeadingSM Regular ${styles.headingSMRegular.fontSize}px/${
           styles.headingSMRegular.lineHeight
-        } ${styles.headingSMRegular.fontSize / largeScreenFontSizeBase}rem`}
+        } ${
+          styles.headingSMRegular.fontSize / largeScreenFontSizeBase
+        }rem`}{' '}
+        <span style={{ color: 'var(--color-error-default)' }}>DEPRECATED</span>
+      </Text>
+      <Text as="h4" style={styles.bodyLGMedium} {...args}>
+        {`L BodyLG Medium ${styles.bodyLGMedium.fontSize}px/${
+          styles.bodyLGMedium.lineHeight
+        } ${styles.bodyLGMedium.fontSize / largeScreenFontSizeBase}rem`}
       </Text>
       <Text as="p" style={styles.bodyMDBold} {...args}>
         {`L BodyMD Bold ${styles.bodyMDBold.fontSize}px/${

src/css/design-tokens.css

@@ -117,13 +117,26 @@
   --typography-s-heading-sm-line-height: var(--line-height-6);
   --typography-s-heading-sm-font-weight: var(--font-weight-regular);
   --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0);
+
+  /**
+   * @deprecated [#1] since version 1.9 [#2].
+   * [#3] Will be deleted in version 2.0.
+   */
   --typography-s-heading-sm-regular-font-family: var(
     --font-family-euclid-circular-b
   );
   --typography-s-heading-sm-regular-font-size: var(--font-size-4);
   --typography-s-heading-sm-regular-line-height: var(--line-height-6);
   --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular);
   --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
+
+  --typography-s-body-lg-regular-font-family: var(
+    --font-family-euclid-circular-b
+  );
+  --typography-s-body-lg-regular-font-size: var(--font-size-4);
+  --typography-s-body-lg-regular-line-height: var(--line-height-6);
+  --typography-s-body-lg-regular-font-weight: var(--font-weight-medium);
+  --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0);
   --typography-s-body-md-bold-font-family: var(--font-family-euclid-circular-b);
   --typography-s-body-md-bold-font-size: var(--font-size-3);
   --typography-s-body-md-bold-line-height: var(--line-height-6);
@@ -171,13 +184,26 @@
   --typography-l-heading-sm-line-height: var(--line-height-5);
   --typography-l-heading-sm-font-weight: var(--font-weight-bold);
   --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0);
+
+  /**
+   * @deprecated [#1] since version 1.9 [#2].
+   * [#3] Will be deleted in version 2.0.
+   */
   --typography-l-heading-sm-regular-font-family: var(
     --font-family-euclid-circular-b
   );
   --typography-l-heading-sm-regular-font-size: var(--font-size-5);
   --typography-l-heading-sm-regular-line-height: var(--line-height-5);
   --typography-l-heading-sm-regular-font-weight: var(--font-weight-bold);
   --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0);
+
+  --typography-l-body-lg-medium-font-family: var(
+    --font-family-euclid-circular-b
+  );
+  --typography-l-body-lg-medium-font-size: var(--font-size-5);
+  --typography-l-body-lg-medium-line-height: var(--line-height-5);
+  --typography-l-body-lg-medium-font-weight: var(--font-weight-medium);
+  --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0);
   --typography-l-body-md-bold-font-family: var(--font-family-euclid-circular-b);
   --typography-l-body-md-bold-font-size: var(--font-size-4);
   --typography-l-body-md-bold-line-height: var(--line-height-6);

src/figma/tokens.json

@@ -488,6 +488,19 @@
       },
       "type": "typography"
     },
+    "L-Body-LG-Medium": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.4",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
     "L-Body-MD-Bold": {
       "value": {
         "fontFamily": "$fontFamilies.euclid-circular-b",
@@ -630,6 +643,19 @@
       },
       "type": "typography"
     },
+    "S-Body-LG-Medium": {
+      "value": {
+        "fontFamily": "$fontFamilies.euclid-circular-b",
+        "fontWeight": "$fontWeights.euclid-circular-b-0",
+        "lineHeight": "$lineHeights.3",
+        "fontSize": "$fontSize.3",
+        "letterSpacing": "$letterSpacing.0",
+        "paragraphSpacing": "$paragraphSpacing.0",
+        "textCase": "$textCase.none",
+        "textDecoration": "$textDecoration.none"
+      },
+      "type": "typography"
+    },
     "S-Body-MD-Bold": {
       "value": {
         "fontFamily": "$fontFamilies.euclid-circular-b",

src/js/typography/types.ts

@@ -12,6 +12,7 @@ export interface ThemeTypography {
   sHeadingMD: TypeStyle;
   sHeadingSMRegular: TypeStyle;
   sHeadingSM: TypeStyle;
+  sBodyLGMedium: TypeStyle;
   sBodyMD: TypeStyle;
   sBodyMDBold: TypeStyle;
   sBodySM: TypeStyle;
@@ -22,6 +23,7 @@ export interface ThemeTypography {
   lHeadingMD: TypeStyle;
   lHeadingSMRegular: TypeStyle;
   lHeadingSM: TypeStyle;
+  lBodyLGMedium: TypeStyle;
   lBodyMD: TypeStyle;
   lBodyMDBold: TypeStyle;
   lBodySM: TypeStyle;

src/js/typography/typography.test.ts

@@ -230,6 +230,43 @@ describe('Typography', () => {
       );
     });
 
+    it('js tokens for sBodyLGMedium matches figma tokens sBodyLGMedium', () => {
+      expect(typography.sBodyLGMedium.fontFamily).toStrictEqual(
+        createNewFigmaTokenObject(
+          designTokens.global['S-Body-LG-Medium'].value.fontFamily,
+          designTokens.global,
+        ).value,
+      );
+      expect(typography.sBodyLGMedium.fontWeight).toStrictEqual('500');
+
+      expect(typography.sBodyLGMedium.fontSize).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['S-Body-LG-Medium'].value.fontSize,
+            designTokens.global,
+          ).value,
+        ),
+      );
+
+      expect(typography.sBodyLGMedium.lineHeight).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['S-Body-LG-Medium'].value.lineHeight,
+            designTokens.global,
+          ).value,
+        ),
+      );
+
+      expect(typography.sBodyLGMedium.letterSpacing).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['S-Heading-SM-Regular'].value.letterSpacing,
+            designTokens.global,
+          ).value,
+        ),
+      );
+    });
+
     it('js tokens for sBodyMDBold matches figma tokens sBodyMDBold', () => {
       expect(typography.sBodyMDBold.fontFamily).toStrictEqual(
         createNewFigmaTokenObject(
@@ -602,6 +639,43 @@ describe('Typography', () => {
       );
     });
 
+    it('js tokens for lBodyLGMedium matches figma tokens lBodyLGMedium', () => {
+      expect(typography.lBodyLGMedium.fontFamily).toStrictEqual(
+        createNewFigmaTokenObject(
+          designTokens.global['L-Body-LG-Medium'].value.fontFamily,
+          designTokens.global,
+        ).value,
+      );
+      expect(typography.lBodyLGMedium.fontWeight).toStrictEqual('500');
+
+      expect(typography.lBodyLGMedium.fontSize).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['L-Body-LG-Medium'].value.fontSize,
+            designTokens.global,
+          ).value,
+        ),
+      );
+
+      expect(typography.lBodyLGMedium.lineHeight).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['L-Body-LG-Medium'].value.lineHeight,
+            designTokens.global,
+          ).value,
+        ),
+      );
+
+      expect(typography.lBodyLGMedium.letterSpacing).toStrictEqual(
+        Number(
+          createNewFigmaTokenObject(
+            designTokens.global['L-Body-LG-Medium'].value.letterSpacing,
+            designTokens.global,
+          ).value,
+        ),
+      );
+    });
+
     it('js tokens for lBodyMDBold matches figma tokens lBodyMDBold', () => {
       expect(typography.lBodyMDBold.fontFamily).toStrictEqual(
         createNewFigmaTokenObject(

src/js/typography/typography.ts

@@ -36,13 +36,24 @@ export const typography: ThemeTypography = {
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
+  /**
+   * @deprecated [#1] since version 1.9 [#2].
+   * [#3] Will be deleted in version 2.0.
+   */
   sHeadingSMRegular: {
     fontFamily: fontFamilies.euclidCircularB,
     fontWeight: fontWeights.regular,
     fontSize: fontSizes.fontSize4,
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
+  sBodyLGMedium: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.medium,
+    fontSize: fontSizes.fontSize4,
+    lineHeight: lineHeights.lineHeight4,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
   sBodyMD: {
     fontFamily: fontFamilies.euclidCircularB,
     fontWeight: fontWeights.regular,
@@ -106,13 +117,24 @@ export const typography: ThemeTypography = {
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
+  /**
+   * @deprecated [#1] since version 1.9 [#2].
+   * [#3] Will be deleted in version 2.0.
+   */
   lHeadingSMRegular: {
     fontFamily: fontFamilies.euclidCircularB,
     fontWeight: fontWeights.regular,
     fontSize: fontSizes.fontSize5,
     lineHeight: lineHeights.lineHeight4,
     letterSpacing: letterSpacing.letterSpacing0,
   },
+  lBodyLGMedium: {
+    fontFamily: fontFamilies.euclidCircularB,
+    fontWeight: fontWeights.medium,
+    fontSize: fontSizes.fontSize5,
+    lineHeight: lineHeights.lineHeight4,
+    letterSpacing: letterSpacing.letterSpacing0,
+  },
   lBodyMD: {
     fontFamily: fontFamilies.euclidCircularB,
     fontWeight: fontWeights.regular,