feat(V2-1c): packages/ui 추출 — DS 컴포넌트 + theme + theme-vars 분리
packages/ui (@d3ro/ui) 신규: - src/theme.ts (d3roPalette/d3roTypo/d3roShadow/d3roRadius SSOT) - src/theme-vars.ts (팝업/main 프로세스용 CSS 변수 맵) - src/components/ds/ (CrtDisplay, InstrumentPanel, Led, MetalCard, MetalDial, PhosphorText, PhysicalButton, ScreenPanel, ButtonGroup) - src/index.ts barrel - subpath exports: ./theme, ./theme-vars, ./components/ds - React/MUI/Emotion은 peerDependencies로 선언 - @d3ro/core만 직접 의존성 apps/desktop/src/shared/ 디렉토리 완전 제거: - theme-vars가 마지막 남은 파일이었음 - tsconfig include에서 src/shared/**/* 제거 일괄 치환 (renderer 전역): - ../theme, ../../theme, ./theme → @d3ro/ui/theme - ../components/ds, ../../components/ds, ./ds, ../ds → @d3ro/ui/components/ds - ../ds/<Component>, ../../ds/<Component> → @d3ro/ui/components/ds (세부 파일 import는 barrel로 통합) - @shared/theme-vars → @d3ro/ui/theme-vars (WindowManager) apps/desktop 설정: - package.json: @d3ro/ui: '*' dep 추가 - tsconfig.node/web.json: @shared/* paths 완전 제거, @d3ro/ui, @d3ro/ui/* paths 추가 - electron.vite.config.ts: @shared alias 제거, @d3ro/ui alias 추가, externalize exclude에 @d3ro/ui 추가 - vitest.config.ts: alias 교체 DS 컴포넌트 내부의 '../../theme' 상대 경로는 packages/ui 구조에서 동일하게 해결되어 그대로 유효. 검증: typecheck + build + dev 런타임 모두 통과.
This commit is contained in:
yunchan8804
parent
3b0eb3393b
commit
a041f1b6a9
56 changed files with 191 additions and 76 deletions
42
packages/ui/package.json
Normal file
42
packages/ui/package.json
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "@d3ro/ui",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "D3RO Voice 공유 UI — 디자인 시스템 컴포넌트 + 테마 토큰 + CSS 변수 맵",
|
||||
"license": "MIT",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
},
|
||||
"./theme": {
|
||||
"types": "./src/theme.ts",
|
||||
"default": "./src/theme.ts"
|
||||
},
|
||||
"./theme-vars": {
|
||||
"types": "./src/theme-vars.ts",
|
||||
"default": "./src/theme-vars.ts"
|
||||
},
|
||||
"./components/ds": {
|
||||
"types": "./src/components/ds/index.ts",
|
||||
"default": "./src/components/ds/index.ts"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@d3ro/core": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^7.0.0",
|
||||
"@mui/material": "^7.0.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0"
|
||||
}
|
||||
}
|
||||
30
packages/ui/src/components/ds/ButtonGroup.tsx
Normal file
30
packages/ui/src/components/ds/ButtonGroup.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// src/renderer/components/ds/ButtonGroup.tsx
|
||||
// 시안 A: 인셋 버튼 클러스터 — 레퍼런스의 .button-group 패턴
|
||||
// 물리 버튼들을 인셋 패널 안에 배치하여 그룹화
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
|
||||
|
||||
interface ButtonGroupProps {
|
||||
children: React.ReactNode
|
||||
/** 가로 배치 (기본 세로) */
|
||||
horizontal?: boolean
|
||||
}
|
||||
|
||||
export function ButtonGroup({ children, horizontal = false }: ButtonGroupProps): React.ReactElement {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: d3roPalette.bg.inset,
|
||||
p: '6px',
|
||||
borderRadius: d3roRadius.inner,
|
||||
boxShadow: d3roShadow.inset,
|
||||
display: 'flex',
|
||||
flexDirection: horizontal ? 'row' : 'column',
|
||||
gap: '6px',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
298
packages/ui/src/components/ds/CrtDisplay.tsx
Normal file
298
packages/ui/src/components/ds/CrtDisplay.tsx
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
// src/renderer/components/ds/CrtDisplay.tsx
|
||||
// 시안 A: CRT 디스플레이 — WebGL 셰이더 (스캔라인, 비네팅, 노이즈, 글리치, 파형)
|
||||
|
||||
import { useRef, useEffect, useCallback } from 'react'
|
||||
import { Box } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { d3roPalette, d3roFontMono, d3roShadow } from '../../theme'
|
||||
|
||||
// ── WebGL 유틸 ─────────────────────────────────────────
|
||||
|
||||
function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
|
||||
const shader = gl.createShader(type)
|
||||
if (!shader) return null
|
||||
gl.shaderSource(shader, source)
|
||||
gl.compileShader(shader)
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
gl.deleteShader(shader)
|
||||
return null
|
||||
}
|
||||
return shader
|
||||
}
|
||||
|
||||
function createProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string): WebGLProgram | null {
|
||||
const vs = createShader(gl, gl.VERTEX_SHADER, vsSource)
|
||||
const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource)
|
||||
if (!vs || !fs) return null
|
||||
const prog = gl.createProgram()
|
||||
if (!prog) return null
|
||||
gl.attachShader(prog, vs)
|
||||
gl.attachShader(prog, fs)
|
||||
gl.linkProgram(prog)
|
||||
return prog
|
||||
}
|
||||
|
||||
const VERTEX_SHADER = `
|
||||
attribute vec2 position;
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
vUv = position * 0.5 + 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
const FRAGMENT_SHADER = `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
uniform float u_time;
|
||||
uniform float u_glitch;
|
||||
uniform float u_amp;
|
||||
uniform float u_freq;
|
||||
|
||||
float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); }
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
|
||||
// Glitch displacement
|
||||
if (u_glitch > 0.0) {
|
||||
float gOffset = (random(vec2(uv.y * 5.0, u_time)) - 0.5) * u_glitch * 0.1;
|
||||
uv.x += gOffset;
|
||||
}
|
||||
|
||||
// Base phosphor background
|
||||
vec3 color = vec3(0.02, 0.015, 0.01);
|
||||
|
||||
// Background Grid
|
||||
float gridX = step(0.98, fract(uv.x * 15.0));
|
||||
float gridY = step(0.98, fract(uv.y * 10.0));
|
||||
color += vec3(0.1, 0.04, 0.02) * max(gridX, gridY) * (1.0 - u_glitch);
|
||||
|
||||
// Oscilloscope Waveform
|
||||
float t = u_time * 0.5 + u_glitch * random(uv) * 0.1;
|
||||
float waveY = sin((uv.x * u_freq) + t) * u_amp;
|
||||
float waveDist = abs((uv.y - 0.5) - waveY);
|
||||
float lineThick = 0.005 + (u_glitch * 0.02);
|
||||
float waveGlow = smoothstep(lineThick * 4.0, 0.0, waveDist);
|
||||
float waveCore = smoothstep(lineThick, 0.0, waveDist);
|
||||
|
||||
// Amber wave (#f25b29)
|
||||
vec3 waveColor = vec3(0.95, 0.35, 0.16);
|
||||
color += waveColor * waveCore;
|
||||
color += waveColor * 0.4 * waveGlow;
|
||||
|
||||
// Scanlines
|
||||
float scanline = sin(uv.y * 800.0 - u_time * 10.0) * 0.04;
|
||||
color -= scanline;
|
||||
|
||||
// Noise
|
||||
float noise = random(uv + u_time) * 0.08;
|
||||
color += noise;
|
||||
|
||||
// Vignette
|
||||
float dist = distance(vUv, vec2(0.5));
|
||||
float vig = smoothstep(0.8, 0.4, dist);
|
||||
color *= vig;
|
||||
|
||||
// Edge darkening
|
||||
color *= smoothstep(0.0, 0.02, vUv.x) * smoothstep(1.0, 0.98, vUv.x);
|
||||
color *= smoothstep(0.0, 0.05, vUv.y) * smoothstep(1.0, 0.95, vUv.y);
|
||||
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}
|
||||
`
|
||||
|
||||
const QUAD = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])
|
||||
|
||||
// ── Props ──────────────────────────────────────────────
|
||||
|
||||
interface CrtDisplayProps {
|
||||
/** 파형 진폭 (0.0 ~ 1.0) */
|
||||
amplitude?: number
|
||||
/** 파형 주파수 */
|
||||
frequency?: number
|
||||
/** 글리치 트리거 (변경 시 글리치 발생) */
|
||||
glitchTrigger?: number
|
||||
/** 실시간 오디오 레벨 (0.0~1.0) — 파형 진폭에 반영 */
|
||||
audioLevel?: number
|
||||
/** 오버레이 콘텐츠 (인광 텍스트 등) */
|
||||
children?: React.ReactNode
|
||||
/** 높이 (기본 280px) */
|
||||
height?: number | string
|
||||
}
|
||||
|
||||
export function CrtDisplay({
|
||||
amplitude = 0.1,
|
||||
frequency = 8.0,
|
||||
glitchTrigger = 0,
|
||||
audioLevel = 0,
|
||||
children,
|
||||
height = 280,
|
||||
}: CrtDisplayProps): React.ReactElement {
|
||||
const theme = useTheme()
|
||||
const isLight = theme.palette.mode === 'light'
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const glRef = useRef<{
|
||||
gl: WebGLRenderingContext
|
||||
uTime: WebGLUniformLocation | null
|
||||
uGlitch: WebGLUniformLocation | null
|
||||
uAmp: WebGLUniformLocation | null
|
||||
uFreq: WebGLUniformLocation | null
|
||||
} | null>(null)
|
||||
const animRef = useRef<number>(0)
|
||||
const startTimeRef = useRef(Date.now())
|
||||
const glitchRef = useRef(0)
|
||||
const ampRef = useRef(amplitude)
|
||||
const freqRef = useRef(frequency)
|
||||
const audioLevelRef = useRef(audioLevel)
|
||||
const currentAmpRef = useRef(amplitude)
|
||||
const currentFreqRef = useRef(frequency)
|
||||
|
||||
// amplitude/frequency/audioLevel 변경 추적
|
||||
useEffect(() => {
|
||||
ampRef.current = amplitude
|
||||
freqRef.current = frequency
|
||||
}, [amplitude, frequency])
|
||||
|
||||
useEffect(() => {
|
||||
audioLevelRef.current = audioLevel
|
||||
}, [audioLevel])
|
||||
|
||||
// 글리치 트리거
|
||||
useEffect(() => {
|
||||
if (glitchTrigger > 0) {
|
||||
glitchRef.current = 1.0
|
||||
}
|
||||
}, [glitchTrigger])
|
||||
|
||||
const render = useCallback(() => {
|
||||
const ctx = glRef.current
|
||||
if (!ctx) return
|
||||
|
||||
const { gl, uTime, uGlitch, uAmp, uFreq } = ctx
|
||||
|
||||
// audioLevel → amplitude 반영: 기본 amplitude + 오디오 레벨로 증폭
|
||||
const targetAmp = ampRef.current + audioLevelRef.current * 0.35
|
||||
|
||||
// Smoothing
|
||||
currentAmpRef.current += (targetAmp - currentAmpRef.current) * 0.15
|
||||
currentFreqRef.current += (freqRef.current - currentFreqRef.current) * 0.1
|
||||
glitchRef.current *= 0.85
|
||||
|
||||
gl.uniform1f(uTime, (Date.now() - startTimeRef.current) / 1000)
|
||||
gl.uniform1f(uGlitch, glitchRef.current)
|
||||
gl.uniform1f(uAmp, currentAmpRef.current)
|
||||
gl.uniform1f(uFreq, currentFreqRef.current)
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
|
||||
animRef.current = requestAnimationFrame(render)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
|
||||
const gl = canvas.getContext('webgl', { alpha: true })
|
||||
if (!gl) return
|
||||
|
||||
canvas.width = canvas.clientWidth * 2
|
||||
canvas.height = canvas.clientHeight * 2
|
||||
gl.viewport(0, 0, canvas.width, canvas.height)
|
||||
|
||||
const prog = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
|
||||
if (!prog) return
|
||||
|
||||
gl.useProgram(prog)
|
||||
|
||||
const buffer = gl.createBuffer()
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, QUAD, gl.STATIC_DRAW)
|
||||
|
||||
const posLoc = gl.getAttribLocation(prog, 'position')
|
||||
gl.enableVertexAttribArray(posLoc)
|
||||
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0)
|
||||
|
||||
glRef.current = {
|
||||
gl,
|
||||
uTime: gl.getUniformLocation(prog, 'u_time'),
|
||||
uGlitch: gl.getUniformLocation(prog, 'u_glitch'),
|
||||
uAmp: gl.getUniformLocation(prog, 'u_amp'),
|
||||
uFreq: gl.getUniformLocation(prog, 'u_freq'),
|
||||
}
|
||||
|
||||
startTimeRef.current = Date.now()
|
||||
animRef.current = requestAnimationFrame(render)
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animRef.current)
|
||||
}
|
||||
}, [render])
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height,
|
||||
bgcolor: d3roPalette.bg.crtBezel,
|
||||
borderRadius: '8px',
|
||||
boxShadow: d3roShadow.insetDeep,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Glass surface */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: '2px',
|
||||
borderRadius: '6px',
|
||||
bgcolor: d3roPalette.bg.crtGlass,
|
||||
overflow: 'hidden',
|
||||
boxShadow: d3roShadow.screenGlow,
|
||||
}}
|
||||
>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
// 라이트 모드에서 WebGL 셰이더(다크 전용)를 반전하여 밝은 배경에 어울리게 조정
|
||||
...(isLight && { filter: 'invert(0.88) hue-rotate(180deg)', opacity: 0.9 }),
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glass reflection */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0, left: 0, right: 0, bottom: '50%',
|
||||
background: isLight
|
||||
? 'linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 100%)'
|
||||
: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Content overlay (phosphor text) */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: '16px',
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
color: d3roPalette.accent.amber,
|
||||
textShadow: '0 0 6px rgba(242, 91, 41, 0.4)',
|
||||
pointerEvents: 'none',
|
||||
fontFamily: d3roFontMono,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
82
packages/ui/src/components/ds/InstrumentPanel.tsx
Normal file
82
packages/ui/src/components/ds/InstrumentPanel.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
// src/renderer/components/ds/InstrumentPanel.tsx
|
||||
// 시안 A: 메탈 섀시 컨테이너 — 노이즈 텍스처, 각인 텍스트, 물리적 존재감
|
||||
|
||||
import { Box, Typography } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { d3roPalette, d3roFontMono, d3roShadow, d3roRadius, d3roTypo } from '../../theme'
|
||||
|
||||
interface InstrumentPanelProps {
|
||||
children: React.ReactNode
|
||||
/** 상단 좌측 각인 */
|
||||
engravingLeft?: string
|
||||
/** 상단 우측 각인 */
|
||||
engravingRight?: string
|
||||
/** 하단 중앙 각인 */
|
||||
engravingBottom?: string
|
||||
}
|
||||
|
||||
export function InstrumentPanel({
|
||||
children,
|
||||
engravingLeft = 'D3RO-VOICE SYS.',
|
||||
engravingRight = 'MOD-01 / TERMINAL',
|
||||
engravingBottom = 'LOCAL AI VOICE ASSISTANT',
|
||||
}: InstrumentPanelProps): React.ReactElement {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
bgcolor: d3roPalette.bg.chassis,
|
||||
borderRadius: d3roRadius.outer,
|
||||
p: 3,
|
||||
boxShadow: d3roShadow.chassis,
|
||||
// 메탈 노이즈는 CSS로 시뮬레이션
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderRadius: d3roRadius.outer,
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
||||
opacity: 0.04,
|
||||
mixBlendMode: 'overlay',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 각인 텍스트 */}
|
||||
<Engraving sx={{ top: 12, left: 24 }}>{engravingLeft}</Engraving>
|
||||
<Engraving sx={{ top: 12, right: 24 }}>{engravingRight}</Engraving>
|
||||
<Engraving sx={{ bottom: 12, left: '50%', transform: 'translateX(-50%)' }}>{engravingBottom}</Engraving>
|
||||
|
||||
{/* 콘텐츠 (z-index 5로 노이즈 위) */}
|
||||
<Box sx={{ position: 'relative', zIndex: 5 }}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
function Engraving({ children, sx }: { children: string; sx: Record<string, unknown> }): React.ReactElement {
|
||||
const theme = useTheme()
|
||||
const isLight = theme.palette.mode === 'light'
|
||||
return (
|
||||
<Typography
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
fontSize: d3roTypo.engrave.size,
|
||||
letterSpacing: d3roTypo.engrave.spacing,
|
||||
color: d3roPalette.text.engraving,
|
||||
textShadow: isLight
|
||||
? '0 -1px 0 rgba(0,0,0,0.1)'
|
||||
: '0 1px 0 rgba(255,255,255,0.08)',
|
||||
fontWeight: 700,
|
||||
fontFamily: d3roFontMono,
|
||||
zIndex: 2,
|
||||
userSelect: 'none',
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
51
packages/ui/src/components/ds/Led.tsx
Normal file
51
packages/ui/src/components/ds/Led.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
// src/renderer/components/ds/Led.tsx
|
||||
// 시안 A: LED 인디케이터 — 물리적 LED, 활성 시 glow + pulse
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette } from '../../theme'
|
||||
|
||||
type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'off'
|
||||
|
||||
const LED_COLORS: Record<LedColor, { bg: string; glow: string }> = {
|
||||
amber: { bg: d3roPalette.accent.amber, glow: d3roPalette.accent.amberGlow },
|
||||
green: { bg: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow },
|
||||
red: { bg: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow },
|
||||
orange: { bg: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow },
|
||||
off: { bg: d3roPalette.led.off, glow: 'transparent' },
|
||||
}
|
||||
|
||||
interface LedProps {
|
||||
color?: LedColor
|
||||
pulse?: boolean
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function Led({ color = 'off', pulse = false, size = 8 }: LedProps): React.ReactElement {
|
||||
const c = LED_COLORS[color]
|
||||
const isActive = color !== 'off'
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: '50%',
|
||||
bgcolor: c.bg,
|
||||
flexShrink: 0,
|
||||
boxShadow: isActive
|
||||
? `inset 0 1px 2px rgba(255,255,255,0.5), 0 0 10px ${c.glow}`
|
||||
: 'inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05)',
|
||||
transition: 'all 0.1s',
|
||||
...(pulse && isActive
|
||||
? {
|
||||
animation: 'led-pulse 1.5s ease-in-out infinite',
|
||||
'@keyframes led-pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'50%': { opacity: 0.5 },
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
30
packages/ui/src/components/ds/MetalCard.tsx
Normal file
30
packages/ui/src/components/ds/MetalCard.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// src/renderer/components/ds/MetalCard.tsx
|
||||
// 시안 A+B 융합: 메탈 카드 컨테이너 — 섀시 느낌의 인셋 패널
|
||||
// 토큰 적용: d3roShadow, d3roRadius
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
|
||||
|
||||
interface MetalCardProps {
|
||||
children: React.ReactNode
|
||||
inset?: boolean
|
||||
}
|
||||
|
||||
export function MetalCard({ children, inset = false }: MetalCardProps): React.ReactElement {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: inset ? d3roPalette.bg.inset : d3roPalette.bg.card,
|
||||
borderRadius: inset ? d3roRadius.inner : d3roRadius.card,
|
||||
borderTop: inset ? 'none' : `1px solid ${d3roPalette.border.subtle}`,
|
||||
boxShadow: inset ? d3roShadow.inset : d3roShadow.card,
|
||||
p: inset ? '6px' : 3,
|
||||
overflow: 'hidden',
|
||||
transition: 'background-color 0.2s ease',
|
||||
'&:hover': inset ? {} : { bgcolor: d3roPalette.bg.cardHover },
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
134
packages/ui/src/components/ds/MetalDial.tsx
Normal file
134
packages/ui/src/components/ds/MetalDial.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
// src/renderer/components/ds/MetalDial.tsx
|
||||
// 시안 A: 메탈 다이얼 — 정밀기기 회전 노브, 동심원 그루브, 금속 광택, LED 인디케이터
|
||||
// 보강: 레퍼런스의 conic-gradient 정적 라이팅 + 방향성 그림자 추가
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow } from '../../theme'
|
||||
import { PhosphorText } from './PhosphorText'
|
||||
|
||||
interface MetalDialProps {
|
||||
/** 0.0 ~ 1.0 값 (다이얼 위치) */
|
||||
value?: number
|
||||
/** 라벨 텍스트 */
|
||||
label?: string
|
||||
/** 크기 (px) */
|
||||
size?: number
|
||||
/** LED 인디케이터 색상 */
|
||||
ledColor?: string
|
||||
}
|
||||
|
||||
export function MetalDial({
|
||||
value = 0,
|
||||
label,
|
||||
size = 120,
|
||||
ledColor = d3roPalette.accent.amber,
|
||||
}: MetalDialProps): React.ReactElement {
|
||||
const rotation = value * 270 - 135 // -135° ~ +135° 범위
|
||||
const knobSize = size - 12 // 웰 패딩
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>
|
||||
{/* 다이얼 웰 (inset well) */}
|
||||
<Box
|
||||
sx={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: '50%',
|
||||
bgcolor: d3roPalette.bg.crtBezel,
|
||||
boxShadow: `
|
||||
inset 0 3px 8px rgba(0,0,0,0.8),
|
||||
inset 0 -1px 2px rgba(255,255,255,0.08),
|
||||
0 1px 1px rgba(255,255,255,0.05)
|
||||
`,
|
||||
position: 'relative',
|
||||
p: '6px',
|
||||
}}
|
||||
>
|
||||
{/* 노브 회전체 (동심원 그루브) */}
|
||||
<Box
|
||||
sx={{
|
||||
width: knobSize,
|
||||
height: knobSize,
|
||||
borderRadius: '50%',
|
||||
position: 'absolute',
|
||||
top: 6,
|
||||
left: 6,
|
||||
background: `
|
||||
repeating-radial-gradient(
|
||||
circle at 50% 50%,
|
||||
${d3roPalette.text.disabled} 0px,
|
||||
${d3roPalette.text.disabled} 1px,
|
||||
${d3roPalette.text.label} 1.5px,
|
||||
${d3roPalette.text.label} 2.5px
|
||||
)
|
||||
`,
|
||||
transform: `rotate(${rotation}deg)`,
|
||||
transition: 'transform 0.2s ease-out',
|
||||
}}
|
||||
>
|
||||
{/* 포인터 인디케이터 점 */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
bgcolor: d3roPalette.bg.crtBezel,
|
||||
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.8)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: '50%',
|
||||
bgcolor: ledColor,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 정적 금속 광택 오버레이 (노브와 별개, 회전 안 함) */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: '6px',
|
||||
borderRadius: '50%',
|
||||
pointerEvents: 'none',
|
||||
// 레퍼런스의 핵심: directional light + conic reflections
|
||||
background: `
|
||||
linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.6) 100%),
|
||||
conic-gradient(from 180deg at 50% 50%,
|
||||
rgba(255,255,255,0) 0deg,
|
||||
rgba(255,255,255,0.4) 45deg,
|
||||
rgba(255,255,255,0) 90deg,
|
||||
rgba(255,255,255,0.2) 180deg,
|
||||
rgba(255,255,255,0) 270deg,
|
||||
rgba(255,255,255,0.4) 315deg,
|
||||
rgba(255,255,255,0) 360deg
|
||||
)
|
||||
`,
|
||||
mixBlendMode: 'overlay',
|
||||
// 방향성 그림자: 좌상 하이라이트 + 우하 쉐이드
|
||||
boxShadow: `
|
||||
-4px -4px 8px rgba(255,255,255,0.3),
|
||||
12px 16px 20px rgba(0,0,0,0.7),
|
||||
inset 0 2px 3px rgba(255,255,255,0.8)
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 라벨 */}
|
||||
{label && (
|
||||
<PhosphorText variant="label" sx={{ color: d3roPalette.text.inactive }}>
|
||||
{label}
|
||||
</PhosphorText>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
68
packages/ui/src/components/ds/PhosphorText.tsx
Normal file
68
packages/ui/src/components/ds/PhosphorText.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// src/renderer/components/ds/PhosphorText.tsx
|
||||
// 시안 A: 인광 텍스트 — 앰버 glow, 모노 폰트, CRT 느낌
|
||||
// 확장: title/stat/body/compact/meta/engrave/micro/nano 변형 추가
|
||||
|
||||
import { Typography, type TypographyProps } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono, d3roTypo } from '../../theme'
|
||||
|
||||
type PhosphorVariant =
|
||||
| 'hero' | 'title' | 'value' | 'heading'
|
||||
| 'body' | 'compact' | 'small'
|
||||
| 'meta' | 'label' | 'dim'
|
||||
| 'engrave' | 'micro' | 'nano'
|
||||
|
||||
interface VariantDef {
|
||||
fontSize: string
|
||||
color: string
|
||||
glow: string
|
||||
fontWeight: number
|
||||
letterSpacing: string
|
||||
lineHeight: number
|
||||
textTransform?: 'uppercase' | 'none'
|
||||
}
|
||||
|
||||
const amberGlowStrong = `0 0 8px ${d3roPalette.accent.amberGlow}`
|
||||
const amberGlowMedium = `0 0 6px rgba(242, 91, 41, 0.4)`
|
||||
const amberGlowSoft = `0 0 4px rgba(242, 91, 41, 0.3)`
|
||||
|
||||
const VARIANTS: Record<PhosphorVariant, VariantDef> = {
|
||||
hero: { fontSize: d3roTypo.hero.size, color: d3roPalette.accent.amber, glow: amberGlowStrong, fontWeight: d3roTypo.hero.weight, letterSpacing: d3roTypo.hero.spacing, lineHeight: d3roTypo.hero.line },
|
||||
title: { fontSize: d3roTypo.title.size, color: d3roPalette.accent.amber, glow: amberGlowMedium, fontWeight: d3roTypo.title.weight, letterSpacing: d3roTypo.title.spacing, lineHeight: d3roTypo.title.line },
|
||||
value: { fontSize: d3roTypo.value.size, color: d3roPalette.accent.amber, glow: amberGlowSoft, fontWeight: d3roTypo.value.weight, letterSpacing: d3roTypo.value.spacing, lineHeight: d3roTypo.value.line },
|
||||
heading: { fontSize: d3roTypo.heading.size, color: d3roPalette.text.primary, glow: 'none', fontWeight: d3roTypo.heading.weight, letterSpacing: d3roTypo.heading.spacing, lineHeight: d3roTypo.heading.line },
|
||||
body: { fontSize: d3roTypo.body.size, color: d3roPalette.text.secondary, glow: 'none', fontWeight: d3roTypo.body.weight, letterSpacing: d3roTypo.body.spacing, lineHeight: d3roTypo.body.line },
|
||||
compact: { fontSize: d3roTypo.compact.size, color: d3roPalette.text.primary, glow: 'none', fontWeight: d3roTypo.compact.weight, letterSpacing: d3roTypo.compact.spacing, lineHeight: d3roTypo.compact.line },
|
||||
small: { fontSize: d3roTypo.small.size, color: d3roPalette.text.inactive, glow: 'none', fontWeight: d3roTypo.small.weight, letterSpacing: d3roTypo.small.spacing, lineHeight: d3roTypo.small.line },
|
||||
meta: { fontSize: d3roTypo.meta.size, color: d3roPalette.text.inactive, glow: 'none', fontWeight: d3roTypo.meta.weight, letterSpacing: d3roTypo.meta.spacing, lineHeight: d3roTypo.meta.line, textTransform: 'uppercase' },
|
||||
label: { fontSize: d3roTypo.label.size, color: d3roPalette.text.dimLabel, glow: 'none', fontWeight: d3roTypo.label.weight, letterSpacing: d3roTypo.label.spacing, lineHeight: d3roTypo.label.line, textTransform: 'uppercase' },
|
||||
dim: { fontSize: d3roTypo.label.size, color: d3roPalette.text.inactive, glow: 'none', fontWeight: d3roTypo.body.weight, letterSpacing: d3roTypo.label.spacing, lineHeight: d3roTypo.label.line },
|
||||
engrave: { fontSize: d3roTypo.engrave.size, color: d3roPalette.text.engraving, glow: 'none', fontWeight: d3roTypo.engrave.weight, letterSpacing: d3roTypo.engrave.spacing, lineHeight: d3roTypo.engrave.line, textTransform: 'uppercase' },
|
||||
micro: { fontSize: d3roTypo.micro.size, color: d3roPalette.text.dimLabel, glow: 'none', fontWeight: d3roTypo.micro.weight, letterSpacing: d3roTypo.micro.spacing, lineHeight: d3roTypo.micro.line, textTransform: 'uppercase' },
|
||||
nano: { fontSize: d3roTypo.nano.size, color: d3roPalette.text.inactive, glow: 'none', fontWeight: d3roTypo.nano.weight, letterSpacing: d3roTypo.nano.spacing, lineHeight: d3roTypo.nano.line, textTransform: 'uppercase' },
|
||||
}
|
||||
|
||||
interface PhosphorTextProps extends Omit<TypographyProps, 'variant'> {
|
||||
variant?: PhosphorVariant
|
||||
}
|
||||
|
||||
export function PhosphorText({ variant = 'value', sx, ...props }: PhosphorTextProps): React.ReactElement {
|
||||
const v = VARIANTS[variant]
|
||||
|
||||
return (
|
||||
<Typography
|
||||
{...props}
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: v.fontSize,
|
||||
fontWeight: v.fontWeight,
|
||||
color: v.color,
|
||||
textShadow: v.glow !== 'none' ? v.glow : 'none',
|
||||
letterSpacing: v.letterSpacing,
|
||||
lineHeight: v.lineHeight,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
textTransform: v.textTransform ?? 'none',
|
||||
...sx,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
43
packages/ui/src/components/ds/PhysicalButton.tsx
Normal file
43
packages/ui/src/components/ds/PhysicalButton.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// src/renderer/components/ds/PhysicalButton.tsx
|
||||
// 시안 A: 물리 버튼 — 돌출 그림자, 눌림 피드백, 선택 상태
|
||||
// 토큰 적용: d3roShadow, d3roRadius, d3roTypo
|
||||
|
||||
import { Button, type ButtonProps } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono, d3roShadow, d3roRadius, d3roTypo } from '../../theme'
|
||||
|
||||
interface PhysicalButtonProps extends Omit<ButtonProps, 'variant'> {
|
||||
selected?: boolean
|
||||
}
|
||||
|
||||
export function PhysicalButton({ selected = false, sx, ...props }: PhysicalButtonProps): React.ReactElement {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
sx={{
|
||||
height: 44,
|
||||
bgcolor: selected ? d3roPalette.bg.crtBezel : d3roPalette.bg.chassis,
|
||||
border: 'none',
|
||||
borderRadius: d3roRadius.small,
|
||||
color: selected ? d3roPalette.accent.amber : d3roPalette.text.inactive,
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: d3roTypo.small.size,
|
||||
fontWeight: d3roTypo.small.weight,
|
||||
cursor: 'pointer',
|
||||
boxShadow: selected ? d3roShadow.buttonPressed : d3roShadow.buttonRaised,
|
||||
transform: selected ? 'translateY(1px)' : 'none',
|
||||
transition: 'all 0.05s linear',
|
||||
'&:active': {
|
||||
transform: 'translateY(2px)',
|
||||
boxShadow: d3roShadow.buttonActive,
|
||||
},
|
||||
'&:hover': {
|
||||
bgcolor: selected ? d3roPalette.bg.crtBezel : d3roPalette.bg.cardHover,
|
||||
},
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: d3roTypo.label.spacing,
|
||||
minWidth: 0,
|
||||
...sx,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
69
packages/ui/src/components/ds/ScreenPanel.tsx
Normal file
69
packages/ui/src/components/ds/ScreenPanel.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
// src/renderer/components/ds/ScreenPanel.tsx
|
||||
// 시안 A: CRT 없는 순수 스크린 패널 — 인셋 베젤 + 글래스 반사 + 인광 텍스트용
|
||||
// 레퍼런스의 .display-module > .screen-glass 패턴
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import { d3roPalette, d3roShadow } from '../../theme'
|
||||
|
||||
interface ScreenPanelProps {
|
||||
children: React.ReactNode
|
||||
/** 전체 높이 (px 또는 CSS 값) */
|
||||
height?: number | string
|
||||
}
|
||||
|
||||
export function ScreenPanel({ children, height }: ScreenPanelProps): React.ReactElement {
|
||||
const theme = useTheme()
|
||||
const isLight = theme.palette.mode === 'light'
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
bgcolor: d3roPalette.bg.crtBezel,
|
||||
borderRadius: '12px',
|
||||
boxShadow: d3roShadow.insetDeep,
|
||||
overflow: 'hidden',
|
||||
height,
|
||||
}}
|
||||
>
|
||||
{/* 글래스 배경 */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: '2px',
|
||||
borderRadius: '10px',
|
||||
bgcolor: d3roPalette.bg.crtGlass,
|
||||
boxShadow: d3roShadow.screenGlow,
|
||||
// 상단 반사 (레퍼런스의 .screen-glass::after)
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: '50%',
|
||||
background: isLight
|
||||
? 'linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%)'
|
||||
: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
|
||||
pointerEvents: 'none',
|
||||
zIndex: 10,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 콘텐츠 오버레이 */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
p: 2,
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
12
packages/ui/src/components/ds/index.ts
Normal file
12
packages/ui/src/components/ds/index.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// src/renderer/components/ds/index.ts
|
||||
// 디자인 시스템 컴포넌트 SSOT barrel export
|
||||
|
||||
export { CrtDisplay } from './CrtDisplay'
|
||||
export { InstrumentPanel } from './InstrumentPanel'
|
||||
export { Led } from './Led'
|
||||
export { PhysicalButton } from './PhysicalButton'
|
||||
export { MetalCard } from './MetalCard'
|
||||
export { PhosphorText } from './PhosphorText'
|
||||
export { MetalDial } from './MetalDial'
|
||||
export { ScreenPanel } from './ScreenPanel'
|
||||
export { ButtonGroup } from './ButtonGroup'
|
||||
8
packages/ui/src/index.ts
Normal file
8
packages/ui/src/index.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// packages/ui — barrel export
|
||||
// 개별 sub-path import 권장:
|
||||
// '@d3ro/ui/theme' — d3roPalette, d3roTypo, d3roShadow, d3roRadius 등 토큰
|
||||
// '@d3ro/ui/theme-vars' — 팝업/main 프로세스용 CSS 변수 맵
|
||||
// '@d3ro/ui/components/ds' — CrtDisplay, MetalCard, PhosphorText 등 DS 컴포넌트
|
||||
|
||||
export * from './theme'
|
||||
export * from './components/ds'
|
||||
199
packages/ui/src/theme-vars.ts
Normal file
199
packages/ui/src/theme-vars.ts
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
// 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
|
||||
}
|
||||
|
||||
const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
|
||||
dark: {
|
||||
'--d3-bg-card': '#242427',
|
||||
'--d3-bg-tip': 'rgba(0,0,0,0.85)',
|
||||
'--d3-text-primary': 'rgba(255,255,255,0.87)',
|
||||
'--d3-text-secondary': 'rgba(255,255,255,0.6)',
|
||||
'--d3-text-inactive': 'rgba(255,255,255,0.3)',
|
||||
'--d3-text-muted': 'rgba(255,255,255,0.25)',
|
||||
'--d3-text-dimLabel': '#5c2615',
|
||||
'--d3-border-default': 'rgba(255,255,255,0.08)',
|
||||
'--d3-border-subtle': 'rgba(255,255,255,0.06)',
|
||||
'--d3-border-strong': 'rgba(255,255,255,0.15)',
|
||||
'--d3-accent-main': '#f25b29',
|
||||
'--d3-accent-dim': 'rgba(242,91,41,0.08)',
|
||||
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
|
||||
'--d3-bg-result': '#1e1e1e',
|
||||
'--d3-border-result': 'rgba(255,255,255,0.08)',
|
||||
'--d3-text-result': 'rgba(255,255,255,0.87)',
|
||||
'--d3-action-btn': 'rgba(255,255,255,0.4)',
|
||||
'--d3-action-btn-hover-bg': 'rgba(255,255,255,0.08)',
|
||||
'--d3-action-btn-hover': 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
light: {
|
||||
'--d3-bg-card': '#ffffff',
|
||||
'--d3-bg-tip': 'rgba(255,255,255,0.92)',
|
||||
'--d3-text-primary': 'rgba(0,0,0,0.87)',
|
||||
'--d3-text-secondary': 'rgba(0,0,0,0.6)',
|
||||
'--d3-text-inactive': 'rgba(0,0,0,0.35)',
|
||||
'--d3-text-muted': 'rgba(0,0,0,0.25)',
|
||||
'--d3-text-dimLabel': '#b07040',
|
||||
'--d3-border-default': 'rgba(0,0,0,0.10)',
|
||||
'--d3-border-subtle': 'rgba(0,0,0,0.06)',
|
||||
'--d3-border-strong': 'rgba(0,0,0,0.14)',
|
||||
'--d3-accent-main': '#f25b29',
|
||||
'--d3-accent-dim': 'rgba(242,91,41,0.08)',
|
||||
'--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.12)',
|
||||
'--d3-bg-result': '#ffffff',
|
||||
'--d3-border-result': 'rgba(0,0,0,0.08)',
|
||||
'--d3-text-result': 'rgba(0,0,0,0.87)',
|
||||
'--d3-action-btn': 'rgba(0,0,0,0.4)',
|
||||
'--d3-action-btn-hover-bg': 'rgba(0,0,0,0.06)',
|
||||
'--d3-action-btn-hover': 'rgba(0,0,0,0.7)',
|
||||
},
|
||||
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)',
|
||||
},
|
||||
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)',
|
||||
},
|
||||
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)',
|
||||
},
|
||||
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)',
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 팝업용 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}`
|
||||
}
|
||||
524
packages/ui/src/theme.ts
Normal file
524
packages/ui/src/theme.ts
Normal file
|
|
@ -0,0 +1,524 @@
|
|||
// src/renderer/theme.ts
|
||||
// 08-design-system.md SSOT 기반 MUI 테마.
|
||||
// CSS Custom Properties 기반: d3roPalette가 var()를 사용하여 테마 전환 시 자동 반응.
|
||||
|
||||
import { createTheme, type Theme } from '@mui/material/styles'
|
||||
import type { ThemeMode } from '@d3ro/core/types'
|
||||
|
||||
// ── 테마 키 타입 ────────────────────────────────────────────
|
||||
type ThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'
|
||||
|
||||
// ── 원시 색상값 구조 타입 ────────────────────────────────────
|
||||
interface RawTheme {
|
||||
bg: {
|
||||
app: string
|
||||
card: string
|
||||
cardHover: string
|
||||
elevated: string
|
||||
input: string
|
||||
sidebar: string
|
||||
inset: string
|
||||
chassis: string
|
||||
crtBezel: string
|
||||
crtGlass: string
|
||||
}
|
||||
text: {
|
||||
primary: string
|
||||
secondary: string
|
||||
label: string
|
||||
disabled: string
|
||||
engraving: string
|
||||
inactive: string
|
||||
dimLabel: string
|
||||
muted: string
|
||||
hover: string
|
||||
}
|
||||
border: {
|
||||
subtle: string
|
||||
default: string
|
||||
strong: string
|
||||
}
|
||||
shadow: {
|
||||
card: string
|
||||
buttonBase: string
|
||||
chassis: string
|
||||
inset: string
|
||||
insetDeep: string
|
||||
buttonRaised: string
|
||||
buttonPressed: string
|
||||
screenGlow: string
|
||||
tooltip: string
|
||||
}
|
||||
accent: {
|
||||
main: string
|
||||
dim: string
|
||||
glow: string
|
||||
light: string
|
||||
dark: string
|
||||
crtPhosphor: string
|
||||
crtPhosphorDim: string
|
||||
}
|
||||
}
|
||||
|
||||
// ── 원시 색상값 (raw values) ────────────────────────────────────
|
||||
// CSS 변수에 주입되는 실제 색상값. 컴포넌트에서 직접 사용하지 않는다.
|
||||
const RAW: Record<ThemeKey, RawTheme> = {
|
||||
dark: {
|
||||
bg: { app: '#19191b', card: '#242427', cardHover: '#2a2a2d', elevated: '#2e2e32', input: '#1e1e21', sidebar: '#1e1f21', inset: '#1b1c1e', chassis: '#242528', crtBezel: '#1a1a1c', crtGlass: '#050605' },
|
||||
text: { primary: '#ffffff', secondary: '#8e8e93', label: '#7c7c82', disabled: '#4a4a4e', engraving: '#1a1a1c', inactive: '#77797c', dimLabel: '#5c2615', muted: '#3a3b3f', hover: '#aaaaaa' },
|
||||
border: { subtle: 'rgba(255,255,255,0.04)', default: 'rgba(255,255,255,0.08)', strong: 'rgba(255,255,255,0.12)' },
|
||||
shadow: {
|
||||
card: '0 8px 30px rgba(0,0,0,0.3)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06)',
|
||||
chassis: '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #111111, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.4)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.05)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #000, 0 1px 1px rgba(255,255,255,0.1)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.2)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #000',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.8)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.4)',
|
||||
},
|
||||
accent: { main: '#f25b29', dim: 'rgba(242,91,41,0.15)', glow: 'rgba(242,91,41,0.6)', light: '#ff7a4d', dark: '#c44a22', crtPhosphor: '#f25b29', crtPhosphorDim: '#c44a22' },
|
||||
},
|
||||
light: {
|
||||
bg: { app: '#f5f5f7', card: '#ffffff', cardHover: '#f7f7f9', elevated: '#f0f0f2', input: '#ffffff', sidebar: '#eeeef0', inset: '#e8e8ea', chassis: '#e2e2e5', crtBezel: '#d5d5d8', crtGlass: '#f0f0f2' },
|
||||
text: { primary: '#1a1a1c', secondary: '#6e6e73', label: '#8e8e93', disabled: '#c7c7cc', engraving: '#d0d0d3', inactive: '#8e8e93', dimLabel: '#b07040', muted: '#b0b0b4', hover: '#555555' },
|
||||
border: { subtle: 'rgba(0,0,0,0.06)', default: 'rgba(0,0,0,0.10)', strong: 'rgba(0,0,0,0.16)' },
|
||||
shadow: {
|
||||
card: '0 4px 20px rgba(0,0,0,0.06)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8)',
|
||||
chassis: '0 40px 80px -20px rgba(0,0,0,0.08), 0 12px 0 #d5d5d8, 0 13px 4px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.8), inset 0 -1px 2px rgba(0,0,0,0.04)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.08), 0 1px 1px rgba(255,255,255,0.6)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px rgba(255,255,255,0.8)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.8), inset 0 -1px 2px rgba(0,0,0,0.04)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06)',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.06)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.08)',
|
||||
},
|
||||
accent: { main: '#f25b29', dim: 'rgba(242,91,41,0.15)', glow: 'rgba(242,91,41,0.6)', light: '#ff7a4d', dark: '#c44a22', crtPhosphor: '#f25b29', crtPhosphorDim: '#c44a22' },
|
||||
},
|
||||
// ── Nord (https://www.nordtheme.com/) ──────────────────────
|
||||
nord: {
|
||||
bg: { app: '#2e3440', card: '#3b4252', cardHover: '#434c5e', elevated: '#3b4252', input: '#3b4252', sidebar: '#2e3440', inset: '#2e3440', chassis: '#3b4252', crtBezel: '#2e3440', crtGlass: '#242831' },
|
||||
text: { primary: '#eceff4', secondary: '#d8dee9', label: '#adb5c7', disabled: '#4c566a', engraving: '#2e3440', inactive: '#7b88a1', dimLabel: '#5e81ac', muted: '#434c5e', hover: '#e5e9f0' },
|
||||
border: { subtle: 'rgba(216,222,233,0.06)', default: 'rgba(216,222,233,0.10)', strong: 'rgba(216,222,233,0.16)' },
|
||||
shadow: {
|
||||
card: '0 8px 30px rgba(0,0,0,0.35)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06)',
|
||||
chassis: '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #242831, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.4)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.04)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.8), inset 0 0 0 1px #242831, 0 1px 1px rgba(255,255,255,0.08)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.2)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.7), inset 0 0 0 1px #242831',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.6)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.4)',
|
||||
},
|
||||
// Nord Frost: #88c0d0 (차가운 시안)
|
||||
accent: { main: '#88c0d0', dim: 'rgba(136,192,208,0.15)', glow: 'rgba(136,192,208,0.6)', light: '#a3d0de', dark: '#6aacbe', crtPhosphor: '#88c0d0', crtPhosphorDim: '#5e9daf' },
|
||||
},
|
||||
// ── Solarized Dark (https://ethanschoonover.com/solarized/) ─
|
||||
solarized: {
|
||||
bg: { app: '#002b36', card: '#073642', cardHover: '#0d4250', elevated: '#073642', input: '#073642', sidebar: '#002b36', inset: '#001f28', chassis: '#073642', crtBezel: '#002b36', crtGlass: '#001f28' },
|
||||
text: { primary: '#eee8d5', secondary: '#93a1a1', label: '#839496', disabled: '#586e75', engraving: '#002b36', inactive: '#657b83', dimLabel: '#7a6c2e', muted: '#073642', hover: '#b2c0bf' },
|
||||
border: { subtle: 'rgba(131,148,150,0.08)', default: 'rgba(131,148,150,0.13)', strong: 'rgba(131,148,150,0.20)' },
|
||||
shadow: {
|
||||
card: '0 8px 30px rgba(0,0,0,0.4)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05)',
|
||||
chassis: '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #001f28, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.4)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #001f28, 0 1px 1px rgba(255,255,255,0.06)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06), inset 0 -1px 2px rgba(0,0,0,0.2)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #001f28',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.7)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.4)',
|
||||
},
|
||||
// Solarized yellow: #b58900 (따뜻한 골드)
|
||||
accent: { main: '#b58900', dim: 'rgba(181,137,0,0.15)', glow: 'rgba(181,137,0,0.6)', light: '#d4a017', dark: '#8a6800', crtPhosphor: '#b58900', crtPhosphorDim: '#8a6800' },
|
||||
},
|
||||
// ── Catppuccin Mocha (https://catppuccin.com/) ──────────────
|
||||
catppuccin: {
|
||||
bg: { app: '#1e1e2e', card: '#313244', cardHover: '#3a3a54', elevated: '#313244', input: '#181825', sidebar: '#181825', inset: '#11111b', chassis: '#313244', crtBezel: '#1e1e2e', crtGlass: '#11111b' },
|
||||
text: { primary: '#cdd6f4', secondary: '#bac2de', label: '#a6adc8', disabled: '#585b70', engraving: '#11111b', inactive: '#7f849c', dimLabel: '#585b70', muted: '#313244', hover: '#e6e9f8' },
|
||||
border: { subtle: 'rgba(205,214,244,0.04)', default: 'rgba(205,214,244,0.08)', strong: 'rgba(205,214,244,0.14)' },
|
||||
shadow: {
|
||||
card: '0 8px 30px rgba(0,0,0,0.4)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05)',
|
||||
chassis: '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #11111b, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.4)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #11111b, 0 1px 1px rgba(255,255,255,0.06)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06), inset 0 -1px 2px rgba(0,0,0,0.2)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #11111b',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.7)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.4)',
|
||||
},
|
||||
// Catppuccin Mauve: #cba6f7 (보라 파스텔)
|
||||
accent: { main: '#cba6f7', dim: 'rgba(203,166,247,0.15)', glow: 'rgba(203,166,247,0.6)', light: '#dfc0ff', dark: '#a67fd4', crtPhosphor: '#cba6f7', crtPhosphorDim: '#a67fd4' },
|
||||
},
|
||||
// ── Dracula (https://draculatheme.com/) ─────────────────────
|
||||
dracula: {
|
||||
bg: { app: '#282a36', card: '#44475a', cardHover: '#4f5266', elevated: '#383a4a', input: '#383a4a', sidebar: '#21222c', inset: '#21222c', chassis: '#44475a', crtBezel: '#282a36', crtGlass: '#1e2029' },
|
||||
text: { primary: '#f8f8f2', secondary: '#a9b0d0', label: '#8891b5', disabled: '#6272a4', engraving: '#21222c', inactive: '#6272a4', dimLabel: '#6272a4', muted: '#44475a', hover: '#ffffff' },
|
||||
border: { subtle: 'rgba(248,248,242,0.04)', default: 'rgba(248,248,242,0.08)', strong: 'rgba(248,248,242,0.14)' },
|
||||
shadow: {
|
||||
card: '0 8px 30px rgba(0,0,0,0.4)',
|
||||
buttonBase: '0 2px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06)',
|
||||
chassis: '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #1e2029, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.4)',
|
||||
inset: 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
|
||||
insetDeep: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #1e2029, 0 1px 1px rgba(255,255,255,0.08)',
|
||||
buttonRaised: '0 3px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 -1px 2px rgba(0,0,0,0.2)',
|
||||
buttonPressed: 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #1e2029',
|
||||
screenGlow: 'inset 0 0 20px rgba(0,0,0,0.7)',
|
||||
tooltip: '0 8px 24px rgba(0,0,0,0.4)',
|
||||
},
|
||||
// Dracula Purple: #bd93f9 (시그니처 퍼플)
|
||||
accent: { main: '#bd93f9', dim: 'rgba(189,147,249,0.15)', glow: 'rgba(189,147,249,0.6)', light: '#d4b8ff', dark: '#9a70e0', crtPhosphor: '#bd93f9', crtPhosphorDim: '#9a70e0' },
|
||||
},
|
||||
}
|
||||
|
||||
// ── SSOT: d3roPalette — CSS Custom Properties로 테마 반응형 ──
|
||||
// 컴포넌트에서 이 객체만 import하면 테마 자동 전환.
|
||||
export const d3roPalette = {
|
||||
bg: {
|
||||
app: 'var(--d3-bg-app)',
|
||||
card: 'var(--d3-bg-card)',
|
||||
cardHover: 'var(--d3-bg-cardHover)',
|
||||
elevated: 'var(--d3-bg-elevated)',
|
||||
input: 'var(--d3-bg-input)',
|
||||
sidebar: 'var(--d3-bg-sidebar)',
|
||||
inset: 'var(--d3-bg-inset)',
|
||||
chassis: 'var(--d3-bg-chassis)',
|
||||
crtBezel: 'var(--d3-bg-crtBezel)',
|
||||
crtGlass: 'var(--d3-bg-crtGlass)',
|
||||
},
|
||||
accent: {
|
||||
amber: 'var(--d3-accent-main)',
|
||||
amberDim: 'var(--d3-accent-dim)',
|
||||
amberGlow: 'var(--d3-accent-glow)',
|
||||
},
|
||||
tag: {
|
||||
purple: '#b854f5',
|
||||
purpleBg: 'rgba(184, 84, 245, 0.12)',
|
||||
orange: '#f59e0b',
|
||||
orangeBg: 'rgba(245, 158, 11, 0.12)',
|
||||
red: '#ef4444',
|
||||
redBg: 'rgba(239, 68, 68, 0.12)',
|
||||
green: '#22c55e',
|
||||
greenBg: 'rgba(34, 197, 94, 0.12)',
|
||||
greenGlow: 'rgba(34, 197, 94, 0.6)',
|
||||
redGlow: 'rgba(239, 68, 68, 0.6)',
|
||||
orangeGlow: 'rgba(245, 158, 11, 0.6)',
|
||||
},
|
||||
text: {
|
||||
primary: 'var(--d3-text-primary)',
|
||||
secondary: 'var(--d3-text-secondary)',
|
||||
label: 'var(--d3-text-label)',
|
||||
disabled: 'var(--d3-text-disabled)',
|
||||
engraving: 'var(--d3-text-engraving)',
|
||||
inactive: 'var(--d3-text-inactive)',
|
||||
dimLabel: 'var(--d3-text-dimLabel)',
|
||||
muted: 'var(--d3-text-muted)',
|
||||
hover: 'var(--d3-text-hover)',
|
||||
},
|
||||
border: {
|
||||
subtle: 'var(--d3-border-subtle)',
|
||||
default: 'var(--d3-border-default)',
|
||||
strong: 'var(--d3-border-strong)',
|
||||
},
|
||||
crt: {
|
||||
phosphor: 'var(--d3-accent-crtPhosphor)',
|
||||
phosphorDim: 'var(--d3-accent-crtPhosphorDim)',
|
||||
scanline: 'rgba(0, 0, 0, 0.15)',
|
||||
bg: 'var(--d3-bg-chassis)',
|
||||
},
|
||||
led: {
|
||||
off: '#111111',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const d3roFontSans = [
|
||||
'-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto',
|
||||
'"Helvetica Neue"', 'Arial', 'sans-serif',
|
||||
].join(',')
|
||||
|
||||
export const d3roFontMono = [
|
||||
'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas',
|
||||
'"Liberation Mono"', 'monospace',
|
||||
].join(',')
|
||||
|
||||
// ── SSOT: 타이포그래피 토큰 ─────────────────────────────
|
||||
export const d3roTypo = {
|
||||
hero: { size: '42px', weight: 300, spacing: '-2px', line: 1 },
|
||||
title: { size: '28px', weight: 300, spacing: '-1px', line: 1.2 },
|
||||
value: { size: '20px', weight: 400, spacing: '0.02em', line: 1 },
|
||||
heading: { size: '16px', weight: 600, spacing: '0.02em', line: 1.4 },
|
||||
body: { size: '14px', weight: 400, spacing: '0.01em', line: 1.5 },
|
||||
compact: { size: '13px', weight: 400, spacing: '0.01em', line: 1.5 },
|
||||
small: { size: '12px', weight: 600, spacing: '0.03em', line: 1.4 },
|
||||
meta: { size: '11px', weight: 600, spacing: '0.05em', line: 1.3 },
|
||||
label: { size: '10px', weight: 700, spacing: '2px', line: 1.2 },
|
||||
engrave: { size: '9px', weight: 700, spacing: '1.5px', line: 1 },
|
||||
micro: { size: '8px', weight: 700, spacing: '1.5px', line: 1 },
|
||||
nano: { size: '7px', weight: 700, spacing: '0.5px', line: 1 },
|
||||
} as const
|
||||
|
||||
// ── SSOT: 그림자 토큰 (CSS Custom Properties 기반, 테마 자동 전환) ───
|
||||
export const d3roShadow = {
|
||||
chassis: 'var(--d3-shadow-chassis)',
|
||||
card: 'var(--d3-shadow-card)',
|
||||
inset: 'var(--d3-shadow-inset)',
|
||||
insetDeep: 'var(--d3-shadow-insetDeep)',
|
||||
buttonRaised: 'var(--d3-shadow-buttonRaised)',
|
||||
buttonPressed: 'var(--d3-shadow-buttonPressed)',
|
||||
buttonActive: 'var(--d3-shadow-buttonPressed)',
|
||||
dialog: 'var(--d3-shadow-card)',
|
||||
tooltip: 'var(--d3-shadow-tooltip)',
|
||||
screenGlow: 'var(--d3-shadow-screenGlow)',
|
||||
} as const
|
||||
|
||||
// ── SSOT: 반경 토큰 ────────────────────────────────────
|
||||
export const d3roRadius = {
|
||||
outer: '24px',
|
||||
card: '22px',
|
||||
inner: '12px',
|
||||
button: '8px',
|
||||
small: '6px',
|
||||
xs: '4px',
|
||||
pill: '999px',
|
||||
} as const
|
||||
|
||||
// ── CSS Custom Properties 생성 ──────────────────────────
|
||||
function buildCssVars(key: ThemeKey): Record<string, string> {
|
||||
const r = RAW[key]
|
||||
return {
|
||||
'--d3-bg-app': r.bg.app,
|
||||
'--d3-bg-card': r.bg.card,
|
||||
'--d3-bg-cardHover': r.bg.cardHover,
|
||||
'--d3-bg-elevated': r.bg.elevated,
|
||||
'--d3-bg-input': r.bg.input,
|
||||
'--d3-bg-sidebar': r.bg.sidebar,
|
||||
'--d3-bg-inset': r.bg.inset,
|
||||
'--d3-bg-chassis': r.bg.chassis,
|
||||
'--d3-bg-crtBezel': r.bg.crtBezel,
|
||||
'--d3-bg-crtGlass': r.bg.crtGlass,
|
||||
'--d3-text-primary': r.text.primary,
|
||||
'--d3-text-secondary': r.text.secondary,
|
||||
'--d3-text-label': r.text.label,
|
||||
'--d3-text-disabled': r.text.disabled,
|
||||
'--d3-text-engraving': r.text.engraving,
|
||||
'--d3-text-inactive': r.text.inactive,
|
||||
'--d3-text-dimLabel': r.text.dimLabel,
|
||||
'--d3-text-muted': r.text.muted,
|
||||
'--d3-text-hover': r.text.hover,
|
||||
'--d3-border-subtle': r.border.subtle,
|
||||
'--d3-border-default': r.border.default,
|
||||
'--d3-border-strong': r.border.strong,
|
||||
'--d3-shadow-card': r.shadow.card,
|
||||
'--d3-shadow-buttonBase': r.shadow.buttonBase,
|
||||
'--d3-shadow-chassis': r.shadow.chassis,
|
||||
'--d3-shadow-inset': r.shadow.inset,
|
||||
'--d3-shadow-insetDeep': r.shadow.insetDeep,
|
||||
'--d3-shadow-buttonRaised': r.shadow.buttonRaised,
|
||||
'--d3-shadow-buttonPressed': r.shadow.buttonPressed,
|
||||
'--d3-shadow-screenGlow': r.shadow.screenGlow,
|
||||
'--d3-shadow-tooltip': r.shadow.tooltip,
|
||||
'--d3-accent-main': r.accent.main,
|
||||
'--d3-accent-dim': r.accent.dim,
|
||||
'--d3-accent-glow': r.accent.glow,
|
||||
'--d3-accent-light': r.accent.light,
|
||||
'--d3-accent-dark': r.accent.dark,
|
||||
'--d3-accent-crtPhosphor': r.accent.crtPhosphor,
|
||||
'--d3-accent-crtPhosphorDim': r.accent.crtPhosphorDim,
|
||||
}
|
||||
}
|
||||
|
||||
// ── 테마 팩토리 ───────────────────────────────────────────
|
||||
function createD3ROTheme(key: ThemeKey): Theme {
|
||||
// MUI palette.mode는 'dark' | 'light'만 허용. light 외 모두 dark 기반.
|
||||
const muiMode: 'dark' | 'light' = key === 'light' ? 'light' : 'dark'
|
||||
const r = RAW[key]
|
||||
const cssVars = buildCssVars(key)
|
||||
|
||||
// 동적 accent 색상 (CSS 변수가 아직 주입되기 전이므로 RAW 값 직접 사용)
|
||||
const accentMain = r.accent.main
|
||||
const accentDim = r.accent.dim
|
||||
const accentLight = r.accent.light
|
||||
const accentDark = r.accent.dark
|
||||
|
||||
return createTheme({
|
||||
palette: {
|
||||
mode: muiMode,
|
||||
primary: { main: accentMain, light: accentLight, dark: accentDark, contrastText: '#fff' },
|
||||
secondary: { main: d3roPalette.tag.purple, light: '#d084ff', dark: '#8a3cc4' },
|
||||
error: { main: d3roPalette.tag.red },
|
||||
warning: { main: d3roPalette.tag.orange },
|
||||
success: { main: d3roPalette.tag.green },
|
||||
background: { default: r.bg.app, paper: r.bg.card },
|
||||
text: { primary: r.text.primary, secondary: r.text.secondary, disabled: r.text.disabled },
|
||||
divider: r.border.default,
|
||||
},
|
||||
typography: {
|
||||
fontFamily: d3roFontSans,
|
||||
h4: { fontWeight: 700, fontSize: '22px', lineHeight: 1.3 },
|
||||
h5: { fontWeight: 700, fontSize: '18px', lineHeight: 1.4 },
|
||||
h6: { fontWeight: 600, fontSize: '14px', lineHeight: 1.5 },
|
||||
subtitle1: { fontWeight: 500, fontSize: '18px', lineHeight: 1.4 },
|
||||
body1: { fontSize: '14px', lineHeight: 1.5 },
|
||||
body2: { fontSize: '12px', lineHeight: 1.4 },
|
||||
button: { textTransform: 'none' as const, fontWeight: 600, fontSize: '14px' },
|
||||
caption: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' as const, color: r.text.label },
|
||||
overline: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' as const, lineHeight: 1.2 },
|
||||
},
|
||||
shape: { borderRadius: 22 },
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
':root': cssVars,
|
||||
body: { backgroundColor: r.bg.app, color: r.text.primary },
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: { disableElevation: true },
|
||||
styleOverrides: {
|
||||
root: {
|
||||
textTransform: 'none', fontWeight: 600, borderRadius: 10, padding: '10px 20px',
|
||||
transition: 'transform 0.05s linear, box-shadow 0.05s linear',
|
||||
boxShadow: r.shadow.buttonBase,
|
||||
'&:active': { transform: 'translateY(2px)', boxShadow: 'var(--d3-shadow-buttonPressed)' },
|
||||
},
|
||||
containedPrimary: {
|
||||
color: '#fff',
|
||||
'&:hover': { backgroundColor: accentDark },
|
||||
},
|
||||
outlined: {
|
||||
borderColor: r.border.strong,
|
||||
color: r.text.primary,
|
||||
'&:hover': { borderColor: accentMain, color: accentMain },
|
||||
},
|
||||
containedSecondary: {
|
||||
backgroundColor: r.bg.elevated,
|
||||
color: r.text.primary,
|
||||
'&:hover': { backgroundColor: muiMode === 'dark' ? '#353539' : '#e5e5e7' },
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
defaultProps: { elevation: 0 },
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: r.bg.card, borderRadius: 22,
|
||||
borderTop: `1px solid ${r.border.subtle}`,
|
||||
boxShadow: r.shadow.card,
|
||||
transition: 'background-color 0.2s ease',
|
||||
'&:hover': { backgroundColor: r.bg.cardHover },
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: { borderRadius: 999, fontWeight: 700, fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', height: 24 },
|
||||
colorPrimary: { backgroundColor: accentDim, color: accentMain },
|
||||
colorSecondary: { backgroundColor: d3roPalette.tag.purpleBg, color: d3roPalette.tag.purple },
|
||||
colorSuccess: { backgroundColor: d3roPalette.tag.greenBg, color: d3roPalette.tag.green },
|
||||
colorError: { backgroundColor: d3roPalette.tag.redBg, color: d3roPalette.tag.red },
|
||||
colorWarning: { backgroundColor: d3roPalette.tag.orangeBg, color: d3roPalette.tag.orange },
|
||||
},
|
||||
},
|
||||
MuiDrawer: { styleOverrides: { paper: { width: 240, backgroundColor: r.bg.app, borderRight: `1px solid ${r.border.subtle}` } } },
|
||||
MuiListItemButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 10, marginLeft: 8, marginRight: 8,
|
||||
'&.Mui-selected': { backgroundColor: accentDim, color: accentMain, fontWeight: 600, '&:hover': { backgroundColor: accentDim } },
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiDialog: {
|
||||
styleOverrides: {
|
||||
paper: {
|
||||
backgroundColor: r.bg.card, borderRadius: 22,
|
||||
border: `1px solid ${r.border.subtle}`,
|
||||
boxShadow: 'var(--d3-shadow-card)',
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
defaultProps: { size: 'small', variant: 'outlined' },
|
||||
styleOverrides: {
|
||||
root: {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
backgroundColor: r.bg.input, borderRadius: 10,
|
||||
color: r.text.primary,
|
||||
'& fieldset': { borderColor: r.border.default },
|
||||
'&:hover fieldset': { borderColor: r.border.strong },
|
||||
'&.Mui-focused fieldset': { borderColor: accentMain },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiSelect: {
|
||||
styleOverrides: {
|
||||
select: { color: r.text.primary },
|
||||
icon: { color: r.text.secondary },
|
||||
},
|
||||
},
|
||||
MuiInputLabel: {
|
||||
styleOverrides: {
|
||||
root: { color: r.text.secondary, '&.Mui-focused': { color: accentMain } },
|
||||
},
|
||||
},
|
||||
MuiFormControlLabel: {
|
||||
styleOverrides: {
|
||||
label: { color: r.text.primary, fontSize: '14px' },
|
||||
},
|
||||
},
|
||||
MuiSwitch: {
|
||||
styleOverrides: {
|
||||
switchBase: {
|
||||
'&.Mui-checked': { color: accentMain },
|
||||
'&.Mui-checked + .MuiSwitch-track': { backgroundColor: accentMain },
|
||||
},
|
||||
track: { backgroundColor: r.text.disabled },
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
color: r.text.primary,
|
||||
'&.Mui-selected': { backgroundColor: accentDim },
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTooltip: {
|
||||
defaultProps: { arrow: true },
|
||||
styleOverrides: {
|
||||
tooltip: { backgroundColor: r.bg.elevated, color: r.text.primary, fontSize: '12px', borderRadius: 8, border: `1px solid ${r.border.subtle}` },
|
||||
},
|
||||
},
|
||||
MuiTabs: { styleOverrides: { indicator: { backgroundColor: accentMain } } },
|
||||
MuiTab: { styleOverrides: { root: { textTransform: 'none', fontWeight: 500, fontSize: '14px', '&.Mui-selected': { color: accentMain, fontWeight: 600 } } } },
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ── Export ─────────────────────────────────────────────────
|
||||
export const themes: Record<ThemeKey, Theme> = {
|
||||
dark: createD3ROTheme('dark'),
|
||||
light: createD3ROTheme('light'),
|
||||
nord: createD3ROTheme('nord'),
|
||||
solarized: createD3ROTheme('solarized'),
|
||||
catppuccin: createD3ROTheme('catppuccin'),
|
||||
dracula: createD3ROTheme('dracula'),
|
||||
}
|
||||
|
||||
// 하위 호환 export
|
||||
export const darkTheme = themes.dark
|
||||
export const lightTheme = themes.light
|
||||
|
||||
export function getTheme(mode: ThemeMode, prefersDark = true): Theme {
|
||||
if (mode === 'auto') return prefersDark ? themes.dark : themes.light
|
||||
return themes[mode as ThemeKey] ?? themes.dark
|
||||
}
|
||||
|
||||
export function getModePalette(mode: ThemeMode): RawTheme {
|
||||
return RAW[mode as ThemeKey] ?? RAW.dark
|
||||
}
|
||||
9
packages/ui/tsconfig.json
Normal file
9
packages/ui/tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue