141 lines
2.8 KiB
TypeScript
141 lines
2.8 KiB
TypeScript
export type ProviderId = 'all' | 'claudeCode' | 'codex'
|
|
|
|
export interface HeatmapPalette {
|
|
empty: string
|
|
steps: string[]
|
|
}
|
|
|
|
export interface ChartTheme {
|
|
areaStroke: string
|
|
areaFill: string
|
|
trend: string
|
|
pie: string[]
|
|
barPrimary: string
|
|
barSecondary: string
|
|
line: string
|
|
}
|
|
|
|
export interface ButtonTheme {
|
|
activeBackground: string
|
|
activeText: string
|
|
}
|
|
|
|
export interface ToolTheme {
|
|
id: ProviderId
|
|
label: string
|
|
accent: string
|
|
accentContrast: string
|
|
accentMuted: string
|
|
secondary: string
|
|
tertiary: string
|
|
focusRing: string
|
|
button: ButtonTheme
|
|
chart: ChartTheme
|
|
heatmap: HeatmapPalette
|
|
emphasis: {
|
|
cost: string
|
|
}
|
|
}
|
|
|
|
const claudeTheme: ToolTheme = {
|
|
id: 'claudeCode',
|
|
label: 'Claude Code',
|
|
accent: '#c15f3c',
|
|
accentContrast: '#1a100d',
|
|
accentMuted: '#d68b6b',
|
|
secondary: '#b1ada1',
|
|
tertiary: '#f4f3ee',
|
|
focusRing: '#c15f3c',
|
|
button: {
|
|
activeBackground: '#c15f3c',
|
|
activeText: '#1a100d',
|
|
},
|
|
chart: {
|
|
areaStroke: '#c15f3c',
|
|
areaFill: '#c15f3c',
|
|
trend: '#b1ada1',
|
|
pie: ['#c15f3c', '#d68b6b', '#b1ada1', '#8d5738', '#f4f3ee'],
|
|
barPrimary: '#c15f3c',
|
|
barSecondary: '#b1ada1',
|
|
line: '#f4f3ee',
|
|
},
|
|
heatmap: {
|
|
empty: '#1f2937',
|
|
steps: ['#4a3328', '#6b4530', '#8d5738', '#c15f3c'],
|
|
},
|
|
emphasis: {
|
|
cost: '#c15f3c',
|
|
},
|
|
}
|
|
|
|
const codexTheme: ToolTheme = {
|
|
id: 'codex',
|
|
label: 'Codex',
|
|
accent: '#f5f5f5',
|
|
accentContrast: '#111827',
|
|
accentMuted: '#d1d5db',
|
|
secondary: '#9ca3af',
|
|
tertiary: '#6b7280',
|
|
focusRing: '#f5f5f5',
|
|
button: {
|
|
activeBackground: '#f5f5f5',
|
|
activeText: '#111827',
|
|
},
|
|
chart: {
|
|
areaStroke: '#f5f5f5',
|
|
areaFill: '#f5f5f5',
|
|
trend: '#d1d5db',
|
|
pie: ['#f5f5f5', '#d1d5db', '#9ca3af', '#6b7280', '#374151'],
|
|
barPrimary: '#f5f5f5',
|
|
barSecondary: '#9ca3af',
|
|
line: '#e5e7eb',
|
|
},
|
|
heatmap: {
|
|
empty: '#111827',
|
|
steps: ['#1f2937', '#374151', '#4b5563', '#f5f5f5'],
|
|
},
|
|
emphasis: {
|
|
cost: '#f5f5f5',
|
|
},
|
|
}
|
|
|
|
const combinedTheme: ToolTheme = {
|
|
id: 'all',
|
|
label: 'All Tools',
|
|
accent: '#9ca3af',
|
|
accentContrast: '#111827',
|
|
accentMuted: '#6b7280',
|
|
secondary: '#6b7280',
|
|
tertiary: '#e5e7eb',
|
|
focusRing: '#9ca3af',
|
|
button: {
|
|
activeBackground: '#9ca3af',
|
|
activeText: '#111827',
|
|
},
|
|
chart: {
|
|
areaStroke: '#9ca3af',
|
|
areaFill: '#9ca3af',
|
|
trend: '#6b7280',
|
|
pie: ['#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280', '#4b5563'],
|
|
barPrimary: '#9ca3af',
|
|
barSecondary: '#6b7280',
|
|
line: '#e5e7eb',
|
|
},
|
|
heatmap: {
|
|
empty: '#1f2937',
|
|
steps: ['#374151', '#4b5563', '#6b7280', '#9ca3af'],
|
|
},
|
|
emphasis: {
|
|
cost: '#9ca3af',
|
|
},
|
|
}
|
|
|
|
export const toolThemes: Record<ProviderId, ToolTheme> = {
|
|
all: combinedTheme,
|
|
claudeCode: claudeTheme,
|
|
codex: codexTheme,
|
|
}
|
|
|
|
export const getToolTheme = (provider: ProviderId): ToolTheme => {
|
|
return toolThemes[provider] ?? toolThemes.all
|
|
}
|