yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

refactor(ui-native): d3roNativePalette amber->main 개명 (WS-NATIVE)

Browse source 
- packages/ui-native theme.ts accent: amber->main, amberDim->dim, amberGlow->glow (값 보존)
- apps/mobile 20건 + apps/mobile-rn 18건 + ui-native 컴포넌트 9건 = 47 참조 치환
SKIP: Led/PhosphorText/Header color prop 'amber'(의미론적 컴포넌트 API, 별도 마이그레이션)
       green/greenGlow 키(amber계 범위外)
정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P7
This commit is contained in:
Yun Chan 2026-07-22 02:37:45 +09:00
parent efac690362
commit 660e622a93
19 changed files with 50 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/mobile-rn/src/navigation/TabNavigator.tsx
View file

@ -60,7 +60,7 @@ export default function TabNavigator(): React.ReactElement {
paddingBottom: 20, paddingBottom: 20,
paddingTop: 8, paddingTop: 8,
}, },
tabBarActiveTintColor: d3roNativePalette.accent.amber, tabBarActiveTintColor: d3roNativePalette.accent.main,
tabBarInactiveTintColor: d3roNativePalette.text.muted, tabBarInactiveTintColor: d3roNativePalette.text.muted,
tabBarLabelStyle: { tabBarLabelStyle: {
fontFamily: MONO, fontFamily: MONO,
@ -132,10 +132,10 @@ const fabStyles = StyleSheet.create({
width: 56, width: 56,
height: 56, height: 56,
borderRadius: 28, borderRadius: 28,
backgroundColor: d3roNativePalette.accent.amber, backgroundColor: d3roNativePalette.accent.main,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
shadowColor: d3roNativePalette.accent.amber, shadowColor: d3roNativePalette.accent.main,
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4, shadowOpacity: 0.4,
shadowRadius: 10, shadowRadius: 10,

6
apps/mobile-rn/src/screens/HistoryScreen.tsx
View file

@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
if (loading) { if (loading) {
return ( return (
<View style={styles.center}> <View style={styles.center}>
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} /> <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
</View> </View>
) )
} }
@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={() => { setRefreshing(true); void load() }} onRefresh={() => { setRefreshing(true); void load() }}
tintColor={d3roNativePalette.accent.amber} tintColor={d3roNativePalette.accent.main}
/> />
} }
ListEmptyComponent={ ListEmptyComponent={
@ -247,7 +247,7 @@ const styles = StyleSheet.create({
cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' }, cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
timeLabel: { marginLeft: 8 }, timeLabel: { marginLeft: 8 },
wordBadge: { wordBadge: {
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
paddingHorizontal: 8, paddingHorizontal: 8,
paddingVertical: 2, paddingVertical: 2,
borderRadius: 4 borderRadius: 4

6
apps/mobile-rn/src/screens/LoginScreen.tsx
View file

@ -293,11 +293,11 @@ const styles = StyleSheet.create({
fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto' fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
}, },
loginBtn: { loginBtn: {
backgroundColor: P.accent.amber, backgroundColor: P.accent.main,
borderRadius: 12, borderRadius: 12,
paddingVertical: 14, paddingVertical: 14,
alignItems: 'center', alignItems: 'center',
shadowColor: P.accent.amber, shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3, shadowOpacity: 0.3,
shadowRadius: 10, shadowRadius: 10,
@ -315,7 +315,7 @@ const styles = StyleSheet.create({
warningBox: { warningBox: {
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)', borderColor: 'rgba(255,92,53,0.3)',
backgroundColor: P.accent.amberDim, backgroundColor: P.accent.dim,
padding: 12, padding: 12,
borderRadius: 8, borderRadius: 8,
marginTop: 8 marginTop: 8

6
apps/mobile-rn/src/screens/RecordScreen.tsx
View file

@ -197,7 +197,7 @@ export default function RecordScreen(): React.ReactElement {
)} )}
{state === 'processing' && ( {state === 'processing' && (
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} /> <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
)} )}
{transcript !== '' && state === 'done' && ( {transcript !== '' && state === 'done' && (
@ -284,8 +284,8 @@ const styles = StyleSheet.create({
}, },
errorBox: { errorBox: {
borderWidth: 1, borderWidth: 1,
borderColor: d3roNativePalette.accent.amber, borderColor: d3roNativePalette.accent.main,
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
padding: 10, padding: 10,
borderRadius: 6, borderRadius: 6,
width: '100%' width: '100%'

6
apps/mobile-rn/src/screens/SettingsScreen.tsx
View file

@ -99,7 +99,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />
@ -121,7 +121,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />
@ -132,7 +132,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />

6
apps/mobile-rn/src/screens/TalkScreen.tsx
View file

@ -164,7 +164,7 @@ const styles = StyleSheet.create({
}, },
userBubble: { userBubble: {
alignSelf: 'flex-end', alignSelf: 'flex-end',
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)', borderColor: 'rgba(255, 92, 53, 0.3)',
borderTopRightRadius: 4 borderTopRightRadius: 4
@ -204,7 +204,7 @@ const styles = StyleSheet.create({
width: 32, width: 32,
height: 32, height: 32,
borderRadius: 16, borderRadius: 16,
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)', borderColor: 'rgba(255, 92, 53, 0.3)',
justifyContent: 'center', justifyContent: 'center',
@ -218,7 +218,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 8, borderBottomWidth: 8,
borderLeftColor: 'transparent', borderLeftColor: 'transparent',
borderRightColor: 'transparent', borderRightColor: 'transparent',
borderBottomColor: d3roNativePalette.accent.amber borderBottomColor: d3roNativePalette.accent.main
}, },
inputStatus: { paddingVertical: 4 } inputStatus: { paddingVertical: 4 }
}) })

8
apps/mobile/app/(tabs)/_layout.tsx
View file

@ -43,7 +43,7 @@ export default function TabsLayout(): React.ReactElement {
paddingBottom: 20, paddingBottom: 20,
paddingTop: 8 paddingTop: 8
}, },
tabBarActiveTintColor: d3roNativePalette.accent.amber, tabBarActiveTintColor: d3roNativePalette.accent.main,
tabBarInactiveTintColor: d3roNativePalette.text.muted, tabBarInactiveTintColor: d3roNativePalette.text.muted,
tabBarLabelStyle: { tabBarLabelStyle: {
fontFamily: MONO_FONT, fontFamily: MONO_FONT,
@ -52,7 +52,7 @@ export default function TabsLayout(): React.ReactElement {
letterSpacing: 0.5 letterSpacing: 0.5
}, },
headerStyle: { backgroundColor: d3roNativePalette.bg.app }, headerStyle: { backgroundColor: d3roNativePalette.bg.app },
headerTintColor: d3roNativePalette.accent.amber, headerTintColor: d3roNativePalette.accent.main,
headerTitleStyle: { fontWeight: '300', letterSpacing: 1, fontFamily: MONO_FONT }, headerTitleStyle: { fontWeight: '300', letterSpacing: 1, fontFamily: MONO_FONT },
headerShown: false headerShown: false
}} }}
@ -129,10 +129,10 @@ const styles = StyleSheet.create({
width: 56, width: 56,
height: 56, height: 56,
borderRadius: 28, borderRadius: 28,
backgroundColor: d3roNativePalette.accent.amber, backgroundColor: d3roNativePalette.accent.main,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
shadowColor: d3roNativePalette.accent.amber, shadowColor: d3roNativePalette.accent.main,
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4, shadowOpacity: 0.4,
shadowRadius: 10, shadowRadius: 10,

6
apps/mobile/app/(tabs)/history.tsx
View file

@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
if (loading) { if (loading) {
return ( return (
<View style={styles.center}> <View style={styles.center}>
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} /> <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
</View> </View>
) )
} }
@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={() => { setRefreshing(true); void load() }} onRefresh={() => { setRefreshing(true); void load() }}
tintColor={d3roNativePalette.accent.amber} tintColor={d3roNativePalette.accent.main}
/> />
} }
ListEmptyComponent={ ListEmptyComponent={
@ -247,7 +247,7 @@ const styles = StyleSheet.create({
cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' }, cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
timeLabel: { marginLeft: 8 }, timeLabel: { marginLeft: 8 },
wordBadge: { wordBadge: {
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
paddingHorizontal: 8, paddingHorizontal: 8,
paddingVertical: 2, paddingVertical: 2,
borderRadius: 4 borderRadius: 4

6
apps/mobile/app/(tabs)/record.tsx
View file

@ -181,7 +181,7 @@ export default function RecordScreen(): React.ReactElement {
)} )}
{state === 'processing' && ( {state === 'processing' && (
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} /> <ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
)} )}
{transcript !== '' && state === 'done' && ( {transcript !== '' && state === 'done' && (
@ -268,8 +268,8 @@ const styles = StyleSheet.create({
}, },
errorBox: { errorBox: {
borderWidth: 1, borderWidth: 1,
borderColor: d3roNativePalette.accent.amber, borderColor: d3roNativePalette.accent.main,
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
padding: 10, padding: 10,
borderRadius: 6, borderRadius: 6,
width: '100%' width: '100%'

6
apps/mobile/app/(tabs)/settings.tsx
View file

@ -98,7 +98,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />
@ -120,7 +120,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />
@ -131,7 +131,7 @@ export default function SettingsScreen(): React.ReactElement {
value={true} value={true}
trackColor={{ trackColor={{
false: d3roNativePalette.bg.inset, false: d3roNativePalette.bg.inset,
true: d3roNativePalette.accent.amber true: d3roNativePalette.accent.main
}} }}
thumbColor="#ffffff" thumbColor="#ffffff"
/> />

6
apps/mobile/app/(tabs)/talk.tsx
View file

@ -164,7 +164,7 @@ const styles = StyleSheet.create({
}, },
userBubble: { userBubble: {
alignSelf: 'flex-end', alignSelf: 'flex-end',
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)', borderColor: 'rgba(255, 92, 53, 0.3)',
borderTopRightRadius: 4 borderTopRightRadius: 4
@ -204,7 +204,7 @@ const styles = StyleSheet.create({
width: 32, width: 32,
height: 32, height: 32,
borderRadius: 16, borderRadius: 16,
backgroundColor: d3roNativePalette.accent.amberDim, backgroundColor: d3roNativePalette.accent.dim,
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255, 92, 53, 0.3)', borderColor: 'rgba(255, 92, 53, 0.3)',
justifyContent: 'center', justifyContent: 'center',
@ -218,7 +218,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 8, borderBottomWidth: 8,
borderLeftColor: 'transparent', borderLeftColor: 'transparent',
borderRightColor: 'transparent', borderRightColor: 'transparent',
borderBottomColor: d3roNativePalette.accent.amber borderBottomColor: d3roNativePalette.accent.main
}, },
inputStatus: { paddingVertical: 4 } inputStatus: { paddingVertical: 4 }
}) })

2
apps/mobile/app/_layout.tsx
View file

@ -19,7 +19,7 @@ export default function RootLayout(): React.ReactElement {
<Stack <Stack
screenOptions={{ screenOptions={{
headerStyle: { backgroundColor: d3roNativePalette.bg.app }, headerStyle: { backgroundColor: d3roNativePalette.bg.app },
headerTintColor: d3roNativePalette.accent.amber, headerTintColor: d3roNativePalette.accent.main,
contentStyle: { backgroundColor: d3roNativePalette.bg.app } contentStyle: { backgroundColor: d3roNativePalette.bg.app }
}} }}
> >

6
apps/mobile/app/login.tsx
View file

@ -274,11 +274,11 @@ const styles = StyleSheet.create({
fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto' fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto'
}, },
loginBtn: { loginBtn: {
backgroundColor: P.accent.amber, backgroundColor: P.accent.main,
borderRadius: 12, borderRadius: 12,
paddingVertical: 14, paddingVertical: 14,
alignItems: 'center', alignItems: 'center',
shadowColor: P.accent.amber, shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 }, shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3, shadowOpacity: 0.3,
shadowRadius: 10, shadowRadius: 10,
@ -296,7 +296,7 @@ const styles = StyleSheet.create({
warningBox: { warningBox: {
borderWidth: 1, borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)', borderColor: 'rgba(255,92,53,0.3)',
backgroundColor: P.accent.amberDim, backgroundColor: P.accent.dim,
padding: 12, padding: 12,
borderRadius: 8, borderRadius: 8,
marginTop: 8 marginTop: 8

4
packages/ui-native/src/components/FilterChip.tsx
View file

@ -23,9 +23,9 @@ export function FilterChip({
onPress={onPress} onPress={onPress}
style={[ style={[
{ {
backgroundColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.bg.card, backgroundColor: active ? d3roNativePalette.accent.main : d3roNativePalette.bg.card,
borderWidth: 1, borderWidth: 1,
borderColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.border.default, borderColor: active ? d3roNativePalette.accent.main : d3roNativePalette.border.default,
borderRadius: d3roNativeRadius.pill, borderRadius: d3roNativeRadius.pill,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 6 paddingVertical: 6

4
packages/ui-native/src/components/Led.tsx
View file

@ -11,7 +11,7 @@ export interface LedProps {
} }
const COLOR_MAP: Record<string, string> = { const COLOR_MAP: Record<string, string> = {
amber: d3roNativePalette.accent.amber, amber: d3roNativePalette.accent.main,
green: d3roNativePalette.tag.green, green: d3roNativePalette.tag.green,
red: d3roNativePalette.tag.red, red: d3roNativePalette.tag.red,
orange: d3roNativePalette.tag.orange, orange: d3roNativePalette.tag.orange,
@ -19,7 +19,7 @@ const COLOR_MAP: Record<string, string> = {
} }
export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement { export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber const c = COLOR_MAP[color] ?? d3roNativePalette.accent.main
const style: ViewStyle = { const style: ViewStyle = {
width: size, width: size,
height: size, height: size,

6
packages/ui-native/src/components/PhosphorText.tsx
View file

@ -23,12 +23,12 @@ export function PhosphorText({
const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value' const isAmberVariant = variant === 'hero' || variant === 'title' || variant === 'value'
const resolvedColor: string = (() => { const resolvedColor: string = (() => {
if (color === 'amber') return d3roNativePalette.accent.amber if (color === 'amber') return d3roNativePalette.accent.main
if (color === 'primary') return d3roNativePalette.text.primary if (color === 'primary') return d3roNativePalette.text.primary
if (color === 'secondary') return d3roNativePalette.text.secondary if (color === 'secondary') return d3roNativePalette.text.secondary
if (color === 'label') return d3roNativePalette.text.label if (color === 'label') return d3roNativePalette.text.label
if (color === 'muted') return d3roNativePalette.text.muted if (color === 'muted') return d3roNativePalette.text.muted
return isAmberVariant ? d3roNativePalette.accent.amber : d3roNativePalette.text.primary return isAmberVariant ? d3roNativePalette.accent.main : d3roNativePalette.text.primary
})() })()
const baseStyle: TextStyle = { const baseStyle: TextStyle = {
@ -37,7 +37,7 @@ export function PhosphorText({
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace', fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
...(isAmberVariant ...(isAmberVariant
? { ? {
textShadowColor: d3roNativePalette.accent.amberGlow, textShadowColor: d3roNativePalette.accent.glow,
textShadowOffset: { width: 0, height: 0 }, textShadowOffset: { width: 0, height: 0 },
textShadowRadius: 6 textShadowRadius: 6
} }

2
packages/ui-native/src/components/PhysicalButton.tsx
View file

@ -31,7 +31,7 @@ export function PhysicalButton({
const bgColor = const bgColor =
variant === 'primary' variant === 'primary'
? d3roNativePalette.accent.amber ? d3roNativePalette.accent.main
: variant === 'danger' : variant === 'danger'
? d3roNativePalette.tag.red ? d3roNativePalette.tag.red
: 'transparent' : 'transparent'

2
packages/ui-native/src/components/WaveBars.tsx
View file

@ -54,7 +54,7 @@ function WaveBar({ index, active }: { index: number; active: boolean }): React.R
style={{ style={{
width: 6, width: 6,
height, height,
backgroundColor: d3roNativePalette.accent.amber, backgroundColor: d3roNativePalette.accent.main,
borderRadius: 3 borderRadius: 3
}} }}
/> />

6
packages/ui-native/src/theme.ts
View file

@ -24,9 +24,9 @@ export const d3roNativePalette = {
muted: '#71717a' muted: '#71717a'
}, },
accent: { accent: {
amber: '#ff5c35', main: '#ff5c35',
amberDim: 'rgba(255, 92, 53, 0.15)', dim: 'rgba(255, 92, 53, 0.15)',
amberGlow: 'rgba(255, 92, 53, 0.6)', glow: 'rgba(255, 92, 53, 0.6)',
green: '#4ade80', green: '#4ade80',
greenGlow: 'rgba(74, 222, 128, 0.6)' greenGlow: 'rgba(74, 222, 128, 0.6)'
}, },