wip: css/ui and desktop work

packages/css/package.json

@@ -7,6 +7,11 @@
     "./*": "./src/*"
   },
   "scripts": {
-    "dev": "bun run dev.ts"
+    "dev": "bun run dev.ts",
+    "generate:tailwind": "bun run script/colors.ts"
+  },
+  "dependencies": {
+    "tailwindcss": "catalog:",
+    "@tailwindcss/vite": "catalog:"
   }
 }

packages/css/script/colors.ts

@@ -0,0 +1,31 @@
+#!/usr/bin/env bun
+
+// read lines from colors.txt
+// parse each line into a color name and hex value
+// create a css variable for each color
+// NOTE: only use Bun file APIs here
+
+const colors = await Bun.file(import.meta.dir + "/colors.txt").text()
+
+const variables = []
+for (const line of colors.split("\n")) {
+  if (!line.trim()) continue
+  const [variable] = line.trim().split(":")
+  const name = variable!.trim().substring(2)
+  variables.push(`--color-${name}: var(--${name});`)
+}
+
+const output = `
+/* Generated by script/colors.ts */
+/* Do not edit this file manually */
+
+@theme {
+  --color-*: initial;
+  ${variables.join("\n  ")}
+}
+`
+
+// write to src/tailwind-colors.css
+Bun.file(import.meta.dir + "/../src/tailwind-colors.css").write(output.trim())
+
+// Bun.file(import.meta.dir + "../src/tailwind-colors.css").write(output.trim())

packages/css/script/colors.txt

@@ -0,0 +1,214 @@
+  --background-base: #f8f7f7;
+  --background-weak: var(--smoke-light-3);
+  --background-strong: var(--smoke-light-1);
+  --background-stronger: #fcfcfc;
+  --base: var(--smoke-light-alpha-2);
+  --surface-base: var(--smoke-light-alpha-2);
+  --base2: var(--smoke-light-alpha-2);
+  --base3: var(--smoke-light-alpha-2);
+  --surface-inset-base: var(--smoke-light-alpha-3);
+  --surface-inset-base-hover: var(--smoke-light-alpha-3);
+  --surface-inset-strong: #1f000017;
+  --surface-inset-strong-hover: #1f000017;
+  --surface-raised-base: var(--smoke-light-alpha-1);
+  --surface-float-base: var(--smoke-dark-1);
+  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-strong: var(--smoke-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--smoke-light-alpha-3);
+  --surface-weaker: var(--smoke-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
+  --surface-brand-base: var(--yuzu-light-9);
+  --surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-base: var(--cobalt-light-3);
+  --surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-base: var(--apple-light-3);
+  --surface-success-weak: var(--apple-light-2);
+  --surface-success-strong: var(--apple-light-9);
+  --surface-warning-base: var(--solaris-light-3);
+  --surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-base: var(--ember-light-3);
+  --surface-critical-weak: var(--ember-light-2);
+  --surface-critical-strong: var(--ember-light-9);
+  --surface-info-base: var(--lilac-light-3);
+  --surface-info-weak: var(--lilac-light-2);
+  --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-skip-base: var(--smoke-light-3);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: var(--mint-light-3);
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
+  --text-base: var(--smoke-light-11);
+  --input-base: var(--smoke-light-1);
+  --input-hover: var(--smoke-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--smoke-light-4);
+  --text-weak: var(--smoke-light-9);
+  --text-weaker: var(--smoke-light-8);
+  --text-strong: var(--smoke-light-12);
+  --text-on-brand-base: var(--smoke-light-alpha-11);
+  --text-on-interactive-base: var(--smoke-light-1);
+  --text-on-success-base: var(--smoke-dark-alpha-11);
+  --text-on-warning-base: var(--smoke-dark-alpha-11);
+  --text-on-info-base: var(--smoke-dark-alpha-11);
+  --text-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-11);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
+  --text-on-info-weak: var(--smoke-dark-alpha-9);
+  --text-on-info-strong: var(--smoke-dark-alpha-12);
+  --text-on-warning-weak: var(--smoke-dark-alpha-9);
+  --text-on-warning-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--smoke-dark-alpha-9);
+  --text-on-success-strong: var(--smoke-dark-alpha-12);
+  --text-on-brand-weak: var(--smoke-light-alpha-9);
+  --text-on-brand-weaker: var(--smoke-light-alpha-8);
+  --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-secondary-base: #fdfcfc;
+  --border-base: var(--smoke-light-alpha-7);
+  --border-hover: var(--smoke-light-alpha-8);
+  --border-active: var(--smoke-light-alpha-9);
+  --border-selected: var(--cobalt-light-alpha-9);
+  --border-disabled: var(--smoke-light-alpha-8);
+  --border-focus: var(--smoke-light-alpha-9);
+  --border-weak-base: var(--smoke-light-alpha-5);
+  --border-strong-base: var(--smoke-light-alpha-7);
+  --border-strong-hover: var(--smoke-light-alpha-8);
+  --border-strong-active: var(--smoke-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--smoke-light-alpha-6);
+  --border-strong-focus: var(--smoke-light-alpha-7);
+  --border-weak-hover: var(--smoke-light-alpha-6);
+  --border-weak-active: var(--smoke-light-alpha-7);
+  --border-weak-selected: var(--cobalt-light-alpha-6);
+  --border-weak-disabled: var(--smoke-light-alpha-6);
+  --border-weak-focus: var(--smoke-light-alpha-7);
+  --border-interactive-base: var(--cobalt-light-7);
+  --border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-disabled: var(--smoke-light-8);
+  --border-interactive-focus: var(--cobalt-light-9);
+  --border-success-base: var(--apple-light-6);
+  --border-success-hover: var(--apple-light-7);
+  --border-success-selected: var(--apple-light-9);
+  --border-warning-base: var(--solaris-light-6);
+  --border-warning-hover: var(--solaris-light-7);
+  --border-warning-selected: var(--solaris-light-9);
+  --border-critical-base: var(--ember-light-6);
+  --border-critical-hover: var(--ember-light-7);
+  --border-critical-selected: var(--ember-light-9);
+  --border-info-base: var(--lilac-light-6);
+  --border-info-hover: var(--lilac-light-7);
+  --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--smoke-light-9);
+  --icon-hover: var(--smoke-light-11);
+  --icon-active: var(--smoke-light-12);
+  --icon-selected: var(--smoke-light-12);
+  --icon-disabled: var(--smoke-light-8);
+  --icon-focus: var(--smoke-light-12);
+  --icon-weak-base: var(--smoke-light-7);
+  --icon-invert-base: #ffffff;
+  --icon-weak-hover: var(--smoke-light-8);
+  --icon-weak-active: var(--smoke-light-9);
+  --icon-weak-selected: var(--smoke-light-10);
+  --icon-weak-disabled: var(--smoke-light-6);
+  --icon-weak-focus: var(--smoke-light-9);
+  --icon-strong-base: var(--smoke-light-12);
+  --icon-strong-hover: var(--smoke-light-12);
+  --icon-strong-active: var(--smoke-light-12);
+  --icon-strong-selected: var(--smoke-light-12);
+  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-focus: var(--smoke-light-12);
+  --icon-brand-base: var(--smoke-light-12);
+  --icon-interactive-base: var(--cobalt-light-9);
+  --icon-success-base: var(--apple-light-7);
+  --icon-success-hover: var(--apple-light-8);
+  --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
+  --icon-critical-base: var(--ember-light-7);
+  --icon-critical-hover: var(--ember-light-8);
+  --icon-critical-active: var(--ember-light-11);
+  --icon-info-base: var(--lilac-light-7);
+  --icon-info-hover: var(--lilac-light-8);
+  --icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-base: var(--smoke-light-alpha-11);
+  --icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-interactive-base: var(--smoke-light-alpha-9);
+  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
+  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
+  --icon-agent-plan-base: var(--purple-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--blue-light-9);
+  --icon-on-success-base: var(--apple-light-alpha-9);
+  --icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
+  --icon-on-critical-base: var(--ember-light-alpha-9);
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-base: var(--lilac-light-9);
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-9);
+  --icon-diff-delete-hover: var(--ember-light-10);
+  --icon-diff-delete-active: var(--ember-light-11);
+  --syntax-comment: #ffffff;
+  --syntax-string: #ffffff;
+  --syntax-keyword: #ffffff;
+  --syntax-function: #ffffff;
+  --syntax-number: #ffffff;
+  --syntax-operator: #ffffff;
+  --syntax-variable: #ffffff;
+  --syntax-type: #ffffff;
+  --syntax-constant: #ffffff;
+  --syntax-punctuation: #ffffff;
+  --syntax-success: #ffffff;
+  --syntax-warning: #ffffff;
+  --syntax-critical: #ffffff;
+  --syntax-info: #ffffff;
+  --markdown-heading: #ffffff;
+  --markdown-text: #ffffff;
+  --markdown-link: #ffffff;
+  --markdown-link-text: #ffffff;
+  --markdown-code: #ffffff;
+  --markdown-block-quote: #ffffff;
+  --markdown-emph: #ffffff;
+  --markdown-strong: #ffffff;
+  --markdown-horizontal-rule: #ffffff;
+  --markdown-list-item: #ffffff;
+  --markdown-list-enumeration: #ffffff;
+  --markdown-image: #ffffff;
+  --markdown-image-text: #ffffff;
+  --markdown-code-block: #ffffff;
+  --border-color: #ffffff;

packages/css/src/tailwind-colors.css

