feat: semantic token 구현 완료

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>>;

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

@@ -0,0 +1,88 @@
+import { primitiveColorPalette } from '@/style/foundation/color/primitiveColor';
+import { SemanticColorPalette } from '@/style/foundation/color/semanticColor/semanticColor.type';
+
+export const semanticColorPalette: SemanticColorPalette = {
+  bgBasicDefault: primitiveColorPalette.neutralWhite,
+  bgBasicLight: primitiveColorPalette.gray050,
+  bgBasicStrong: primitiveColorPalette.gray100,
+  bgBasicBlack: primitiveColorPalette.neutralBlack,
+
+  bgBrandPrimary: primitiveColorPalette.violet500,
+  bgBrandSecondary: primitiveColorPalette.violet050,
+
+  bgStatusNegative: primitiveColorPalette.statusRedMain,
+  bgStatusPositive: primitiveColorPalette.violet500,
+
+  textBasicPrimary: primitiveColorPalette.neutralBlack,
+  textBasicSecondary: primitiveColorPalette.gray700,
+  textBasicTertiary: primitiveColorPalette.gray500,
+  textBasicDisabled: primitiveColorPalette.gray300,
+  textBasicWhite: primitiveColorPalette.neutralWhite,
+
+  textBrandPrimary: primitiveColorPalette.violet500,
+  textBrandSecondary: primitiveColorPalette.violet600,
+
+  textStatusNegative: primitiveColorPalette.statusRedMain,
+  textStatusPositive: primitiveColorPalette.violet500,
+
+  lineBasicLight: primitiveColorPalette.gray100,
+  lineBasicMedium: primitiveColorPalette.gray200,
+  lineBasicStrong: primitiveColorPalette.gray300,
+
+  lineStatusNegative: primitiveColorPalette.statusRedMain,
+  lineStatusPositive: primitiveColorPalette.violet500,
+
+  buttonBoxPrimaryEnabled: primitiveColorPalette.violet500,
+  buttonBoxPrimaryPressed: primitiveColorPalette.violet700,
+  buttonBoxPrimaryDisabled: primitiveColorPalette.gray100,
+
+  buttonBoxSecondaryEnabled: primitiveColorPalette.violet050,
+  buttonBoxSecondaryPressed: primitiveColorPalette.violet200,
+  buttonBoxSecondaryDisabled: primitiveColorPalette.gray100,
+
+  buttonBoxTertiaryEnabled: primitiveColorPalette.neutralTransparent,
+  buttonBoxTertiaryPressed: primitiveColorPalette.gray100,
+  buttonBoxTertiaryDisabled: primitiveColorPalette.neutralTransparent,
+
+  buttonTextPrimaryEnabled: primitiveColorPalette.neutralTransparent,
+  buttonTextPrimaryPressed: primitiveColorPalette.violet050,
+  buttonTextPrimaryDisabled: primitiveColorPalette.neutralTransparent,
+
+  buttonFabPrimaryEnabled: primitiveColorPalette.violet500,
+  buttonFabPrimaryPressed: primitiveColorPalette.violet700,
+  buttonFabPrimaryDisabled: primitiveColorPalette.gray100,
+
+  buttonRadioSelected: primitiveColorPalette.violet500,
+  buttonRadioUnselected: primitiveColorPalette.gray200,
+  buttonRadioDisabled: primitiveColorPalette.neutralWhite,
+
+  buttonTextSecondaryEnabled: primitiveColorPalette.neutralTransparent,
+  buttonTextSecondaryPressed: primitiveColorPalette.gray100,
+  buttonTextSecondaryDisabled: primitiveColorPalette.neutralTransparent,
+
+  buttonFabSecondaryEnabled: primitiveColorPalette.neutralWhite,
+  buttonFabSecondaryPressed: primitiveColorPalette.gray100,
+  buttonFabSecondaryDisabled: primitiveColorPalette.neutralWhite,
+
+  iconBasicPrimary: primitiveColorPalette.neutralBlack,
+  iconBasicSecondary: primitiveColorPalette.gray700,
+  iconBasicTertiary: primitiveColorPalette.gray500,
+  iconBasicDisabled: primitiveColorPalette.gray200,
+  iconBasicWhite: primitiveColorPalette.neutralWhite,
+
+  iconBrandPrimary: primitiveColorPalette.violet500,
+  iconBrandSecondary: primitiveColorPalette.violet600,
+
+  checkboxSelected: primitiveColorPalette.violet500,
+  checkboxUnselected: primitiveColorPalette.neutralWhite,
+  checkboxDisabled: primitiveColorPalette.gray200,
+
+  chipSelected: primitiveColorPalette.violet100,
+  chipUnselected: primitiveColorPalette.gray100,
+  chipDisabled: primitiveColorPalette.gray050,
+
+  paginationBrandPressed: primitiveColorPalette.violet050,
+
+  paginationBasicSelected: primitiveColorPalette.neutralBlack,
+  paginationBasicUnselected: primitiveColorPalette.gray500,
+} as const;

