@adecore/agents-react 0.17.0-beta.1 → 0.17.0

package/src/theme.css

@@ -18,6 +18,15 @@
     --chart-context-files: #9a63e0;
     --chart-context-conversation: #2f9e5a;
     --chart-context-system: var(--text-faint);
+    /* The current hit of a find, which has to stand out from the accent of a bookmark next to it. */
+    --chat-find: #facc15;
+    /* The series of a chart in a visual after the first, which is the accent. A categorical order checked
+       for color vision deficiency on both grounds: orange, aqua, yellow, magenta, green. */
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
+    --chart-6: #008300;
 }
 
 [data-theme="dark"] {
@@ -31,6 +40,22 @@
     --chart-context-files: #b98af3;
     --chart-context-conversation: #6dd08b;
     --chart-context-system: var(--text-faint);
+    --chat-find: #f5c542;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
+    --chart-6: #008300;
+}
+
+/* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
+   and the base theme's otherwise. Declared on every themed element, so a nested theme resolves its own. */
+:root, [data-theme] {
+    --chat-code-bg: var(--term-bg, var(--surface-sunken));
+    --chat-output: var(--term-fg, var(--text));
+    --chat-added: var(--term-ansi-green, var(--positive));
+    --chat-removed: var(--term-ansi-red, var(--status-error));
+    --chart-1: var(--accent);
 }
 
 @theme inline {
@@ -44,6 +69,10 @@
     --color-chart-context-files: var(--chart-context-files);
     --color-chart-context-conversation: var(--chart-context-conversation);
     --color-chart-context-system: var(--chart-context-system);
+    --color-chat-find: var(--chat-find);
+    --color-chat-output: var(--chat-output);
+    --color-chat-added: var(--chat-added);
+    --color-chat-removed: var(--chat-removed);
 }
 
 @layer components {
@@ -98,6 +127,8 @@
         @starting-style { opacity: 0; }
     }
     @keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
+    /* A visual still on its way says so only once it takes long enough to be noticed. */
+    .chat-visual-wait { animation: chat-fade 200ms ease-out 600ms both; }
 
     /* The row a jump from outside the chat (the card of a change in a file) landed on. */
     .chat-flash { animation: chat-flash 1600ms ease-out both; }
@@ -160,7 +191,7 @@
 .chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
-.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--term-bg); overflow: auto; }
+.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: auto; }
 .chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
 .chat-code code { font-family: inherit; }