@@ -0,0 +1,220 @@
+/* Generated by script/colors.ts */
+/* Do not edit this file manually */
+
+@theme {
+  --color-*: initial;
+  --color-background-base: var(--background-base);
+  --color-background-weak: var(--background-weak);
+  --color-background-strong: var(--background-strong);
+  --color-background-stronger: var(--background-stronger);
+  --color-base: var(--base);
+  --color-surface-base: var(--surface-base);
+  --color-base2: var(--base2);
+  --color-base3: var(--base3);
+  --color-surface-inset-base: var(--surface-inset-base);
+  --color-surface-inset-base-hover: var(--surface-inset-base-hover);
+  --color-surface-inset-strong: var(--surface-inset-strong);
+  --color-surface-inset-strong-hover: var(--surface-inset-strong-hover);
+  --color-surface-raised-base: var(--surface-raised-base);
+  --color-surface-float-base: var(--surface-float-base);
+  --color-surface-float-base-hover: var(--surface-float-base-hover);
+  --color-surface-raised-base-hover: var(--surface-raised-base-hover);
+  --color-surface-raised-strong: var(--surface-raised-strong);
+  --color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
+  --color-surface-raised-stronger: var(--surface-raised-stronger);
+  --color-surface-raised-stronger-hover: var(--surface-raised-stronger-hover);
+  --color-surface-weak: var(--surface-weak);
+  --color-surface-weaker: var(--surface-weaker);
+  --color-surface-strong: var(--surface-strong);
+  --color-surface-raised-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
+  --color-surface-brand-base: var(--surface-brand-base);
+  --color-surface-brand-hover: var(--surface-brand-hover);
+  --color-surface-interactive-base: var(--surface-interactive-base);
+  --color-surface-interactive-hover: var(--surface-interactive-hover);
+  --color-surface-interactive-weak: var(--surface-interactive-weak);
+  --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover);
+  --color-surface-success-base: var(--surface-success-base);
+  --color-surface-success-weak: var(--surface-success-weak);
+  --color-surface-success-strong: var(--surface-success-strong);
+  --color-surface-warning-base: var(--surface-warning-base);
+  --color-surface-warning-weak: var(--surface-warning-weak);
+  --color-surface-warning-strong: var(--surface-warning-strong);
+  --color-surface-critical-base: var(--surface-critical-base);
+  --color-surface-critical-weak: var(--surface-critical-weak);
+  --color-surface-critical-strong: var(--surface-critical-strong);
+  --color-surface-info-base: var(--surface-info-base);
+  --color-surface-info-weak: var(--surface-info-weak);
+  --color-surface-info-strong: var(--surface-info-strong);
+  --color-surface-diff-skip-base: var(--surface-diff-skip-base);
+  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
+  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
+  --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
+  --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
+  --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
+  --color-surface-diff-hidden-stronger: var(--surface-diff-hidden-stronger);
+  --color-surface-diff-add-base: var(--surface-diff-add-base);
+  --color-surface-diff-add-weak: var(--surface-diff-add-weak);
+  --color-surface-diff-add-weaker: var(--surface-diff-add-weaker);
+  --color-surface-diff-add-strong: var(--surface-diff-add-strong);
+  --color-surface-diff-add-stronger: var(--surface-diff-add-stronger);
+  --color-surface-diff-delete-base: var(--surface-diff-delete-base);
+  --color-surface-diff-delete-weak: var(--surface-diff-delete-weak);
+  --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker);
+  --color-surface-diff-delete-strong: var(--surface-diff-delete-strong);
+  --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger);
+  --color-text-base: var(--text-base);
+  --color-input-base: var(--input-base);
+  --color-input-hover: var(--input-hover);
+  --color-input-active: var(--input-active);
+  --color-input-selected: var(--input-selected);
+  --color-input-focus: var(--input-focus);
+  --color-input-disabled: var(--input-disabled);
+  --color-text-weak: var(--text-weak);
+  --color-text-weaker: var(--text-weaker);
+  --color-text-strong: var(--text-strong);
+  --color-text-on-brand-base: var(--text-on-brand-base);
+  --color-text-on-interactive-base: var(--text-on-interactive-base);
+  --color-text-on-success-base: var(--text-on-success-base);
+  --color-text-on-warning-base: var(--text-on-warning-base);
+  --color-text-on-info-base: var(--text-on-info-base);
+  --color-text-diff-add-base: var(--text-diff-add-base);
+  --color-text-diff-delete-base: var(--text-diff-delete-base);
+  --color-text-diff-delete-strong: var(--text-diff-delete-strong);
+  --color-text-diff-add-strong: var(--text-diff-add-strong);
+  --color-text-on-info-weak: var(--text-on-info-weak);
+  --color-text-on-info-strong: var(--text-on-info-strong);
+  --color-text-on-warning-weak: var(--text-on-warning-weak);
+  --color-text-on-warning-strong: var(--text-on-warning-strong);
+  --color-text-on-success-weak: var(--text-on-success-weak);
+  --color-text-on-success-strong: var(--text-on-success-strong);
+  --color-text-on-brand-weak: var(--text-on-brand-weak);
+  --color-text-on-brand-weaker: var(--text-on-brand-weaker);
+  --color-text-on-brand-strong: var(--text-on-brand-strong);
+  --color-button-secondary-base: var(--button-secondary-base);
+  --color-border-base: var(--border-base);
+  --color-border-hover: var(--border-hover);
+  --color-border-active: var(--border-active);
+  --color-border-selected: var(--border-selected);
+  --color-border-disabled: var(--border-disabled);
+  --color-border-focus: var(--border-focus);
+  --color-border-weak-base: var(--border-weak-base);
+  --color-border-strong-base: var(--border-strong-base);
+  --color-border-strong-hover: var(--border-strong-hover);
+  --color-border-strong-active: var(--border-strong-active);
+  --color-border-strong-selected: var(--border-strong-selected);
+  --color-border-strong-disabled: var(--border-strong-disabled);
+  --color-border-strong-focus: var(--border-strong-focus);
+  --color-border-weak-hover: var(--border-weak-hover);
+  --color-border-weak-active: var(--border-weak-active);
+  --color-border-weak-selected: var(--border-weak-selected);
+  --color-border-weak-disabled: var(--border-weak-disabled);
+  --color-border-weak-focus: var(--border-weak-focus);
+  --color-border-interactive-base: var(--border-interactive-base);
+  --color-border-interactive-hover: var(--border-interactive-hover);
+  --color-border-interactive-active: var(--border-interactive-active);
+  --color-border-interactive-selected: var(--border-interactive-selected);
+  --color-border-interactive-disabled: var(--border-interactive-disabled);
+  --color-border-interactive-focus: var(--border-interactive-focus);
+  --color-border-success-base: var(--border-success-base);
+  --color-border-success-hover: var(--border-success-hover);
+  --color-border-success-selected: var(--border-success-selected);
+  --color-border-warning-base: var(--border-warning-base);
+  --color-border-warning-hover: var(--border-warning-hover);
+  --color-border-warning-selected: var(--border-warning-selected);
+  --color-border-critical-base: var(--border-critical-base);
+  --color-border-critical-hover: var(--border-critical-hover);
+  --color-border-critical-selected: var(--border-critical-selected);
+  --color-border-info-base: var(--border-info-base);
+  --color-border-info-hover: var(--border-info-hover);
+  --color-border-info-selected: var(--border-info-selected);
+  --color-icon-base: var(--icon-base);
+  --color-icon-hover: var(--icon-hover);
+  --color-icon-active: var(--icon-active);
+  --color-icon-selected: var(--icon-selected);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-icon-focus: var(--icon-focus);
+  --color-icon-weak-base: var(--icon-weak-base);
+  --color-icon-invert-base: var(--icon-invert-base);
+  --color-icon-weak-hover: var(--icon-weak-hover);
+  --color-icon-weak-active: var(--icon-weak-active);
+  --color-icon-weak-selected: var(--icon-weak-selected);
+  --color-icon-weak-disabled: var(--icon-weak-disabled);
+  --color-icon-weak-focus: var(--icon-weak-focus);
+  --color-icon-strong-base: var(--icon-strong-base);
+  --color-icon-strong-hover: var(--icon-strong-hover);
+  --color-icon-strong-active: var(--icon-strong-active);
+  --color-icon-strong-selected: var(--icon-strong-selected);
+  --color-icon-strong-disabled: var(--icon-strong-disabled);
+  --color-icon-strong-focus: var(--icon-strong-focus);
+  --color-icon-brand-base: var(--icon-brand-base);
+  --color-icon-interactive-base: var(--icon-interactive-base);
+  --color-icon-success-base: var(--icon-success-base);
+  --color-icon-success-hover: var(--icon-success-hover);
+  --color-icon-success-active: var(--icon-success-active);
+  --color-icon-warning-base: var(--icon-warning-base);
+  --color-icon-warning-hover: var(--icon-warning-hover);
+  --color-icon-warning-active: var(--icon-warning-active);
+  --color-icon-critical-base: var(--icon-critical-base);
+  --color-icon-critical-hover: var(--icon-critical-hover);
+  --color-icon-critical-active: var(--icon-critical-active);
+  --color-icon-info-base: var(--icon-info-base);
+  --color-icon-info-hover: var(--icon-info-hover);
+  --color-icon-info-active: var(--icon-info-active);
+  --color-icon-on-brand-base: var(--icon-on-brand-base);
+  --color-icon-on-brand-hover: var(--icon-on-brand-hover);
+  --color-icon-on-brand-selected: var(--icon-on-brand-selected);
+  --color-icon-on-interactive-base: var(--icon-on-interactive-base);
+  --color-icon-on-interactive-hover: var(--icon-on-interactive-hover);
+  --color-icon-on-interactive-selected: var(--icon-on-interactive-selected);
+  --color-icon-agent-plan-base: var(--icon-agent-plan-base);
+  --color-icon-agent-docs-base: var(--icon-agent-docs-base);
+  --color-icon-agent-ask-base: var(--icon-agent-ask-base);
+  --color-icon-agent-build-base: var(--icon-agent-build-base);
+  --color-icon-on-success-base: var(--icon-on-success-base);
+  --color-icon-on-success-hover: var(--icon-on-success-hover);
+  --color-icon-on-success-selected: var(--icon-on-success-selected);
+  --color-icon-on-warning-base: var(--icon-on-warning-base);
+  --color-icon-on-warning-hover: var(--icon-on-warning-hover);
+  --color-icon-on-warning-selected: var(--icon-on-warning-selected);
+  --color-icon-on-critical-base: var(--icon-on-critical-base);
+  --color-icon-on-critical-hover: var(--icon-on-critical-hover);
+  --color-icon-on-critical-selected: var(--icon-on-critical-selected);
+  --color-icon-on-info-base: var(--icon-on-info-base);
+  --color-icon-on-info-hover: var(--icon-on-info-hover);
+  --color-icon-on-info-selected: var(--icon-on-info-selected);
+  --color-icon-diff-add-base: var(--icon-diff-add-base);
+  --color-icon-diff-add-hover: var(--icon-diff-add-hover);
+  --color-icon-diff-add-active: var(--icon-diff-add-active);
+  --color-icon-diff-delete-base: var(--icon-diff-delete-base);
+  --color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
+  --color-icon-diff-delete-active: var(--icon-diff-delete-active);
+  --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-function: var(--syntax-function);
+  --color-syntax-number: var(--syntax-number);
+  --color-syntax-operator: var(--syntax-operator);
+  --color-syntax-variable: var(--syntax-variable);
+  --color-syntax-type: var(--syntax-type);
+  --color-syntax-constant: var(--syntax-constant);
+  --color-syntax-punctuation: var(--syntax-punctuation);
+  --color-syntax-success: var(--syntax-success);
+  --color-syntax-warning: var(--syntax-warning);
+  --color-syntax-critical: var(--syntax-critical);
+  --color-syntax-info: var(--syntax-info);
+  --color-markdown-heading: var(--markdown-heading);
+  --color-markdown-text: var(--markdown-text);
+  --color-markdown-link: var(--markdown-link);
+  --color-markdown-link-text: var(--markdown-link-text);
+  --color-markdown-code: var(--markdown-code);
+  --color-markdown-block-quote: var(--markdown-block-quote);
+  --color-markdown-emph: var(--markdown-emph);
+  --color-markdown-strong: var(--markdown-strong);
+  --color-markdown-horizontal-rule: var(--markdown-horizontal-rule);
+  --color-markdown-list-item: var(--markdown-list-item);
+  --color-markdown-list-enumeration: var(--markdown-list-enumeration);
+  --color-markdown-image: var(--markdown-image);
+  --color-markdown-image-text: var(--markdown-image-text);
+  --color-markdown-code-block: var(--markdown-code-block);
+  --color-border-color: var(--border-color);
+}

