melta-app 0.1.0

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,60 @@
+/**
+ * ThemeProvider / useTheme — melta-app の theming 適用基盤（設計書 §3, B-3）。
+ *
+ * B-3: 形状（mode 非依存）は各 component 側で StyleSheet 化、色は theme.color.semantic[mode] から
+ * render 時に取る。Provider は「現在の mode と、その mode の semantic 色」を配る役割。
+ * useColorScheme() を Provider 内で1回だけ読む（RN コア、追加依存なし）。
+ *
+ * context value は useMemo 必須（§3）: 毎レンダで新オブジェクトを配ると全 consumer が再レンダする。
+ */
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { useColorScheme } from "react-native";
+import { nativeTheme } from "./native-theme";
+import type { NativeTheme, SemanticColors } from "./types";
+
+export type ThemeMode = "light" | "dark";
+
+export interface ThemeContextValue {
+  /** 正規化済み theme 全体（色以外の形状トークンもここから取る）。 */
+  theme: NativeTheme;
+  /** 現在の表示モード。 */
+  mode: ThemeMode;
+  /** 現在 mode の semantic 色（= theme.color.semantic[mode]）。最頻アクセスなので展開済みで配る。 */
+  colors: SemanticColors;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  /**
+   * 明示モード。指定時は OS の colorScheme を無視して固定する。
+   * カタログの light/dark トグル（§6）や、特定画面の固定表示に使う。
+   */
+  forcedMode?: ThemeMode;
+}
+
+export function ThemeProvider({ children, forcedMode }: ThemeProviderProps) {
+  const system = useColorScheme();
+  const mode: ThemeMode = forcedMode ?? (system === "dark" ? "dark" : "light");
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme: nativeTheme,
+      mode,
+      colors: nativeTheme.color.semantic[mode],
+    }),
+    [mode],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme は <ThemeProvider> の内側で呼んでください。");
+  }
+  return ctx;
+}

package/src/theme/index.ts

@@ -0,0 +1,18 @@
+/**
+ * melta-app theme エントリ。
+ * 型は types.ts、値は native-theme.ts（melta-contracts から自動生成）。
+ */
+
+export * from "./types";
+export { nativeTheme } from "./native-theme";
+export { ThemeProvider, useTheme } from "./ThemeProvider";
+export type { ThemeContextValue, ThemeMode } from "./ThemeProvider";
+
+/**
+ * letterSpacingRatio（em 相当の比率）を、適用先の fontSize から RN の letterSpacing(pt) に解決する。
+ * 例: resolveLetterSpacing(18, theme.typography.letterSpacingRatio.body)
+ * theme.typography.letterSpacingRatio.* をそのまま style.letterSpacing に入れる誤用を避けるための helper。
+ */
+export function resolveLetterSpacing(fontSize: number, ratio: number): number {
+  return fontSize * ratio;
+}

package/src/theme/native-theme.ts

