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

refactor(ui): deprecated accent.amber->main 91건 + 매직 리터럴 토큰화 (WS3)

Browse source 
- accent.amber/amberDim/amberGlow -> accent.main/dim/glow 91건 (34파일).
  theme.ts의 @deprecated 별칭 참조 제거 (본체 main 사용).
- inline fontSize/fontWeight -> d3roTypo, borderRadius -> d3roRadius 토큰 37건.
- P4: 화면 고유 수치(스탯 fontSize, 레이아웃 width)는 토큰화 제외.
정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P4
This commit is contained in:
Yun Chan 2026-07-22 01:54:37 +09:00
parent aef44289a5
commit 078304dda9
28 changed files with 125 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

18
apps/desktop/src/renderer/pages/CommandsPage.tsx
View file

@ -144,7 +144,7 @@ export function CommandsPage(): React.ReactElement {
variant="value"
sx={{
fontSize: d3roTypo.heading.size,
color: activeInstruction ? d3roPalette.accent.amber : d3roPalette.text.disabled,
color: activeInstruction ? d3roPalette.accent.main : d3roPalette.text.disabled,
}}
>
{activeInstruction ? activeInstruction.name : t('commands.none')}
@ -169,8 +169,8 @@ export function CommandsPage(): React.ReactElement {
onClick={() => handleActivate(inst.id)}
sx={{
cursor: 'pointer',
borderRadius: '22px',
border: isActive ? `2px solid ${d3roPalette.accent.amber}` : '2px solid transparent',
borderRadius: '22px', // P4: 토큰에 없는 22px 보존 (pill은 999px)
border: isActive ? `2px solid ${d3roPalette.accent.main}` : '2px solid transparent',
transition: 'border-color 0.15s ease',
}}
>
@ -178,7 +178,7 @@ export function CommandsPage(): React.ReactElement {
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
{isActive ? (
<CircleCheck size={16} style={{ color: d3roPalette.accent.amber }} />
<CircleCheck size={16} style={{ color: d3roPalette.accent.main }} />
) : (
<Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
)}
@ -186,7 +186,7 @@ export function CommandsPage(): React.ReactElement {
<Box sx={{
fontSize: d3roTypo.body.size,
fontWeight: d3roTypo.heading.weight,
color: isActive ? d3roPalette.accent.amber : d3roPalette.text.primary,
color: isActive ? d3roPalette.accent.main : d3roPalette.text.primary,
}}>
{inst.name}
</Box>
@ -203,7 +203,7 @@ export function CommandsPage(): React.ReactElement {
<IconButton
size="small"
onClick={() => openEdit(inst)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
>
<Pencil size={16} />
</IconButton>
@ -346,14 +346,14 @@ function VoiceKeywordsSection({ instructions }: { instructions: CustomInstructio
px: 1, py: 0.25,
borderRadius: d3roRadius.xs,
outline: 'none', width: 120,
'&:focus': { borderColor: d3roPalette.accent.amber },
'&:focus': { borderColor: d3roPalette.accent.main },
}}
/>
) : (
<IconButton
size="small"
onClick={() => { setEditingRule(rule.instructionId); setKeywordInput('') }}
sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.main } }}
>
<Plus size={14} />
</IconButton>
@ -495,7 +495,7 @@ function ChainSection({ instructions }: { instructions: CustomInstruction[] }):
<Play size={16} />
</IconButton>
<IconButton size="small" onClick={() => openEdit(chain)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
<Pencil size={16} />
</IconButton>
<IconButton size="small" onClick={() => handleDelete(chain.id)}

2
apps/desktop/src/renderer/pages/DictionaryPage.tsx
View file

@ -111,7 +111,7 @@ export function DictionaryPage(): React.ReactElement {
</Box>
<Box sx={{ display: 'flex', gap: 0.5 }}>
<IconButton size="small" onClick={() => openEdit(entry)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
<Pencil size={16} />
</IconButton>
<IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}

8
apps/desktop/src/renderer/pages/HistoryPage.tsx
View file

@ -94,7 +94,7 @@ export function HistoryPage(): React.ReactElement {
<IconButton
size="small"
onClick={handleExport}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
>
<Download size={18} />
</IconButton>
@ -121,11 +121,11 @@ export function HistoryPage(): React.ReactElement {
fontFamily: d3roFontMono,
fontSize: d3roTypo.micro.size,
borderRadius: d3roRadius.small,
borderColor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.border.subtle,
bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : 'transparent',
borderColor: activeTag === tc.tag ? d3roPalette.accent.main : d3roPalette.border.subtle,
bgcolor: activeTag === tc.tag ? d3roPalette.accent.main : 'transparent',
color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary,
'&:hover': {
bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.bg.cardHover,
bgcolor: activeTag === tc.tag ? d3roPalette.accent.main : d3roPalette.bg.cardHover,
},
}}
/>

8
apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx
View file

@ -112,7 +112,7 @@ export function KnowledgeBasePage(): React.ReactElement {
height: 4,
borderRadius: 2,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}}
/>
<PhosphorText variant="dim" sx={{ mt: 0.5 }}>
@ -170,7 +170,7 @@ export function KnowledgeBasePage(): React.ReactElement {
</Box>
<Tooltip title={t('rag.reindex')}>
<IconButton size="small" onClick={() => handleReindex(doc.id)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
<RefreshCw size={16} />
</IconButton>
</Tooltip>
@ -207,13 +207,13 @@ export function KnowledgeBasePage(): React.ReactElement {
fontSize: d3roTypo.compact.size,
bgcolor: d3roPalette.bg.inset,
'& fieldset': { borderColor: d3roPalette.border.subtle },
'&:hover fieldset': { borderColor: d3roPalette.accent.amber },
'&:hover fieldset': { borderColor: d3roPalette.accent.main },
},
'& .MuiOutlinedInput-input': { color: d3roPalette.text.primary },
}}
/>
<IconButton onClick={handleQuery} disabled={!query.trim() || querying}
sx={{ color: query.trim() ? d3roPalette.accent.amber : d3roPalette.text.inactive }}>
sx={{ color: query.trim() ? d3roPalette.accent.main : d3roPalette.text.inactive }}>
<Send size={20} />
</IconButton>
</Box>

2
apps/desktop/src/renderer/pages/MeetingModePage.tsx
View file

@ -315,7 +315,7 @@ export function MeetingModePage(): React.ReactElement {
height: 3,
borderRadius: 2,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}}
/>
<PhosphorText variant="dim" sx={{ mt: 0.5, fontSize: d3roTypo.nano.size }}>

18
apps/desktop/src/renderer/pages/VoiceConversationPage.tsx
View file

@ -227,9 +227,9 @@ export function VoiceConversationPage(): React.ReactElement {
<PhosphorText
variant="micro"
sx={{
color: d3roPalette.accent.amber,
border: `1px solid ${d3roPalette.accent.amber}`,
borderRadius: '3px',
color: d3roPalette.accent.main,
border: `1px solid ${d3roPalette.accent.main}`,
borderRadius: '3px', // P4: 토큰에 없는 3px 보존
px: 0.5,
lineHeight: 1.6,
}}
@ -300,7 +300,7 @@ export function VoiceConversationPage(): React.ReactElement {
sx={{
maxWidth: '75%',
...(msg.role === 'user' && {
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
'& *': { color: `${d3roPalette.bg.chassis} !important` },
}),
}}
@ -331,7 +331,7 @@ export function VoiceConversationPage(): React.ReactElement {
width: 6,
height: 6,
borderRadius: '50%',
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
animation: 'd3roTypingBounce 1.2s infinite ease-in-out',
},
'& > span:nth-of-type(2)': { animationDelay: '0.15s' },
@ -356,7 +356,7 @@ export function VoiceConversationPage(): React.ReactElement {
<MetalCard sx={{ maxWidth: '75%' }}>
<PhosphorText variant="compact" sx={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
{streamingText}
<Box component="span" sx={{ animation: 'blink 1s infinite', color: d3roPalette.accent.amber }}>
<Box component="span" sx={{ animation: 'blink 1s infinite', color: d3roPalette.accent.main }}>
{'▌'}
</Box>
</PhosphorText>
@ -414,8 +414,8 @@ export function VoiceConversationPage(): React.ReactElement {
fontSize: d3roTypo.compact.size,
bgcolor: d3roPalette.bg.inset,
'& fieldset': { borderColor: d3roPalette.border.subtle },
'&:hover fieldset': { borderColor: d3roPalette.accent.amber },
'&.Mui-focused fieldset': { borderColor: d3roPalette.accent.amber },
'&:hover fieldset': { borderColor: d3roPalette.accent.main },
'&.Mui-focused fieldset': { borderColor: d3roPalette.accent.main },
},
'& .MuiOutlinedInput-input': {
color: d3roPalette.text.primary,
@ -431,7 +431,7 @@ export function VoiceConversationPage(): React.ReactElement {
disabled={!textInput.trim() || state === 'thinking' || state === 'speaking'}
sx={{
color: textInput.trim() && state !== 'thinking' && state !== 'speaking'
? d3roPalette.accent.amber
? d3roPalette.accent.main
: d3roPalette.text.inactive,
}}
>