@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/ui/themes/classic_tokens.ts

@@ -0,0 +1,51 @@
+// The classic theme: the look before the revamp, kept so a host can pin it.
+// Tokens only; classic's structure is the base stylesheet itself.
+export const CLASSIC_TOKENS: string = `
+/* ── Classic ──────────────────────────────────────────────────────────────
+   Today's indigo header, accent user bubble, round launcher and heavy
+   shadow, in both schemes. The code theme starts from these as well, since
+   it was always this structure in a terminal palette. */
+:host([theme~="classic"]),
+:host([theme~="code"]) {
+  --_bg: var(--ag-ui-bg, light-dark(#ffffff, #15151f));
+  --_fg: var(--ag-ui-fg, light-dark(#1a1a2e, #e8e8f2));
+  --_accent: var(--ag-ui-accent, #4f46e5);
+  --_user-bg: var(--ag-ui-user-bg, #4f46e5);
+  --_user-fg: var(--ag-ui-user-fg, #ffffff);
+  --_assistant-bg: var(--ag-ui-assistant-bg, light-dark(#f1f1f6, #25253a));
+  --_hover: var(--ag-ui-hover, light-dark(#e7e7ee, #303049));
+  --_tool-bg: var(--ag-ui-tool-bg, var(--_assistant-bg));
+  --_tool-fg: var(--ag-ui-tool-fg, var(--_accent));
+  --_header-bg: var(--ag-ui-header-bg, light-dark(var(--_accent), #1f1f30));
+  --_header-fg: var(--ag-ui-header-fg, light-dark(#ffffff, #e8e8f2));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, rgba(255, 255, 255, 0.18)));
+  --_border: var(--ag-ui-border, light-dark(#e2e2ec, #33334a));
+  --_muted: var(--ag-ui-muted, light-dark(#6b7280, #9aa0b4));
+  --_success: var(--ag-ui-success, #15803d);
+  --_danger: var(--ag-ui-danger, #b91c1c);
+  --_tooltip-bg: var(--ag-ui-tooltip-bg, #1f2430);
+  --_tooltip-fg: var(--ag-ui-tooltip-fg, #f5f6fa);
+  --_font: var(--ag-ui-font, inherit);
+  --_frame-radius: var(--ag-ui-frame-radius, var(--_radius));
+  --_frame-shadow: var(--ag-ui-frame-shadow, 0 12px 32px light-dark(rgba(20, 20, 50, 0.18), rgba(0, 0, 0, 0.5)));
+  --_composer-radius: var(--ag-ui-composer-radius, 14px);
+  --_msg-radius: var(--ag-ui-msg-radius, 14px);
+  --_launcher-size: var(--ag-ui-launcher-size, 56px);
+  --_launcher-bg: var(--ag-ui-launcher-bg, var(--_header-bg));
+  --_launcher-fg: var(--ag-ui-launcher-fg, var(--_header-fg));
+  --_launcher-radius: var(--ag-ui-launcher-radius, 50%);
+  --_launcher-icon-size: var(--ag-ui-launcher-icon-size, 26px);
+  --_chart-1: var(--ag-ui-chart-1, #4f7cff);
+  --_chart-2: var(--ag-ui-chart-2, #21b573);
+}
+
+/* Classic's contrast fixes, which code does not share. The indigo accent
+   measured 2.38:1 as tool-name text on the dark card, and the old success
+   green 2.38:1 as the done mark there; in the dark scheme the tool name
+   takes the accent mixed halfway to the text colour, and success the
+   lighter green the other themes use. The light half is unchanged. */
+:host([theme~="classic"]) {
+  --_tool-fg: var(--ag-ui-tool-fg, light-dark(var(--_accent), color-mix(in oklch, var(--_accent) 50%, var(--_fg))));
+  --_success: var(--ag-ui-success, light-dark(#15803d, #4ade80));
+}
+`;

package/src/ui/themes/code_tokens.ts

