chore: better colors
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2026-05-17 20:29:18 -04:00
parent 0c002cf5ee
commit bf3b308a05
2 changed files with 35 additions and 35 deletions

View File

@@ -155,24 +155,24 @@
<div <div
x-show="message.thinking" x-show="message.thinking"
x-data="{ expanded: false }" x-data="{ expanded: false }"
role="button"
tabindex="0"
@click="expanded = !expanded" @click="expanded = !expanded"
@keydown.enter.prevent="expanded = !expanded"
@keydown.space.prevent="expanded = !expanded"
class="mb-3 rounded-md border-l-2 border-primary-500/60 bg-primary-100/35 px-3 py-2 ring-1 ring-primary-400/20 cursor-pointer"
> >
<div class="cursor-pointer rounded-lg overflow-hidden bg-primary-100 hover:bg-primary-50"> <div class="flex items-center gap-2 text-xs font-medium text-primary-700 transition-colors">
<div class="flex justify-center w-full px-3 py-2 text-xs text-primary-700 flex items-center gap-2 transition-colors"> <span x-text="expanded ? '▾' : '▸'"></span>
<span x-text="expanded ? '▼' : '◀'"></span> <span>Reasoning</span>
<span class="font-medium">Reasoning</span>
<span x-text="expanded ? '▼' : '▶'"></span>
</div>
<div
x-show="expanded"
class="prose p-4 max-w-none text-sm prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.thinking)"
></div>
</div> </div>
<div
x-show="expanded"
class="prose mt-2 max-w-none text-xs text-primary-700 opacity-90 prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:p-0"
x-html="renderMarkdown(message.thinking)"
></div>
</div> </div>
<hr x-show="message.thinking" class="my-2 border-primary-400/50" />
<div <div
x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content" x-show="message.role === 'assistant' && message.status === 'streaming' && !message.thinking && !message.content"
class="flex items-center gap-2 py-1" class="flex items-center gap-2 py-1"

View File

@@ -77,36 +77,36 @@ body {
@layer base { @layer base {
.dark { .dark {
/* Dark mode - dark backgrounds (50-300), light text (700-900) */ /* Dark mode - background and surface steps are intentionally lifted for a softer dark theme. */
--color-primary-50: oklch(15% 0.08 290); --color-primary-50: oklch(25% 0.08 290);
--color-primary-100: oklch(18% 0.1 290); --color-primary-100: oklch(31% 0.1 290);
--color-primary-200: oklch(22% 0.12 290); --color-primary-200: oklch(36% 0.12 290);
--color-primary-300: oklch(28% 0.15 290); --color-primary-300: oklch(48% 0.15 290);
--color-primary-400: oklch(36% 0.18 290); --color-primary-400: oklch(52% 0.18 290);
--color-primary-500: oklch(45% 0.2 290); --color-primary-500: oklch(58% 0.2 290);
--color-primary-600: oklch(55% 0.18 290); --color-primary-600: oklch(62% 0.18 290);
--color-primary-700: oklch(65% 0.15 290); --color-primary-700: oklch(65% 0.15 290);
--color-primary-800: oklch(75% 0.12 290); --color-primary-800: oklch(75% 0.12 290);
--color-primary-900: oklch(85% 0.08 290); --color-primary-900: oklch(85% 0.08 290);
--color-secondary-50: oklch(15% 0.05 180); --color-secondary-50: oklch(25% 0.05 180);
--color-secondary-100: oklch(18% 0.07 180); --color-secondary-100: oklch(31% 0.07 180);
--color-secondary-200: oklch(22% 0.09 180); --color-secondary-200: oklch(36% 0.09 180);
--color-secondary-300: oklch(28% 0.11 180); --color-secondary-300: oklch(48% 0.11 180);
--color-secondary-400: oklch(36% 0.13 180); --color-secondary-400: oklch(52% 0.13 180);
--color-secondary-500: oklch(45% 0.15 180); --color-secondary-500: oklch(58% 0.15 180);
--color-secondary-600: oklch(55% 0.14 180); --color-secondary-600: oklch(62% 0.14 180);
--color-secondary-700: oklch(65% 0.12 180); --color-secondary-700: oklch(65% 0.12 180);
--color-secondary-800: oklch(75% 0.09 180); --color-secondary-800: oklch(75% 0.09 180);
--color-secondary-900: oklch(85% 0.06 180); --color-secondary-900: oklch(85% 0.06 180);
--color-tertiary-50: oklch(15% 0.008 60); --color-tertiary-50: oklch(25% 0.008 60);
--color-tertiary-100: oklch(18% 0.01 60); --color-tertiary-100: oklch(31% 0.01 60);
--color-tertiary-200: oklch(22% 0.015 60); --color-tertiary-200: oklch(36% 0.015 60);
--color-tertiary-300: oklch(28% 0.02 60); --color-tertiary-300: oklch(48% 0.02 60);
--color-tertiary-400: oklch(36% 0.025 60); --color-tertiary-400: oklch(52% 0.025 60);
--color-tertiary-500: oklch(45% 0.03 60); --color-tertiary-500: oklch(58% 0.03 60);
--color-tertiary-600: oklch(55% 0.025 60); --color-tertiary-600: oklch(62% 0.025 60);
--color-tertiary-700: oklch(65% 0.02 60); --color-tertiary-700: oklch(65% 0.02 60);
--color-tertiary-800: oklch(75% 0.015 60); --color-tertiary-800: oklch(75% 0.015 60);
--color-tertiary-900: oklch(85% 0.01 60); --color-tertiary-900: oklch(85% 0.01 60);