feat: Handy Semantic 토큰 추가 (#132)

* feat: semantic token 구현 완료

* docs: color 문서 완료

* docs: spacing 문서 완료

* refactor: spacing을 number와 radius로 분리

* feat: Number 관련 문서 완료

src/style/foundation/color/color.mdx

@@ -1,10 +1,10 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Meta, ColorPalette, ColorItem, Canvas } from '@storybook/blocks';
 
-<Meta title="Foundation/Colors" />
+import * as ColorStories from './color.stories';
 
-# Colors
+<Meta of={ColorStories} />
 
-## 공사중: Semantic Color가 구현되고 난 후, 컬러 가이드가 업데이트 될 예정입니다.
+# Colors
 
 Handy를 적용하는 모든 프로덕트는 Handy **Semantic** Color에 정의된 컬러를 사용해야 합니다.
 
@@ -30,14 +30,34 @@ declare module 'styled-components' {
 }
 ```
 
+<br />
+<br />
+
+## 예시
+
 사용 예시는 아래와 같습니다.
 
-```typescript
+```tsx
 import { styled } from 'styled-components';
 
 const StyledDiv = styled.div`
-  background-color: ${({ theme }) => theme...};
+  width: 100px;
+  height: 100px;
+
+  color: ${({ theme }) => theme.semantic.color.textBasicWhite};
+  background-color: ${({ theme }) => theme.semantic.color.bgBrandPrimary};
 `;
 ```
 
-<h2>Light Mode</h2>
+<Canvas of={ColorStories.ColorExample} withSource="none" />
+
+<br />
+<br />
+
+## 시맨틱 색상 팔레트
+
+아래 색상들은 `theme.semantic.color` 내에 정의되어 있습니다.
+
+<br />
+
+<ColorStories.AllThemeColors />

src/style/foundation/color/color.stories.tsx