@@ -0,0 +1,21 @@
+// The code theme: classic's structure in a dark terminal palette. Kept for
+// hosts that already wear it; Ledger is where a monospace look goes next.
+export const CODE_TOKENS: string = `
+/* ── Code ─────────────────────────────────────────────────────────────────
+   Dark only, monospace, green accent. Restates the colours classic sets,
+   after it, so code wins wherever the two would both apply. */
+:host([theme~="code"]) {
+  --_bg: var(--ag-ui-bg, #0d1117);
+  --_fg: var(--ag-ui-fg, #c9d1d9);
+  --_accent: var(--ag-ui-accent, #3fb950);
+  --_user-bg: var(--ag-ui-user-bg, #238636);
+  --_assistant-bg: var(--ag-ui-assistant-bg, #161b22);
+  --_hover: var(--ag-ui-hover, #21262d);
+  --_header-bg: var(--ag-ui-header-bg, #010409);
+  --_header-fg: var(--ag-ui-header-fg, #c9d1d9);
+  --_border: var(--ag-ui-border, #30363d);
+  --_muted: var(--ag-ui-muted, #8b949e);
+  --_font: var(--ag-ui-font, var(--_code-font));
+  --_frame-shadow: var(--ag-ui-frame-shadow, 0 12px 32px rgba(0, 0, 0, 0.6));
+}
+`;

package/src/ui/themes/ledger_styles.ts

@@ -0,0 +1,169 @@
+// The ledger theme's structure: rules, square corners, serif and monospace.
+export const LEDGER_STYLES: string = `
+/* ── Ledger ──────────────────────────────────────────────────────────────
+   Structure only; the tokens are in ledger_tokens. Serif for what the
+   agent says, monospace for what the machine did. */
+
+:host([theme~="ledger"]) .chat {
+  line-height: var(--_leading);
+  border-color: var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .header {
+  padding: 8px 10px 8px 14px;
+  border-bottom-color: var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .header-title {
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:host([theme~="ledger"]) .header-title::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 8px;
+  background: var(--_accent);
+  vertical-align: 1px;
+}
+
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
+:host([theme~="ledger"]) .header-btn {
+  color: var(--_header-fg-set, var(--_ink-3));
+  border-radius: 3px;
+}
+
+:host([theme~="ledger"]) .header-btn:hover {
+  color: var(--_header-fg-set, var(--_fg));
+}
+
+:host([theme~="ledger"]) .message--user {
+  align-self: stretch;
+  max-width: 100%;
+  margin-top: 6px;
+  padding: 2px 0 2px 12px;
+  border-left: 2px solid var(--_fg);
+  font-weight: 500;
+}
+
+:host([theme~="ledger"]) .message--user + .answer,
+:host([theme~="ledger"]) .answer + .message--user {
+  margin-top: 4px;
+}
+
+:host([theme~="ledger"]) .answer + .message--user {
+  border-top: 0;
+}
+
+:host([theme~="ledger"]) .message--assistant {
+  padding: 0;
+  max-width: 100%;
+  font-family: var(--_serif);
+  font-size: var(--_text-lg);
+  line-height: 1.5;
+}
+
+:host([theme~="ledger"]) .message--assistant a {
+  color: var(--_accent-ink);
+}
+
+:host([theme~="ledger"]) .thoughts-toggle {
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  letter-spacing: 0.01em;
+}
+
+/* The step group's row reads as a ledger heading. Unscoped to grouped mode:
+   a card mode hides the row and drops the list's box, so neither reaches a
+   flattened card. */
+:host([theme~="ledger"]) .tool-group-head {
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  border-radius: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+:host([theme~="ledger"]) .tool-group-list {
+  border-left: 1px dashed var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .chart-block {
+  border-top: 1px solid var(--_line-strong);
+  border-bottom: 1px solid var(--_line);
+  padding: 8px 0;
+}
+
+:host([theme~="ledger"]) .chart-title {
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+:host([theme~="ledger"]) .input-row {
+  padding-block: 10px;
+  border-top: 1px solid var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .composer {
+  border-color: var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .composer:focus-within {
+  border-color: var(--_fg);
+}
+
+:host([theme~="ledger"]) .send {
+  border-radius: 3px;
+}
+
+:host([theme~="ledger"]) :is(.suggestion-chip, .skill-chip) {
+  background: transparent;
+  border: 1px solid var(--_line-strong);
+  color: var(--_ink-2);
+  border-radius: 2px;
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  padding: 3px 8px;
+}
+
+:host([theme~="ledger"]) :is(.suggestion-chip, .skill-chip):hover {
+  border-color: var(--_fg);
+  color: var(--_fg);
+}
+
+:host([theme~="ledger"]) .confirm {
+  border: 1px solid var(--_fg);
+  border-left: 3px solid var(--_accent);
+  border-radius: 2px;
+  padding: 10px 12px;
+  gap: 10px;
+  background: var(--_bg);
+}
+
+:host([theme~="ledger"]) .confirm-btn {
+  border-radius: 2px;
+  padding: 5px 12px;
+  font-family: var(--_code-font);
+  font-size: var(--_text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-color: var(--_line-strong);
+}
+
+:host([theme~="ledger"]) .confirm-btn--confirm {
+  border-color: var(--_accent);
+}
+
+:host([theme~="ledger"]) .launcher {
+  border: 0;
+}
+`;