packages/css/src/tailwind.css

@@ -4,217 +4,8 @@
 @import "tailwindcss/utilities.css" layer(utilities);
 
 @theme {
-  --color-*: initial;
-  --color-background-base: var(--background-base);
-  --color-background-weak: var(--background-weak);
-  --color-background-weaker: var(--background-weaker);
-  --color-surface-base: var(--surface-base);
-  --color-input-base: var(--input-base);
-  --color-input-hover: var(--input-hover);
-  --color-input-active: var(--input-active);
-  --color-input-selected: var(--input-selected);
-  --color-input-focus: var(--input-focus);
-  --color-input-disabled: var(--input-disabled);
-  --color-surface-hover: var(--surface-hover);
-  --color-surface-active: var(--surface-active);
-  --color-surface-selected: var(--surface-selected);
-  --color-surface-disabled: var(--surface-disabled);
-  --color-surface-focus: var(--surface-focus);
-  --color-surface-inset-base: var(--surface-inset-base);
-  --color-surface-inset-hover: var(--surface-inset-hover);
-  --color-surface-inset-active: var(--surface-inset-active);
-  --color-surface-inset-selected: var(--surface-inset-selected);
-  --color-surface-inset-disabled: var(--surface-inset-disabled);
-  --color-surface-inset-focus: var(--surface-inset-focus);
-  --color-surface-raised-base: var(--surface-raised-base);
-  --color-surface-raised-hover: var(--surface-raised-hover);
-  --color-surface-raised-active: var(--surface-raised-active);
-  --color-surface-raised-selected: var(--surface-raised-selected);
-  --color-surface-raised-disabled: var(--surface-raised-disabled);
-  --color-surface-raised-focus: var(--surface-raised-focus);
-  --color-surface-overlay-base: var(--surface-overlay-base);
-  --color-surface-brand-base: var(--surface-brand-base);
-  --color-surface-brand-hover: var(--surface-brand-hover);
-  --color-surface-interactive-base: var(--surface-interactive-base);
-  --color-surface-interactive-hover: var(--surface-interactive-hover);
-  --color-surface-interactive-weak: var(--surface-interactive-weak);
-  --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover);
-  --color-surface-success-base: var(--surface-success-base);
-  --color-surface-success-weak: var(--surface-success-weak);
-  --color-surface-success-strong: var(--surface-success-strong);
-  --color-surface-warning-base: var(--surface-warning-base);
-  --color-surface-warning-weak: var(--surface-warning-weak);
-  --color-surface-warning-strong: var(--surface-warning-strong);
-  --color-surface-critical-base: var(--surface-critical-base);
-  --color-surface-critical-weak: var(--surface-critical-weak);
-  --color-surface-critical-strong: var(--surface-critical-strong);
-  --color-surface-info-base: var(--surface-info-base);
-  --color-surface-info-weak: var(--surface-info-weak);
-  --color-surface-info-strong: var(--surface-info-strong);
-  --color-surface-diff-add-base: var(--surface-diff-add-base);
-  --color-surface-diff-add-weak: var(--surface-diff-add-weak);
-  --color-surface-diff-add-weaker: var(--surface-diff-add-weaker);
-  --color-surface-diff-add-strong: var(--surface-diff-add-strong);
-  --color-surface-diff-add-stronger: var(--surface-diff-add-stronger);
-  --color-surface-diff-delete-base: var(--surface-diff-delete-base);
-  --color-surface-on-background-weak-base: var(--surface-on-background-weak-base);
-  --color-surface-on-background-weak-inset-base: var(--surface-on-background-weak-inset-base);
-  --color-surface-on-background-weak-hover: var(--surface-on-background-weak-hover);
-  --color-surface-on-background-weak-active: var(--surface-on-background-weak-active);
-  --color-surface-on-background-weak-selected: var(--surface-on-background-weak-selected);
-  --color-surface-on-background-weak-disabled: var(--surface-on-background-weak-disabled);
-  --color-surface-on-background-weak-focus: var(--surface-on-background-weak-focus);
-  --color-surface-on-background-weak-inset-hover: var(--surface-on-background-weak-inset-hover);
-  --color-surface-on-background-weak-inset-active: var(--surface-on-background-weak-inset-active);
-  --color-surface-on-background-weak-inset-selected: var(--surface-on-background-weak-inset-selected);
-  --color-surface-on-background-weak-inset-disabled: var(--surface-on-background-weak-inset-disabled);
-  --color-surface-on-background-weak-inset-focus: var(--surface-on-background-weak-inset-focus);
-  --color-surface-diff-delete-weak: var(--surface-diff-delete-weak);
-  --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker);
-  --color-surface-diff-delete-strong: var(--surface-diff-delete-strong);
-  --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger);
-  --color-text-base: var(--text-base);
-  --color-text-weak: var(--text-weak);
-  --color-text-weaker: var(--text-weaker);
-  --color-text-strong: var(--text-strong);
-  --color-text-on-brand-base: var(--text-on-brand-base);
-  --color-text-on-interactive-base: var(--text-on-interactive-base);
-  --color-text-on-success-base: var(--text-on-success-base);
-  --color-text-on-warning-base: var(--text-on-warning-base);
-  --color-text-on-info-base: var(--text-on-info-base);
-  --color-text-on-diff-add-base: var(--text-on-diff-add-base);
-  --color-text-on-diff-delete-base: var(--text-on-diff-delete-base);
-  --color-text-on-diff-delete-weak: var(--text-on-diff-delete-weak);
-  --color-text-on-diff-delete-strong: var(--text-on-diff-delete-strong);
-  --color-text-on-diff-add-weak: var(--text-on-diff-add-weak);
-  --color-text-on-diff-add-strong: var(--text-on-diff-add-strong);
-  --color-text-on-info-weak: var(--text-on-info-weak);
-  --color-text-on-info-strong: var(--text-on-info-strong);
-  --color-text-on-warning-weak: var(--text-on-warning-weak);
-  --color-text-on-warning-strong: var(--text-on-warning-strong);
-  --color-text-on-success-weak: var(--text-on-success-weak);
-  --color-text-on-success-strong: var(--text-on-success-strong);
-  --color-text-on-interactive-weak: var(--text-on-interactive-weak);
-  --color-text-on-interactive-strong: var(--text-on-interactive-strong);
-  --color-text-on-brand-weak: var(--text-on-brand-weak);
-  --color-text-on-brand-weaker: var(--text-on-brand-weaker);
-  --color-text-on-brand-strong: var(--text-on-brand-strong);
-  --color-border-base: var(--border-base);
-  --color-border-hover: var(--border-hover);
-  --color-border-active: var(--border-active);
-  --color-border-selected: var(--border-selected);
-  --color-border-disabled: var(--border-disabled);
-  --color-border-focus: var(--border-focus);
-  --color-border-weak-base: var(--border-weak-base);
-  --color-border-weak-hover: var(--border-weak-hover);
-  --color-border-weak-active: var(--border-weak-active);
-  --color-icon-base: var(--icon-base);
-  --color-icon-hover: var(--icon-hover);
-  --color-icon-active: var(--icon-active);
-  --color-icon-selected: var(--icon-selected);
-  --color-icon-disabled: var(--icon-disabled);
-  --color-icon-focus: var(--icon-focus);
-  --color-icon-weak-base: var(--icon-weak-base);
-  --color-icon-weak-hover: var(--icon-weak-hover);
-  --color-icon-weak-active: var(--icon-weak-active);
-  --color-icon-weak-selected: var(--icon-weak-selected);
-  --color-icon-weak-disabled: var(--icon-weak-disabled);
-  --color-icon-weak-focus: var(--icon-weak-focus);
-  --color-icon-strong-base: var(--icon-strong-base);
-  --color-icon-strong-hover: var(--icon-strong-hover);
-  --color-icon-strong-active: var(--icon-strong-active);
-  --color-icon-strong-selected: var(--icon-strong-selected);
-  --color-icon-strong-disabled: var(--icon-strong-disabled);
-  --color-icon-strong-focus: var(--icon-strong-focus);
-  --color-border-weak-selected: var(--border-weak-selected);
-  --color-border-weak-disabled: var(--border-weak-disabled);
-  --color-border-weak-focus: var(--border-weak-focus);
-  --color-border-interactive-base: var(--border-interactive-base);
-  --color-border-interactive-hover: var(--border-interactive-hover);
-  --color-border-interactive-active: var(--border-interactive-active);
-  --color-border-interactive-selected: var(--border-interactive-selected);
-  --color-border-interactive-disabled: var(--border-interactive-disabled);
-  --color-border-interactive-focus: var(--border-interactive-focus);
-  --color-border-success-base: var(--border-success-base);
-  --color-border-success-hover: var(--border-success-hover);
-  --color-border-success-selected: var(--border-success-selected);
-  --color-border-warning-base: var(--border-warning-base);
-  --color-border-warning-hover: var(--border-warning-hover);
-  --color-border-warning-selected: var(--border-warning-selected);
-  --color-border-critical-base: var(--border-critical-base);
-  --color-border-critical-hover: var(--border-critical-hover);
-  --color-border-critical-selected: var(--border-critical-selected);
-  --color-border-info-base: var(--border-info-base);
-  --color-border-info-hover: var(--border-info-hover);
-  --color-border-info-selected: var(--border-info-selected);
-  --color-icon-brand-base: var(--icon-brand-base);
-  --color-icon-interactive-base: var(--icon-interactive-base);
-  --color-icon-success-base: var(--icon-success-base);
-  --color-icon-warning-base: var(--icon-warning-base);
-  --color-icon-warning-hover: var(--icon-warning-hover);
-  --color-icon-warning-active: var(--icon-warning-active);
-  --color-icon-success-hover: var(--icon-success-hover);
-  --color-icon-success-active: var(--icon-success-active);
-  --color-icon-critical-base: var(--icon-critical-base);
-  --color-icon-critical-hover: var(--icon-critical-hover);
-  --color-icon-critical-active: var(--icon-critical-active);
-  --color-icon-info-base: var(--icon-info-base);
-  --color-icon-info-hover: var(--icon-info-hover);
-  --color-icon-info-active: var(--icon-info-active);
-  --color-icon-on-brand-base: var(--icon-on-brand-base);
-  --color-icon-on-brand-hover: var(--icon-on-brand-hover);
-  --color-icon-on-brand-selected: var(--icon-on-brand-selected);
-  --color-icon-on-interactive-base: var(--icon-on-interactive-base);
-  --color-icon-on-interactive-hover: var(--icon-on-interactive-hover);
-  --color-icon-on-interactive-selected: var(--icon-on-interactive-selected);
-  --color-icon-agent-plan-base: var(--icon-agent-plan-base);
-  --color-icon-agent-build-base: var(--icon-agent-build-base);
-  --color-icon-agent-docs-base: var(--icon-agent-docs-base);
-  --color-icon-agent-ask-base: var(--icon-agent-ask-base);
-  --color-icon-on-success-base: var(--icon-on-success-base);
-  --color-icon-on-success-hover: var(--icon-on-success-hover);
-  --color-icon-on-success-selected: var(--icon-on-success-selected);
-  --color-icon-on-warning-base: var(--icon-on-warning-base);
-  --color-icon-on-warning-hover: var(--icon-on-warning-hover);
-  --color-icon-on-warning-selected: var(--icon-on-warning-selected);
-  --color-icon-on-critical-base: var(--icon-on-critical-base);
-  --color-icon-on-critical-hover: var(--icon-on-critical-hover);
-  --color-icon-on-critical-selected: var(--icon-on-critical-selected);
-  --color-icon-on-info-base: var(--icon-on-info-base);
-  --color-icon-on-diff-add-base: var(--icon-on-diff-add-base);
-  --color-icon-on-diff-delete-base: var(--icon-on-diff-delete-base);
-  --color-icon-on-diff-delete-hover: var(--icon-on-diff-delete-hover);
-  --color-icon-on-diff-delete-active: var(--icon-on-diff-delete-active);
-  --color-icon-on-diff-add-hover: var(--icon-on-diff-add-hover);
-  --color-icon-on-diff-add-active: var(--icon-on-diff-add-active);
-  --color-icon-on-info-hover: var(--icon-on-info-hover);
-  --color-icon-on-info-selected: var(--icon-on-info-selected);
-  --color-syntax-comment: var(--syntax-comment);
-  --color-syntax-string: var(--syntax-string);
-  --color-syntax-keyword: var(--syntax-keyword);
-  --color-syntax-function: var(--syntax-function);
-  --color-syntax-number: var(--syntax-number);
-  --color-syntax-operator: var(--syntax-operator);
-  --color-syntax-variable: var(--syntax-variable);
-  --color-syntax-type: var(--syntax-type);
-  --color-syntax-constant: var(--syntax-constant);
-  --color-syntax-punctuation: var(--syntax-punctuation);
-  --color-syntax-success: var(--syntax-success);
-  --color-syntax-warning: var(--syntax-warning);
-  --color-syntax-critical: var(--syntax-critical);
-  --color-syntax-info: var(--syntax-info);
-  --color-markdown-heading: var(--markdown-heading);
-  --color-markdown-text: var(--markdown-text);
-  --color-markdown-link: var(--markdown-link);
-  --color-markdown-link-text: var(--markdown-link-text);
-  --color-markdown-code: var(--markdown-code);
-  --color-markdown-block-quote: var(--markdown-block-quote);
-  --color-markdown-emph: var(--markdown-emph);
-  --color-markdown-strong: var(--markdown-strong);
-  --color-markdown-horizontal-rule: var(--markdown-horizontal-rule);
-  --color-markdown-list-item: var(--markdown-list-item);
-  --color-markdown-list-enumeration: var(--markdown-list-enumeration);
-  --color-markdown-image: var(--markdown-image);
-  --color-markdown-image-text: var(--markdown-image-text);
-  --color-markdown-code-block: var(--markdown-code-block);
+  --shadow-*: initial;
+  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
 }
