diff --git a/src/workspaces/components/Data/tone.ts b/src/workspaces/components/Data/tone.ts index cfcec618..03471b08 100644 --- a/src/workspaces/components/Data/tone.ts +++ b/src/workspaces/components/Data/tone.ts @@ -1,6 +1,6 @@ // The state vocabulary for data surfaces. See docs/design-language-interface.md § 3. // -// Five tones and no others. The point of a closed set is that colour keeps meaning something: when a +// Six tones and no others. The point of a closed set is that colour keeps meaning something: when a // view can reach for any of Tailwind's twenty-two palettes, green stops reading as "open" and starts // reading as "the author liked green here". Every tone maps to a semantic token, never a palette // number, so it follows the theme and survives dark mode. @@ -8,7 +8,7 @@ // Class strings are written out in full rather than composed (`text-${tone}`) because Tailwind's // scanner reads source text — an interpolated class name is not in the output CSS at all. -export type Tone = 'neutral' | 'success' | 'warning' | 'danger' | 'info'; +export type Tone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'busy'; /** Foreground only — for an icon or a word carrying state inside otherwise normal text. */ export const toneText: Record = { @@ -17,6 +17,9 @@ export const toneText: Record = { warning: 'text-warning', danger: 'text-destructive', info: 'text-info', + // `-ink`, not the fill: busy's fill is bright enough to carry black text, which makes it unreadable AS + // text. The other five are dark enough to serve both jobs. + busy: 'text-busy-ink', }; /** @@ -29,6 +32,7 @@ export const toneFill: Record = { warning: 'bg-warning/15 text-warning', danger: 'bg-destructive/15 text-destructive', info: 'bg-info/15 text-info', + busy: 'bg-busy/15 text-busy-ink', }; /** A left border or rule carrying state, for rows that mark status without a pill. */ @@ -38,4 +42,5 @@ export const toneBorder: Record = { warning: 'border-warning', danger: 'border-destructive', info: 'border-info', + busy: 'border-busy', }; diff --git a/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx b/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx index 626ed13f..e78d3a8a 100644 --- a/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx +++ b/src/workspaces/officerdev/src/apps/Chat/components/InputArea.tsx @@ -144,7 +144,7 @@ export const InputArea = ({ manager }: InputAreaProps) => { size="icon" title={isGenerating ? 'Queue — sends when the current turn finishes' : 'Send'} className={`shrink-0 h-7 w-7 md:h-9 md:w-9 cursor-pointer disabled:opacity-40 ${ - isGenerating ? 'bg-amber-500 hover:bg-amber-500/90 text-amber-950' : 'bg-duck-teal hover:bg-duck-teal/90' + isGenerating ? 'bg-busy hover:bg-busy/90 text-busy-foreground' : 'bg-duck-teal hover:bg-duck-teal/90' }`} > {isGenerating ? : } @@ -264,16 +264,13 @@ const QueuedList = ({ type="button" onClick={onSendNow} title="Send these into the turn that is already running" - className="cursor-pointer self-start rounded px-1 text-[11px] text-amber-700/80 transition-colors hover:bg-amber-500/10 hover:text-amber-700" + className="cursor-pointer self-start rounded px-1 text-[11px] text-busy-ink/80 transition-colors hover:bg-busy/10 hover:text-busy-ink" > Send now — press Enter on an empty box to add {queued.length === 1 ? 'this' : 'these'} to the running turn {queued.map((item) => ( -
- +
+ {item.raw.trim()}