package/src/ui/themes/ledger_tokens.ts

@@ -0,0 +1,33 @@
+// The ledger theme's tokens: dense and editorial, paper and ink.
+export const LEDGER_TOKENS: string = `
+/* ── Ledger ───────────────────────────────────────────────────────────────
+   A smaller type scale than the other themes, because density is the point.
+   Set before the density presets, so density="compact" still wins. */
+:host([theme~="ledger"]) {
+  --_bg: var(--ag-ui-bg, light-dark(#fbfaf6, #151513));
+  --_fg: var(--ag-ui-fg, light-dark(#1d1c19, #e8e6df));
+  --_accent: var(--ag-ui-accent, light-dark(#b8410e, #f08a4b));
+  --_code-font: var(--ag-ui-code-font, "JetBrains Mono", ui-monospace, Menlo, monospace);
+  --_text-xs: var(--ag-ui-text-xs, 10.5px);
+  --_text-sm: var(--ag-ui-text-sm, 12px);
+  --_text-md: var(--ag-ui-text-md, 13px);
+  --_text-lg: var(--ag-ui-text-lg, 14.5px);
+  --_leading: var(--ag-ui-leading, 1.5);
+  --_space: var(--ag-ui-space, 8px);
+  --_pad: var(--ag-ui-pad, 14px);
+  --_radius: var(--ag-ui-radius, 3px);
+  --_frame-radius: var(--ag-ui-frame-radius, var(--ag-ui-radius, 6px));
+  --_msg-radius: var(--ag-ui-msg-radius, 0px);
+  --_composer-radius: var(--ag-ui-composer-radius, 4px);
+  --_user-bg: var(--ag-ui-user-bg, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
+  --_frame-shadow: var(--ag-ui-frame-shadow, 0 0 0 1px var(--_line-strong), 0 20px 40px -28px rgb(0 0 0 / 0.45));
+  --_launcher-bg: var(--ag-ui-launcher-bg, var(--_fg));
+  --_launcher-fg: var(--ag-ui-launcher-fg, var(--_bg));
+  --_launcher-radius: var(--ag-ui-launcher-radius, 6px);
+  --_launcher-size: var(--ag-ui-launcher-size, 44px);
+  --_launcher-icon-size: var(--ag-ui-launcher-icon-size, 20px);
+  --_chart-1: var(--ag-ui-chart-1, var(--_fg));
+  --_chart-2: var(--ag-ui-chart-2, var(--_accent));
+}
+`;

package/src/ui/themes/modern_styles.ts

@@ -0,0 +1,80 @@
+import { THEME_HOST } from "./theme_hosts.js";
+
+// The structure every theme but classic and code shares: status as an icon,
+// one chip row, one action row per answer, and a readable placeholder.
+export const MODERN_STYLES: string = `
+/* ── status as an icon, never a pill ─────────────────────────────
+   The word stays for assistive technology through the card's own label; the
+   pill only ever repeated what the icon said. */
+${THEME_HOST.modern} .tool-call-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+${THEME_HOST.modern} .tool-call:is([data-status="done"], [data-status="error"], [data-status="declined"]) .tool-call-icon::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: currentColor;
+  mask: var(--_ico-check) center / contain no-repeat;
+}
+
+${THEME_HOST.modern} .tool-call[data-status="done"] .tool-call-icon {
+  color: var(--_success);
+}
+
+${THEME_HOST.modern} .tool-call[data-status="error"] .tool-call-icon {
+  color: var(--_danger);
+}
+
+${THEME_HOST.modern} .tool-call[data-status="error"] .tool-call-icon::before {
+  mask-image: var(--_ico-error);
+}
+
+/* An interrupted call is muted like a declined one but keeps the base glyph
+   rather than taking the declined mark: nobody refused it, it only did not
+   finish. */
+${THEME_HOST.modern} .tool-call:is([data-status="declined"], [data-status="interrupted"]) .tool-call-icon {
+  color: var(--_muted);
+}
+
+${THEME_HOST.modern} .tool-call[data-status="declined"] .tool-call-icon::before {
+  mask-image: var(--_ico-declined);
+}
+
+/* The settled icon inherits colour from the icon box, so the box's own glyph
+   colour from the base rules must not win. */
+${THEME_HOST.modern} .tool-call .tool-call-icon::before {
+  color: inherit;
+}
+
+/* ── one chip row ────────────────────────────────────────────────
+   Follow-up suggestions are the row once a conversation has started; the
+   skill chips stay on the empty state only and otherwise live in the slash
+   palette, so two rows never compete above the composer. */
+:host(:not([theme~="classic"], [theme~="code"], [data-empty])) .skill-chips {
+  display: none;
+}
+
+/* ── one action row per answer ───────────────────────────────────
+   Copy and retry under every interim sentence of a long turn read as noise;
+   only the row after the last bubble of a turn stays. */
+${THEME_HOST.modern} .message-actions:has(~ .message--assistant) {
+  display: none;
+}
+
+${THEME_HOST.modern} .chart-block {
+  box-sizing: border-box;
+}
+
+/* The baseline placeholder is the browser default, which measured under
+   4.5:1 on every dark surface. A derived ink clears it in both schemes. */
+${THEME_HOST.modern} .input::placeholder {
+  color: var(--_ink-3);
+  opacity: 1;
+}
+`;