+
+@import "./tailwind-colors.css";

packages/css/src/theme.css

@@ -4,6 +4,20 @@
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+  --size-12: 12;
+  --size-14: 14;
+  --size-16: 16;
+  --size-20: 20;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --line-height-lg: 20;
+  --line-height-xl: 24;
+  --line-height-2xl: 30;
+  --letter-spacing-normal: 0;
+  --letter-spacing-tight: -0.1599999964237213;
+  --letter-spacing-tightest: -0.3199999928474426;
+  --paragraph-spacing-0: 0;
+
   --spacing: 0.25rem;
 
   --breakpoint-sm: 40rem;
@@ -26,32 +40,32 @@
   --container-6xl: 72rem;
   --container-7xl: 80rem;
 
-  --text-xs: 0.75rem;
-  --text-xs--line-height: calc(1 / 0.75);
-  --text-sm: 0.875rem;
-  --text-sm--line-height: calc(1.25 / 0.875);
-  --text-base: 1rem;
-  --text-base--line-height: calc(1.5 / 1);
-  --text-lg: 1.125rem;
-  --text-lg--line-height: calc(1.75 / 1.125);
-  --text-xl: 1.25rem;
-  --text-xl--line-height: calc(1.75 / 1.25);
-  --text-2xl: 1.5rem;
-  --text-2xl--line-height: calc(2 / 1.5);
-  --text-3xl: 1.875rem;
-  --text-3xl--line-height: calc(2.25 / 1.875);
-  --text-4xl: 2.25rem;
-  --text-4xl--line-height: calc(2.5 / 2.25);
-  --text-5xl: 3rem;
-  --text-5xl--line-height: 1;
-  --text-6xl: 3.75rem;
-  --text-6xl--line-height: 1;
-  --text-7xl: 4.5rem;
-  --text-7xl--line-height: 1;
-  --text-8xl: 6rem;
-  --text-8xl--line-height: 1;
-  --text-9xl: 8rem;
-  --text-9xl--line-height: 1;
+  /* --text-xs: 0.75rem; */
+  /* --text-xs--line-height: calc(1 / 0.75); */
+  /* --text-sm: 0.875rem; */
+  /* --text-sm--line-height: calc(1.25 / 0.875); */
+  /* --text-base: 1rem; */
+  /* --text-base--line-height: calc(1.5 / 1); */
+  /* --text-lg: 1.125rem; */
+  /* --text-lg--line-height: calc(1.75 / 1.125); */
+  /* --text-xl: 1.25rem; */
+  /* --text-xl--line-height: calc(1.75 / 1.25); */
+  /* --text-2xl: 1.5rem; */
+  /* --text-2xl--line-height: calc(2 / 1.5); */
+  /* --text-3xl: 1.875rem; */
+  /* --text-3xl--line-height: calc(2.25 / 1.875); */
+  /* --text-4xl: 2.25rem; */
+  /* --text-4xl--line-height: calc(2.5 / 2.25); */
+  /* --text-5xl: 3rem; */
+  /* --text-5xl--line-height: 1; */
+  /* --text-6xl: 3.75rem; */
+  /* --text-6xl--line-height: 1; */
+  /* --text-7xl: 4.5rem; */
+  /* --text-7xl--line-height: 1; */
+  /* --text-8xl: 6rem; */
+  /* --text-8xl--line-height: 1; */
+  /* --text-9xl: 8rem; */
+  /* --text-9xl--line-height: 1; */
 
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
@@ -63,18 +77,18 @@
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
 
