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,
paddingTop: 8,
},
tabBarActiveTintColor: d3roNativePalette.accent.amber,
tabBarActiveTintColor: d3roNativePalette.accent.main,
tabBarInactiveTintColor: d3roNativePalette.text.muted,
tabBarLabelStyle: {
fontFamily: MONO,
@ -132,10 +132,10 @@ const fabStyles = StyleSheet.create({
width: 56,
height: 56,
borderRadius: 28,
backgroundColor: d3roNativePalette.accent.amber,
backgroundColor: d3roNativePalette.accent.main,
justifyContent: 'center',
alignItems: 'center',
shadowColor: d3roNativePalette.accent.amber,
shadowColor: d3roNativePalette.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4,
shadowRadius: 10,

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

@ -70,7 +70,7 @@ export default function HistoryScreen(): React.ReactElement {
if (loading) {
return (
<View style={styles.center}>
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
<ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
</View>
)
}
@ -110,7 +110,7 @@ export default function HistoryScreen(): React.ReactElement {
<RefreshControl
refreshing={refreshing}
onRefresh={() => { setRefreshing(true); void load() }}
tintColor={d3roNativePalette.accent.amber}
tintColor={d3roNativePalette.accent.main}
/>
}
ListEmptyComponent={
@ -247,7 +247,7 @@ const styles = StyleSheet.create({
cardHeaderLeft: { flexDirection: 'row', alignItems: 'center' },
timeLabel: { marginLeft: 8 },
wordBadge: {
backgroundColor: d3roNativePalette.accent.amberDim,
backgroundColor: d3roNativePalette.accent.dim,
paddingHorizontal: 8,
paddingVertical: 2,
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'
},
loginBtn: {
backgroundColor: P.accent.amber,
backgroundColor: P.accent.main,
borderRadius: 12,
paddingVertical: 14,
alignItems: 'center',
shadowColor: P.accent.amber,
shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
@ -315,7 +315,7 @@ const styles = StyleSheet.create({
warningBox: {
borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)',
backgroundColor: P.accent.amberDim,
backgroundColor: P.accent.dim,
padding: 12,
borderRadius: 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' && (
<ActivityIndicator size="large" color={d3roNativePalette.accent.amber} />
<ActivityIndicator size="large" color={d3roNativePalette.accent.main} />
)}
{transcript !== '' && state === 'done' && (
@ -284,8 +284,8 @@ const styles = StyleSheet.create({
},
errorBox: {
borderWidth: 1,
borderColor: d3roNativePalette.accent.amber,
backgroundColor: d3roNativePalette.accent.amberDim,
borderColor: d3roNativePalette.accent.main,
backgroundColor: d3roNativePalette.accent.dim,
padding: 10,
borderRadius: 6,
width: '100%'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -19,7 +19,7 @@ export default function RootLayout(): React.ReactElement {
<Stack
screenOptions={{
headerStyle: { backgroundColor: d3roNativePalette.bg.app },
headerTintColor: d3roNativePalette.accent.amber,
headerTintColor: d3roNativePalette.accent.main,
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'
},
loginBtn: {
backgroundColor: P.accent.amber,
backgroundColor: P.accent.main,
borderRadius: 12,
paddingVertical: 14,
alignItems: 'center',
shadowColor: P.accent.amber,
shadowColor: P.accent.main,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.3,
shadowRadius: 10,
@ -296,7 +296,7 @@ const styles = StyleSheet.create({
warningBox: {
borderWidth: 1,
borderColor: 'rgba(255,92,53,0.3)',
backgroundColor: P.accent.amberDim,
backgroundColor: P.accent.dim,
padding: 12,
borderRadius: 8,
marginTop: 8

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

@ -23,9 +23,9 @@ export function FilterChip({
onPress={onPress}
style={[
{
backgroundColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.bg.card,
backgroundColor: active ? d3roNativePalette.accent.main : d3roNativePalette.bg.card,
borderWidth: 1,
borderColor: active ? d3roNativePalette.accent.amber : d3roNativePalette.border.default,
borderColor: active ? d3roNativePalette.accent.main : d3roNativePalette.border.default,
borderRadius: d3roNativeRadius.pill,
paddingHorizontal: 16,
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> = {
amber: d3roNativePalette.accent.amber,
amber: d3roNativePalette.accent.main,
green: d3roNativePalette.tag.green,
red: d3roNativePalette.tag.red,
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 {
const c = COLOR_MAP[color] ?? d3roNativePalette.accent.amber
const c = COLOR_MAP[color] ?? d3roNativePalette.accent.main
const style: ViewStyle = {
width: 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 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 === 'secondary') return d3roNativePalette.text.secondary
if (color === 'label') return d3roNativePalette.text.label
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 = {
@ -37,7 +37,7 @@ export function PhosphorText({
fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
...(isAmberVariant
? {
textShadowColor: d3roNativePalette.accent.amberGlow,
textShadowColor: d3roNativePalette.accent.glow,
textShadowOffset: { width: 0, height: 0 },
textShadowRadius: 6
}

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

@ -31,7 +31,7 @@ export function PhysicalButton({
const bgColor =
variant === 'primary'
? d3roNativePalette.accent.amber
? d3roNativePalette.accent.main
: variant === 'danger'
? d3roNativePalette.tag.red
: '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={{
width: 6,
height,
backgroundColor: d3roNativePalette.accent.amber,
backgroundColor: d3roNativePalette.accent.main,
borderRadius: 3
}}
/>

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

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