@@ -0,0 +1,90 @@
+import { ColorItem, ColorPalette } from '@storybook/blocks';
+import { Meta, StoryObj } from '@storybook/react';
+import { styled } from 'styled-components';
+
+import { semanticColorPalette } from '@/style/foundation/color/semanticColor';
+
+const meta: Meta = {
+  title: 'Foundation/Color',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const StyledColorExample = styled.div`
+  width: 100px;
+  height: 100px;
+
+  color: ${({ theme }) => theme.semantic.color.textBasicWhite};
+  background-color: ${({ theme }) => theme.semantic.color.bgBrandPrimary};
+`;
+
+const AllThemeColors = () => {
+  const getSemanticColorPalette = (prefix: string) => {
+    const colors: Record<string, string> = {};
+
+    Object.entries(semanticColorPalette).forEach(([name, value]) => {
+      if (name.startsWith(prefix)) {
+        colors[name] = value;
+      }
+    });
+
+    if (Object.keys(colors).length === 0) {
+      throw Error(`No colors found for prefix: ${prefix}`);
+    }
+
+    return {
+      title: `${prefix}`,
+      colors,
+    };
+  };
+
+  const semanticColorCategories = {
+    background: ['bgBasic', 'bgBrand', 'bgStatus'],
+    text: ['textBasic', 'textBrand', 'textStatus'],
+    line: ['lineBasic', 'lineStatus'],
+    'button/box': ['buttonBoxPrimary', 'buttonBoxSecondary', 'buttonBoxTertiary'],
+    'button/text': ['buttonTextPrimary', 'buttonTextSecondary'],
+    'button/fab': ['buttonFabPrimary', 'buttonFabSecondary'],
+    'button/radio': ['buttonRadio'],
+    icon: ['iconBasic', 'iconBrand'],
+    checkbox: ['checkbox'],
+    chip: ['chip'],
+    pagination: ['paginationBrand', 'paginationBasic'],
+  };
+
+  return (
+    <>
+      {Object.keys(semanticColorCategories).map((section) => {
+        const colors = semanticColorCategories[section as keyof typeof semanticColorCategories].map(
+          (category) => getSemanticColorPalette(category)
+        );
+
+        return (
+          <div>
+            <h2>{section}</h2>
+            <ColorPalette>
+              {colors.map((color) => {
+                return (
+                  <ColorItem
+                    title={color.title}
+                    subtitle="theme.semantic.color"
+                    colors={color.colors}
+                  />
+                );
+              })}
+            </ColorPalette>
+            <br />
+            <br />
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+const ColorExample: StoryObj = {
+  render: () => <StyledColorExample>Color 색상</StyledColorExample>,
+};
+export default meta;
+export { ColorExample, AllThemeColors };

src/style/foundation/color/index.ts

@@ -1,2 +1,2 @@
 export * from './primitiveColor';
-// export * from './semanticColor';
+export * from './semanticColor';

src/style/foundation/color/primitiveColor/index.ts

@@ -1,3 +1,2 @@
 export type * from './primitiveColor.type';
 export { primitiveColorPalette } from './primitiveColorPalette';
-export type { PrimitiveColorPalette } from './primitiveColorPalette';

src/style/foundation/color/primitiveColor/primitiveColor.type.ts

@@ -1,27 +1,31 @@
 // https://www.figma.com/design/gvwhMF6iNkuYKzxipKzkaG/Handy-v1-(demo)?node-id=636-131805&t=Wr7H8VzVaJXsyDQT-1
 
-type PrimitiveVariousColor<ColorName extends string> =
-  | `${ColorName}050`
-  | `${ColorName}100`
-  | `${ColorName}200`
-  | `${ColorName}300`
-  | `${ColorName}400`
-  | `${ColorName}500`
-  | `${ColorName}600`
-  | `${ColorName}700`
-  | `${ColorName}800`
-  | `${ColorName}900`
-  | `${ColorName}950`;
+import { MergeVariants } from '@/types/variant';
 
-export type PrimitiveVioletColor = PrimitiveVariousColor<'violet'>;
-export type PrimitiveGrayColor = PrimitiveVariousColor<'gray'>;
+type PrimitiveColorSaturationVariant =
+  | '050'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '950';
 
-export type PrimitiveNeutralColor = 'neutralBlack' | 'neutralWhite' | 'neutralTransparent';
+export type PrimitiveVioletColor = MergeVariants<'violet', PrimitiveColorSaturationVariant>;
+export type PrimitiveGrayColor = MergeVariants<'gray', PrimitiveColorSaturationVariant>;
 
-export type PrimitiveStatusColor = 'statusRedMain' | 'statusRedSub';
+export type PrimitiveNeutralColor = MergeVariants<'neutral', 'black' | 'white' | 'transparent'>;
 
-export type PrimitiveColor =
+export type PrimitiveStatusColor = MergeVariants<'status', 'red', 'main' | 'sub'>;
+
+export type PrimitiveColorType =
   | PrimitiveVioletColor
   | PrimitiveGrayColor
   | PrimitiveNeutralColor
   | PrimitiveStatusColor;
+
+export type PrimitiveColorPalette = Readonly<Record<PrimitiveColorType, string>>;

src/style/foundation/color/primitiveColor/primitiveColorPalette.ts

@@ -1,6 +1,4 @@
-import { PrimitiveColor } from './primitiveColor.type';
-
-export type PrimitiveColorPalette = Readonly<Record<PrimitiveColor, string>>;
+import { PrimitiveColorPalette } from '@/style/foundation/color/primitiveColor/primitiveColor.type';
 
 export const primitiveColorPalette: PrimitiveColorPalette = {
   // Primitive Violet Color

src/style/foundation/color/semanticColor/index.ts

@@ -0,0 +1,2 @@
+export type * from './semanticColor.type';
+export { semanticColorPalette } from './semanticColorPalette';

src/style/foundation/color/semanticColor/semanticColor.type.ts

@@ -0,0 +1,121 @@
+import { MergeVariants } from '@/types/variant';
+
+type StaticBasicVariant = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'white';
+type StaticBrandVariant = 'primary' | 'secondary';
+type StatusVariant = 'negative' | 'positive';
+type InteractiveVariant = 'enabled' | 'pressed' | 'disabled';
+type SelectableVariant = 'selected' | 'unselected';
+type SelectableVariantWithDisabled = SelectableVariant | 'disabled';
+
+export type SemanticBackgroundBasicColor = MergeVariants<
+  'bg',
+  'basic',
+  'default' | 'light' | 'strong' | 'black'
+>;
+
+export type SemanticBackgroundBrandColor = MergeVariants<'bg', 'brand', StaticBrandVariant>;
+
+export type SemanticBackgroundStatusColor = MergeVariants<'bg', 'status', StatusVariant>;
+
+export type SemanticTextBasicColor = MergeVariants<'text', 'basic', StaticBasicVariant>;
+
+export type SemanticTextBrandColor = MergeVariants<'text', 'brand', StaticBrandVariant>;
+
+export type SemanticTextStatusColor = MergeVariants<'text', 'status', StatusVariant>;
+
+export type SemanticLineBasicColor = MergeVariants<'line', 'basic', 'light' | 'medium' | 'strong'>;
+
+export type SemanticLineStatusColor = MergeVariants<'line', 'status', StatusVariant>;
+
+export type SemanticButtonBoxPrimaryColor = MergeVariants<
+  'button',
+  'box',
+  'primary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonBoxSecondaryColor = MergeVariants<
+  'button',
+  'box',
+  'secondary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonBoxTertiaryColor = MergeVariants<
+  'button',
+  'box',
+  'tertiary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonFabPrimaryColor = MergeVariants<
+  'button',
+  'fab',
+  'primary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonFabSecondaryColor = MergeVariants<
+  'button',
+  'fab',
+  'secondary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonTextPrimaryColor = MergeVariants<
+  'button',
+  'text',
+  'primary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonTextSecondaryColor = MergeVariants<
+  'button',
+  'text',
+  'secondary',
+  InteractiveVariant
+>;
+
+export type SemanticButtonRadioColor = MergeVariants<
+  'button',
+  'radio',
+  SelectableVariantWithDisabled
+>;
+
+export type SemanticIconBasicColor = MergeVariants<'icon', 'basic', StaticBasicVariant>;
+
+export type SemanticIconBrandColor = MergeVariants<'icon', 'brand', StaticBrandVariant>;
+
+export type SemanticCheckboxColor = MergeVariants<'checkbox', SelectableVariantWithDisabled>;
+
+export type SemanticChipColor = MergeVariants<'chip', SelectableVariantWithDisabled>;
+
+export type SemanticPaginationBrandColor = MergeVariants<'pagination', 'brand', 'pressed'>;
+
+export type SemanticPaginationBasicColor = MergeVariants<'pagination', 'basic', SelectableVariant>;
+
+export type SemanticColorType =
+  | SemanticBackgroundBasicColor
+  | SemanticBackgroundBrandColor
+  | SemanticBackgroundStatusColor
+  | SemanticTextBasicColor
+  | SemanticTextBrandColor
+  | SemanticTextStatusColor
+  | SemanticLineBasicColor
+  | SemanticLineStatusColor
+  | SemanticButtonBoxPrimaryColor
+  | SemanticButtonBoxSecondaryColor
+  | SemanticButtonBoxTertiaryColor
+  | SemanticButtonFabPrimaryColor
+  | SemanticButtonFabSecondaryColor
+  | SemanticButtonTextPrimaryColor
+  | SemanticButtonTextSecondaryColor
+  | SemanticButtonRadioColor
+  | SemanticIconBasicColor
+  | SemanticIconBrandColor
+  | SemanticCheckboxColor
+  | SemanticChipColor
+  | SemanticPaginationBrandColor
+  | SemanticPaginationBasicColor;
+
+export type SemanticColorPalette = Readonly<Record<SemanticColorType, string>>;