-  --tracking-tighter: -0.05em;
-  --tracking-tight: -0.025em;
-  --tracking-normal: 0em;
-  --tracking-wide: 0.025em;
-  --tracking-wider: 0.05em;
-  --tracking-widest: 0.1em;
-
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
+  /* --tracking-tighter: -0.05em; */
+  /* --tracking-tight: -0.025em; */
+  /* --tracking-normal: 0em; */
+  /* --tracking-wide: 0.025em; */
+  /* --tracking-wider: 0.05em; */
+  /* --tracking-widest: 0.1em; */
+  /**/
+  /* --leading-tight: 1.25; */
+  /* --leading-snug: 1.375; */
+  /* --leading-normal: 1.5; */
+  /* --leading-relaxed: 1.625; */
+  /* --leading-loose: 2; */
 
   --radius-xs: 0.125rem;
   --radius-sm: 0.25rem;
@@ -93,55 +107,51 @@
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
-  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
-  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
-
-  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
-  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
-  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
-  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
-
-  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
-  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
-  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
-  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
-  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+  /* --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); */
+  /* --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); */
+  /* --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); */
+  /**/
+  /* --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); */
+  /* --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); */
+  /* --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); */
+  /* --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); */
+  /* --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); */
+  /* --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); */
+  /**/
+  /* --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); */
+  /* --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); */
+  /* --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); */
+  /* --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); */
+  /* --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); */
 }
 
 :root {
   /* OC-1-Light */
   color-scheme: light;
-  --background-base: var(--smoke-light-1);
-  --background-weak: #f7f6f6;
-  --background-weaker: #fcfcfc;
-  --surface-base: var(--smoke-light-2);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --surface-hover: var(--smoke-light-4);
-  --surface-active: var(--smoke-light-5);
-  --surface-selected: var(--cobalt-light-3);
-  --surface-disabled: var(--smoke-light-2);
-  --surface-focus: var(--cobalt-light-3);
-  --surface-inset-base: var(--smoke-light-3);
-  --surface-inset-hover: var(--smoke-light-4);
-  --surface-inset-active: var(--smoke-light-6);
-  --surface-inset-selected: var(--cobalt-light-4);
-  --surface-inset-disabled: var(--smoke-light-3);
-  --surface-inset-focus: var(--cobalt-light-4);
-  --surface-raised-base: var(--white);
-  --surface-raised-hover: var(--smoke-light-3);
-  --surface-raised-active: var(--smoke-light-4);
-  --surface-raised-selected: var(--cobalt-light-3);
-  --surface-raised-disabled: var(--smoke-light-2);
-  --surface-raised-focus: var(--cobalt-light-3);
-  --surface-overlay-base: var(--smoke-light-alpha-9);
+  --background-base: #f8f7f7;
+  --background-weak: var(--smoke-light-3);
+  --background-strong: var(--smoke-light-1);
+  --background-stronger: #fcfcfc;
+  --base: var(--smoke-light-alpha-2);
+  --surface-base: var(--smoke-light-alpha-2);
+  --base2: var(--smoke-light-alpha-2);
+  --base3: var(--smoke-light-alpha-2);
+  --surface-inset-base: var(--smoke-light-alpha-3);
+  --surface-inset-base-hover: var(--smoke-light-alpha-3);
+  --surface-inset-strong: #1f000017;
+  --surface-inset-strong-hover: #1f000017;
+  --surface-raised-base: var(--smoke-light-alpha-1);
+  --surface-float-base: var(--smoke-dark-1);
+  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-strong: var(--smoke-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--smoke-light-alpha-3);
+  --surface-weaker: var(--smoke-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
   --surface-brand-base: var(--yuzu-light-9);
   --surface-brand-hover: var(--yuzu-light-10);
   --surface-interactive-base: var(--cobalt-light-3);
@@ -160,54 +170,52 @@
   --surface-info-base: var(--lilac-light-3);
   --surface-info-weak: var(--lilac-light-2);
   --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-add-base: var(--coral-light-3);
-  --surface-diff-add-weak: var(--coral-light-2);
-  --surface-diff-add-weaker: var(--coral-light-1);
-  --surface-diff-add-strong: var(--coral-light-9);
-  --surface-diff-add-stronger: var(--coral-light-12);
-  --surface-diff-delete-base: var(--mint-light-3);
-  --surface-on-background-weak-base: var(--smoke-light-1);
-  --surface-on-background-weak-inset-base: var(--smoke-light-1);
-  --surface-on-background-weak-hover: var(--smoke-light-1);
-  --surface-on-background-weak-active: var(--smoke-light-1);
-  --surface-on-background-weak-selected: var(--smoke-light-1);
-  --surface-on-background-weak-disabled: var(--smoke-light-1);
-  --surface-on-background-weak-focus: var(--smoke-light-1);
-  --surface-on-background-weak-inset-hover: var(--smoke-light-1);
-  --surface-on-background-weak-inset-active: var(--smoke-light-1);
-  --surface-on-background-weak-inset-selected: var(--smoke-light-1);
-  --surface-on-background-weak-inset-disabled: var(--smoke-light-1);
-  --surface-on-background-weak-inset-focus: var(--smoke-light-1);
-  --surface-diff-delete-weak: var(--mint-light-2);
-  --surface-diff-delete-weaker: var(--mint-light-1);
-  --surface-diff-delete-strong: var(--mint-light-9);
-  --surface-diff-delete-stronger: var(--mint-light-11);
+  --surface-diff-skip-base: var(--smoke-light-3);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: var(--mint-light-3);
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
   --text-base: var(--smoke-light-11);
+  --input-base: var(--smoke-light-1);
+  --input-hover: var(--smoke-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--smoke-light-4);
   --text-weak: var(--smoke-light-9);
   --text-weaker: var(--smoke-light-8);
   --text-strong: var(--smoke-light-12);
   --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-alpha-11);
+  --text-on-interactive-base: var(--smoke-light-1);
   --text-on-success-base: var(--smoke-dark-alpha-11);
   --text-on-warning-base: var(--smoke-dark-alpha-11);
   --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-on-diff-add-base: var(--mint-light-11);
-  --text-on-diff-delete-base: var(--coral-light-11);
-  --text-on-diff-delete-weak: var(--coral-light-9);
-  --text-on-diff-delete-strong: var(--coral-light-12);
-  --text-on-diff-add-weak: var(--mint-light-9);
-  --text-on-diff-add-strong: var(--mint-light-12);
+  --text-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-11);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
   --text-on-info-weak: var(--smoke-dark-alpha-9);
   --text-on-info-strong: var(--smoke-dark-alpha-12);
   --text-on-warning-weak: var(--smoke-dark-alpha-9);
   --text-on-warning-strong: var(--smoke-dark-alpha-12);
   --text-on-success-weak: var(--smoke-dark-alpha-9);
   --text-on-success-strong: var(--smoke-dark-alpha-12);
-  --text-on-interactive-weak: var(--smoke-light-alpha-9);
-  --text-on-interactive-strong: var(--smoke-light-alpha-12);
   --text-on-brand-weak: var(--smoke-light-alpha-9);
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-secondary-base: #fdfcfc;
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -215,26 +223,14 @@
   --border-disabled: var(--smoke-light-alpha-8);
   --border-focus: var(--smoke-light-alpha-9);
   --border-weak-base: var(--smoke-light-alpha-5);
-  --icon-base: var(--smoke-light-9);
+  --border-strong-base: var(--smoke-light-alpha-7);
+  --border-strong-hover: var(--smoke-light-alpha-8);
+  --border-strong-active: var(--smoke-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--smoke-light-alpha-6);
+  --border-strong-focus: var(--smoke-light-alpha-7);
   --border-weak-hover: var(--smoke-light-alpha-6);
   --border-weak-active: var(--smoke-light-alpha-7);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: var(--smoke-light-12);
-  --icon-strong-active: var(--smoke-light-12);
-  --icon-strong-selected: var(--smoke-light-12);
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: var(--smoke-light-12);
   --border-weak-selected: var(--cobalt-light-alpha-6);
   --border-weak-disabled: var(--smoke-light-alpha-6);
   --border-weak-focus: var(--smoke-light-alpha-7);
@@ -256,14 +252,33 @@
   --border-info-base: var(--lilac-light-6);
   --border-info-hover: var(--lilac-light-7);
   --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--smoke-light-9);
