708e20f747
Some checks failed
CI Pipeline / Code Quality & Typecheck (push) Waiting to run
CI Pipeline / Test Suite (macos-latest) (push) Blocked by required conditions
CI Pipeline / Test Suite (ubuntu-latest) (push) Blocked by required conditions
CI Pipeline / Test Suite (windows-latest) (push) Blocked by required conditions
CI Pipeline / Build Validation (admin) (push) Blocked by required conditions
CI Pipeline / Build Validation (desktop) (push) Blocked by required conditions
Deploy Landing Page / deploy (push) Blocked by required conditions
Deploy Landing Page / build (push) Waiting to run
Release & Packaging Pipeline / Build & Publish Admin Docker Image (push) Failing after 8s
Release & Code Signing CA Pipeline / build-and-sign-windows (push) Failing after 1m51s
Build macOS / Build & Package (macOS) (push) Failing after 4s
Build macOS / Build & Package (macOS)-1 (push) Failing after 5s
Release & Code Signing CA Pipeline / build-and-sign-macos (push) Failing after 3s
Release & Packaging Pipeline / Package macOS Desktop App (push) Failing after 4s
Release & Packaging Pipeline / Package Windows Desktop App (push) Failing after 2m28s
Release & Packaging Pipeline / Publish Official GitHub Release (push) Has been skipped
285 lines
10 KiB
TypeScript
285 lines
10 KiB
TypeScript
// src/shared/theme-vars.ts
|
|
// 팝업 윈도우용 CSS 변수 맵.
|
|
// main process (WindowManager)에서 insertCSS로 팝업에 테마를 주입할 때 사용.
|
|
// renderer의 theme.ts RAW와 동기화 유지 필요.
|
|
// Node.js/Electron main 환경에서 import 가능 (DOM API 없음).
|
|
|
|
export type PopupThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'
|
|
|
|
interface PopupThemeVars {
|
|
/** 카드 배경 (팝업 본체) */
|
|
'--d3-bg-card': string
|
|
/** 앱 배경 (recording-tip 반투명 배경) */
|
|
'--d3-bg-tip': string
|
|
/** 주요 텍스트 */
|
|
'--d3-text-primary': string
|
|
/** 보조 텍스트 */
|
|
'--d3-text-secondary': string
|
|
/** 비활성 텍스트 (번호, 시간 등) */
|
|
'--d3-text-inactive': string
|
|
/** 힌트/최약 텍스트 */
|
|
'--d3-text-muted': string
|
|
/** dimLabel 텍스트 (command-popup 제목) */
|
|
'--d3-text-dimLabel': string
|
|
/** 기본 테두리 */
|
|
'--d3-border-default': string
|
|
/** 미묘한 테두리 (구분선, hover) */
|
|
'--d3-border-subtle': string
|
|
/** 강한 테두리 (progress background) */
|
|
'--d3-border-strong': string
|
|
/** 악센트 색상 (웨이브바, 선택 바) */
|
|
'--d3-accent-main': string
|
|
/** 악센트 dim (active 배경) */
|
|
'--d3-accent-dim': string
|
|
/** 팝업 박스 섀도 */
|
|
'--d3-shadow-popup': string
|
|
/** 결과 팝업 배경 (불투명) */
|
|
'--d3-bg-result': string
|
|
/** 결과 팝업 테두리 */
|
|
'--d3-border-result': string
|
|
/** 결과 팝업 텍스트 */
|
|
'--d3-text-result': string
|
|
/** 결과 팝업 버튼 색상 */
|
|
'--d3-action-btn': string
|
|
/** 결과 팝업 버튼 hover 배경 */
|
|
'--d3-action-btn-hover-bg': string
|
|
/** 결과 팝업 버튼 hover 색상 */
|
|
'--d3-action-btn-hover': string
|
|
/** recording-tip 9단계 wave-bar 색상 (wave1~4 보간) */
|
|
'--d3-wave-1': string
|
|
'--d3-wave-2': string
|
|
'--d3-wave-3': string
|
|
'--d3-wave-4': string
|
|
'--d3-wave-5': string
|
|
'--d3-wave-6': string
|
|
'--d3-wave-7': string
|
|
'--d3-wave-8': string
|
|
'--d3-wave-9': string
|
|
/** 에러 상태 색상 (recording-tip error-icon) */
|
|
'--d3-status-error': string
|
|
/** 성공 상태 색상 (result-popup copied 상태) */
|
|
'--d3-status-success': string
|
|
}
|
|
|
|
const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
|
|
dark: {
|
|
'--d3-bg-card': '#111a30',
|
|
'--d3-bg-tip': 'rgba(10,14,28,0.85)',
|
|
'--d3-text-primary': '#eef2fb',
|
|
'--d3-text-secondary': '#93a4c8',
|
|
'--d3-text-inactive': '#7385ab',
|
|
'--d3-text-muted': '#2b3550',
|
|
'--d3-text-dimLabel': '#4e5f85',
|
|
'--d3-border-default': 'rgba(148,180,255,0.12)',
|
|
'--d3-border-subtle': 'rgba(148,180,255,0.07)',
|
|
'--d3-border-strong': 'rgba(148,180,255,0.20)',
|
|
'--d3-accent-main': '#3b82f6',
|
|
'--d3-accent-dim': 'rgba(59,130,246,0.14)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(3,7,18,0.5)',
|
|
'--d3-bg-result': '#111a30',
|
|
'--d3-border-result': 'rgba(148,180,255,0.12)',
|
|
'--d3-text-result': '#eef2fb',
|
|
'--d3-action-btn': '#60a5fa',
|
|
'--d3-action-btn-hover-bg': 'rgba(59,130,246,0.14)',
|
|
'--d3-action-btn-hover': '#93a4c8',
|
|
// wave-bar 9단계: theme.ts RAW.dark.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#93c5fd',
|
|
'--d3-wave-2': '#60a5fa',
|
|
'--d3-wave-3': '#4f8dfa',
|
|
'--d3-wave-4': '#3b82f6',
|
|
'--d3-wave-5': '#3b82f6',
|
|
'--d3-wave-6': '#5b75f7',
|
|
'--d3-wave-7': '#6e71f7',
|
|
'--d3-wave-8': '#818cf8',
|
|
'--d3-wave-9': '#a78bfa',
|
|
'--d3-status-error': '#ef4444',
|
|
'--d3-status-success': '#10b981',
|
|
},
|
|
light: {
|
|
'--d3-bg-card': '#ffffff',
|
|
'--d3-bg-tip': 'rgba(242,245,251,0.92)',
|
|
'--d3-text-primary': '#111827',
|
|
'--d3-text-secondary': '#4b5a75',
|
|
'--d3-text-inactive': '#8593ab',
|
|
'--d3-text-muted': '#c3cddd',
|
|
'--d3-text-dimLabel': '#5a6f96',
|
|
'--d3-border-default': 'rgba(30,58,138,0.12)',
|
|
'--d3-border-subtle': 'rgba(30,58,138,0.07)',
|
|
'--d3-border-strong': 'rgba(30,58,138,0.20)',
|
|
'--d3-accent-main': '#2563eb',
|
|
'--d3-accent-dim': 'rgba(37,99,235,0.10)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(30,58,138,0.12)',
|
|
'--d3-bg-result': '#ffffff',
|
|
'--d3-border-result': 'rgba(30,58,138,0.12)',
|
|
'--d3-text-result': '#111827',
|
|
'--d3-action-btn': '#3b82f6',
|
|
'--d3-action-btn-hover-bg': 'rgba(37,99,235,0.10)',
|
|
'--d3-action-btn-hover': '#4b5a75',
|
|
// theme.ts RAW.light.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#06b6d4',
|
|
'--d3-wave-2': '#1cbff8',
|
|
'--d3-wave-3': '#32bbfc',
|
|
'--d3-wave-4': '#3b82f6',
|
|
'--d3-wave-5': '#4966eb',
|
|
'--d3-wave-6': '#574ae0',
|
|
'--d3-wave-7': '#6c2edd',
|
|
'--d3-wave-8': '#8112da',
|
|
'--d3-wave-9': '#d946ef',
|
|
'--d3-status-error': '#ef4444',
|
|
'--d3-status-success': '#34d399',
|
|
},
|
|
nord: {
|
|
'--d3-bg-card': '#3b4252',
|
|
'--d3-bg-tip': 'rgba(46,52,64,0.92)',
|
|
'--d3-text-primary': 'rgba(236,239,244,0.87)',
|
|
'--d3-text-secondary': 'rgba(216,222,233,0.6)',
|
|
'--d3-text-inactive': 'rgba(216,222,233,0.35)',
|
|
'--d3-text-muted': 'rgba(216,222,233,0.25)',
|
|
'--d3-text-dimLabel': '#5e81ac',
|
|
'--d3-border-default': 'rgba(216,222,233,0.10)',
|
|
'--d3-border-subtle': 'rgba(216,222,233,0.06)',
|
|
'--d3-border-strong': 'rgba(216,222,233,0.16)',
|
|
'--d3-accent-main': '#88c0d0',
|
|
'--d3-accent-dim': 'rgba(136,192,208,0.08)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
|
|
'--d3-bg-result': '#434c5e',
|
|
'--d3-border-result': 'rgba(216,222,233,0.10)',
|
|
'--d3-text-result': 'rgba(236,239,244,0.87)',
|
|
'--d3-action-btn': 'rgba(216,222,233,0.4)',
|
|
'--d3-action-btn-hover-bg': 'rgba(216,222,233,0.08)',
|
|
'--d3-action-btn-hover': 'rgba(216,222,233,0.7)',
|
|
// theme.ts RAW.nord.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#8fbcbb',
|
|
'--d3-wave-2': '#8dbdcd',
|
|
'--d3-wave-3': '#8bbea0',
|
|
'--d3-wave-4': '#88c0d0',
|
|
'--d3-wave-5': '#85c6d0',
|
|
'--d3-wave-6': '#a3be8c',
|
|
'--d3-wave-7': '#b48ead',
|
|
'--d3-wave-8': '#bf88a8',
|
|
'--d3-wave-9': '#d08770',
|
|
'--d3-status-error': '#bf616a',
|
|
'--d3-status-success': '#a3be8c',
|
|
},
|
|
solarized: {
|
|
'--d3-bg-card': '#073642',
|
|
'--d3-bg-tip': 'rgba(0,43,54,0.92)',
|
|
'--d3-text-primary': 'rgba(238,232,213,0.87)',
|
|
'--d3-text-secondary': 'rgba(147,161,161,0.7)',
|
|
'--d3-text-inactive': 'rgba(147,161,161,0.4)',
|
|
'--d3-text-muted': 'rgba(147,161,161,0.25)',
|
|
'--d3-text-dimLabel': '#7a6c2e',
|
|
'--d3-border-default': 'rgba(131,148,150,0.13)',
|
|
'--d3-border-subtle': 'rgba(131,148,150,0.08)',
|
|
'--d3-border-strong': 'rgba(131,148,150,0.20)',
|
|
'--d3-accent-main': '#b58900',
|
|
'--d3-accent-dim': 'rgba(181,137,0,0.08)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
|
|
'--d3-bg-result': '#0d4250',
|
|
'--d3-border-result': 'rgba(131,148,150,0.13)',
|
|
'--d3-text-result': 'rgba(238,232,213,0.87)',
|
|
'--d3-action-btn': 'rgba(147,161,161,0.4)',
|
|
'--d3-action-btn-hover-bg': 'rgba(131,148,150,0.10)',
|
|
'--d3-action-btn-hover': 'rgba(147,161,161,0.7)',
|
|
// theme.ts RAW.solarized.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#2aa198',
|
|
'--d3-wave-2': '#2693cb',
|
|
'--d3-wave-3': '#268bd2',
|
|
'--d3-wave-4': '#268bd2',
|
|
'--d3-wave-5': '#4676d9',
|
|
'--d3-wave-6': '#6c71c4',
|
|
'--d3-wave-7': '#6c71c4',
|
|
'--d3-wave-8': '#9a33d3',
|
|
'--d3-wave-9': '#d33682',
|
|
'--d3-status-error': '#dc322f',
|
|
'--d3-status-success': '#859900',
|
|
},
|
|
catppuccin: {
|
|
'--d3-bg-card': '#313244',
|
|
'--d3-bg-tip': 'rgba(30,30,46,0.92)',
|
|
'--d3-text-primary': 'rgba(205,214,244,0.87)',
|
|
'--d3-text-secondary': 'rgba(186,194,222,0.7)',
|
|
'--d3-text-inactive': 'rgba(166,173,200,0.4)',
|
|
'--d3-text-muted': 'rgba(166,173,200,0.25)',
|
|
'--d3-text-dimLabel': '#585b70',
|
|
'--d3-border-default': 'rgba(205,214,244,0.08)',
|
|
'--d3-border-subtle': 'rgba(205,214,244,0.04)',
|
|
'--d3-border-strong': 'rgba(205,214,244,0.14)',
|
|
'--d3-accent-main': '#cba6f7',
|
|
'--d3-accent-dim': 'rgba(203,166,247,0.08)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
|
|
'--d3-bg-result': '#3a3a54',
|
|
'--d3-border-result': 'rgba(205,214,244,0.08)',
|
|
'--d3-text-result': 'rgba(205,214,244,0.87)',
|
|
'--d3-action-btn': 'rgba(166,173,200,0.4)',
|
|
'--d3-action-btn-hover-bg': 'rgba(205,214,244,0.06)',
|
|
'--d3-action-btn-hover': 'rgba(205,214,244,0.7)',
|
|
// theme.ts RAW.catppuccin.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#89dceb',
|
|
'--d3-wave-2': '#89cff4',
|
|
'--d3-wave-3': '#89c2f9',
|
|
'--d3-wave-4': '#89b4fa',
|
|
'--d3-wave-5': '#b4a9f2',
|
|
'--d3-wave-6': '#df9eea',
|
|
'--d3-wave-7': '#cba6f7',
|
|
'--d3-wave-8': '#e5b6f6',
|
|
'--d3-wave-9': '#f5c2e7',
|
|
'--d3-status-error': '#f38ba8',
|
|
'--d3-status-success': '#a6e3a1',
|
|
},
|
|
dracula: {
|
|
'--d3-bg-card': '#44475a',
|
|
'--d3-bg-tip': 'rgba(40,42,54,0.92)',
|
|
'--d3-text-primary': 'rgba(248,248,242,0.87)',
|
|
'--d3-text-secondary': 'rgba(169,176,208,0.7)',
|
|
'--d3-text-inactive': 'rgba(169,176,208,0.4)',
|
|
'--d3-text-muted': 'rgba(169,176,208,0.25)',
|
|
'--d3-text-dimLabel': '#6272a4',
|
|
'--d3-border-default': 'rgba(248,248,242,0.08)',
|
|
'--d3-border-subtle': 'rgba(248,248,242,0.04)',
|
|
'--d3-border-strong': 'rgba(248,248,242,0.14)',
|
|
'--d3-accent-main': '#bd93f9',
|
|
'--d3-accent-dim': 'rgba(189,147,249,0.08)',
|
|
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
|
|
'--d3-bg-result': '#4f5266',
|
|
'--d3-border-result': 'rgba(248,248,242,0.08)',
|
|
'--d3-text-result': 'rgba(248,248,242,0.87)',
|
|
'--d3-action-btn': 'rgba(169,176,208,0.4)',
|
|
'--d3-action-btn-hover-bg': 'rgba(248,248,242,0.06)',
|
|
'--d3-action-btn-hover': 'rgba(248,248,242,0.7)',
|
|
// theme.ts RAW.dracula.gradient.wave1-4 보간
|
|
'--d3-wave-1': '#8be9fd',
|
|
'--d3-wave-2': '#a6fbff',
|
|
'--d3-wave-3': '#c1fdff',
|
|
'--d3-wave-4': '#bd93f9',
|
|
'--d3-wave-5': '#d485ff',
|
|
'--d3-wave-6': '#eb77ff',
|
|
'--d3-wave-7': '#ff79c6',
|
|
'--d3-wave-8': '#ff88c4',
|
|
'--d3-wave-9': '#ffb86c',
|
|
'--d3-status-error': '#ff5555',
|
|
'--d3-status-success': '#50fa7b',
|
|
},
|
|
}
|
|
|
|
/**
|
|
* 팝업용 CSS 변수 맵 조회.
|
|
* ThemeMode('system' | 'light' | 'dark') 또는 테마 키를 받아 해당 변수 맵 반환.
|
|
* 'system' 또는 알 수 없는 값은 'dark'로 폴백.
|
|
*/
|
|
export function getPopupThemeVars(themeKey: string): PopupThemeVars {
|
|
const key = themeKey as PopupThemeKey
|
|
return POPUP_THEME_VARS[key] ?? POPUP_THEME_VARS.dark
|
|
}
|
|
|
|
/**
|
|
* 팝업 BrowserWindow에 insertCSS로 주입할 CSS 문자열 반환.
|
|
* `:root { --d3-bg-card: #242427; ... }`
|
|
*/
|
|
export function buildPopupThemeCss(themeKey: string): string {
|
|
const vars = getPopupThemeVars(themeKey)
|
|
const declarations = Object.entries(vars)
|
|
.map(([prop, value]) => ` ${prop}: ${value};`)
|
|
.join('\n')
|
|
return `:root {\n${declarations}\n}`
|
|
}
|