Merge pull request #105 from 8845musign/show-token-px-value

Add the actual values of tokens to the comments
ubie-oss · Jun 17, 2024 · 5f859f9 · 5f859f9
2 parents 3e9438a + 9f4d41f
commit 5f859f9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -31,48 +31,58 @@ 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;
 };
 
 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;
 };
 
 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;
 };