+  --icon-hover: var(--smoke-light-11);
+  --icon-active: var(--smoke-light-12);
+  --icon-selected: var(--smoke-light-12);
+  --icon-disabled: var(--smoke-light-8);
+  --icon-focus: var(--smoke-light-12);
+  --icon-weak-base: var(--smoke-light-7);
+  --icon-invert-base: #ffffff;
+  --icon-weak-hover: var(--smoke-light-8);
+  --icon-weak-active: var(--smoke-light-9);
+  --icon-weak-selected: var(--smoke-light-10);
+  --icon-weak-disabled: var(--smoke-light-6);
+  --icon-weak-focus: var(--smoke-light-9);
+  --icon-strong-base: var(--smoke-light-12);
+  --icon-strong-hover: var(--smoke-light-12);
+  --icon-strong-active: var(--smoke-light-12);
+  --icon-strong-selected: var(--smoke-light-12);
+  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-focus: var(--smoke-light-12);
   --icon-brand-base: var(--smoke-light-12);
   --icon-interactive-base: var(--cobalt-light-9);
   --icon-success-base: var(--apple-light-7);
-  --icon-warning-base: var(--solaris-light-7);
-  --icon-warning-hover: var(--solaris-light-8);
-  --icon-warning-active: var(--solaris-light-11);
   --icon-success-hover: var(--apple-light-8);
   --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
   --icon-critical-base: var(--ember-light-7);
   --icon-critical-hover: var(--ember-light-8);
   --icon-critical-active: var(--ember-light-11);
@@ -277,27 +292,27 @@
   --icon-on-interactive-hover: var(--smoke-light-alpha-10);
   --icon-on-interactive-selected: var(--smoke-light-alpha-11);
   --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
   --icon-agent-docs-base: var(--amber-light-9);
   --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--blue-light-9);
   --icon-on-success-base: var(--apple-light-alpha-9);
   --icon-on-success-hover: var(--apple-light-alpha-10);
   --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--solaris-light-alpha-9);
-  --icon-on-warning-hover: var(--solaris-light-alpha-10);
-  --icon-on-warning-selected: var(--solaris-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
   --icon-on-critical-base: var(--ember-light-alpha-9);
   --icon-on-critical-hover: var(--ember-light-alpha-10);
   --icon-on-critical-selected: var(--ember-light-alpha-11);
   --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-diff-add-base: var(--mint-dark-alpha-9);
-  --icon-on-diff-delete-base: var(--coral-light-alpha-9);
-  --icon-on-diff-delete-hover: var(--coral-light-alpha-10);
-  --icon-on-diff-delete-active: var(--coral-light-alpha-11);
-  --icon-on-diff-add-hover: var(--mint-dark-alpha-10);
-  --icon-on-diff-add-active: var(--mint-dark-alpha-11);
   --icon-on-info-hover: var(--lilac-light-alpha-10);
   --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-9);
+  --icon-diff-delete-hover: var(--ember-light-10);
+  --icon-diff-delete-active: var(--ember-light-11);
   --syntax-comment: #ffffff;
   --syntax-string: #ffffff;
   --syntax-keyword: #ffffff;
@@ -326,38 +341,35 @@
   --markdown-image: #ffffff;
   --markdown-image-text: #ffffff;
   --markdown-code-block: #ffffff;
