@ezpg/app-ui 0.1.0 → 0.3.0

package/src/theme/base.ts

@@ -0,0 +1,113 @@
+export const semantic = {
+  light: {
+    background: '#ffffff',
+    foreground: '#0a0a0a',
+    muted: '#f5f5f5',
+    mutedForeground: '#737373',
+    border: '#e5e5e5',
+    input: '#d4d4d4',
+    ring: '#a3a3a3',
+    primary: '#171717',
+    primaryForeground: '#fafafa',
+    danger: '#dc2626',
+    dangerForeground: '#ffffff',
+    success: '#15803d',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#0a0a0a',
+    info: '#2563eb',
+    infoForeground: '#ffffff',
+  },
+  dark: {
+    background: '#0a0a0a',
+    foreground: '#fafafa',
+    muted: '#262626',
+    mutedForeground: '#a3a3a3',
+    border: '#262626',
+    input: '#404040',
+    ring: '#737373',
+    primary: '#fafafa',
+    primaryForeground: '#171717',
+    danger: '#f87171',
+    dangerForeground: '#0a0a0a',
+    success: '#4ade80',
+    successForeground: '#0a0a0a',
+    warning: '#fbbf24',
+    warningForeground: '#0a0a0a',
+    info: '#60a5fa',
+    infoForeground: '#0a0a0a',
+  },
+} as const;
+
+export const space = {
+  '0': 0,
+  '1': 4,
+  '2': 8,
+  '3': 12,
+  '4': 16,
+  '5': 20,
+  '6': 24,
+  '8': 32,
+  '10': 40,
+  '12': 48,
+  '16': 64,
+} as const;
+
+export const radius = {
+  sm: 6,
+  md: 8,
+  lg: 12,
+  full: 9999,
+} as const;
+
+export const typography = {
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '400',
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+    fontWeight: '400',
+  },
+  bodyLg: {
+    fontSize: 17,
+    lineHeight: 24,
+    fontWeight: '400',
+  },
+  title: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: '600',
+  },
+  display: {
+    fontSize: 28,
+    lineHeight: 34,
+    fontWeight: '700',
+  },
+} as const;
+
+export const shadow = {
+  sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
+  md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
+} as const;
+
+export const motion = {
+  duration: 200,
+} as const;
+
+export const opacity = {
+  pressed: 0.8,
+  disabled: 0.5,
+} as const;
+
+export const iconSize = {
+  sm: 16,
+  md: 20,
+} as const;
+
+export const touch = {
+  ios: 44,
+  android: 48,
+} as const;

package/src/theme/create-theme.ts