@@ -0,0 +1,215 @@
+// ⚠️ 自動生成ファイル — 手で編集しないこと。
+// 生成元: scripts/generate-native-theme.ts（入力 melta-contracts tokens.json）
+// tokens version: 1.0.0
+
+import type { NativeTheme } from "./types";
+
+export const nativeTheme: NativeTheme = {
+  "color": {
+    "primary": {
+      "50": "#f0f5ff",
+      "100": "#dde8ff",
+      "200": "#c0d4ff",
+      "300": "#95b6ff",
+      "400": "#6492ff",
+      "500": "#2b70ef",
+      "600": "#2250df",
+      "700": "#1a40b5",
+      "800": "#13318d",
+      "900": "#0e266a",
+      "950": "#07194e"
+    },
+    "body": "#3d4b5f",
+    "semantic": {
+      "light": {
+        "bg-page": "#f9fafb",
+        "bg-page-alt": "#f3f4f6",
+        "bg-surface": "#ffffff",
+        "bg-surface-alt": "#f9fafb",
+        "text-heading": "#0f172a",
+        "text-default": "#3d4b5f",
+        "text-muted": "#64748b",
+        "border-default": "#e2e8f0",
+        "border-strong": "#cbd5e1",
+        "input-bg": "#ffffff",
+        "input-border": "#cbd5e1",
+        "text-on-accent": "#ffffff"
+      },
+      "dark": {
+        "bg-page": "#0f172a",
+        "bg-page-alt": "#1e293b",
+        "bg-surface": "#1e293b",
+        "bg-surface-alt": "#0f172a",
+        "text-heading": "#f1f5f9",
+        "text-default": "#cbd5e1",
+        "text-muted": "#94a3b8",
+        "border-default": "#334155",
+        "border-strong": "#475569",
+        "input-bg": "#0f172a",
+        "input-border": "#475569",
+        "text-on-accent": "#ffffff"
+      }
+    },
+    "status": {
+      "success": {
+        "base": "#059669",
+        "subtleLight": "#ecfdf5",
+        "textLight": "#047857",
+        "subtleDark": "rgba(5,150,105,0.12)",
+        "textDark": "#6ee7b7"
+      },
+      "warning": {
+        "base": "#d97706",
+        "subtleLight": "#fffbeb",
+        "textLight": "#b45309",
+        "subtleDark": "rgba(217,119,6,0.12)",
+        "textDark": "#fcd34d"
+      },
+      "danger": {
+        "base": "#ef4444",
+        "subtleLight": "#fef2f2",
+        "textLight": "#dc2626",
+        "subtleDark": "rgba(239,68,68,0.12)",
+        "textDark": "#fca5a5"
+      }
+    }
+  },
+  "typography": {
+    "fontFamily": {},
+    "fontSize": {
+      "xs": {
+        "fontSize": 13,
+        "lineHeight": 18
+      },
+      "sm": {
+        "fontSize": 15,
+        "lineHeight": 26
+      },
+      "base": {
+        "fontSize": 18,
+        "lineHeight": 36
+      },
+      "lg": {
+        "fontSize": 20,
+        "lineHeight": 30
+      },
+      "xl": {
+        "fontSize": 22,
+        "lineHeight": 31
+      },
+      "2xl": {
+        "fontSize": 26,
+        "lineHeight": 36
+      },
+      "3xl": {
+        "fontSize": 32,
+        "lineHeight": 45
+      }
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "letterSpacingRatio": {
+      "heading": 0.01,
+      "body": 0.02
+    }
+  },
+  "spacing": {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "14": 56,
+    "16": 64
+  },
+  "radius": {
+    "sm": 4,
+    "md": 8,
+    "lg": 12,
+    "full": 9999
+  },
+  "elevation": {
+    "none": {
+      "shadowColor": "#000000",
+      "shadowOffset": {
+        "width": 0,
+        "height": 0
+      },
+      "shadowOpacity": 0,
+      "shadowRadius": 0,
+      "elevation": 0
+    },
+    "sm": {
+      "shadowColor": "rgb(0, 0, 0)",
+      "shadowOffset": {
+        "width": 0,
+        "height": 1
+      },
+      "shadowOpacity": 0.05,
+      "shadowRadius": 2,
+      "elevation": 2
+    },
+    "md": {
+      "shadowColor": "rgb(0, 0, 0)",
+      "shadowOffset": {
+        "width": 0,
+        "height": 4
+      },
+      "shadowOpacity": 0.1,
+      "shadowRadius": 6,
+      "elevation": 5
+    },
+    "overlay": {
+      "shadowColor": "rgb(0, 0, 0)",
+      "shadowOffset": {
+        "width": 0,
+        "height": 20
+      },
+      "shadowOpacity": 0.1,
+      "shadowRadius": 25,
+      "elevation": 10
+    }
+  },
+  "motion": {
+    "duration": {
+      "fast": 150,
+      "normal": 200,
+      "slow": 300
+    },
+    "easing": {
+      "default": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "in": [
+        0.4,
+        0,
+        1,
+        1
+      ],
+      "out": [
+        0,
+        0,
+        0.2,
+        1
+      ]
+    }
+  },
+  "zIndex": {
+    "base": 0,
+    "dropdown": 20,
+    "sticky": 30,
+    "overlay": 40,
+    "modal": 50
+  }
+};

package/src/theme/types.ts

@@ -0,0 +1,137 @@
+/**
+ * NativeTheme — melta の design contracts(melta-contracts の tokens.json)を
+ * React Native 向けに正規化した theme の型。
+ *
+ * 生成は scripts/generate-native-theme.ts（純粋変換は scripts/lib/normalize-tokens.ts）。
+ * web 形式 → RN 形式の正規化規則は requirements-melta-app.md §4 を参照。
+ */
+
+import type { ViewStyle } from "react-native";
+
+/** primary パレット（50〜950）。値は hex 文字列。 */
+export type PrimaryScale =
+  | "50"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900"
+  | "950";
+
+/** semantic カラー（light / dark で同じキー集合を持つ）。値は色文字列。 */
+export interface SemanticColors {
+  "bg-page": string;
+  "bg-page-alt": string;
+  "bg-surface": string;
+  "bg-surface-alt": string;
+  "text-heading": string;
+  "text-default": string;
+  "text-muted": string;
+  "border-default": string;
+  "border-strong": string;
+  "input-bg": string;
+  "input-border": string;
+  "text-on-accent": string;
+}
+
+/** status カラー（success / warning / danger）。light/dark の subtle・text を保持。 */
+export interface StatusColors {
+  base: string;
+  subtleLight: string;
+  textLight: string;
+  subtleDark: string;
+  textDark: string;
+}
+
+export interface ThemeColor {
+  primary: Record<PrimaryScale, string>;
+  body: string;
+  semantic: { light: SemanticColors; dark: SemanticColors };
+  status: { success: StatusColors; warning: StatusColors; danger: StatusColors };
+}
+
+export type FontSizeKey = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+export type FontWeightKey = "normal" | "medium" | "semibold" | "bold";
+/** RN の fontWeight は文字列。tokens の数値(400 等)を文字列化したもの。 */
+export type FontWeightValue = "400" | "500" | "600" | "700";
+
+export interface FontSizeEntry {
+  /** px 数値（tokens.json の px をそのまま採用） */
+  fontSize: number;
+  /** fontSize × lineHeight比率 を px に丸めた値 */
+  lineHeight: number;
+}
+
+export interface ThemeTypography {
+  /**
+   * 初期は system default（未指定 = OS デフォルトフォント）。RN の fontFamily は string 一本で
+   * web の fallback 配列のようには効かず、Inter 等を焼くと expo-font でのロード必須になり実機で崩れる。
+   * Inter / JetBrains Mono の embed は expo-font 導入後に generator へ font マップを渡す Phase 2。
+   * それまでは sans/mono とも未指定（= OS の sans / monospace）にする。
+   */
+  fontFamily: { sans?: string; mono?: string };
+  fontSize: Record<FontSizeKey, FontSizeEntry>;
+  fontWeight: Record<FontWeightKey, FontWeightValue>;
+  /**
+   * letterSpacing の em ratio を数値で保持する（px ではない）。
+   * tokens は em（fontSize 相対）だが RN の letterSpacing は絶対 pt のため token 単体では px 換算できない。
+   * 適用側は `resolveLetterSpacing(fontSize, ratio)`（= fontSize × ratio）で pt を算出すること。
+   * 名前を `Ratio` 付きにしているのは、ratio をそのまま style.letterSpacing に入れる誤用を防ぐため。
+   * （requirements §4 の「px に換算」からの意図的な乖離。理由はこのコメントの通り）
+   */
+  letterSpacingRatio: { heading: number; body: number };
+}
+
+/**
+ * elevation 1段。iOS は shadow* を、Android は elevation を読む（互いに無視するので
+ * 1つの ViewStyle に同居させて spread すれば両 OS に効く）。
+ */
+export type ElevationStyle = Pick<
+  ViewStyle,
+  "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "elevation"
+>;
+
+/** iOS 側の shadow props だけ（Android elevation は別途 mapping table で決める）。 */
+export type ShadowStyle = Omit<ElevationStyle, "elevation">;
+
+export type ElevationKey = "none" | "sm" | "md" | "overlay";
+
+export type SpacingKey =
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "8"
+  | "10"
+  | "12"
+  | "14"
+  | "16";
+
+export type RadiusKey = "sm" | "md" | "lg" | "full";
+
+export interface ThemeMotion {
+  /** ms 数値 */
+  duration: { fast: number; normal: number; slow: number };
+  /** cubic-bezier の 4 引数（Easing.bezier(...) に展開して使う） */
+  easing: {
+    default: [number, number, number, number];
+    in: [number, number, number, number];
+    out: [number, number, number, number];
+  };
+}
+
+export interface NativeTheme {
+  color: ThemeColor;
+  typography: ThemeTypography;
+  spacing: Record<SpacingKey, number>;
+  radius: Record<RadiusKey, number>;
+  elevation: Record<ElevationKey, ElevationStyle>;
+  motion: ThemeMotion;
+  zIndex: { base: number; dropdown: number; sticky: number; overlay: number; modal: number };
+}