package/src/ui/themes/quiet_styles.ts

@@ -0,0 +1,118 @@
+import { THEME_HOST } from "./theme_hosts.js";
+
+// The default theme's structure. Applies to every element wearing no other
+// built-in theme, so a host's own named theme starts from it.
+export const QUIET_STYLES: string = `
+/* ── Quiet ───────────────────────────────────────────────────────────────
+   The default. Its tokens are the token defaults; this is the little
+   structure it adds on top: no bubble for the agent, hairlines, and a
+   composer that sits on the panel rather than in a band. */
+
+${THEME_HOST.quiet} .chat {
+  font-feature-settings: "cv11", "ss01";
+  letter-spacing: -0.003em;
+  line-height: var(--_leading);
+}
+
+${THEME_HOST.quiet} .header {
+  padding: 12px 14px 12px 18px;
+}
+
+${THEME_HOST.quiet} .header-title {
+  font-size: var(--_text-md);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* The buttons sit back in the third ink on the panel. Once the host sets the
+   header text they draw in it instead, since the header behind them is then
+   the host's colour (see the switches in the token defaults). */
+${THEME_HOST.quiet} .header-btn {
+  color: var(--_header-fg-set, var(--_ink-3));
+  border-radius: 8px;
+}
+
+/* The glyph takes the header text, which is the full ink when that is unset. */
+${THEME_HOST.quiet} .header-btn:hover {
+  color: var(--_header-fg);
+}
+
+${THEME_HOST.quiet} .message--user {
+  border-radius: var(--_msg-radius);
+  padding: 8px 12px;
+}
+
+${THEME_HOST.quiet} .message--assistant {
+  padding: 0;
+  max-width: 100%;
+}
+
+${THEME_HOST.quiet} .message--assistant a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--_line-strong);
+  text-underline-offset: 3px;
+}
+
+${THEME_HOST.quiet} .thoughts-toggle {
+  color: var(--_muted);
+  font-size: var(--_text-sm);
+}
+
+${THEME_HOST.quiet} .input-row {
+  border-top: 0;
+  padding-top: 4px;
+}
+
+${THEME_HOST.quiet} .composer {
+  border-color: var(--_line-strong);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+${THEME_HOST.quiet} .composer:focus-within {
+  border-color: var(--_ink-3);
+  box-shadow: 0 0 0 3px var(--_wash);
+}
+
+${THEME_HOST.quiet} .send {
+  border-radius: 9px;
+}
+
+${THEME_HOST.quiet} :is(.suggestion-chip, .skill-chip) {
+  background: transparent;
+  border: 1px solid var(--_line);
+  color: var(--_ink-2);
+  border-radius: 999px;
+}
+
+${THEME_HOST.quiet} :is(.suggestion-chip, .skill-chip):hover {
+  background: var(--_hover);
+  color: var(--_fg);
+}
+
+${THEME_HOST.quiet} .confirm {
+  border: 1px solid var(--_line-strong);
+  border-radius: var(--_radius);
+  padding: 14px;
+  gap: 12px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+${THEME_HOST.quiet} .confirm-btn {
+  border-radius: 8px;
+  padding: 7px 14px;
+  font-weight: 500;
+  font-size: var(--_text-sm);
+  border-color: var(--_line-strong);
+}
+
+${THEME_HOST.quiet} .confirm-btn--confirm {
+  border-color: var(--_accent);
+  font-weight: 600;
+}
+
+${THEME_HOST.quiet} .launcher {
+  border: 1px solid var(--_line-strong);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -10px rgb(0 0 0 / 0.25);
+}
+`;

