129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
// packages/ui-native/src/theme.ts
|
|
// RN용 테마 토큰 — MUI 없이 순수 색상/타이포/그림자 값
|
|
// packages/ui의 d3roPalette와 의도적으로 동기화 (RN은 CSS var 불가, 정적 값)
|
|
|
|
import { Platform } from 'react-native'
|
|
|
|
export interface D3roNativePalette {
|
|
bg: {
|
|
app: string
|
|
card: string
|
|
cardHover: string
|
|
elevated: string
|
|
sidebar: string
|
|
inset: string
|
|
chassis: string
|
|
}
|
|
text: {
|
|
primary: string
|
|
white: string
|
|
onAccent?: string
|
|
secondary: string
|
|
label: string
|
|
disabled: string
|
|
inactive: string
|
|
muted: string
|
|
}
|
|
accent: {
|
|
main: string
|
|
pressed?: string
|
|
dim: string
|
|
glow: string
|
|
green: string
|
|
greenGlow: string
|
|
}
|
|
border: {
|
|
subtle: string
|
|
default: string
|
|
strong: string
|
|
}
|
|
tag: {
|
|
purple: string
|
|
orange: string
|
|
red: string
|
|
green: string
|
|
blue: string
|
|
}
|
|
led: { off: string }
|
|
shadow?: string
|
|
}
|
|
|
|
export const d3roNativePalette: D3roNativePalette = {
|
|
bg: {
|
|
app: '#19191b',
|
|
card: '#242427',
|
|
cardHover: '#2a2a2d',
|
|
elevated: '#2e2e32',
|
|
sidebar: '#1e1f21',
|
|
inset: '#0f0f11',
|
|
chassis: '#242528'
|
|
},
|
|
text: {
|
|
primary: '#d4d4d8',
|
|
white: '#ffffff',
|
|
secondary: '#8e8e93',
|
|
label: '#7c7c82',
|
|
disabled: '#4a4a4e',
|
|
inactive: '#77797c',
|
|
muted: '#71717a'
|
|
},
|
|
accent: {
|
|
// 브랜드 통일: 앱(Midnight Glass) blue — 레거시 amber 폐기
|
|
main: '#3b82f6',
|
|
dim: 'rgba(59, 130, 246, 0.15)',
|
|
glow: 'rgba(59, 130, 246, 0.5)',
|
|
green: '#4ade80',
|
|
greenGlow: 'rgba(74, 222, 128, 0.6)'
|
|
},
|
|
border: {
|
|
subtle: 'rgba(255,255,255,0.04)',
|
|
default: '#2e2e32',
|
|
strong: 'rgba(255,255,255,0.12)'
|
|
},
|
|
tag: {
|
|
purple: '#b854f5',
|
|
orange: '#f59e0b',
|
|
red: '#ef4444',
|
|
green: '#22c55e',
|
|
blue: '#3b82f6'
|
|
},
|
|
led: {
|
|
off: '#111111'
|
|
}
|
|
} as const
|
|
|
|
// v3 "타이포그래피 퍼스트" — packages/ui d3roTypo v3와 동일 철학.
|
|
// 볼드(700) 폐기, 크기·행간·명도로 위계. 한글 행간 1.5~1.6,
|
|
// 자간 0 근처 (양수 트래킹은 라틴 대문자 라벨에만 소량).
|
|
// RN letterSpacing 단위는 px.
|
|
export const d3roNativeTypo = {
|
|
hero: { fontSize: 42, fontWeight: '400' as const, letterSpacing: -0.5, lineHeight: 50 },
|
|
title: { fontSize: 28, fontWeight: '400' as const, letterSpacing: -0.3, lineHeight: 36 },
|
|
value: { fontSize: 20, fontWeight: '500' as const, letterSpacing: 0, lineHeight: 26 },
|
|
heading: { fontSize: 16, fontWeight: '500' as const, letterSpacing: 0, lineHeight: 24 },
|
|
body: { fontSize: 14, fontWeight: '400' as const, letterSpacing: 0, lineHeight: 22 },
|
|
small: { fontSize: 12, fontWeight: '400' as const, letterSpacing: 0, lineHeight: 18 },
|
|
meta: { fontSize: 11, fontWeight: '500' as const, letterSpacing: 0.3, lineHeight: 16 },
|
|
label: { fontSize: 11, fontWeight: '500' as const, letterSpacing: 0.4, lineHeight: 15 }
|
|
} as const
|
|
|
|
export const d3roNativeRadius = {
|
|
card: 22,
|
|
inner: 12,
|
|
button: 8,
|
|
small: 6,
|
|
pill: 999
|
|
} as const
|
|
|
|
// 폰트 전략 (bare RN, 커스텀 폰트 번들링 없음):
|
|
// - sans: 플랫폼 시스템 산세리프. iOS=SF Pro(한글은 Apple SD Gothic Neo로 자동
|
|
// 폴백), Android=Roboto(한글은 Noto Sans KR로 자동 폴백). Apple HIG/Material
|
|
// 권장을 따르는 표준 방식이며 한글 렌더링 품질이 가장 안정적.
|
|
// - mono: 텔레메트리·코드 등 등폭이 필요한 곳에만 사용 (한글엔 사용 금지).
|
|
export const d3roNativeFonts = {
|
|
sans: Platform.OS === 'ios' ? 'System' : 'Roboto',
|
|
mono: Platform.OS === 'ios' ? 'Menlo' : 'monospace'
|
|
} as const
|
|
|
|
export type D3roNativePaletteKey = keyof typeof d3roNativePalette
|
|
export type D3roNativeTypoKey = keyof typeof d3roNativeTypo
|