fix(web): readable light-mode contrast for warning surfaces

This commit is contained in:
r09722050akabennett 2026-04-29 15:22:02 +08:00
parent c86671c675
commit d0772b8074
3 changed files with 10 additions and 4 deletions

View file

@ -269,7 +269,7 @@ export const RightPanel = () => {
<div className="flex items-center gap-2.5 border-b border-border-subtle bg-elevated/50 px-4 py-3">
<div className="ml-auto flex items-center gap-2">
{!isAgentReady && (
<span className="rounded-full border border-amber-500/30 bg-amber-500/15 px-2 py-1 text-[11px] text-amber-300">
<span className="rounded-full border border-amber-500/30 bg-amber-500/15 px-2 py-1 text-[11px] text-amber-700 dark:text-amber-300">
Configure AI
</span>
)}
@ -283,7 +283,7 @@ export const RightPanel = () => {
{/* Status / errors */}
{agentError && (
<div className="flex items-center gap-2 border-b border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
<div className="flex items-center gap-2 border-b border-rose-500/30 bg-rose-500/10 px-4 py-3 text-sm text-rose-700 dark:text-rose-100">
<AlertTriangle className="h-4 w-4" />
<span>{agentError}</span>
</div>
@ -445,7 +445,7 @@ export const RightPanel = () => {
)}
</div>
{!isAgentReady && !isAgentInitializing && (
<div className="mt-2 flex items-center gap-2 text-xs text-amber-200">
<div className="mt-2 flex items-center gap-2 text-xs text-amber-700 dark:text-amber-200">
<AlertTriangle className="h-3.5 w-3.5" />
<span>
{isProviderConfigured()

View file

@ -444,7 +444,7 @@ export const SettingsPanel = ({
</div>
</div>
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-800 dark:text-amber-200">
API keys are stored in session storage and will be cleared when you close this tab.
</div>

View file

@ -1,5 +1,11 @@
@import 'tailwindcss';
/* `dark:` modifier follows our explicit theme attribute, not the OS
media query. The boot script and `useTheme` hook always write a
resolved value (`light` | `dark`) to `<html data-theme>`, so this
keeps the variant consistent with the runtime preference. */
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
/* ═══════════════════════════════════════════════════════════════
TAILWIND V4 THEME CONFIGURATION
═══════════════════════════════════════════════════════════════ */