mirror of
https://github.com/NanmiCoder/cc-haha
synced 2026-07-16 13:03:31 +08:00
76823047f4
This introduces a persisted light/dark appearance setting, maps the desktop shell onto semantic theme tokens, and reworks the highest-traffic chat/settings surfaces so the new dark mode is usable without regressing the original light theme. The same pass tightens markdown rendering for chat replies by improving inline code, table overflow handling, and safe external-link behavior so dark-mode content stays legible in real conversations. Constraint: Preserve the existing light theme while adding a user-selectable dark theme in Settings > General Constraint: Avoid introducing new dependencies for styling or markdown handling Rejected: Replacing the light palette with a single dual-purpose palette | would risk broad visual regressions across the existing desktop UI Rejected: Implementing dark mode only for shell chrome | leaves chat markdown, diffs, and permission flows visually broken Confidence: high Scope-risk: moderate Reversibility: clean Directive: New desktop UI should use semantic theme variables instead of hard-coded color literals so both themes stay aligned Tested: bun run lint; bun run test; bun run build; browser review of theme switching, provider/permission states, and chat surfaces Not-tested: Prototype-style pages with remaining hard-coded colors (scheduled/session control mock surfaces) were not fully normalized in this change
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import type { ButtonHTMLAttributes, ReactNode } from 'react'
|
|
|
|
type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
|
|
|
|
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
variant?: ButtonVariant
|
|
size?: 'sm' | 'md' | 'lg'
|
|
loading?: boolean
|
|
icon?: ReactNode
|
|
}
|
|
|
|
const variantStyles: Record<ButtonVariant, string> = {
|
|
primary:
|
|
'bg-[image:var(--gradient-btn-primary)] text-[var(--color-btn-primary-fg)] shadow-[var(--shadow-button-primary)] hover:bg-[image:var(--gradient-btn-primary-hover)] hover:brightness-105 active:translate-y-[1px]',
|
|
secondary:
|
|
'bg-[var(--color-surface)] text-[var(--color-text-primary)] border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)]',
|
|
danger:
|
|
'bg-[var(--color-error)] text-white hover:opacity-90',
|
|
ghost:
|
|
'bg-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]',
|
|
}
|
|
|
|
const sizeStyles = {
|
|
sm: 'px-2 py-1 text-xs',
|
|
md: 'px-4 py-2 text-sm',
|
|
lg: 'px-5 py-2.5 text-sm',
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
loading = false,
|
|
icon,
|
|
disabled,
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
disabled={disabled || loading}
|
|
className={`
|
|
inline-flex items-center justify-center gap-1.5 rounded-[var(--radius-md)]
|
|
font-medium transition-colors duration-150 cursor-pointer
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
${variantStyles[variant]} ${sizeStyles[size]} ${className}
|
|
`}
|
|
{...props}
|
|
>
|
|
{loading ? <Spinner /> : icon}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function Spinner() {
|
|
return (
|
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
)
|
|
}
|