+  --border-color: #ffffff;
 
   .dark {
     /* OC-1-Dark */
     color-scheme: dark;
     --background-base: var(--smoke-dark-1);
-    --background-weak: #151313;
-    --background-weaker: #201c1c;
-    --surface-base: var(--smoke-dark-3);
-    --input-base: var(--smoke-dark-2);
-    --input-hover: var(--smoke-dark-2);
-    --input-active: var(--cobalt-dark-1);
-    --input-selected: var(--cobalt-dark-2);
-    --input-focus: var(--cobalt-dark-1);
-    --input-disabled: var(--smoke-dark-4);
-    --surface-hover: var(--smoke-dark-4);
-    --surface-active: var(--smoke-dark-5);
-    --surface-selected: var(--cobalt-dark-3);
-    --surface-disabled: var(--smoke-dark-2);
-    --surface-focus: var(--cobalt-dark-3);
-    --surface-inset-base: var(--smoke-dark-4);
-    --surface-inset-hover: var(--smoke-dark-5);
-    --surface-inset-active: var(--smoke-dark-6);
-    --surface-inset-selected: var(--cobalt-dark-4);
-    --surface-inset-disabled: var(--smoke-dark-3);
-    --surface-inset-focus: var(--cobalt-dark-4);
-    --surface-raised-base: var(--smoke-dark-4);
-    --surface-raised-hover: var(--smoke-dark-7);
-    --surface-raised-active: var(--smoke-dark-8);
-    --surface-raised-selected: var(--cobalt-dark-3);
-    --surface-raised-disabled: var(--smoke-dark-3);
-    --surface-raised-focus: var(--cobalt-dark-3);
-    --surface-overlay-base: var(--smoke-dark-alpha-2);
+    --background-weak: #201d1d;
+    --background-strong: #151313;
+    --background-stronger: #201c1c;
+    --base: var(--smoke-dark-alpha-2);
+    --surface-base: var(--smoke-dark-alpha-3);
+    --base2: var(--smoke-dark-alpha-2);
+    --base3: var(--smoke-dark-alpha-2);
+    --surface-inset-base: #0e0b0b7f;
+    --surface-inset-base-hover: #0e0b0b7f;
+    --surface-inset-strong: #060505cc;
+    --surface-inset-strong-hover: #060505cc;
+    --surface-raised-base: var(--smoke-dark-alpha-3);
+    --surface-float-base: var(--smoke-dark-1);
+    --surface-float-base-hover: var(--smoke-dark-2);
+    --surface-raised-base-hover: var(--smoke-dark-alpha-4);
+    --surface-raised-strong: var(--smoke-dark-alpha-5);
+    --surface-raised-strong-hover: var(--smoke-dark-alpha-6);
+    --surface-raised-stronger: var(--smoke-dark-alpha-6);
+    --surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
+    --surface-weak: var(--smoke-dark-alpha-5);
+    --surface-weaker: var(--smoke-dark-alpha-6);
+    --surface-strong: var(--smoke-dark-alpha-7);
+    --surface-raised-stronger-non-alpha: var(--smoke-dark-5);
     --surface-brand-base: var(--yuzu-light-9);
     --surface-brand-hover: var(--yuzu-light-10);
     --surface-interactive-base: var(--cobalt-light-3);
@@ -376,54 +388,52 @@
     --surface-info-base: var(--lilac-light-3);
     --surface-info-weak: var(--lilac-light-2);
     --surface-info-strong: var(--lilac-light-9);
-    --surface-diff-add-base: var(--coral-light-3);
-    --surface-diff-add-weak: var(--coral-light-2);
-    --surface-diff-add-weaker: var(--coral-light-1);
-    --surface-diff-add-strong: var(--coral-light-9);
-    --surface-diff-add-stronger: var(--coral-light-12);
-    --surface-diff-delete-base: var(--mint-light-3);
-    --surface-on-background-weak-base: var(--smoke-dark-1);
-    --surface-on-background-weak-inset-base: var(--smoke-light-1);
-    --surface-on-background-weak-hover: var(--smoke-light-1);
-    --surface-on-background-weak-active: var(--smoke-light-1);
-    --surface-on-background-weak-selected: var(--smoke-light-1);
-    --surface-on-background-weak-disabled: var(--smoke-light-1);
-    --surface-on-background-weak-focus: var(--smoke-light-1);
-    --surface-on-background-weak-inset-hover: var(--smoke-light-1);
-    --surface-on-background-weak-inset-active: var(--smoke-light-1);
-    --surface-on-background-weak-inset-selected: var(--smoke-light-1);
-    --surface-on-background-weak-inset-disabled: var(--smoke-light-1);
-    --surface-on-background-weak-inset-focus: var(--smoke-light-1);
-    --surface-diff-delete-weak: var(--mint-light-2);
-    --surface-diff-delete-weaker: var(--mint-light-1);
-    --surface-diff-delete-strong: var(--mint-light-9);
-    --surface-diff-delete-stronger: var(--mint-light-11);
+    --surface-diff-skip-base: var(--smoke-dark-alpha-2);
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
+    --surface-diff-hidden-base: var(--blue-dark-2);
+    --surface-diff-hidden-weak: var(--blue-dark-1);
+    --surface-diff-hidden-weaker: var(--blue-dark-3);
+    --surface-diff-hidden-strong: var(--blue-dark-5);
+    --surface-diff-hidden-stronger: var(--blue-dark-11);
+    --surface-diff-add-base: var(--mint-dark-3);
+    --surface-diff-add-weak: var(--mint-dark-4);
+    --surface-diff-add-weaker: var(--mint-dark-3);
+    --surface-diff-add-strong: var(--mint-dark-5);
+    --surface-diff-add-stronger: var(--mint-dark-11);
+    --surface-diff-delete-base: var(--ember-dark-3);
+    --surface-diff-delete-weak: var(--ember-dark-4);
+    --surface-diff-delete-weaker: var(--ember-dark-3);
+    --surface-diff-delete-strong: var(--ember-dark-5);
+    --surface-diff-delete-stronger: var(--ember-dark-11);
     --text-base: var(--smoke-dark-alpha-11);
+    --input-base: var(--smoke-dark-2);
+    --input-hover: var(--smoke-dark-2);
+    --input-active: var(--cobalt-dark-1);
+    --input-selected: var(--cobalt-dark-2);
+    --input-focus: var(--cobalt-dark-1);
+    --input-disabled: var(--smoke-dark-4);
     --text-weak: var(--smoke-dark-alpha-9);
     --text-weaker: var(--smoke-dark-alpha-8);
     --text-strong: var(--smoke-dark-alpha-12);
     --text-on-brand-base: var(--smoke-dark-alpha-11);
-    --text-on-interactive-base: var(--smoke-dark-alpha-11);
+    --text-on-interactive-base: var(--smoke-dark-12);
     --text-on-success-base: var(--smoke-dark-alpha-11);
     --text-on-warning-base: var(--smoke-dark-alpha-11);
     --text-on-info-base: var(--smoke-dark-alpha-11);
-    --text-on-diff-add-base: var(--mint-dark-11);
-    --text-on-diff-delete-base: var(--coral-dark-11);
-    --text-on-diff-delete-weak: var(--coral-dark-9);
-    --text-on-diff-delete-strong: var(--coral-dark-12);
-    --text-on-diff-add-weak: var(--mint-dark-9);
-    --text-on-diff-add-strong: var(--mint-dark-12);
+    --text-diff-add-base: var(--mint-dark-11);
+    --text-diff-delete-base: var(--ember-dark-9);
+    --text-diff-delete-strong: var(--ember-dark-12);
+    --text-diff-add-strong: var(--mint-dark-8);
     --text-on-info-weak: var(--smoke-dark-alpha-9);
     --text-on-info-strong: var(--smoke-dark-alpha-12);
     --text-on-warning-weak: var(--smoke-dark-alpha-9);
     --text-on-warning-strong: var(--smoke-dark-alpha-12);
     --text-on-success-weak: var(--smoke-dark-alpha-9);
     --text-on-success-strong: var(--smoke-dark-alpha-12);
-    --text-on-interactive-weak: var(--smoke-dark-alpha-9);
-    --text-on-interactive-strong: var(--smoke-dark-alpha-12);
     --text-on-brand-weak: var(--smoke-dark-alpha-9);
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
+    --button-secondary-base: var(--smoke-dark-6);
     --border-base: var(--smoke-dark-alpha-7);
     --border-hover: var(--smoke-dark-alpha-8);
     --border-active: var(--smoke-dark-alpha-9);
@@ -431,26 +441,14 @@
     --border-disabled: var(--smoke-dark-alpha-8);
     --border-focus: var(--smoke-dark-alpha-9);
     --border-weak-base: var(--smoke-dark-alpha-6);
-    --icon-base: var(--smoke-dark-9);
+    --border-strong-base: var(--smoke-dark-alpha-8);
+    --border-strong-hover: var(--smoke-dark-alpha-7);
+    --border-strong-active: var(--smoke-dark-alpha-8);
+    --border-strong-selected: var(--cobalt-dark-alpha-6);
+    --border-strong-disabled: var(--smoke-dark-alpha-6);
+    --border-strong-focus: var(--smoke-dark-alpha-8);
     --border-weak-hover: var(--smoke-dark-alpha-7);
     --border-weak-active: var(--smoke-dark-alpha-8);
-    --icon-hover: var(--smoke-dark-10);
-    --icon-active: var(--smoke-dark-11);
-    --icon-selected: var(--smoke-dark-12);
-    --icon-disabled: var(--smoke-dark-7);
-    --icon-focus: var(--smoke-dark-12);
-    --icon-weak-base: var(--smoke-dark-6);
-    --icon-weak-hover: var(--smoke-light-7);
-    --icon-weak-active: var(--smoke-light-8);
-    --icon-weak-selected: var(--smoke-light-9);
-    --icon-weak-disabled: var(--smoke-light-4);
-    --icon-weak-focus: var(--smoke-light-9);
-    --icon-strong-base: var(--smoke-dark-12);
-    --icon-strong-hover: var(--smoke-light-12);
-    --icon-strong-active: var(--smoke-light-12);
-    --icon-strong-selected: var(--smoke-light-12);
-    --icon-strong-disabled: var(--smoke-light-8);
-    --icon-strong-focus: var(--smoke-light-12);
     --border-weak-selected: var(--cobalt-dark-alpha-6);
     --border-weak-disabled: var(--smoke-dark-alpha-6);
     --border-weak-focus: var(--smoke-dark-alpha-8);
@@ -472,48 +470,67 @@
     --border-info-base: var(--lilac-light-6);
     --border-info-hover: var(--lilac-light-7);
     --border-info-selected: var(--lilac-light-9);
+    --icon-base: var(--smoke-dark-9);
+    --icon-hover: var(--smoke-dark-10);
+    --icon-active: var(--smoke-dark-11);
+    --icon-selected: var(--smoke-dark-12);
+    --icon-disabled: var(--smoke-dark-7);
+    --icon-focus: var(--smoke-dark-12);
+    --icon-weak-base: var(--smoke-dark-6);
+    --icon-invert-base: var(--smoke-dark-1);
+    --icon-weak-hover: var(--smoke-light-7);
+    --icon-weak-active: var(--smoke-light-8);
+    --icon-weak-selected: var(--smoke-light-9);
+    --icon-weak-disabled: var(--smoke-light-4);
+    --icon-weak-focus: var(--smoke-light-9);
+    --icon-strong-base: var(--smoke-dark-12);
+    --icon-strong-hover: var(--smoke-light-12);
+    --icon-strong-active: var(--smoke-light-12);
+    --icon-strong-selected: var(--smoke-light-12);
+    --icon-strong-disabled: var(--smoke-light-8);
+    --icon-strong-focus: var(--smoke-light-12);
     --icon-brand-base: var(--white);
     --icon-interactive-base: var(--cobalt-dark-9);
-    --icon-success-base: var(--apple-light-7);
-    --icon-warning-base: var(--solaris-light-7);
-    --icon-warning-hover: var(--solaris-light-8);
-    --icon-warning-active: var(--solaris-light-11);
-    --icon-success-hover: var(--apple-light-8);
-    --icon-success-active: var(--apple-light-11);
-    --icon-critical-base: var(--ember-light-7);
-    --icon-critical-hover: var(--ember-light-8);
-    --icon-critical-active: var(--ember-light-11);
-    --icon-info-base: var(--lilac-light-7);
-    --icon-info-hover: var(--lilac-light-8);
-    --icon-info-active: var(--lilac-light-11);
+    --icon-success-base: var(--apple-dark-7);
+    --icon-success-hover: var(--apple-dark-8);
+    --icon-success-active: var(--apple-dark-11);
+    --icon-warning-base: var(--amber-dark-7);
+    --icon-warning-hover: var(--amber-dark-8);
+    --icon-warning-active: var(--amber-dark-11);
+    --icon-critical-base: var(--ember-dark-7);
+    --icon-critical-hover: var(--ember-dark-8);
+    --icon-critical-active: var(--ember-dark-11);
+    --icon-info-base: var(--lilac-dark-7);
+    --icon-info-hover: var(--lilac-dark-8);
+    --icon-info-active: var(--lilac-dark-11);
     --icon-on-brand-base: var(--smoke-light-alpha-11);
     --icon-on-brand-hover: var(--smoke-light-alpha-12);
     --icon-on-brand-selected: var(--smoke-light-alpha-12);
     --icon-on-interactive-base: var(--smoke-dark-alpha-9);
     --icon-on-interactive-hover: var(--smoke-dark-alpha-10);
     --icon-on-interactive-selected: var(--smoke-dark-alpha-11);
-    --icon-agent-plan-base: #ffffff;
-    --icon-agent-build-base: #ffffff;
-    --icon-agent-docs-base: #ffffff;
-    --icon-agent-ask-base: #ffffff;
-    --icon-on-success-base: var(--apple-light-alpha-9);
-    --icon-on-success-hover: var(--apple-light-alpha-10);
-    --icon-on-success-selected: var(--apple-light-alpha-11);
-    --icon-on-warning-base: var(--solaris-light-alpha-9);
-    --icon-on-warning-hover: var(--solaris-light-alpha-10);
-    --icon-on-warning-selected: var(--solaris-light-alpha-11);
-    --icon-on-critical-base: var(--ember-light-alpha-9);
-    --icon-on-critical-hover: var(--ember-light-alpha-10);
-    --icon-on-critical-selected: var(--ember-light-alpha-11);
-    --icon-on-info-base: var(--lilac-light-9);
-    --icon-on-diff-add-base: var(--mint-dark-alpha-9);
-    --icon-on-diff-delete-base: var(--coral-light-alpha-9);
-    --icon-on-diff-delete-hover: var(--coral-light-alpha-10);
-    --icon-on-diff-delete-active: var(--coral-light-alpha-11);
-    --icon-on-diff-add-hover: var(--mint-dark-alpha-10);
-    --icon-on-diff-add-active: var(--mint-dark-alpha-11);
-    --icon-on-info-hover: var(--lilac-light-alpha-10);
-    --icon-on-info-selected: var(--lilac-light-alpha-11);
+    --icon-agent-plan-base: var(--purple-dark-9);
+    --icon-agent-docs-base: var(--amber-dark-9);
+    --icon-agent-ask-base: var(--cyan-dark-9);
+    --icon-agent-build-base: var(--blue-dark-9);
+    --icon-on-success-base: var(--apple-dark-alpha-9);
+    --icon-on-success-hover: var(--apple-dark-alpha-10);
+    --icon-on-success-selected: var(--apple-dark-alpha-11);
+    --icon-on-warning-base: var(--amber-darkalpha-9);
+    --icon-on-warning-hover: var(--amber-darkalpha-10);
+    --icon-on-warning-selected: var(--amber-darkalpha-11);
+    --icon-on-critical-base: var(--ember-dark-alpha-9);
+    --icon-on-critical-hover: var(--ember-dark-alpha-10);
+    --icon-on-critical-selected: var(--ember-dark-alpha-11);
+    --icon-on-info-base: var(--lilac-dark-9);
+    --icon-on-info-hover: var(--lilac-dark-alpha-10);
+    --icon-on-info-selected: var(--lilac-dark-alpha-11);
+    --icon-diff-add-base: var(--mint-dark-11);
+    --icon-diff-add-hover: var(--mint-dark-10);
+    --icon-diff-add-active: var(--mint-dark-11);
+    --icon-diff-delete-base: var(--ember-dark-9);
+    --icon-diff-delete-hover: var(--ember-dark-10);
+    --icon-diff-delete-active: var(--ember-dark-11);
     --syntax-comment: #ffffff;
     --syntax-string: #ffffff;
     --syntax-keyword: #ffffff;
@@ -542,5 +559,6 @@
     --markdown-image: #ffffff;
     --markdown-image-text: #ffffff;
     --markdown-code-block: #ffffff;
+    --border-color: #ffffff;
   }
 }

