wip: css/ui and desktop work

3 files changed, 496 insertions, 467 deletions

diff --git a/packages/css/src/tailwind-colors.css b/packages/css/src/tailwind-colors.css
new file mode 100644
index 000000000..696a14ddc
--- /dev/null
+++ b/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);
+}
diff --git a/packages/css/src/tailwind.css b/packages/css/src/tailwind.css
index 17936627b..35cbbd074 100644
--- a/packages/css/src/tailwind.css
+++ b/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";
diff --git a/packages/css/src/theme.css b/packages/css/src/theme.css
index 687a4b186..e3c523b13 100644
--- a/packages/css/src/theme.css
+++ b/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;
   }
 }