package/src/ui/themes/scheme_styles.ts

@@ -0,0 +1,26 @@
+// The scheme word of the theme attribute: light (the default), dark or auto.
+export const SCHEME_STYLES: string = `
+/* ── Scheme ───────────────────────────────────────────────────────────────
+   Every theme declares its colours with light-dark, so the scheme is one
+   property. Matched as a word, so dark works alone (the default theme,
+   dark) and beside a theme name (soft dark). auto follows the operating
+   system through color-scheme itself, with no media query to keep in step.
+   code is a dark-only theme and has no light half. */
+/* Important, so a scheme word holds against a host rule that sets the
+   element's color-scheme (a page that follows its own dark mode). A rule
+   from outside the shadow tree beats every :host rule at normal weight, and
+   the theme toggle writes the word; without this its press changed nothing.
+   code stays last, so code light is still dark. */
+:host([theme~="light"]) {
+  color-scheme: light !important;
+}
+
+:host([theme~="dark"]),
+:host([theme~="code"]) {
+  color-scheme: dark !important;
+}
+
+:host([theme~="auto"]) {
+  color-scheme: light dark;
+}
+`;

package/src/ui/themes/soft_styles.ts

@@ -0,0 +1,149 @@
+// The soft theme's structure: pills, tinted surfaces, rounded cards.
+export const SOFT_STYLES: string = `
+/* ── Soft ────────────────────────────────────────────────────────────────
+   Structure only; the tokens are in soft_tokens, set before the density
+   presets. */
+
+:host([theme~="soft"]) .chat {
+  line-height: var(--_leading);
+  background: var(--_bg);
+}
+
+:host([theme~="soft"]) .header {
+  border-bottom-color: transparent;
+  padding: 14px 16px 12px 20px;
+}
+
+:host([theme~="soft"]) .header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--_text-lg);
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}
+
+:host([theme~="soft"]) .header-title::before {
+  content: "";
+  width: 22px;
+  height: 22px;
+  border-radius: 8px;
+  background: linear-gradient(140deg, color-mix(in oklch, var(--_accent) 55%, var(--_bg)), var(--_accent));
+}
+
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
+:host([theme~="soft"]) .header-btn {
+  color: var(--_header-fg-set, var(--_ink-3));
+  border-radius: 10px;
+}
+
+:host([theme~="soft"]) .header-btn:hover {
+  color: var(--_header-fg-set, var(--_accent-ink));
+}
+
+:host([theme~="soft"]) .messages {
+  background: linear-gradient(var(--_tint), var(--_bg) 120px);
+}
+
+:host([theme~="soft"]) .message--user {
+  border-radius: var(--_msg-radius) var(--_msg-radius) 6px var(--_msg-radius);
+  padding: 9px 14px;
+}
+
+:host([theme~="soft"]) .message--assistant {
+  padding: 0 2px;
+  max-width: 100%;
+}
+
+:host([theme~="soft"]) .message--assistant a {
+  color: var(--_accent-ink);
+}
+
+/* The step group's row as a tinted pill. Unscoped to grouped mode: a card
+   mode hides the row and drops the list's box, so neither reaches a
+   flattened card. */
+:host([theme~="soft"]) .tool-group-head {
+  background: var(--_tint);
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 5px 12px 5px 9px;
+  margin-left: 0;
+}
+
+:host([theme~="soft"]) .tool-group-head:hover {
+  background: var(--_tint-2);
+}
+
+:host([theme~="soft"]) .tool-group-list {
+  border-left-color: var(--_tint-2);
+  margin-left: 14px;
+}
+
+:host([theme~="soft"]) .chart-block {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  padding: 12px 14px;
+}
+
+:host([theme~="soft"]) .input-row {
+  border-top: 0;
+  padding-block: 6px 16px;
+}
+
+:host([theme~="soft"]) .composer {
+  padding: 8px 8px 8px 14px;
+  border-color: var(--_border);
+  box-shadow: 0 6px 20px -10px color-mix(in oklch, var(--_accent) 35%, transparent);
+}
+
+:host([theme~="soft"]) .composer:focus-within {
+  border-color: color-mix(in oklch, var(--_accent) 50%, var(--_bg));
+  box-shadow: 0 0 0 4px var(--_tint-2);
+}
+
+:host([theme~="soft"]) .send {
+  border-radius: 999px;
+}
+
+:host([theme~="soft"]) :is(.suggestion-chip, .skill-chip) {
+  background: var(--_tint-2);
+  border: 1px solid transparent;
+  color: var(--_accent-ink);
+  border-radius: 999px;
+  font-weight: 500;
+}
+
+:host([theme~="soft"]) :is(.suggestion-chip, .skill-chip):hover {
+  border-color: color-mix(in oklch, var(--_accent) 35%, var(--_bg));
+}
+
+:host([theme~="soft"]) .confirm {
+  background: var(--_tint);
+  border: 1px solid var(--_border);
+  border-radius: 18px;
+  padding: 16px;
+  gap: 14px;
+}
+
+:host([theme~="soft"]) .confirm-btn {
+  border-radius: 999px;
+  padding: 8px 16px;
+  font-weight: 500;
+  background: var(--_bg);
+  border-color: var(--_border);
+}
+
+:host([theme~="soft"]) .confirm-btn--confirm {
+  background: var(--_accent);
+  border-color: var(--_accent);
+  color: var(--_on-accent);
+  font-weight: 600;
+}
+
+:host([theme~="soft"]) .launcher {
+  border: 0;
+  box-shadow: 0 14px 30px -12px color-mix(in oklch, var(--_accent) 70%, transparent);
+}
+`;

