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

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

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

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

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

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

@ -235,7 +235,7 @@ export function HotkeyRecordModal({
disableAutoFocus disableAutoFocus
disableRestoreFocus 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> <DialogContent>
{/* 녹화 영역 */} {/* 녹화 영역 */}
<Box <Box
@ -246,10 +246,10 @@ export function HotkeyRecordModal({
: isReady : isReady
? d3roPalette.tag.green ? d3roPalette.tag.green
: displayKeys.length > 0 : displayKeys.length > 0
? d3roPalette.accent.amber ? d3roPalette.accent.main
: d3roPalette.border.strong : d3roPalette.border.strong
}`, }`,
borderRadius: '12px', borderRadius: d3roRadius.inner,
p: 3, p: 3,
minHeight: 80, minHeight: 80,
display: 'flex', display: 'flex',
@ -281,7 +281,7 @@ export function HotkeyRecordModal({
) : ( ) : (
<Typography <Typography
sx={{ sx={{
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
fontSize: '13px', fontSize: '13px',
textAlign: 'center', 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])} {t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
</PhosphorText> </PhosphorText>
<PhosphorText variant="small" sx={{ <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 {q.limit === -1
? t('license.unlimited') ? t('license.unlimited')
@ -124,7 +124,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
borderRadius: d3roRadius.xs, borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { '& .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, borderRadius: d3roRadius.xs,
}, },
}} }}
@ -144,7 +144,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
<Box key={m.model} sx={{ mb: 1 }}> <Box key={m.model} sx={{ mb: 1 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}> <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">{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 {m.limit === -1
? t('license.unlimited') ? t('license.unlimited')
: `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`} : `${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 ? d3roPalette.tag.purple
: tier === 'pro' : tier === 'pro'
? d3roPalette.tag.green ? 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') const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText> 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 <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
} }
return ( 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} {value}
</PhosphorText> </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 ? d3roPalette.tag.purple
: tier === 'pro' : tier === 'pro'
? d3roPalette.tag.green ? 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') const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText> 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 key={m.model}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
<PhosphorText variant="small">{t(m.i18nKey)}</PhosphorText> <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 {m.limit === -1
? t('license.unlimited') ? t('license.unlimited')
: `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`} : `${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}`)} {t(`license.feature.${feature}`)}
</PhosphorText> </PhosphorText>
<PhosphorText variant="small" sx={{ <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 {limit === -1
? t('license.unlimited') ? t('license.unlimited')
@ -246,7 +246,7 @@ function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: R
borderRadius: d3roRadius.xs, borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { '& .MuiLinearProgress-bar': {
bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.amber, bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.main,
borderRadius: d3roRadius.xs, 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 <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
} }
return ( 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} {value}
</PhosphorText> </PhosphorText>
) )

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

@ -27,11 +27,11 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
<Box <Box
sx={{ sx={{
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
borderRadius: '8px', borderRadius: d3roRadius.small,
p: 1.5, p: 1.5,
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: '12px', fontSize: d3roTypo.small.size,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -42,7 +42,7 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
<IconButton <IconButton
size="small" size="small"
onClick={() => navigator.clipboard.writeText(children)} 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} /> <Copy size={14} />
</IconButton> </IconButton>
@ -80,7 +80,7 @@ export function OllamaGuideModal({ open, onClose }: OllamaGuideModalProps): Reac
fontWeight: 700, fontWeight: 700,
fontSize: '14px', fontSize: '14px',
letterSpacing: '1px', letterSpacing: '1px',
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
py: 1.5, 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 colorSuccess = d3roPalette.tag.green
const colorDanger = d3roPalette.tag.red const colorDanger = d3roPalette.tag.red
const colorAccent = d3roPalette.accent.amber const colorAccent = d3roPalette.accent.main
const currentStep: StepKind | null = isDownloading const currentStep: StepKind | null = isDownloading
? (neededSteps[stepIndex] ?? null) ? (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, borderRadius: d3roRadius.inner,
transition: 'background-color 0.15s ease', transition: 'background-color 0.15s ease',
'&:hover': { '&: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}`, border: `1px solid ${d3roPalette.border.default}`,
}} }}
> >
<Lock size={14} style={{ color: d3roPalette.accent.amber }} /> <Lock size={14} style={{ color: d3roPalette.accent.main }} />
<Typography <Typography
sx={{ sx={{
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.small.size, fontSize: d3roTypo.small.size,
fontWeight: d3roTypo.small.weight, fontWeight: d3roTypo.small.weight,
letterSpacing: d3roTypo.small.spacing, letterSpacing: d3roTypo.small.spacing,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
}} }}
> >
{t('license.pro.required')} {t('license.pro.required')}

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

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

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

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

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

@ -81,7 +81,7 @@ function ControlButton({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderRadius: '8px', borderRadius: d3roRadius.small,
cursor: 'pointer', cursor: 'pointer',
color: d3roPalette.text.inactive, color: d3roPalette.text.inactive,
transition: 'background-color 0.12s ease, color 0.12s ease', 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, fontSize: d3roTypo.heading.size,
fontWeight: d3roTypo.heading.weight, fontWeight: d3roTypo.heading.weight,
letterSpacing: d3roTypo.heading.spacing, letterSpacing: d3roTypo.heading.spacing,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
}} }}
> >
<Lock size={20} /> <Lock size={20} />
@ -167,12 +167,12 @@ export function UpgradePromptModal(): React.ReactElement {
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size, fontSize: d3roTypo.compact.size,
fontWeight: 600, fontWeight: 600,
bgcolor: d3roPalette.accent.amber, bgcolor: d3roPalette.accent.main,
color: d3roPalette.bg.app, color: d3roPalette.bg.app,
textTransform: 'none', textTransform: 'none',
borderRadius: d3roRadius.button, borderRadius: d3roRadius.button,
'&:hover': { '&:hover': {
bgcolor: d3roPalette.accent.amber, bgcolor: d3roPalette.accent.main,
filter: 'brightness(1.1)', filter: 'brightness(1.1)',
}, },
}} }}
@ -207,7 +207,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
sx={{ sx={{
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.small.size, fontSize: d3roTypo.small.size,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
}} }}
> >
{t('license.quotaUsed', { {t('license.quotaUsed', {
@ -224,7 +224,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
borderRadius: d3roRadius.xs, borderRadius: d3roRadius.xs,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { '& .MuiLinearProgress-bar': {
bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.amber, bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.main,
borderRadius: d3roRadius.xs, borderRadius: d3roRadius.xs,
}, },
}} }}

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

@ -95,7 +95,7 @@ export function AddDocumentDialog({
height: 4, height: 4,
borderRadius: 2, borderRadius: 2,
bgcolor: d3roPalette.bg.inset, 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 }}> <PhosphorText variant="dim" sx={{ fontSize: 11, mt: 0.5 }}>
@ -115,12 +115,12 @@ export function AddDocumentDialog({
opacity: generating ? 0.6 : 1, opacity: generating ? 0.6 : 1,
border: border:
selectedId === tp.id selectedId === tp.id
? `2px solid ${d3roPalette.accent.amber}` ? `2px solid ${d3roPalette.accent.main}`
: `2px solid transparent`, : `2px solid transparent`,
borderRadius: d3roRadius.inner, borderRadius: d3roRadius.inner,
transition: 'border-color 0.15s', transition: 'border-color 0.15s',
'&:hover': { '&:hover': {
borderColor: generating ? undefined : d3roPalette.accent.amberDim, borderColor: generating ? undefined : d3roPalette.accent.dim,
}, },
}} }}
> >
@ -182,7 +182,7 @@ export function AddDocumentDialog({
sx={{ sx={{
height: 36, height: 36,
fontSize: d3roTypo.engrave.size, fontSize: d3roTypo.engrave.size,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
}} }}
> >
{generating ? t('meeting.generating') : t('meeting.generate')} {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, color: d3roPalette.text.primary,
borderBottomColor: edited ? d3roPalette.accent.amber : undefined, borderBottomColor: edited ? d3roPalette.accent.main : undefined,
bgcolor: edited ? undefined : d3roPalette.bg.elevated, 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, color: d3roPalette.text.primary,
'&:hover': { '&:hover': {
bgcolor: d3roPalette.bg.cardHover, 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, color: d3roPalette.text.primary,
'&:hover': { '&:hover': {
bgcolor: d3roPalette.bg.cardHover, 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, lineHeight: 1.7,
boxSizing: 'border-box', boxSizing: 'border-box',
'&:focus': { '&: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={{ sx={{
fontSize: d3roTypo.value.size, fontSize: d3roTypo.value.size,
fontWeight: 600, fontWeight: 600,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
mt: 2, mt: 2,
mb: 1, mb: 1,
borderBottom: `1px solid ${d3roPalette.border.default}`, borderBottom: `1px solid ${d3roPalette.border.default}`,
@ -90,7 +90,7 @@ const components: Components = {
sx={{ sx={{
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size, fontSize: d3roTypo.compact.size,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
}} }}
> >
{children} {children}
@ -104,7 +104,7 @@ const components: Components = {
sx={{ sx={{
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.compact.size, fontSize: d3roTypo.compact.size,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
px: 0.5, px: 0.5,
py: 0.25, py: 0.25,
@ -174,7 +174,7 @@ const components: Components = {
<Box <Box
component="blockquote" component="blockquote"
sx={{ sx={{
borderLeft: `3px solid ${d3roPalette.accent.amber}`, borderLeft: `3px solid ${d3roPalette.accent.main}`,
pl: 1.5, pl: 1.5,
ml: 0, ml: 0,
my: 0.75, my: 0.75,

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

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

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

@ -109,8 +109,8 @@ export function TranscriptTab({
} }
}} }}
sx={{ sx={{
'& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.amber }, '& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.main },
'& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.amberDim }, '& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.dim },
}} }}
/> />
} }
@ -159,7 +159,7 @@ export function TranscriptTab({
height: 2, height: 2,
mb: 1, mb: 1,
bgcolor: d3roPalette.bg.inset, 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, gap: 1,
mb: 0.5, mb: 0.5,
pl: 0.5, pl: 0.5,
borderLeft: `2px solid ${d3roPalette.accent.amberDim}`, borderLeft: `2px solid ${d3roPalette.accent.dim}`,
}} }}
> >
<Box <Box
@ -221,7 +221,7 @@ export function TranscriptTab({
component="span" component="span"
sx={{ sx={{
fontSize: 12, fontSize: 12,
color: d3roPalette.accent.amber, color: d3roPalette.accent.main,
fontFamily: d3roFontMono, 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, borderRadius: d3roRadius.xs,
outline: 'none', outline: 'none',
width: 100, 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 <IconButton
size="small" size="small"
onClick={() => setShowTagInput(true)} 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} /> <Tag size={14} />
</IconButton> </IconButton>
@ -227,7 +227,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
<IconButton <IconButton
size="small" size="small"
onClick={() => onCopy(displayText)} 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} /> <Copy size={16} />
</IconButton> </IconButton>
@ -284,7 +284,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
)} )}
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}> <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
<Tooltip title={t('meetingSummary.exportMarkdown')} arrow> <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} /> <ScrollText size={14} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -301,7 +301,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
sx={{ sx={{
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.micro.size, fontSize: d3roTypo.micro.size,
bgcolor: d3roPalette.accent.amber, bgcolor: d3roPalette.accent.main,
color: d3roPalette.bg.chassis, color: d3roPalette.bg.chassis,
cursor: 'pointer', cursor: 'pointer',
'&:hover': { opacity: 0.85 }, '&:hover': { opacity: 0.85 },
@ -316,7 +316,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
{/* 요약 토글 버튼 (caption/file-transcription 모드만) */} {/* 요약 토글 버튼 (caption/file-transcription 모드만) */}
{(entry.mode === 'caption' || entry.mode === 'file-transcription') && !summaryExpanded && !hasSummary && ( {(entry.mode === 'caption' || entry.mode === 'file-transcription') && !summaryExpanded && !hasSummary && (
<Box <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} onClick={handleToggleSummary}
> >
<ChevronDown size={16} /> <ChevronDown size={16} />

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

@ -144,7 +144,7 @@ export function CommandsPage(): React.ReactElement {
variant="value" variant="value"
sx={{ sx={{
fontSize: d3roTypo.heading.size, 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')} {activeInstruction ? activeInstruction.name : t('commands.none')}
@ -169,8 +169,8 @@ export function CommandsPage(): React.ReactElement {
onClick={() => handleActivate(inst.id)} onClick={() => handleActivate(inst.id)}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
borderRadius: '22px', borderRadius: '22px', // P4: 토큰에 없는 22px 보존 (pill은 999px)
border: isActive ? `2px solid ${d3roPalette.accent.amber}` : '2px solid transparent', border: isActive ? `2px solid ${d3roPalette.accent.main}` : '2px solid transparent',
transition: 'border-color 0.15s ease', 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', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}> <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
{isActive ? ( {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} /> <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
)} )}
@ -186,7 +186,7 @@ export function CommandsPage(): React.ReactElement {
<Box sx={{ <Box sx={{
fontSize: d3roTypo.body.size, fontSize: d3roTypo.body.size,
fontWeight: d3roTypo.heading.weight, fontWeight: d3roTypo.heading.weight,
color: isActive ? d3roPalette.accent.amber : d3roPalette.text.primary, color: isActive ? d3roPalette.accent.main : d3roPalette.text.primary,
}}> }}>
{inst.name} {inst.name}
</Box> </Box>
@ -203,7 +203,7 @@ export function CommandsPage(): React.ReactElement {
<IconButton <IconButton
size="small" size="small"
onClick={() => openEdit(inst)} 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} /> <Pencil size={16} />
</IconButton> </IconButton>
@ -346,14 +346,14 @@ function VoiceKeywordsSection({ instructions }: { instructions: CustomInstructio
px: 1, py: 0.25, px: 1, py: 0.25,
borderRadius: d3roRadius.xs, borderRadius: d3roRadius.xs,
outline: 'none', width: 120, outline: 'none', width: 120,
'&:focus': { borderColor: d3roPalette.accent.amber }, '&:focus': { borderColor: d3roPalette.accent.main },
}} }}
/> />
) : ( ) : (
<IconButton <IconButton
size="small" size="small"
onClick={() => { setEditingRule(rule.instructionId); setKeywordInput('') }} 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} /> <Plus size={14} />
</IconButton> </IconButton>
@ -495,7 +495,7 @@ function ChainSection({ instructions }: { instructions: CustomInstruction[] }):
<Play size={16} /> <Play size={16} />
</IconButton> </IconButton>
<IconButton size="small" onClick={() => openEdit(chain)} <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} /> <Pencil size={16} />
</IconButton> </IconButton>
<IconButton size="small" onClick={() => handleDelete(chain.id)} <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>
<Box sx={{ display: 'flex', gap: 0.5 }}> <Box sx={{ display: 'flex', gap: 0.5 }}>
<IconButton size="small" onClick={() => openEdit(entry)} <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} /> <Pencil size={16} />
</IconButton> </IconButton>
<IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }} <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 <IconButton
size="small" size="small"
onClick={handleExport} 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} /> <Download size={18} />
</IconButton> </IconButton>
@ -121,11 +121,11 @@ export function HistoryPage(): React.ReactElement {
fontFamily: d3roFontMono, fontFamily: d3roFontMono,
fontSize: d3roTypo.micro.size, fontSize: d3roTypo.micro.size,
borderRadius: d3roRadius.small, borderRadius: d3roRadius.small,
borderColor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.border.subtle, borderColor: activeTag === tc.tag ? d3roPalette.accent.main : d3roPalette.border.subtle,
bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : 'transparent', bgcolor: activeTag === tc.tag ? d3roPalette.accent.main : 'transparent',
color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary, color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary,
'&:hover': { '&: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, height: 4,
borderRadius: 2, borderRadius: 2,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
'& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber }, '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
}} }}
/> />
<PhosphorText variant="dim" sx={{ mt: 0.5 }}> <PhosphorText variant="dim" sx={{ mt: 0.5 }}>
@ -170,7 +170,7 @@ export function KnowledgeBasePage(): React.ReactElement {
</Box> </Box>
<Tooltip title={t('rag.reindex')}> <Tooltip title={t('rag.reindex')}>
<IconButton size="small" onClick={() => handleReindex(doc.id)} <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} /> <RefreshCw size={16} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
@ -207,13 +207,13 @@ export function KnowledgeBasePage(): React.ReactElement {
fontSize: d3roTypo.compact.size, fontSize: d3roTypo.compact.size,
bgcolor: d3roPalette.bg.inset, bgcolor: d3roPalette.bg.inset,
'& fieldset': { borderColor: d3roPalette.border.subtle }, '& fieldset': { borderColor: d3roPalette.border.subtle },
'&:hover fieldset': { borderColor: d3roPalette.accent.amber }, '&:hover fieldset': { borderColor: d3roPalette.accent.main },
}, },
'& .MuiOutlinedInput-input': { color: d3roPalette.text.primary }, '& .MuiOutlinedInput-input': { color: d3roPalette.text.primary },
}} }}
/> />
<IconButton onClick={handleQuery} disabled={!query.trim() || querying} <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} /> <Send size={20} />
</IconButton> </IconButton>
</Box> </Box>

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

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