src/style/foundation/spacing/index.ts

@@ -1,2 +1,2 @@
-export * from './spacing';
-export * from './spacing.type';
+export * from './primitiveSpacing';
+export * from './semanticSpacing';

src/style/foundation/spacing/primitiveSpacing/index.ts

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

src/style/foundation/spacing/primitiveSpacing/primitiveSpacing.ts

@@ -0,0 +1,11 @@
+import { PrimitiveSpacing } from '@/style/foundation/spacing/primitiveSpacing/primitiveSpacing.type';
+
+const primitiveSpacing: PrimitiveSpacing = {
+  '8': 8,
+  '10': 10,
+  '12': 12,
+  '14': 14,
+  '16': 16,
+} as const;
+
+export { primitiveSpacing };

src/style/foundation/spacing/primitiveSpacing/primitiveSpacing.type.ts

@@ -0,0 +1,5 @@
+type PrimitiveSpacingType = '8' | '10' | '12' | '14' | '16';
+
+type PrimitiveSpacing = Readonly<Record<PrimitiveSpacingType, number>>;
+
+export type { PrimitiveSpacingType, PrimitiveSpacing };

src/style/foundation/spacing/semanticSpacing/index.ts

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

src/style/foundation/spacing/semanticSpacing/semanticSpacing.ts

@@ -0,0 +1,12 @@
+import { primitiveSpacing } from '@/style/foundation/spacing/primitiveSpacing';
+import { SemanticSpacing } from '@/style/foundation/spacing/semanticSpacing/semanticSpacing.type';
+
+const semanticSpacing: SemanticSpacing = {
+  spacingRadiusXS: primitiveSpacing[8],
+  spacingRadiusS: primitiveSpacing[10],
+  spacingRadiusM: primitiveSpacing[12],
+  spacingRadiusL: primitiveSpacing[14],
+  spacingRadiusXL: primitiveSpacing[16],
+} as const;
+
+export { semanticSpacing };

src/style/foundation/spacing/semanticSpacing/semanticSpacing.type.ts

@@ -0,0 +1,11 @@
+import { MergeVariants } from '@/types/variant';
+
+export type SemanticSpacingRadius = MergeVariants<
+  'spacing',
+  'radius',
+  'XS' | 's' | 'm' | 'l' | 'XL'
+>;
+
+export type SemanticSpacingType = SemanticSpacingRadius;
+
+export type SemanticSpacing = Readonly<Record<SemanticSpacingType, number>>;

src/style/theme/YDSThemeProvider.tsx

@@ -1,6 +1,12 @@
 import { ThemeProvider } from 'styled-components';
 
-import { primitiveColorPalette, spacing, typo } from '../foundation';
+import {
+  primitiveColorPalette,
+  primitiveSpacing,
+  semanticColorPalette,
+  semanticSpacing,
+  typo,
+} from '../foundation';
 
 import { YDSTheme } from './theme.type';
 
@@ -12,9 +18,12 @@ export const YDSThemeProvider = ({ children }: YDSThemeProviderProps) => {
   const theme: YDSTheme = {
     primitive: {
       color: primitiveColorPalette,
-      spacing,
+      spacing: primitiveSpacing,
+    },
+    semantic: {
+      color: semanticColorPalette,
+      spacing: semanticSpacing,
     },
-    // semantic: {},
     typo,
   };