packages/desktop/src/components/prompt-input.tsx

@@ -0,0 +1,264 @@
+import { createEffect, on, Component, createMemo, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+
+interface TextPart {
+  type: "text"
+  content: string
+}
+
+interface AttachmentPart {
+  type: "attachment"
+  fileId: string
+  name: string
+}
+
+export type ContentPart = TextPart | AttachmentPart
+
+export interface AttachmentToAdd {
+  id: string
+  name: string
+}
+
+type AddAttachmentCallback = (attachment: AttachmentToAdd) => void
+
+export interface PopoverState {
+  isOpen: boolean
+  searchQuery: string
+  addAttachment: AddAttachmentCallback
+}
+
+interface PromptInputProps {
+  onSubmit: (parts: ContentPart[]) => void
+  onShowAttachments?: (state: PopoverState | null) => void
+  class?: string
+}
+
+export const PromptInput: Component<PromptInputProps> = (props) => {
+  let editorRef: HTMLDivElement | undefined
+
+  const defaultParts = [{ type: "text", content: "" } as const]
+  const [store, setStore] = createStore<{
+    contentParts: ContentPart[]
+    popover: {
+      isOpen: boolean
+      searchQuery: string
+    }
+  }>({
+    contentParts: defaultParts,
+    popover: {
+      isOpen: false,
+      searchQuery: "",
+    },
+  })
+
+  const isEmpty = createMemo(() => isEqual(store.contentParts, defaultParts))
+
+  createEffect(
+    on(
+      () => store.contentParts,
+      (currentParts) => {
+        if (!editorRef) return
+        const domParts = parseFromDOM()
+        if (isEqual(currentParts, domParts)) return
+
+        const selection = window.getSelection()
+        let cursorPosition: number | null = null
+        if (selection && selection.rangeCount > 0 && editorRef.contains(selection.anchorNode)) {
+          cursorPosition = getCursorPosition(editorRef)
+        }
+
+        editorRef.innerHTML = ""
+        currentParts.forEach((part) => {
+          if (part.type === "text") {
+            editorRef!.appendChild(document.createTextNode(part.content))
+          } else if (part.type === "attachment") {
+            const pill = document.createElement("span")
+            pill.textContent = `@${part.name}`
+            pill.className = "attachment-pill"
+            pill.setAttribute("data-file-id", part.fileId)
+            pill.setAttribute("contenteditable", "false")
+            editorRef!.appendChild(pill)
+          }
+        })
+
+        if (cursorPosition !== null) {
+          setCursorPosition(editorRef, cursorPosition)
+        }
+      },
+    ),
+  )
+
+  createEffect(() => {
+    if (store.popover.isOpen) {
+      props.onShowAttachments?.({
+        isOpen: true,
+        searchQuery: store.popover.searchQuery,
+        addAttachment: addAttachment,
+      })
+    } else {
+      props.onShowAttachments?.(null)
+    }
+  })
+
+  const parseFromDOM = (): ContentPart[] => {
+    if (!editorRef) return []
+    const newParts: ContentPart[] = []
+    editorRef.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.textContent) newParts.push({ type: "text", content: node.textContent })
+      } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.fileId) {
+        newParts.push({
+          type: "attachment",
+          fileId: (node as HTMLElement).dataset.fileId!,
+          name: node.textContent!.substring(1),
+        })
+      }
+    })
+    if (newParts.length === 0) newParts.push(...defaultParts)
+    return newParts
+  }
+
+  const handleInput = () => {
+    const rawParts = parseFromDOM()
+    const cursorPosition = getCursorPosition(editorRef!)
+    const rawText = rawParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("")
+
+    const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/)
+    if (atMatch) {
+      setStore("popover", { isOpen: true, searchQuery: atMatch[1] })
+    } else if (store.popover.isOpen) {
+      setStore("popover", "isOpen", false)
+    }
+
+    setStore("contentParts", rawParts)
+  }
+
+  const addAttachment: AddAttachmentCallback = (attachment) => {
+    const rawText = store.contentParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("")
+    const cursorPosition = getCursorPosition(editorRef!)
+
+    const textBeforeCursor = rawText.substring(0, cursorPosition)
+    const atMatch = textBeforeCursor.match(/@(\S*)$/)
+
+    if (!atMatch) return
+
+    const startIndex = atMatch.index!
+
+    // Create new structured content
+    const newParts: ContentPart[] = []
+    const textBeforeTrigger = rawText.substring(0, startIndex)
+    if (textBeforeTrigger) newParts.push({ type: "text", content: textBeforeTrigger })
+
+    newParts.push({ type: "attachment", fileId: attachment.id, name: attachment.name })
+
+    // Add a space after the pill for better UX
+    newParts.push({ type: "text", content: " " })
+
+    const textAfterCursor = rawText.substring(cursorPosition)
+    if (textAfterCursor) newParts.push({ type: "text", content: textAfterCursor })
+
+    setStore("contentParts", newParts)
+    setStore("popover", "isOpen", false)
+
+    // Set cursor position after the newly added pill + space
+    // We need to wait for the DOM to update
+    queueMicrotask(() => {
+      setCursorPosition(editorRef!, textBeforeTrigger.length + 1 + attachment.name.length + 1)
+    })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (store.popover.isOpen && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
+      // In a real implementation, you'd prevent default and delegate this to the popover
+      console.log("Key press delegated to popover:", event.key)
+      event.preventDefault()
+      return
+    }
+
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault()
+      if (store.contentParts.length > 0) {
+        props.onSubmit([...store.contentParts])
+        setStore("contentParts", defaultParts)
+      }
+    }
+  }
+
+  return (
+    <div
+      classList={{
+        "size-full max-w-xl bg-surface-base border border-border-base": true,
+        "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      <div class="p-3" />
+      <div class="relative">
+        <div
+          ref={editorRef}
+          contenteditable="true"
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          classList={{
+            "w-full p-3 text-sm focus:outline-none": true,
+          }}
+        />
+        <Show when={isEmpty()}>
+          <div class="absolute bottom-0 left-0 p-3 text-sm text-text-weak pointer-events-none">
+            Plan and build anything
+          </div>
+        </Show>
+      </div>
+      <div class="p-3" />
+    </div>
+  )
+}
+
+function isEqual(arrA: ContentPart[], arrB: ContentPart[]): boolean {
+  if (arrA.length !== arrB.length) return false
+  for (let i = 0; i < arrA.length; i++) {
+    const partA = arrA[i]
+    const partB = arrB[i]
+    if (partA.type !== partB.type) return false
+    if (partA.type === "text" && partA.content !== (partB as TextPart).content) {
+      return false
+    }
+    if (partA.type === "attachment" && partA.fileId !== (partB as AttachmentPart).fileId) {
+      return false
+    }
+  }
+  return true
+}
+
+function getCursorPosition(parent: HTMLElement): number {
+  const selection = window.getSelection()
+  if (!selection || selection.rangeCount === 0) return 0
+  const range = selection.getRangeAt(0)
+  const preCaretRange = range.cloneRange()
+  preCaretRange.selectNodeContents(parent)
+  preCaretRange.setEnd(range.startContainer, range.startOffset)
+  return preCaretRange.toString().length
+}
+
+function setCursorPosition(parent: HTMLElement, position: number) {
+  let child = parent.firstChild
+  let offset = position
+  while (child) {
+    if (offset > child.textContent!.length) {
+      offset -= child.textContent!.length
+      child = child.nextSibling
+    } else {
+      try {
+        const range = document.createRange()
+        const sel = window.getSelection()
+        range.setStart(child, offset)
+        range.collapse(true)
+        sel?.removeAllRanges()
+        sel?.addRange(range)
+      } catch (e) {
+        console.error("Failed to set cursor position.", e)
+      }
+      return
+    }
+  }
+}

packages/desktop/src/components/session-list.tsx

@@ -7,7 +7,7 @@ export default function SessionList() {
   const sync = useSync()
   const local = useLocal()
   return (
-    <VList data={sync.data.session} class="p-3">
+    <VList data={sync.data.session} class="no-scrollbar p-3">
       {(session) => (
         <Tooltip placement="right" value={session.title} class="w-full min-w-0">
           <button

packages/desktop/src/pages/index.tsx

@@ -225,10 +225,10 @@ export default function Page() {
   )
 
   return (
-    <div class="relative h-screen flex flex-col">
-      <header class="h-12 shrink-0"></header>
-      <main class="h-[calc(100vh-3rem)] flex">
-        <div class="hidden shrink-0 w-64">
+    <div class="relative h-screen flex flex-col bg-background-weak">
+      <header class="hidden h-12 shrink-0 bg-background-base border-b border-border-weak-base"></header>
+      <main class="h-[calc(100vh-0rem)] flex">
+        <div class="shrink-0 w-70">
           <SessionList />
         </div>
         <div class="grow w-full min-w-0 overflow-y-auto flex justify-center">