@@ -32,7 +32,6 @@ function resolveColors(
 ): ThemeColors {
   const base = colors[scheme];
   const result = { ...base, ...override };
-  // primary만 바꾸면 그 위 글자색은 대비로 정한다.
   if (override.primary && !override.primaryForeground) {
     result.primaryForeground = pickForeground(
       override.primary,
@@ -43,10 +42,6 @@ function resolveColors(
   return result;
 }
 
-/**
- * 기본 토큰에 overrides를 덮어 light · dark 테마를 만든다.
- * 렌더 밖(모듈 최상단)이나 useMemo 안에서 호출한다.
- */
 export function createTheme(overrides: ThemeOverrides = {}): Themes {
   const { colors: shared = {}, dark = {}, ...rest } = overrides;
   const base = merge(tokens, rest);

package/src/theme/theme-provider.tsx

@@ -6,9 +6,7 @@ import { defaultThemes } from './create-theme';
 const ThemeContext = createContext<Theme>(defaultThemes.light);
 
 export type ThemeProviderProps = {
-  /** createTheme() 결과. 기본값은 기본 테마 */
   themes?: Themes;
-  /** 기본값 'light'. 'system'은 기기 설정을 따른다 */
   colorScheme?: ColorScheme | 'system';
   children: ReactNode;
 };
@@ -31,7 +29,6 @@ export function ThemeProvider({
   );
 }
 
-/** 가장 가까운 ThemeProvider의 테마. Provider가 없으면 기본 light 테마 */
 export function useTheme(): Theme {
   return useContext(ThemeContext);
 }

package/src/theme/tokens.ts

@@ -1,91 +1,28 @@
 import { Platform } from 'react-native';
 import type { ColorScheme, ThemeColors, ThemeTokens } from '../types';
+import {
+  iconSize,
+  motion,
+  opacity,
+  radius,
+  semantic,
+  shadow,
+  space,
+  touch,
+  typography,
+} from './base';
 
-// shadcn/ui neutral 기준
-const neutral = {
-  50: '#fafafa',
-  100: '#f5f5f5',
-  200: '#e5e5e5',
-  300: '#d4d4d4',
-  400: '#a3a3a3',
-  500: '#737373',
-  700: '#404040',
-  800: '#262626',
-  900: '#171717',
-  950: '#0a0a0a',
-};
-
-export const colors: Record<ColorScheme, ThemeColors> = {
-  light: {
-    background: '#ffffff',
-    foreground: neutral[950],
-    muted: neutral[100],
-    mutedForeground: neutral[500],
-    border: neutral[200],
-    input: neutral[300],
-    ring: neutral[400],
-    primary: neutral[900],
-    primaryForeground: neutral[50],
-    destructive: '#dc2626',
-    destructiveForeground: '#ffffff',
-    success: '#15803d',
-    successForeground: '#ffffff',
-    warning: '#f59e0b',
-    warningForeground: neutral[950],
-    info: '#2563eb',
-    infoForeground: '#ffffff',
-  },
-  dark: {
-    background: neutral[950],
-    foreground: neutral[50],
-    muted: neutral[800],
-    mutedForeground: neutral[400],
-    border: neutral[800],
-    input: neutral[700],
-    ring: neutral[500],
-    primary: neutral[50],
-    primaryForeground: neutral[900],
-    destructive: '#f87171',
-    destructiveForeground: neutral[950],
-    success: '#4ade80',
-    successForeground: neutral[950],
-    warning: '#fbbf24',
-    warningForeground: neutral[950],
-    info: '#60a5fa',
-    infoForeground: neutral[950],
-  },
-};
+export const colors: Record<ColorScheme, ThemeColors> = semantic;
 
 export const tokens: ThemeTokens = {
-  space: {
-    0: 0,
-    1: 4,
-    2: 8,
-    3: 12,
-    4: 16,
-    5: 20,
-    6: 24,
-    8: 32,
-    10: 40,
-    12: 48,
-    16: 64,
-  },
-  radius: { sm: 6, md: 8, lg: 12, full: 9999 },
-  typography: {
-    caption: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
-    body: { fontSize: 15, lineHeight: 22, fontWeight: '400' },
-    bodyLg: { fontSize: 17, lineHeight: 24, fontWeight: '400' },
-    title: { fontSize: 20, lineHeight: 28, fontWeight: '600' },
-    display: { fontSize: 28, lineHeight: 34, fontWeight: '700' },
-  },
+  space,
+  radius,
+  typography,
   fontFamily: undefined,
   maxFontScale: 1.3,
-  shadow: {
-    sm: '0px 1px 2px rgba(0, 0, 0, 0.08)',
-    md: '0px 4px 12px rgba(0, 0, 0, 0.12)',
-  },
-  motion: { duration: 200 },
-  opacity: { pressed: 0.8, disabled: 0.5 },
-  iconSize: { sm: 16, md: 20 },
-  minTouchSize: Platform.OS === 'ios' ? 44 : 48,
+  shadow,
+  motion,
+  opacity,
+  iconSize,
+  minTouchSize: Platform.OS === 'ios' ? touch.ios : touch.android,
 };

package/src/types/index.ts

@@ -8,13 +8,12 @@ export type ThemeColors = {
   muted: string;
   mutedForeground: string;
   border: string;
-  /** 입력칸 · outline 버튼 테두리 */
   input: string;
   ring: string;
   primary: string;
   primaryForeground: string;
-  destructive: string;
-  destructiveForeground: string;
+  danger: string;
+  dangerForeground: string;
   success: string;
   successForeground: string;
   warning: string;
@@ -48,16 +47,12 @@ export type ThemeTokens = {
   };
   radius: { sm: number; md: number; lg: number; full: number };
   typography: Record<TypographyVariant, TypographyToken>;
-  /** undefined이면 시스템 폰트 */
   fontFamily: string | undefined;
-  /** 기기 글자 크기 설정이 적용되는 최대 배율 */
   maxFontScale: number;
-  /** `boxShadow` 값 (New Architecture) */
   shadow: { sm: string; md: string };
   motion: { duration: number };
   opacity: { pressed: number; disabled: number };
   iconSize: { sm: number; md: number };
-  /** 최소 터치 영역 (iOS 44, Android 48) */
   minTouchSize: number;
 };
 
@@ -73,8 +68,6 @@ type DeepPartial<T> = {
 };
 
 export type ThemeOverrides = DeepPartial<ThemeTokens> & {
-  /** light · dark 공통 */
   colors?: Partial<ThemeColors>;
-  /** dark에만 적용 (colors보다 우선) */
   dark?: { colors?: Partial<ThemeColors> };
 };

package/src/utils/color.ts

@@ -1,4 +1,3 @@
-// #rgb · #rrggbb만 지원한다.
 function toRgb(hex: string): [number, number, number] {
   const value = hex.replace('#', '');
   const full =
@@ -26,7 +25,6 @@ function luminance(hex: string): number {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 
-/** WCAG 대비 비율 (1~21) */
 export function contrastRatio(a: string, b: string): number {
   const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [
     number,
@@ -35,7 +33,6 @@ export function contrastRatio(a: string, b: string): number {
   return (hi + 0.05) / (lo + 0.05);
 }
 
-/** 배경 위에서 대비가 더 큰 글자색 */
 export function pickForeground(
   background: string,
   dark: string,

package/src/utils/styles.ts

@@ -9,11 +9,6 @@ import { useTheme } from '../theme/theme-provider';
 
 type NamedStyles<T> = { [K in keyof T]: ViewStyle | TextStyle | ImageStyle };
 
-/**
- * 테마로 스타일을 만드는 hook을 반환한다. 같은 테마에는 같은 스타일 객체를 돌려준다.
- *
- * const useStyles = makeStyles((t) => ({ box: { padding: t.space[4] } }));
- */
 export function makeStyles<T extends NamedStyles<T>>(
   factory: (theme: Theme) => T
 ): () => T {