feat(Typography): text-xr として サイズ 20px の Typography を追加 (#12)

Co-authored-by: miyamae yuya <locona.0810@gmail.com>

src/typography/Typography.stories.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 import {
   Title,
   Subtitle,
@@ -32,7 +32,7 @@ const long = `RelanceはSREのプロフェッショナルがエンジニア目
 
 export const Sizes = (): JSX.Element => {
   return (
-    <>
+    <Fragment>
       {Object.entries(texts).map(([k, v]) => (
         <Fragment key={k}>
           <Text variant="caption">text-{k}</Text>
@@ -41,7 +41,7 @@ export const Sizes = (): JSX.Element => {
           </p>
         </Fragment>
       ))}
-    </>
+    </Fragment>
   )
 }
 
@@ -67,18 +67,18 @@ Sizes.parameters = {
         <Subtitle>Sizes - タイポグラフィのサイズに関するドキュメント</Subtitle>
         <Description
           markdown={`
-3design-uiでは5サイズのTypographyを使い分けています。
-それぞれ \`text-xs\` \`text-s\` \`text-r\` \`text-l\` \`text-xl\` となっており，\`tailwind.config.js\` で設定されているため，\`className\`や\`tw\` propsを使って使うことができます。
-一般的なテキストは\`text-r\`を使うことが想定されています。
-Cardのタイトルのように\`text-r\`を含むエリアのタイトルにはそれより少し大きな\`text-l\`を，さらにページ全体のタイトルのようなものには \`text-xl\`を使うことを想定しています。
+3design-uiでは5サイズのTypographyを使い分けています。  
+それぞれ \`text-xs\` \`text-s\` \`text-r\` \`text-xr\` \`text-l\` \`text-xl\` となっており，\`tailwind.config.cjs\` で設定されているため，\`className\`や\`tw\` propsを使って使うことができます。  
+一般的なテキストは\`text-r\`を使うことが想定されています。  
+Cardのタイトルのように\`text-r\`を含むエリアのタイトルにはそれより少し大きな\`text-l\` (またはカード間のヒエラルキーを表現する場合は \`text-xr\`) を，さらにページ全体のタイトルのようなものには \`text-xl\`を使うことを想定しています。  
 またそれより小さな，アノテーションのようなテキストには \`text-xs\` を使うことを想定しています。
 
 \`text-s\`と\`text-r\`，及び\`text-s\`と\`text-xs\`について，それぞれお互いの大きさが十分に異なるようには設計されていません。これが何を意味するかと言うと，例えば見出しに\`text-r\`をつかって本文に\`text-s\`を使うだけでは，従属関係の表現が十分ではありません。
 これを回避するには，文字の太さを変える・色をつける等他のやり方でヒエラルキーを表現するか，またはそもそも大きさが十分に異なる組み合わせを使用してください。
 
 ## デザインの背景
 
-なぜ5種類のみなのかというと，多すぎるサイズの設定はデザインの一貫性を崩してしまい，ページごとに同じレベルの重要度で表示されるべきものがデザイナーや実装者で異なってしまう可能性があるためです。
+なぜ6種類のみなのかというと，多すぎるサイズの設定はデザインの一貫性を崩してしまい，ページごとに同じレベルの重要度で表示されるべきものがデザイナーや実装者で異なってしまう可能性があるためです。  
 これをできるだけ防ぐため，この5種類のみを設定する制約を定めています。
 
 ## 設定値
@@ -103,6 +103,7 @@ Cardのタイトルのように\`text-r\`を含むエリアのタイトルには
 | \`text-xs\` | 12 px (.75 rem) | 16 px (1 rem) | .03 rem |
 | \`text-s\` | 14 px (.875 rem) | 20 px (1.25 rem) | .03 rem |
 | \`text-r\` | 16 px (1 rem) | 24 px (1.5 rem) | .03 rem |
+| \`text-xr\` | 20 px (1.25 rem) | 28 px (1.75 rem) | .03 rem |
 | \`text-l\` | 24 px (1.5 rem) | 32 px (2 rem) | .03 rem |
 | \`text-xl\` | 32 px (2 rem) | 40 px (2.5 rem) | .03 rem |
         `}

src/typography/Typography.tsx

@@ -5,6 +5,7 @@ export const sizes = {
   xs: 'xs',
   s: 's',
   r: 'r',
+  xr: 'xr',
   l: 'l',
   xl: 'xl',
 } as const
@@ -17,6 +18,7 @@ export const texts: { [key in Size]: TwStyle } = {
   xs: tw`text-xs`,
   s: tw`text-s`,
   r: tw`text-r`,
+  xr: tw`text-xr`,
   l: tw`text-l`,
   xl: tw`text-xl`,
 }

tailwind.config.cjs

@@ -24,6 +24,13 @@ const fontSizes = {
       letterSpacing: '.03rem',
     },
   ],
+  xr: [
+    '1.25em',
+    {
+      lineHeight: '1.75rem',
+      letterSpacing: '.03rem',
+    },
+  ],
   l: [
     '1.5rem',
     {