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

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

12
apps/desktop/src/renderer/components/AppLayout.tsx
View file

@ -164,9 +164,9 @@ export function AppLayout(): React.ReactElement {
<Typography
sx={{
fontFamily: d3roFontSans,
fontSize: '20px',
fontWeight: 800,
letterSpacing: '0.02em',
fontSize: d3roTypo.value.size,
fontWeight: 800, // P4: 토큰에 없는 800 보존
letterSpacing: '0.02em', // P4: 토큰에 없는 0.02em 보존
backgroundImage: d3roPalette.gradient.logo,
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
@ -180,9 +180,9 @@ export function AppLayout(): React.ReactElement {
<Typography
sx={{
fontFamily: d3roFontSans,
fontSize: '13px',
fontWeight: 500,
letterSpacing: '0.12em',
fontSize: d3roTypo.compact.size,
fontWeight: 500, // P4: 토큰에 없는 500 보존
letterSpacing: '0.12em', // P4: 토큰에 없는 0.12em 보존
color: d3roPalette.text.dimLabel,
pl: '16px',
}}

2
apps/desktop/src/renderer/components/CloudSyncSection.tsx
View file

@ -182,7 +182,7 @@ export function CloudSyncSection(): React.ReactElement {
sx={{
height: '100%',
width: `${progress.total > 0 ? (progress.current / progress.total) * 100 : 0}%`,
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
transition: 'width 200ms'
}}
/>

12
apps/desktop/src/renderer/components/FileDropZone.tsx
View file

@ -127,11 +127,11 @@ export function FileDropZone(): React.ReactElement {
sx={{
p: 4,
textAlign: 'center',
border: `2px dashed ${dragging ? d3roPalette.accent.amber : d3roPalette.border.subtle}`,
borderRadius: '8px',
border: `2px dashed ${dragging ? d3roPalette.accent.main : d3roPalette.border.subtle}`,
borderRadius: d3roRadius.small,
cursor: 'pointer',
transition: 'border-color 0.2s',
'&:hover': { borderColor: d3roPalette.accent.amber },
'&:hover': { borderColor: d3roPalette.accent.main },
}}
>
<FileUp size={40} style={{ color: d3roPalette.text.inactive, marginBottom: 8 }} />
@ -175,7 +175,7 @@ export function FileDropZone(): React.ReactElement {
height: 6,
borderRadius: 3,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}}
/>
<PhosphorText variant="dim">
@ -214,7 +214,7 @@ export function FileDropZone(): React.ReactElement {
<Box sx={{ display: 'flex', gap: 0.5 }}>
<Tooltip title={copied ? 'Copied!' : t('fileTranscription.copyAll')}>
<IconButton size="small" onClick={handleCopy}>
<Copy size={16} style={{ color: copied ? d3roPalette.accent.amber : d3roPalette.text.inactive }} />
<Copy size={16} style={{ color: copied ? d3roPalette.accent.main : d3roPalette.text.inactive }} />
</IconButton>
</Tooltip>
<IconButton size="small" onClick={handleReset}>
@ -229,7 +229,7 @@ export function FileDropZone(): React.ReactElement {
overflow: 'auto',
p: 2,
bgcolor: d3roPalette.bg.inset,
borderRadius: '6px',
borderRadius: d3roRadius.xs,
fontSize: d3roTypo.compact.size,
lineHeight: d3roTypo.compact.line,
color: d3roPalette.text.primary,

8
apps/desktop/src/renderer/components/HotkeyRecordModal.tsx
View file

@ -235,7 +235,7 @@ export function HotkeyRecordModal({
disableAutoFocus
disableRestoreFocus
>
<DialogTitle sx={{ fontWeight: 700, fontSize: '16px' }}>{title ?? t('hotkey.title')}</DialogTitle>
<DialogTitle sx={{ fontWeight: 700, fontSize: d3roTypo.heading.size }}>{title ?? t('hotkey.title')}</DialogTitle>
<DialogContent>
{/* 녹화 영역 */}
<Box
@ -246,10 +246,10 @@ export function HotkeyRecordModal({
: isReady
? d3roPalette.tag.green
: displayKeys.length > 0
? d3roPalette.accent.amber
? d3roPalette.accent.main
: d3roPalette.border.strong
}`,
borderRadius: '12px',
borderRadius: d3roRadius.inner,
p: 3,
minHeight: 80,
display: 'flex',
@ -281,7 +281,7 @@ export function HotkeyRecordModal({
) : (
<Typography
sx={{
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
fontSize: '13px',
textAlign: 'center',
}}

10
apps/desktop/src/renderer/components/LicenseModal.tsx
View file

@ -108,7 +108,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
{t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
</PhosphorText>
<PhosphorText variant="small" sx={{
color: q.limit === -1 ? d3roPalette.tag.green : q.remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
color: q.limit === -1 ? d3roPalette.tag.green : q.remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.main,
}}>
{q.limit === -1
? t('license.unlimited')
@ -124,7 +124,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': {
bgcolor: q.used >= q.limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
bgcolor: q.used >= q.limit ? d3roPalette.tag.red : d3roPalette.accent.main,
borderRadius: d3roRadius.xs,
},
}}
@ -144,7 +144,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
<Box key={m.model} sx={{ mb: 1 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}>
<PhosphorText variant="small">{t(m.i18nKey as Parameters<typeof t>[0])}</PhosphorText>
<PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
<PhosphorText variant="small" sx={{ color: d3roPalette.accent.main }}>
{m.limit === -1
? t('license.unlimited')
: `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
@ -234,7 +234,7 @@ function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): Rea
? d3roPalette.tag.purple
: tier === 'pro'
? d3roPalette.tag.green
: d3roPalette.accent.amber
: d3roPalette.accent.main
const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
}
@ -329,7 +329,7 @@ function TierCell({ value }: { value: boolean | string }): React.ReactElement {
return <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
}
return (
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.main }}>
{value}
</PhosphorText>
)

10
apps/desktop/src/renderer/components/LicenseTab.tsx
View file

@ -77,7 +77,7 @@ function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): Rea
? d3roPalette.tag.purple
: tier === 'pro'
? d3roPalette.tag.green
: d3roPalette.accent.amber
: d3roPalette.accent.main
const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
}
@ -191,7 +191,7 @@ function UsageSection({ t, usage, currentTier }: { t: (k: string) => string; usa
<Box key={m.model}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
<PhosphorText variant="small">{t(m.i18nKey)}</PhosphorText>
<PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
<PhosphorText variant="small" sx={{ color: d3roPalette.accent.main }}>
{m.limit === -1
? t('license.unlimited')
: `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
@ -230,7 +230,7 @@ function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: R
{t(`license.feature.${feature}`)}
</PhosphorText>
<PhosphorText variant="small" sx={{
color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.main,
}}>
{limit === -1
? t('license.unlimited')
@ -246,7 +246,7 @@ function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: R
borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': {
bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.main,
borderRadius: d3roRadius.xs,
},
}}
@ -321,7 +321,7 @@ function TierCell({ value }: { value: boolean | string }): React.ReactElement {
return <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
}
return (
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
<PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.main }}>
{value}
</PhosphorText>
)

10
apps/desktop/src/renderer/components/OllamaGuideModal.tsx
View file

@ -27,11 +27,11 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
<Box
sx={{
bgcolor: d3roPalette.bg.inset,
borderRadius: '8px',
borderRadius: d3roRadius.small,
p: 1.5,
fontFamily: d3roFontMono,
fontSize: '12px',
color: d3roPalette.accent.amber,
fontSize: d3roTypo.small.size,
color: d3roPalette.accent.main,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@ -42,7 +42,7 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
<IconButton
size="small"
onClick={() => navigator.clipboard.writeText(children)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
>
<Copy size={14} />
</IconButton>
@ -80,7 +80,7 @@ export function OllamaGuideModal({ open, onClose }: OllamaGuideModalProps): Reac
fontWeight: 700,
fontSize: '14px',
letterSpacing: '1px',
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
py: 1.5,
}}
>

2
apps/desktop/src/renderer/components/OnboardingModal.tsx
View file

@ -214,7 +214,7 @@ export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.
const colorSuccess = d3roPalette.tag.green
const colorDanger = d3roPalette.tag.red
const colorAccent = d3roPalette.accent.amber
const colorAccent = d3roPalette.accent.main
const currentStep: StepKind | null = isDownloading
? (neededSteps[stepIndex] ?? null)

6
apps/desktop/src/renderer/components/ProBadge.tsx
View file

@ -43,7 +43,7 @@ export function ProBadge({ feature, children }: ProBadgeProps): React.ReactEleme
borderRadius: d3roRadius.inner,
transition: 'background-color 0.15s ease',
'&:hover': {
bgcolor: d3roPalette.accent.amberDim,
bgcolor: d3roPalette.accent.dim,
},
}}
>
@ -59,14 +59,14 @@ export function ProBadge({ feature, children }: ProBadgeProps): React.ReactEleme
border: `1px solid ${d3roPalette.border.default}`,
}}
>
<Lock size={14} style={{ color: d3roPalette.accent.amber }} />
<Lock size={14} style={{ color: d3roPalette.accent.main }} />
<Typography
sx={{
fontFamily: d3roFontMono,
fontSize: d3roTypo.small.size,
fontWeight: d3roTypo.small.weight,
letterSpacing: d3roTypo.small.spacing,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
}}
>
{t('license.pro.required')}

38
apps/desktop/src/renderer/components/SettingsModal.tsx
View file

@ -77,11 +77,11 @@ function HotkeyDisplay({
size="small"
sx={{
fontWeight: 700,
fontSize: '11px',
fontSize: d3roTypo.label.size,
bgcolor: d3roPalette.bg.elevated,
color: d3roPalette.text.primary,
border: `1px solid ${d3roPalette.border.default}`,
borderRadius: '6px',
borderRadius: d3roRadius.xs,
height: 28,
}}
/>
@ -135,7 +135,7 @@ function VoiceModeCard({
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
<Typography
variant="subtitle2"
sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: '12px', letterSpacing: '0.5px' }}
sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: d3roTypo.small.size, letterSpacing: '0.5px' }}
>
{title}
</Typography>
@ -159,7 +159,7 @@ function VoiceModeCard({
label={enabled ? enabledLabel : disabledLabel}
size="small"
sx={{
fontSize: '10px',
fontSize: '10px', // P4: 토큰에 없는 10px 보존
fontWeight: 700,
height: 20,
bgcolor: enabled ? d3roPalette.tag.greenBg : 'transparent',
@ -171,7 +171,7 @@ function VoiceModeCard({
sx={{ ml: 0, mr: 0 }}
/>
</Box>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
{description}
</Typography>
</Box>
@ -326,10 +326,10 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
alignItems: 'center',
fontFamily: d3roFontMono,
fontWeight: 700,
fontSize: '14px',
letterSpacing: '1px',
fontSize: d3roTypo.body.size,
letterSpacing: d3roTypo.engrave.spacing,
textTransform: 'uppercase',
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
py: 1.5,
}}
>
@ -351,16 +351,16 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
minHeight: 40,
'& .MuiTab-root': {
fontFamily: d3roFontMono,
fontSize: '11px',
fontSize: d3roTypo.label.size,
fontWeight: 700,
letterSpacing: '0.5px',
textTransform: 'uppercase',
color: d3roPalette.text.inactive,
minHeight: 40,
py: 1,
'&.Mui-selected': { color: d3roPalette.accent.amber },
'&.Mui-selected': { color: d3roPalette.accent.main },
},
'& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
'& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.main, height: 2 },
}}
>
<Tab label={t('settings.tabs.general')} icon={<Keyboard size={14} />} iconPosition="start" />
@ -564,12 +564,12 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
}
}
}}
sx={{ fontFamily: d3roFontMono, fontSize: '11px', minWidth: 80 }}
sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, minWidth: 80 }}
>
{micTesting ? t('common.stop').toUpperCase() : t('common.test').toUpperCase()}
</Button>
<Box sx={{ flex: 1, height: 8, bgcolor: d3roPalette.bg.inset, borderRadius: '4px', overflow: 'hidden', boxShadow: d3roShadow.inset }}>
<Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.amber, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
<Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.main, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
</Box>
</Box>
@ -682,7 +682,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
}
label={
<Box>
<Typography variant="body2" sx={{ fontSize: '12px' }}>{t('settings.diarization')}</Typography>
<Typography variant="body2" sx={{ fontSize: d3roTypo.small.size }}>{t('settings.diarization')}</Typography>
<Typography variant="caption" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
{t('settings.diarizationHint')}
</Typography>
@ -718,7 +718,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
</Select>
</FormControl>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
{config.llmBackend === 'premium'
? t('settings.backend.premiumHint')
: t('settings.backend.localHint')}
@ -749,7 +749,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
</Select>
</FormControl>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
{config.conversationBackend === 'realtime'
? t('settings.convBackend.realtimeHint')
: t('settings.convBackend.localHint')}
@ -770,7 +770,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
fullWidth
/>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
{t('settings.ollamaHint')}
</Typography>
@ -821,7 +821,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
</Select>
</FormControl>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
<Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
{t('settings.actionHint')}
</Typography>
@ -924,7 +924,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
onClose()
setTimeout(() => window.location.reload(), 300)
}}
sx={{ fontFamily: d3roFontMono, fontSize: '11px' }}
sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size }}
>
{t('settings.about.restartOnboarding')}
</Button>

6
apps/desktop/src/renderer/components/TemplateSection.tsx
View file

@ -132,7 +132,7 @@ export function TemplateSection(): React.ReactElement {
{/* 활성 세션 표시 */}
{session && (
<MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.accent.amber}` }}>
<MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.accent.main}` }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Led color="amber" pulse />
@ -177,7 +177,7 @@ export function TemplateSection(): React.ReactElement {
size="small"
onClick={() => handleStartSession(tmpl.id)}
disabled={!!session}
sx={{ color: d3roPalette.accent.amber, '&:hover': { opacity: 0.8 } }}
sx={{ color: d3roPalette.accent.main, '&:hover': { opacity: 0.8 } }}
>
<Play size={18} />
</IconButton>
@ -185,7 +185,7 @@ export function TemplateSection(): React.ReactElement {
<IconButton
size="small"
onClick={() => openEdit(tmpl)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
>
<Pencil size={16} />
</IconButton>

2
apps/desktop/src/renderer/components/TitleBar.tsx
View file

@ -81,7 +81,7 @@ function ControlButton({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '8px',
borderRadius: d3roRadius.small,
cursor: 'pointer',
color: d3roPalette.text.inactive,
transition: 'background-color 0.12s ease, color 0.12s ease',

10
apps/desktop/src/renderer/components/UpgradePromptModal.tsx
View file

@ -76,7 +76,7 @@ export function UpgradePromptModal(): React.ReactElement {
fontSize: d3roTypo.heading.size,
fontWeight: d3roTypo.heading.weight,
letterSpacing: d3roTypo.heading.spacing,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
}}
>
<Lock size={20} />
@ -167,12 +167,12 @@ export function UpgradePromptModal(): React.ReactElement {
fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size,
fontWeight: 600,
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
color: d3roPalette.bg.app,
textTransform: 'none',
borderRadius: d3roRadius.button,
'&:hover': {
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
filter: 'brightness(1.1)',
},
}}
@ -207,7 +207,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
sx={{
fontFamily: d3roFontMono,
fontSize: d3roTypo.small.size,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
}}
>
{t('license.quotaUsed', {
@ -224,7 +224,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': {
bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.amber,
bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.main,
borderRadius: d3roRadius.xs,
},
}}

8
apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx
View file

@ -95,7 +95,7 @@ export function AddDocumentDialog({
height: 4,
borderRadius: 2,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}}
/>
<PhosphorText variant="dim" sx={{ fontSize: 11, mt: 0.5 }}>
@ -115,12 +115,12 @@ export function AddDocumentDialog({
opacity: generating ? 0.6 : 1,
border:
selectedId === tp.id
? `2px solid ${d3roPalette.accent.amber}`
? `2px solid ${d3roPalette.accent.main}`
: `2px solid transparent`,
borderRadius: d3roRadius.inner,
transition: 'border-color 0.15s',
'&:hover': {
borderColor: generating ? undefined : d3roPalette.accent.amberDim,
borderColor: generating ? undefined : d3roPalette.accent.dim,
},
}}
>
@ -182,7 +182,7 @@ export function AddDocumentDialog({
sx={{
height: 36,
fontSize: d3roTypo.engrave.size,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
}}
>
{generating ? t('meeting.generating') : t('meeting.generate')}

2
apps/desktop/src/renderer/components/meeting/EditableSegment.tsx
View file

@ -146,7 +146,7 @@ export function EditableSegment({
? {}
: {
color: d3roPalette.text.primary,
borderBottomColor: edited ? d3roPalette.accent.amber : undefined,
borderBottomColor: edited ? d3roPalette.accent.main : undefined,
bgcolor: edited ? undefined : d3roPalette.bg.elevated,
},
}}

4
apps/desktop/src/renderer/components/meeting/ExportMenu.tsx
View file

@ -84,7 +84,7 @@ export function ExportMenu({ onExport, onCopyToClipboard }: ExportMenuProps): Re
color: d3roPalette.text.primary,
'&:hover': {
bgcolor: d3roPalette.bg.cardHover,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
},
}}
>
@ -100,7 +100,7 @@ export function ExportMenu({ onExport, onCopyToClipboard }: ExportMenuProps): Re
color: d3roPalette.text.primary,
'&:hover': {
bgcolor: d3roPalette.bg.cardHover,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
},
}}
>

2
apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx
View file

@ -72,7 +72,7 @@ export function MarkdownEditor({
lineHeight: 1.7,
boxSizing: 'border-box',
'&:focus': {
borderColor: d3roPalette.accent.amber,
borderColor: d3roPalette.accent.main,
},
}}
/>

8
apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx
View file

@ -18,7 +18,7 @@ const components: Components = {
sx={{
fontSize: d3roTypo.value.size,
fontWeight: 600,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
mt: 2,
mb: 1,
borderBottom: `1px solid ${d3roPalette.border.default}`,
@ -90,7 +90,7 @@ const components: Components = {
sx={{
fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
}}
>
{children}
@ -104,7 +104,7 @@ const components: Components = {
sx={{
fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
bgcolor: d3roPalette.bg.inset,
px: 0.5,
py: 0.25,
@ -174,7 +174,7 @@ const components: Components = {
<Box
component="blockquote"
sx={{
borderLeft: `3px solid ${d3roPalette.accent.amber}`,
borderLeft: `3px solid ${d3roPalette.accent.main}`,
pl: 1.5,
ml: 0,
my: 0.75,

14
apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx
View file

@ -38,7 +38,7 @@ function TypingIndicator(): React.ReactElement {
width: 4,
height: 4,
borderRadius: '50%',
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
animation: 'typing-dot 1.2s infinite',
animationDelay: `${i * 0.2}s`,
'@keyframes typing-dot': {
@ -233,18 +233,18 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
maxWidth: '80%',
px: 1.25,
py: 0.5,
borderRadius: '6px',
borderRadius: d3roRadius.xs,
fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size,
lineHeight: 1.5,
bgcolor:
msg.role === 'user'
? d3roPalette.accent.amberDim
? d3roPalette.accent.dim
: d3roPalette.bg.elevated,
color: d3roPalette.text.primary,
border: `1px solid ${
msg.role === 'user'
? d3roPalette.accent.amber
? d3roPalette.accent.main
: d3roPalette.border.subtle
}`,
wordBreak: 'break-word',
@ -348,7 +348,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
left: 0,
height: '100%',
width: '40%',
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
borderRadius: 1,
animation: 'chat-progress 1.5s ease-in-out infinite',
'@keyframes chat-progress': {
@ -386,7 +386,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size,
bgcolor: d3roPalette.bg.input,
borderRadius: '4px',
borderRadius: '4px', // P4: 토큰에 없는 4px 보존
},
'& .MuiOutlinedInput-notchedOutline': {
borderColor: d3roPalette.border.default,
@ -395,7 +395,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
borderColor: d3roPalette.border.strong,
},
'& .Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: d3roPalette.accent.amber,
borderColor: d3roPalette.accent.main,
},
}}
/>

6
apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
View file

@ -248,7 +248,7 @@ export function MeetingDetailTabs({
autoFocus
/>
<IconButton size="small" onClick={handleSaveTitle}>
<Check size={16} style={{ color: d3roPalette.accent.amber }} />
<Check size={16} style={{ color: d3roPalette.accent.main }} />
</IconButton>
</Box>
) : (
@ -290,9 +290,9 @@ export function MeetingDetailTabs({
color: d3roPalette.text.inactive,
textTransform: 'uppercase',
letterSpacing: '1px',
'&.Mui-selected': { color: d3roPalette.accent.amber },
'&.Mui-selected': { color: d3roPalette.accent.main },
},
'& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
'& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.main, height: 2 },
}}
>
<Tab label={t('meeting.transcriptTab')} />

10
apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx
View file

@ -109,8 +109,8 @@ export function TranscriptTab({
}
}}
sx={{
'& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.amber },
'& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.amberDim },
'& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.main },
'& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.dim },
}}
/>
}
@ -159,7 +159,7 @@ export function TranscriptTab({
height: 2,
mb: 1,
bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}}
/>
)}
@ -202,7 +202,7 @@ export function TranscriptTab({
gap: 1,
mb: 0.5,
pl: 0.5,
borderLeft: `2px solid ${d3roPalette.accent.amberDim}`,
borderLeft: `2px solid ${d3roPalette.accent.dim}`,
}}
>
<Box
@ -221,7 +221,7 @@ export function TranscriptTab({
component="span"
sx={{
fontSize: 12,
color: d3roPalette.accent.amber,
color: d3roPalette.accent.main,
fontFamily: d3roFontMono,
}}
>

12
apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
View file

@ -204,7 +204,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
borderRadius: d3roRadius.xs,
outline: 'none',
width: 100,
'&:focus': { borderColor: d3roPalette.accent.amber },
'&:focus': { borderColor: d3roPalette.accent.main },
}}
/>
) : (
@ -212,7 +212,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
<IconButton
size="small"
onClick={() => setShowTagInput(true)}
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 } }}
>
<Tag size={14} />
</IconButton>
@ -227,7 +227,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
<IconButton
size="small"
onClick={() => onCopy(displayText)}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
>
<Copy size={16} />
</IconButton>
@ -284,7 +284,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
)}
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
<Tooltip title={t('meetingSummary.exportMarkdown')} arrow>
<IconButton size="small" onClick={handleExportSummary} sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
<IconButton size="small" onClick={handleExportSummary} sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
<ScrollText size={14} />
</IconButton>
</Tooltip>
@ -301,7 +301,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
sx={{
fontFamily: d3roFontMono,
fontSize: d3roTypo.micro.size,
bgcolor: d3roPalette.accent.amber,
bgcolor: d3roPalette.accent.main,
color: d3roPalette.bg.chassis,
cursor: 'pointer',
'&:hover': { opacity: 0.85 },
@ -316,7 +316,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
{/* 요약 토글 버튼 (caption/file-transcription 모드만) */}
{(entry.mode === 'caption' || entry.mode === 'file-transcription') && !summaryExpanded && !hasSummary && (
<Box
sx={{ mt: 1, textAlign: 'center', cursor: 'pointer', color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.amber } }}
sx={{ mt: 1, textAlign: 'center', cursor: 'pointer', color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.main } }}
onClick={handleToggleSummary}
>
<ChevronDown size={16} />

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