wip: css/ui work

packages/css/src/color.css

@@ -1,6 +1,4 @@
 :root {
-  --black: #000000;
-  --white: #ffffff;
   --grey-dark-1: #ffffff;
   --grey-dark-2: #ffffff;
   --grey-dark-3: #ffffff;
@@ -72,8 +70,8 @@
   --smoke-dark-alpha-9: #fff3f067;
   --smoke-dark-alpha-10: #fff2f276;
   --smoke-dark-alpha-11: #fff7f7b2;
-  --smoke-dark-alpha-12: #fffafaf0;
   --smoke-light-alpha-1: #55000003;
+  --smoke-dark-alpha-12: #fffafaf0;
   --smoke-light-alpha-2: #25000007;
   --smoke-light-alpha-3: #1100000f;
   --smoke-light-alpha-4: #0c000017;
@@ -469,6 +467,8 @@
   --mint-dark-alpha-10: #c6fec2f5;
   --mint-dark-alpha-11: #b4ffafdb;
   --mint-dark-alpha-12: #c7ffc3fa;
+  --black: #000000;
+  --white: #ffffff;
   --mint-light-alpha-1: #00cc0005;
   --mint-light-alpha-2: #16c0000c;
   --mint-light-alpha-3: #14f20027;

packages/css/src/tailwind.css

@@ -0,0 +1,220 @@
+@import "./index.css";
+
+@import "tailwindcss/theme.css" layer(theme);
+@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);
+}

packages/css/src/theme.css

