From 9f4d41f053463b84d653913d6c8eb523717d8102 Mon Sep 17 00:00:00 2001
From: "hiroki.yokouchi" <hiroki.yokouchi@dr-ubie.com>
Date: Thu, 13 Jun 2024 18:47:49 +0900
Subject: [PATCH] Add the actual values of tokens to the comments

---
 src/components/Flex/Flex.tsx       |  1 +
 src/components/Heading/Heading.tsx |  1 +
 src/components/Icon/Icon.tsx       |  1 +
 src/components/Stack/Stack.tsx     |  1 +
 src/types/style.ts                 | 11 +++++++++++
 5 files changed, 15 insertions(+)

diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx
index 11b142da..20c569b9 100644
--- a/src/components/Flex/Flex.tsx
+++ b/src/components/Flex/Flex.tsx
@@ -19,6 +19,7 @@ type Props = {
   as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
   /**
    * 子要素同士の間隔
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   spacing?: Spacing;
   /**
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 0d5e37d6..afbd98cc 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -24,6 +24,7 @@ type Props = {
   whiteIcon?: ReactNode;
   /**
    * サイズ。Typographyトークンの値を指定
+   * xs=16px, sm=18px, md=20px, lg=24px, xl=28px
    * @default md
    */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index c3b27c1e..652b3562 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -45,6 +45,7 @@ type Props = {
   color?: TextColor;
   /**
    * サイズ
+   * xs=16px, sm=20px, md=24px, lg=28px, xl=32px, 2xl=64px, 3xl=80px, 4xl=104px
    * @default md
    */
   size?: IconSize;
diff --git a/src/components/Stack/Stack.tsx b/src/components/Stack/Stack.tsx
index f237a230..5bb3c6f4 100644
--- a/src/components/Stack/Stack.tsx
+++ b/src/components/Stack/Stack.tsx
@@ -19,6 +19,7 @@ type Props = {
   as?: HTMLTagname | ReactElement<ComponentType<typeof Box>>;
   /**
    * 子要素の間隔
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   spacing: Spacing;
   /**
diff --git a/src/types/style.ts b/src/types/style.ts
index 30595d68..553e45c5 100644
--- a/src/types/style.ts
+++ b/src/types/style.ts
@@ -31,18 +31,22 @@ export type Spacing = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type PaddingProps = {
   /**
    * padding-topの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   pt?: Spacing;
   /**
    * padding-rightの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   pr?: Spacing;
   /**
    * padding-bottomの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   pb?: Spacing;
   /**
    * padding-leftの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   pl?: Spacing;
 };
@@ -50,18 +54,22 @@ export type PaddingProps = {
 export type MarginProps = {
   /**
    * margin-topの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   mt?: Spacing;
   /**
    * margin-rightの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   mr?: Spacing;
   /**
    * margin-bottomの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   mb?: Spacing;
   /**
    * margin-leftの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   ml?: Spacing;
 };
@@ -69,10 +77,12 @@ export type MarginProps = {
 export type MarginYProps = {
   /**
    * margin-topの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   mt?: Spacing;
   /**
    * margin-bottomの値。Spacing Tokenのキーを指定
+   * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px
    */
   mb?: Spacing;
 };
@@ -95,6 +105,7 @@ export type Radius = 'xs' | 'sm' | 'md' | 'lg';
 export type RadiusProp = {
   /**
    * 角丸を指定。Radius Tokenのキーを指定
+   * xs=2px,sm=4px,md=8px,lg=12px
    */
   radius?: Radius;
 };