package/src/ui/themes/soft_tokens.ts

@@ -0,0 +1,29 @@
+// The soft theme's tokens: rounded, with surfaces tinted from the accent.
+export const SOFT_TOKENS: string = `
+/* ── Soft ─────────────────────────────────────────────────────────────────
+   Seeds, plus two surfaces mixed from the accent: a faint wash for the panel
+   chrome and a stronger tint for the user's turns. */
+:host([theme~="soft"]) {
+  --_bg: var(--ag-ui-bg, light-dark(#fdfcff, #17161d));
+  --_fg: var(--ag-ui-fg, light-dark(#1f1d2b, #ebe9f5));
+  --_accent: var(--ag-ui-accent, light-dark(#6a4fd8, #a593ff));
+  --_tint: var(--ag-ui-tint, color-mix(in oklch, var(--_accent) 5%, var(--_bg)));
+  --_tint-2: var(--ag-ui-tint-2, color-mix(in oklch, var(--_accent) 13%, var(--_bg)));
+  --_header-bg: var(--ag-ui-header-bg, var(--_tint));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_tint-2)));
+  --_user-bg: var(--ag-ui-user-bg, var(--_tint-2));
+  --_border: var(--ag-ui-border, color-mix(in oklch, var(--_accent) 14%, var(--_bg)));
+  --_radius: var(--ag-ui-radius, 16px);
+  --_frame-radius: var(--ag-ui-frame-radius, var(--ag-ui-radius, 24px));
+  --_msg-radius: var(--ag-ui-msg-radius, 18px);
+  --_composer-radius: var(--ag-ui-composer-radius, 22px);
+  --_frame-shadow: var(--ag-ui-frame-shadow, 0 2px 6px light-dark(rgb(30 20 60 / 0.05), rgb(0 0 0 / 0.3)), 0 30px 60px -28px light-dark(color-mix(in oklch, var(--_accent) 45%, transparent), rgb(0 0 0 / 0.75)));
+  --_launcher-size: var(--ag-ui-launcher-size, 56px);
+  --_launcher-bg: var(--ag-ui-launcher-bg, var(--_accent));
+  --_launcher-fg: var(--ag-ui-launcher-fg, var(--_on-accent));
+  --_launcher-radius: var(--ag-ui-launcher-radius, 20px);
+  --_launcher-icon-size: var(--ag-ui-launcher-icon-size, 24px);
+  --_chart-1: var(--ag-ui-chart-1, var(--_accent));
+  --_chart-2: var(--ag-ui-chart-2, color-mix(in oklch, var(--_accent) 38%, var(--_bg)));
+}
+`;