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

- 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

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)}