@@ -114,423 +114,433 @@
 :root {
   /* OC-1-Light */
   color-scheme: light;
-  --background-background: var(--smoke-light-1);
-  --background-background-weak: #f7f6f6;
-  --background-background-weaker: #fcfcfc;
-  --surface-default-surface: var(--smoke-light-2);
-  --input-input: var(--smoke-light-1);
-  --input-input-hover: var(--smoke-light-2);
-  --input-input-active: var(--cobalt-light-1);
-  --input-input-selected: var(--cobalt-light-4);
-  --input-input-focus: var(--cobalt-light-1);
-  --input-input-disabled: var(--smoke-light-4);
-  --surface-default-surface-hover: var(--smoke-light-4);
-  --surface-default-surface-active: var(--smoke-light-5);
-  --surface-default-surface-selected: var(--cobalt-light-3);
-  --surface-default-surface-disabled: var(--smoke-light-2);
-  --surface-default-surface-focus: var(--cobalt-light-3);
-  --surface-inset-surface-inset: var(--smoke-light-3);
-  --surface-inset-surface-inset-hover: var(--smoke-light-4);
-  --surface-inset-surface-inset-active: var(--smoke-light-6);
-  --surface-inset-surface-inset-selected: var(--cobalt-light-4);
-  --surface-inset-surface-inset-disabled: var(--smoke-light-3);
-  --surface-inset-surface-inset-focus: var(--cobalt-light-4);
-  --surface-raised-surface-raised: var(--white);
-  --surface-raised-surface-raised-hover: var(--smoke-light-3);
-  --surface-raised-surface-raised-active: var(--smoke-light-4);
-  --surface-raised-surface-raised-selected: var(--cobalt-light-3);
-  --surface-raised-surface-raised-disabled: var(--smoke-light-2);
-  --surface-raised-surface-raised-focus: var(--cobalt-light-3);
-  --surface-overlay-surface-overlay: var(--smoke-light-alpha-9);
-  --surface-brand-surface-brand: var(--yuzu-light-9);
-  --surface-brand-surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-surface-interactive: var(--cobalt-light-3);
-  --surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-surface-success: var(--apple-light-3);
-  --surface-success-surface-success-weak: var(--apple-light-2);
-  --surface-success-surface-success-strong: var(--apple-light-9);
-  --surface-warning-surface-warning: var(--solaris-light-3);
-  --surface-warning-surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-surface-critical: var(--ember-light-3);
-  --surface-critical-surface-critical-weak: var(--ember-light-2);
-  --surface-critical-surface-critical-strong: var(--ember-light-9);
-  --surface-info-surface-info: var(--lilac-light-3);
-  --surface-info-surface-info-weak: var(--lilac-light-2);
-  --surface-info-surface-info-strong: var(--lilac-light-9);
-  --surface-diff-add-surface-diff-add: var(--coral-light-3);
-  --surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
-  --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
-  --surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
-  --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
-  --surface-diff-delete-surface-diff-delete: var(--mint-light-3);
-  --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
-  --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
-  --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
-  --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
-  --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
-  --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
-  --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
-  --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
-  --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
-  --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
-  --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
-  --text-default-text: var(--smoke-light-11);
-  --text-default-text-weak: var(--smoke-light-9);
-  --text-default-text-weaker: var(--smoke-light-8);
-  --text-default-text-strong: var(--smoke-light-12);
-  --text-on-brand-text-on-brand: var(--smoke-light-alpha-11);
-  --text-on-interactive-text-on-interactive: var(--smoke-light-alpha-11);
-  --text-on-success-text-on-success: var(--smoke-dark-alpha-11);
-  --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
-  --text-on-info-text-on-info: var(--smoke-dark-alpha-11);
-  --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
-  --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
-  --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
-  --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
-  --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
-  --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
-  --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
-  --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
-  --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
-  --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
-  --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
-  --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
-  --text-on-interactive-text-weak-on-interactive: var(--smoke-light-alpha-9);
-  --text-on-interactive-text-strong-on-interactive: var(--smoke-light-alpha-12);
-  --text-on-brand-text-weak-on-brand: var(--smoke-light-alpha-9);
-  --text-on-brand-text-weaker-on-brand: var(--smoke-light-alpha-8);
-  --text-on-brand-text-strong-on-brand: var(--smoke-light-alpha-12);
-  --border-default-border: var(--smoke-light-alpha-7);
-  --border-default-border-hover: var(--smoke-light-alpha-8);
-  --border-default-border-active: var(--smoke-light-alpha-9);
-  --border-default-border-selected: var(--cobalt-light-alpha-9);
-  --border-default-border-disabled: var(--smoke-light-alpha-8);
-  --border-default-border-focus: var(--smoke-light-alpha-9);
-  --border-default-border-weak: var(--smoke-light-alpha-5);
-  --icon-default-icon: var(--smoke-light-9);
-  --border-default-border-weak-hover: var(--smoke-light-alpha-6);
-  --icon-default-icon-hover: var(--smoke-light-10);
-  --border-default-border-weak-active: var(--smoke-light-alpha-7);
-  --icon-default-icon-active: var(--smoke-light-11);
-  --icon-default-icon-selected: var(--smoke-light-12);
-  --icon-default-icon-disabled: var(--smoke-light-7);
-  --icon-default-icon-focus: var(--smoke-light-12);
-  --icon-default-icon-weak: var(--smoke-light-7);
-  --icon-default-icon-weak-hover: var(--smoke-light-8);
-  --icon-default-icon-weak-active: var(--smoke-light-9);
-  --icon-default-icon-weak-selected: var(--smoke-light-10);
-  --icon-default-icon-weak-disabled: var(--smoke-light-6);
-  --icon-default-icon-weak-focus: var(--smoke-light-9);
-  --icon-default-icon-strong: var(--smoke-light-12);
-  --icon-default-icon-strong-hover: var(--smoke-light-12);
-  --icon-default-icon-strong-active: var(--smoke-light-12);
-  --icon-default-icon-strong-selected: var(--smoke-light-12);
-  --icon-default-icon-strong-disabled: var(--smoke-light-8);
-  --icon-default-icon-strong-focus: var(--smoke-light-12);
-  --border-default-border-weak-selected: var(--cobalt-light-alpha-6);
-  --border-default-border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-default-border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-border-interactive: var(--cobalt-light-7);
-  --border-interactive-border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-border-interactive-focus: var(--cobalt-light-9);
-  --border-success-border-success: var(--apple-light-6);
-  --border-success-border-success-hover: var(--apple-light-7);
-  --border-success-border-success-selected: var(--apple-light-9);
-  --border-warning-border-warning: var(--solaris-light-6);
-  --border-warning-border-warning-hover: var(--solaris-light-7);
-  --border-warning-border-warning-selected: var(--solaris-light-9);
-  --border-critical-border-critical: var(--ember-light-6);
-  --border-critical-border-critical-hover: var(--ember-light-7);
-  --border-critical-border-critical-selected: var(--ember-light-9);
-  --border-info-border-info: var(--lilac-light-6);
-  --border-info-border-info-hover: var(--lilac-light-7);
-  --border-info-border-info-selected: var(--lilac-light-9);
-  --icon-brand-icon-brand: var(--smoke-light-12);
-  --icon-success-icon-success: var(--apple-light-7);
-  --icon-warning-icon-warning: var(--solaris-light-7);
-  --icon-warning-icon-warning-hover: var(--solaris-light-8);
-  --icon-warning-icon-warning-active: var(--solaris-light-11);
-  --icon-success-icon-success-hover: var(--apple-light-8);
-  --icon-success-icon-success-active: var(--apple-light-11);
-  --icon-critical-icon-critical: var(--ember-light-7);
-  --icon-critical-icon-critical-hover: var(--ember-light-8);
-  --icon-critical-icon-critical-active: var(--ember-light-11);
-  --icon-info-icon-info: var(--lilac-light-7);
-  --icon-info-icon-info-hover: var(--lilac-light-8);
-  --icon-info-icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
-  --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-icon-on-interactive: var(--smoke-light-alpha-9);
-  --icon-on-interactive-icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-icon-on-interactive-selected: var(--smoke-light-alpha-11);
-  --icon-on-success-icon-on-success: var(--apple-light-alpha-9);
-  --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
-  --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
-  --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
-  --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
-  --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-icon-on-info: var(--lilac-light-9);
-  --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
-  --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
-  --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
-  --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
-  --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
-  --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
-  --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
-  --syntax-syntax-comment: #ffffff;
-  --syntax-syntax-string: #ffffff;
-  --syntax-syntax-keyword: #ffffff;
-  --syntax-syntax-function: #ffffff;
-  --syntax-syntax-number: #ffffff;
-  --syntax-syntax-operator: #ffffff;
-  --syntax-syntax-variable: #ffffff;
-  --syntax-syntax-type: #ffffff;
-  --syntax-syntax-constant: #ffffff;
-  --syntax-syntax-punctuation: #ffffff;
-  --syntax-syntax-success: #ffffff;
-  --syntax-syntax-warning: #ffffff;
-  --syntax-syntax-critical: #ffffff;
-  --syntax-syntax-info: #ffffff;
-  --markdown-markdown-heading: #ffffff;
-  --markdown-markdown-text: #ffffff;
-  --markdown-markdown-link: #ffffff;
-  --markdown-markdown-link-text: #ffffff;
-  --markdown-markdown-code: #ffffff;
-  --markdown-markdown-block-quote: #ffffff;
-  --markdown-markdown-emph: #ffffff;
-  --markdown-markdown-strong: #ffffff;
-  --markdown-markdown-horizontal-rule: #ffffff;
-  --markdown-markdown-list-item: #ffffff;
-  --markdown-markdown-list-enumeration: #ffffff;
-  --markdown-markdown-image: #ffffff;
-  --markdown-markdown-image-text: #ffffff;
-  --markdown-markdown-code-block: #ffffff;
+  --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);
+  --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-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);
+  --text-base: var(--smoke-light-11);
+  --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-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-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);
+  --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);
+  --icon-base: var(--smoke-light-9);
+  --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);
+  --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-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-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-build-base: var(--blue-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-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-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);
+  --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;
 
   .dark {
     /* OC-1-Dark */
     color-scheme: dark;
-    --background-background: var(--smoke-dark-1);
-    --background-background-weak: #151313;
-    --background-background-weaker: #201c1c;
-    --surface-default-surface: var(--smoke-dark-3);
-    --input-input: var(--smoke-dark-2);
-    --input-input-hover: var(--smoke-dark-2);
-    --input-input-active: var(--cobalt-dark-1);
-    --input-input-selected: var(--cobalt-dark-2);
-    --input-input-focus: var(--cobalt-dark-1);
-    --input-input-disabled: var(--smoke-dark-4);
-    --surface-default-surface-hover: var(--smoke-dark-4);
-    --surface-default-surface-active: var(--smoke-dark-5);
-    --surface-default-surface-selected: var(--cobalt-dark-3);
-    --surface-default-surface-disabled: var(--smoke-dark-2);
-    --surface-default-surface-focus: var(--cobalt-dark-3);
-    --surface-inset-surface-inset: var(--smoke-dark-4);
-    --surface-inset-surface-inset-hover: var(--smoke-dark-5);
-    --surface-inset-surface-inset-active: var(--smoke-dark-6);
-    --surface-inset-surface-inset-selected: var(--cobalt-dark-4);
-    --surface-inset-surface-inset-disabled: var(--smoke-dark-3);
-    --surface-inset-surface-inset-focus: var(--cobalt-dark-4);
-    --surface-raised-surface-raised: var(--smoke-dark-4);
-    --surface-raised-surface-raised-hover: var(--smoke-dark-7);
-    --surface-raised-surface-raised-active: var(--smoke-dark-8);
-    --surface-raised-surface-raised-selected: var(--cobalt-dark-3);
-    --surface-raised-surface-raised-disabled: var(--smoke-dark-3);
-    --surface-raised-surface-raised-focus: var(--cobalt-dark-3);
-    --surface-overlay-surface-overlay: var(--smoke-dark-alpha-2);
-    --surface-brand-surface-brand: var(--yuzu-light-9);
-    --surface-brand-surface-brand-hover: var(--yuzu-light-10);
-    --surface-interactive-surface-interactive: var(--cobalt-light-3);
-    --surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
-    --surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
-    --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
-    --surface-success-surface-success: var(--apple-light-3);
-    --surface-success-surface-success-weak: var(--apple-light-2);
-    --surface-success-surface-success-strong: var(--apple-light-9);
-    --surface-warning-surface-warning: var(--solaris-light-3);
-    --surface-warning-surface-warning-weak: var(--solaris-light-2);
-    --surface-warning-surface-warning-strong: var(--solaris-light-9);
-    --surface-critical-surface-critical: var(--ember-light-3);
-    --surface-critical-surface-critical-weak: var(--ember-light-2);
-    --surface-critical-surface-critical-strong: var(--ember-light-9);
-    --surface-info-surface-info: var(--lilac-light-3);
-    --surface-info-surface-info-weak: var(--lilac-light-2);
-    --surface-info-surface-info-strong: var(--lilac-light-9);
-    --surface-diff-add-surface-diff-add: var(--coral-light-3);
-    --surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
-    --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
-    --surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
-    --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
-    --surface-diff-delete-surface-diff-delete: var(--mint-light-3);
-    --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-dark-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
-    --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
-    --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
-    --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
-    --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
-    --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
-    --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
-    --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
-    --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
-    --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
-    --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
-    --text-default-text: var(--smoke-dark-alpha-11);
-    --text-default-text-weak: var(--smoke-dark-alpha-9);
-    --text-default-text-weaker: var(--smoke-dark-alpha-8);
-    --text-default-text-strong: var(--smoke-dark-alpha-12);
-    --text-on-brand-text-on-brand: var(--smoke-dark-alpha-11);
-    --text-on-interactive-text-on-interactive: var(--smoke-dark-alpha-11);
-    --text-on-success-text-on-success: var(--smoke-dark-alpha-11);
-    --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
-    --text-on-info-text-on-info: var(--smoke-dark-alpha-11);
-    --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
-    --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
-    --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
-    --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
-    --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
-    --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
-    --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
-    --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
-    --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
-    --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
-    --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
-    --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
-    --text-on-interactive-text-weak-on-interactive: var(--smoke-dark-alpha-9);
-    --text-on-interactive-text-strong-on-interactive: var(--smoke-dark-alpha-12);
-    --text-on-brand-text-weak-on-brand: var(--smoke-dark-alpha-9);
-    --text-on-brand-text-weaker-on-brand: var(--smoke-dark-alpha-8);
-    --text-on-brand-text-strong-on-brand: var(--smoke-dark-alpha-12);
-    --border-default-border: var(--smoke-dark-alpha-7);
-    --border-default-border-hover: var(--smoke-dark-alpha-8);
-    --border-default-border-active: var(--smoke-dark-alpha-9);
-    --border-default-border-selected: var(--cobalt-dark-alpha-9);
-    --border-default-border-disabled: var(--smoke-dark-alpha-8);
-    --border-default-border-focus: var(--smoke-dark-alpha-9);
-    --border-default-border-weak: var(--smoke-dark-alpha-6);
-    --icon-default-icon: var(--smoke-light-9);
-    --border-default-border-weak-hover: var(--smoke-dark-alpha-7);
-    --icon-default-icon-hover: var(--smoke-light-10);
-    --border-default-border-weak-active: var(--smoke-dark-alpha-8);
-    --icon-default-icon-active: var(--smoke-light-11);
-    --icon-default-icon-selected: var(--smoke-light-12);
-    --icon-default-icon-disabled: var(--smoke-light-7);
-    --icon-default-icon-focus: var(--smoke-light-12);
-    --icon-default-icon-weak: var(--smoke-dark-6);
-    --icon-default-icon-weak-hover: var(--smoke-light-7);
-    --icon-default-icon-weak-active: var(--smoke-light-8);
-    --icon-default-icon-weak-selected: var(--smoke-light-9);
-    --icon-default-icon-weak-disabled: var(--smoke-light-4);
-    --icon-default-icon-weak-focus: var(--smoke-light-9);
-    --icon-default-icon-strong: var(--smoke-dark-12);
-    --icon-default-icon-strong-hover: var(--smoke-light-12);
-    --icon-default-icon-strong-active: var(--smoke-light-12);
-    --icon-default-icon-strong-selected: var(--smoke-light-12);
-    --icon-default-icon-strong-disabled: var(--smoke-light-8);
-    --icon-default-icon-strong-focus: var(--smoke-light-12);
-    --border-default-border-weak-selected: var(--cobalt-dark-alpha-6);
-    --border-default-border-weak-disabled: var(--smoke-dark-alpha-6);
-    --border-default-border-weak-focus: var(--smoke-dark-alpha-8);
-    --border-interactive-border-interactive: var(--cobalt-light-7);
-    --border-interactive-border-interactive-hover: var(--cobalt-light-8);
-    --border-interactive-border-interactive-active: var(--cobalt-light-9);
-    --border-interactive-border-interactive-selected: var(--cobalt-light-9);
-    --border-interactive-border-interactive-disabled: var(--smoke-light-8);
-    --border-interactive-border-interactive-focus: var(--cobalt-light-9);
-    --border-success-border-success: var(--apple-light-6);
-    --border-success-border-success-hover: var(--apple-light-7);
-    --border-success-border-success-selected: var(--apple-light-9);
-    --border-warning-border-warning: var(--solaris-light-6);
-    --border-warning-border-warning-hover: var(--solaris-light-7);
-    --border-warning-border-warning-selected: var(--solaris-light-9);
-    --border-critical-border-critical: var(--ember-light-6);
-    --border-critical-border-critical-hover: var(--ember-light-7);
-    --border-critical-border-critical-selected: var(--ember-light-9);
-    --border-info-border-info: var(--lilac-light-6);
-    --border-info-border-info-hover: var(--lilac-light-7);
-    --border-info-border-info-selected: var(--lilac-light-9);
-    --icon-brand-icon-brand: var(--white);
-    --icon-success-icon-success: var(--apple-light-7);
-    --icon-warning-icon-warning: var(--solaris-light-7);
-    --icon-warning-icon-warning-hover: var(--solaris-light-8);
-    --icon-warning-icon-warning-active: var(--solaris-light-11);
-    --icon-success-icon-success-hover: var(--apple-light-8);
-    --icon-success-icon-success-active: var(--apple-light-11);
-    --icon-critical-icon-critical: var(--ember-light-7);
-    --icon-critical-icon-critical-hover: var(--ember-light-8);
-    --icon-critical-icon-critical-active: var(--ember-light-11);
-    --icon-info-icon-info: var(--lilac-light-7);
-    --icon-info-icon-info-hover: var(--lilac-light-8);
-    --icon-info-icon-info-active: var(--lilac-light-11);
-    --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
-    --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
-    --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
-    --icon-on-interactive-icon-on-interactive: var(--smoke-dark-alpha-9);
-    --icon-on-interactive-icon-on-interactive-hover: var(--smoke-dark-alpha-10);
-    --icon-on-interactive-icon-on-interactive-selected: var(--smoke-dark-alpha-11);
-    --icon-on-success-icon-on-success: var(--apple-light-alpha-9);
-    --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
-    --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
-    --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
-    --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
-    --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
-    --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
-    --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
-    --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
-    --icon-on-info-icon-on-info: var(--lilac-light-9);
-    --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
-    --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
-    --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
-    --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
-    --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
-    --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
-    --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
-    --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
-    --syntax-syntax-comment: #ffffff;
-    --syntax-syntax-string: #ffffff;
-    --syntax-syntax-keyword: #ffffff;
-    --syntax-syntax-function: #ffffff;
-    --syntax-syntax-number: #ffffff;
-    --syntax-syntax-operator: #ffffff;
-    --syntax-syntax-variable: #ffffff;
-    --syntax-syntax-type: #ffffff;
-    --syntax-syntax-constant: #ffffff;
-    --syntax-syntax-punctuation: #ffffff;
-    --syntax-syntax-success: #ffffff;
-    --syntax-syntax-warning: #ffffff;
-    --syntax-syntax-critical: #ffffff;
-    --syntax-syntax-info: #ffffff;
-    --markdown-markdown-heading: #ffffff;
-    --markdown-markdown-text: #ffffff;
-    --markdown-markdown-link: #ffffff;
-    --markdown-markdown-link-text: #ffffff;
-    --markdown-markdown-code: #ffffff;
-    --markdown-markdown-block-quote: #ffffff;
-    --markdown-markdown-emph: #ffffff;
-    --markdown-markdown-strong: #ffffff;
-    --markdown-markdown-horizontal-rule: #ffffff;
-    --markdown-markdown-list-item: #ffffff;
-    --markdown-markdown-list-enumeration: #ffffff;
-    --markdown-markdown-image: #ffffff;
-    --markdown-markdown-image-text: #ffffff;
-    --markdown-markdown-code-block: #ffffff;
+    --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);
+    --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-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);
+    --text-base: var(--smoke-dark-alpha-11);
+    --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-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-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);
+    --border-base: var(--smoke-dark-alpha-7);
+    --border-hover: var(--smoke-dark-alpha-8);
+    --border-active: var(--smoke-dark-alpha-9);
+    --border-selected: var(--cobalt-dark-alpha-9);
+    --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-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);
+    --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-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-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);
+    --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;
   }
 }

packages/css/src/utilities.css

@@ -1,5 +1,28 @@
 :root {
   interpolate-size: allow-keywords;
+
+  [data-popper-positioner] {
+    pointer-events: none;
+  }
+
+  ::selection {
+    background-color: color-mix(in srgb, var(--color-primary) 33%, transparent);
+    /* background-color: var(--color-primary); */
+    /* color: var(--color-background); */
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--theme-background-panel);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--theme-border-subtle);
+    border-radius: 6px;
+  }
+
+  * {
+    scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel);
+  }
 }
 
 .no-scrollbar {