From 887a819f2444c8454a43049983d831194883c6cd Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 17 Oct 2025 12:05:52 -0500
Subject: wip: desktop work

---
 packages/css/.gitignore                            |  34 --
 packages/css/package.json                          |  18 -
 packages/css/script/colors.ts                      |  31 --
 packages/css/script/colors.txt                     | 214 --------
 packages/css/src/assets/fonts/geist-italic.ttf     | Bin 153700 -> 0 bytes
 packages/css/src/assets/fonts/geist-italic.woff2   | Bin 65488 -> 0 bytes
 .../css/src/assets/fonts/geist-mono-italic.ttf     | Bin 165204 -> 0 bytes
 .../css/src/assets/fonts/geist-mono-italic.woff2   | Bin 72328 -> 0 bytes
 packages/css/src/assets/fonts/geist-mono.ttf       | Bin 155792 -> 0 bytes
 packages/css/src/assets/fonts/geist-mono.woff2     | Bin 66232 -> 0 bytes
 packages/css/src/assets/fonts/geist.ttf            | Bin 151032 -> 0 bytes
 packages/css/src/assets/fonts/geist.woff2          | Bin 64048 -> 0 bytes
 packages/css/src/base.css                          | 374 --------------
 packages/css/src/color.css                         | 496 ------------------
 packages/css/src/components/button.css             |  94 ----
 packages/css/src/components/icon.css               |   6 -
 packages/css/src/components/select.css             | 122 -----
 packages/css/src/components/tabs.css               |  95 ----
 packages/css/src/components/tooltip.css            |  53 --
 packages/css/src/index.css                         |  14 -
 packages/css/src/tailwind-colors.css               | 220 --------
 packages/css/src/tailwind.css                      |  12 -
 packages/css/src/theme.css                         | 574 ---------------------
 packages/css/src/utilities.css                     |  37 --
 packages/desktop/package.json                      |   4 +-
 packages/desktop/src/components/prompt-input.tsx   |   2 +-
 packages/desktop/src/components/session-list.tsx   |  38 --
 packages/desktop/src/context/sync.tsx              |   5 +-
 packages/desktop/src/index.css                     |   2 +-
 packages/desktop/src/pages/index.tsx               |  48 +-
 packages/ui/package.json                           |  21 +-
 packages/ui/script/colors.txt                      | 214 ++++++++
 packages/ui/script/tailwind.ts                     |  23 +
 packages/ui/src/app.tsx                            | 128 -----
 packages/ui/src/assets/fonts/geist-italic.ttf      | Bin 0 -> 153700 bytes
 packages/ui/src/assets/fonts/geist-italic.woff2    | Bin 0 -> 65488 bytes
 packages/ui/src/assets/fonts/geist-mono-italic.ttf | Bin 0 -> 165204 bytes
 .../ui/src/assets/fonts/geist-mono-italic.woff2    | Bin 0 -> 72328 bytes
 packages/ui/src/assets/fonts/geist-mono.ttf        | Bin 0 -> 155792 bytes
 packages/ui/src/assets/fonts/geist-mono.woff2      | Bin 0 -> 66232 bytes
 packages/ui/src/assets/fonts/geist.ttf             | Bin 0 -> 151032 bytes
 packages/ui/src/assets/fonts/geist.woff2           | Bin 0 -> 64048 bytes
 packages/ui/src/components/button.css              | 106 ++++
 packages/ui/src/components/fonts.tsx               |  12 +-
 packages/ui/src/components/icon.css                |   6 +
 packages/ui/src/components/index.ts                |   1 +
 packages/ui/src/components/list.css                |  30 ++
 packages/ui/src/components/list.tsx                |  76 +++
 packages/ui/src/components/select.css              | 124 +++++
 packages/ui/src/components/style.css               |   2 -
 packages/ui/src/components/tabs.css                |  95 ++++
 packages/ui/src/components/tooltip.css             |  59 +++
 packages/ui/src/components/tooltip.tsx             |   2 +-
 packages/ui/src/demo.tsx                           | 134 +++++
 packages/ui/src/index.css                          |   4 +-
 packages/ui/src/index.tsx                          |   4 +-
 packages/ui/src/styles/base.css                    | 374 ++++++++++++++
 packages/ui/src/styles/colors.css                  | 496 ++++++++++++++++++
 packages/ui/src/styles/index.css                   |  15 +
 packages/ui/src/styles/tailwind/colors.css         | 220 ++++++++
 packages/ui/src/styles/tailwind/index.css          |  40 ++
 packages/ui/src/styles/tailwind/utilities.css      |   9 +
 packages/ui/src/styles/theme.css                   | 498 ++++++++++++++++++
 packages/ui/src/styles/utilities.css               | 109 ++++
 64 files changed, 2702 insertions(+), 2593 deletions(-)
 delete mode 100644 packages/css/.gitignore
 delete mode 100644 packages/css/package.json
 delete mode 100644 packages/css/script/colors.ts
 delete mode 100644 packages/css/script/colors.txt
 delete mode 100644 packages/css/src/assets/fonts/geist-italic.ttf
 delete mode 100644 packages/css/src/assets/fonts/geist-italic.woff2
 delete mode 100644 packages/css/src/assets/fonts/geist-mono-italic.ttf
 delete mode 100644 packages/css/src/assets/fonts/geist-mono-italic.woff2
 delete mode 100644 packages/css/src/assets/fonts/geist-mono.ttf
 delete mode 100644 packages/css/src/assets/fonts/geist-mono.woff2
 delete mode 100644 packages/css/src/assets/fonts/geist.ttf
 delete mode 100644 packages/css/src/assets/fonts/geist.woff2
 delete mode 100644 packages/css/src/base.css
 delete mode 100644 packages/css/src/color.css
 delete mode 100644 packages/css/src/components/button.css
 delete mode 100644 packages/css/src/components/icon.css
 delete mode 100644 packages/css/src/components/select.css
 delete mode 100644 packages/css/src/components/tabs.css
 delete mode 100644 packages/css/src/components/tooltip.css
 delete mode 100644 packages/css/src/index.css
 delete mode 100644 packages/css/src/tailwind-colors.css
 delete mode 100644 packages/css/src/tailwind.css
 delete mode 100644 packages/css/src/theme.css
 delete mode 100644 packages/css/src/utilities.css
 delete mode 100644 packages/desktop/src/components/session-list.tsx
 create mode 100644 packages/ui/script/colors.txt
 create mode 100644 packages/ui/script/tailwind.ts
 delete mode 100644 packages/ui/src/app.tsx
 create mode 100644 packages/ui/src/assets/fonts/geist-italic.ttf
 create mode 100644 packages/ui/src/assets/fonts/geist-italic.woff2
 create mode 100644 packages/ui/src/assets/fonts/geist-mono-italic.ttf
 create mode 100644 packages/ui/src/assets/fonts/geist-mono-italic.woff2
 create mode 100644 packages/ui/src/assets/fonts/geist-mono.ttf
 create mode 100644 packages/ui/src/assets/fonts/geist-mono.woff2
 create mode 100644 packages/ui/src/assets/fonts/geist.ttf
 create mode 100644 packages/ui/src/assets/fonts/geist.woff2
 create mode 100644 packages/ui/src/components/button.css
 create mode 100644 packages/ui/src/components/icon.css
 create mode 100644 packages/ui/src/components/list.css
 create mode 100644 packages/ui/src/components/list.tsx
 create mode 100644 packages/ui/src/components/select.css
 delete mode 100644 packages/ui/src/components/style.css
 create mode 100644 packages/ui/src/components/tabs.css
 create mode 100644 packages/ui/src/components/tooltip.css
 create mode 100644 packages/ui/src/demo.tsx
 create mode 100644 packages/ui/src/styles/base.css
 create mode 100644 packages/ui/src/styles/colors.css
 create mode 100644 packages/ui/src/styles/index.css
 create mode 100644 packages/ui/src/styles/tailwind/colors.css
 create mode 100644 packages/ui/src/styles/tailwind/index.css
 create mode 100644 packages/ui/src/styles/tailwind/utilities.css
 create mode 100644 packages/ui/src/styles/theme.css
 create mode 100644 packages/ui/src/styles/utilities.css

(limited to 'packages')

diff --git a/packages/css/.gitignore b/packages/css/.gitignore
deleted file mode 100644
index a14702c40..000000000
--- a/packages/css/.gitignore
+++ /dev/null
@@ -1,34 +0,0 @@
-# dependencies (bun install)
-node_modules
-
-# output
-out
-dist
-*.tgz
-
-# code coverage
-coverage
-*.lcov
-
-# logs
-logs
-_.log
-report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# caches
-.eslintcache
-.cache
-*.tsbuildinfo
-
-# IntelliJ based IDEs
-.idea
-
-# Finder (MacOS) folder config
-.DS_Store
diff --git a/packages/css/package.json b/packages/css/package.json
deleted file mode 100644
index 19bb2bf68..000000000
--- a/packages/css/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opencode-ai/css",
-  "version": "0.15.7",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.css",
-    "./*": "./src/*",
-    "./fonts/*": "./src/assets/fonts/*"
-  },
-  "scripts": {
-    "dev": "bun run dev.ts",
-    "generate:tailwind": "bun run script/colors.ts"
-  },
-  "dependencies": {
-    "tailwindcss": "catalog:",
-    "@tailwindcss/vite": "catalog:"
-  }
-}
diff --git a/packages/css/script/colors.ts b/packages/css/script/colors.ts
deleted file mode 100644
index b4f1e7f00..000000000
--- a/packages/css/script/colors.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env bun
-
-// read lines from colors.txt
-// parse each line into a color name and hex value
-// create a css variable for each color
-// NOTE: only use Bun file APIs here
-
-const colors = await Bun.file(import.meta.dir + "/colors.txt").text()
-
-const variables = []
-for (const line of colors.split("\n")) {
-  if (!line.trim()) continue
-  const [variable] = line.trim().split(":")
-  const name = variable!.trim().substring(2)
-  variables.push(`--color-${name}: var(--${name});`)
-}
-
-const output = `
-/* Generated by script/colors.ts */
-/* Do not edit this file manually */
-
-@theme {
-  --color-*: initial;
-  ${variables.join("\n  ")}
-}
-`
-
-// write to src/tailwind-colors.css
-Bun.file(import.meta.dir + "/../src/tailwind-colors.css").write(output.trim())
-
-// Bun.file(import.meta.dir + "../src/tailwind-colors.css").write(output.trim())
diff --git a/packages/css/script/colors.txt b/packages/css/script/colors.txt
deleted file mode 100644
index 15f8bb3d1..000000000
--- a/packages/css/script/colors.txt
+++ /dev/null
@@ -1,214 +0,0 @@
-  --background-base: #f8f7f7;
-  --background-weak: var(--smoke-light-3);
-  --background-strong: var(--smoke-light-1);
-  --background-stronger: #fcfcfc;
-  --base: var(--smoke-light-alpha-2);
-  --surface-base: var(--smoke-light-alpha-2);
-  --base2: var(--smoke-light-alpha-2);
-  --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-3);
-  --surface-inset-base-hover: var(--smoke-light-alpha-3);
-  --surface-inset-strong: #1f000017;
-  --surface-inset-strong-hover: #1f000017;
-  --surface-raised-base: var(--smoke-light-alpha-1);
-  --surface-float-base: var(--smoke-dark-1);
-  --surface-float-base-hover: var(--smoke-dark-2);
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
-  --surface-raised-strong: var(--smoke-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--smoke-light-alpha-3);
-  --surface-weaker: var(--smoke-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-skip-base: var(--smoke-light-3);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: var(--mint-light-3);
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --text-base: var(--smoke-light-11);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --text-weak: var(--smoke-light-9);
-  --text-weaker: var(--smoke-light-8);
-  --text-strong: var(--smoke-light-12);
-  --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-1);
-  --text-on-success-base: var(--smoke-dark-alpha-11);
-  --text-on-warning-base: var(--smoke-dark-alpha-11);
-  --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-11);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--smoke-dark-alpha-9);
-  --text-on-info-strong: var(--smoke-dark-alpha-12);
-  --text-on-warning-weak: var(--smoke-dark-alpha-9);
-  --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
-  --text-on-brand-weak: var(--smoke-light-alpha-9);
-  --text-on-brand-weaker: var(--smoke-light-alpha-8);
-  --text-on-brand-strong: var(--smoke-light-alpha-12);
-  --button-secondary-base: #fdfcfc;
-  --border-base: var(--smoke-light-alpha-7);
-  --border-hover: var(--smoke-light-alpha-8);
-  --border-active: var(--smoke-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--smoke-light-alpha-8);
-  --border-focus: var(--smoke-light-alpha-9);
-  --border-weak-base: var(--smoke-light-alpha-5);
-  --border-strong-base: var(--smoke-light-alpha-7);
-  --border-strong-hover: var(--smoke-light-alpha-8);
-  --border-strong-active: var(--smoke-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--smoke-light-alpha-6);
-  --border-strong-focus: var(--smoke-light-alpha-7);
-  --border-weak-hover: var(--smoke-light-alpha-6);
-  --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-6);
-  --border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--smoke-light-9);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-invert-base: #ffffff;
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: var(--smoke-light-12);
-  --icon-strong-active: var(--smoke-light-12);
-  --icon-strong-selected: var(--smoke-light-12);
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: var(--smoke-light-12);
-  --icon-brand-base: var(--smoke-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-light-11);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--smoke-light-alpha-11);
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-alpha-9);
-  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-9);
-  --icon-diff-delete-hover: var(--ember-light-10);
-  --icon-diff-delete-active: var(--ember-light-11);
-  --syntax-comment: #ffffff;
-  --syntax-string: #ffffff;
-  --syntax-keyword: #ffffff;
-  --syntax-function: #ffffff;
-  --syntax-number: #ffffff;
-  --syntax-operator: #ffffff;
-  --syntax-variable: #ffffff;
-  --syntax-type: #ffffff;
-  --syntax-constant: #ffffff;
-  --syntax-punctuation: #ffffff;
-  --syntax-success: #ffffff;
-  --syntax-warning: #ffffff;
-  --syntax-critical: #ffffff;
-  --syntax-info: #ffffff;
-  --markdown-heading: #ffffff;
-  --markdown-text: #ffffff;
-  --markdown-link: #ffffff;
-  --markdown-link-text: #ffffff;
-  --markdown-code: #ffffff;
-  --markdown-block-quote: #ffffff;
-  --markdown-emph: #ffffff;
-  --markdown-strong: #ffffff;
-  --markdown-horizontal-rule: #ffffff;
-  --markdown-list-item: #ffffff;
-  --markdown-list-enumeration: #ffffff;
-  --markdown-image: #ffffff;
-  --markdown-image-text: #ffffff;
-  --markdown-code-block: #ffffff;
-  --border-color: #ffffff;
diff --git a/packages/css/src/assets/fonts/geist-italic.ttf b/packages/css/src/assets/fonts/geist-italic.ttf
deleted file mode 100644
index 9d29a123b..000000000
Binary files a/packages/css/src/assets/fonts/geist-italic.ttf and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist-italic.woff2 b/packages/css/src/assets/fonts/geist-italic.woff2
deleted file mode 100644
index 29649a03e..000000000
Binary files a/packages/css/src/assets/fonts/geist-italic.woff2 and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist-mono-italic.ttf b/packages/css/src/assets/fonts/geist-mono-italic.ttf
deleted file mode 100644
index 7f23cf1b6..000000000
Binary files a/packages/css/src/assets/fonts/geist-mono-italic.ttf and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist-mono-italic.woff2 b/packages/css/src/assets/fonts/geist-mono-italic.woff2
deleted file mode 100644
index ad84c9979..000000000
Binary files a/packages/css/src/assets/fonts/geist-mono-italic.woff2 and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist-mono.ttf b/packages/css/src/assets/fonts/geist-mono.ttf
deleted file mode 100644
index 41208ea87..000000000
Binary files a/packages/css/src/assets/fonts/geist-mono.ttf and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist-mono.woff2 b/packages/css/src/assets/fonts/geist-mono.woff2
deleted file mode 100644
index 6c2f194c7..000000000
Binary files a/packages/css/src/assets/fonts/geist-mono.woff2 and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist.ttf b/packages/css/src/assets/fonts/geist.ttf
deleted file mode 100644
index e7adab279..000000000
Binary files a/packages/css/src/assets/fonts/geist.ttf and /dev/null differ
diff --git a/packages/css/src/assets/fonts/geist.woff2 b/packages/css/src/assets/fonts/geist.woff2
deleted file mode 100644
index 38319ea37..000000000
Binary files a/packages/css/src/assets/fonts/geist.woff2 and /dev/null differ
diff --git a/packages/css/src/base.css b/packages/css/src/base.css
deleted file mode 100644
index 41ee9a5ec..000000000
--- a/packages/css/src/base.css
+++ /dev/null
@@ -1,374 +0,0 @@
-/*
-  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  2. Remove default margins and padding
-  3. Reset all borders.
-*/
-
-*,
-::after,
-::before,
-::backdrop,
-::file-selector-button {
-  box-sizing: border-box; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 2 */
-  border: 0 solid; /* 3 */
-}
-
-/*
-  1. Use a consistent sensible line-height in all browsers.
-  2. Prevent adjustments of font size after orientation changes in iOS.
-  3. Use a more readable tab size.
-  4. Use the user's configured `sans` font-family by default.
-  5. Use the user's configured `sans` font-feature-settings by default.
-  6. Use the user's configured `sans` font-variation-settings by default.
-  7. Disable tap highlights on iOS.
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  tab-size: 4; /* 3 */
-  font-family: var(--font-sans); /* 4 */
-  font-feature-settings: var(--font-sans--font-feature-settings, normal); /* 5 */
-  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-  1. Add the correct height in Firefox.
-  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-  3. Reset the default border style to a 1px solid border.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-  Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-
-/*
-  Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-  Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  -webkit-text-decoration: inherit;
-  text-decoration: inherit;
-}
-
-/*
-  Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-  1. Use the user's configured `mono` font-family by default.
-  2. Use the user's configured `mono` font-feature-settings by default.
-  3. Use the user's configured `mono` font-variation-settings by default.
-  4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--font-mono); /* 1 */
-  font-feature-settings: var(--font-mono--font-feature-settings, normal); /* 2 */
-  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 3 */
-  font-size: 1em; /* 4 */
-}
-
-/*
-  Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-  3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-  Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-  Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-  Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-  Make lists unstyled by default.
-*/
-
-ol,
-ul,
-menu {
-  list-style: none;
-}
-
-/*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-      This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/*
-  1. Inherit font styles in all browsers.
-  2. Remove border radius in all browsers.
-  3. Remove background color in all browsers.
-  4. Ensure consistent opacity for disabled states in all browsers.
-*/
-
-button,
-input,
-select,
-optgroup,
-textarea,
-::file-selector-button {
-  font: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  border-radius: 0; /* 2 */
-  background-color: transparent; /* 3 */
-  opacity: 1; /* 4 */
-}
-
-/*
-  Restore default font weight.
-*/
-
-:where(select:is([multiple], [size])) optgroup {
-  font-weight: bolder;
-}
-
-/*
-  Restore indentation.
-*/
-
-:where(select:is([multiple], [size])) optgroup option {
-  padding-inline-start: 20px;
-}
-
-/*
-  Restore space after button.
-*/
-
-::file-selector-button {
-  margin-inline-end: 4px;
-}
-
-/*
-  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-*/
-
-::placeholder {
-  opacity: 1;
-}
-
-/*
-  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
-  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
-*/
-
-@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
-  /* Safari 17+ */ {
-  ::placeholder {
-    color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-/*
-  Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-  Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-  1. Ensure date/time inputs have the same height when empty in iOS Safari.
-  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
-*/
-
-::-webkit-date-and-time-value {
-  min-height: 1lh; /* 1 */
-  text-align: inherit; /* 2 */
-}
-
-/*
-  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
-*/
-
-::-webkit-datetime-edit {
-  display: inline-flex;
-}
-
-/*
-  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
-*/
-
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-::-webkit-datetime-edit,
-::-webkit-datetime-edit-year-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-minute-field,
-::-webkit-datetime-edit-second-field,
-::-webkit-datetime-edit-millisecond-field,
-::-webkit-datetime-edit-meridiem-field {
-  padding-block: 0;
-}
-
-/*
-  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
-*/
-
-::-webkit-calendar-picker-indicator {
-  line-height: 1;
-}
-
-/*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-  Correct the inability to style the border radius in iOS Safari.
-*/
-
-button,
-input:where([type="button"], [type="reset"], [type="submit"]),
-::file-selector-button {
-  appearance: button;
-}
-
-/*
-  Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-  Make elements with the HTML hidden attribute stay hidden by default.
-*/
-
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none !important;
-}
diff --git a/packages/css/src/color.css b/packages/css/src/color.css
deleted file mode 100644
index b0ddf36b7..000000000
--- a/packages/css/src/color.css
+++ /dev/null
@@ -1,496 +0,0 @@
-:root {
-  --grey-dark-1: #ffffff;
-  --grey-dark-2: #ffffff;
-  --grey-dark-3: #ffffff;
-  --grey-dark-4: #ffffff;
-  --grey-dark-5: #ffffff;
-  --grey-dark-6: #ffffff;
-  --grey-dark-7: #ffffff;
-  --grey-dark-8: #ffffff;
-  --grey-dark-9: #ffffff;
-  --grey-dark-10: #ffffff;
-  --grey-dark-11: #ffffff;
-  --grey-dark-12: #ffffff;
-  --grey-light-1: #ffffff;
-  --grey-dark-alpha-1: #ffffff;
-  --grey-dark-alpha-2: #ffffff;
-  --grey-dark-alpha-3: #ffffff;
-  --grey-dark-alpha-4: #ffffff;
-  --grey-dark-alpha-5: #ffffff;
-  --grey-dark-alpha-6: #ffffff;
-  --grey-dark-alpha-7: #ffffff;
-  --grey-dark-alpha-8: #ffffff;
-  --grey-dark-alpha-9: #ffffff;
-  --grey-dark-alpha-10: #ffffff;
-  --grey-dark-alpha-11: #ffffff;
-  --grey-dark-alpha-12: #ffffff;
-  --smoke-dark-1: #131010;
-  --grey-light-2: #ffffff;
-  --grey-light-3: #ffffff;
-  --grey-light-4: #ffffff;
-  --grey-light-5: #ffffff;
-  --grey-light-6: #ffffff;
-  --grey-light-7: #ffffff;
-  --grey-light-8: #ffffff;
-  --grey-light-9: #ffffff;
-  --grey-light-10: #ffffff;
-  --grey-light-11: #ffffff;
-  --grey-light-12: #ffffff;
-  --smoke-dark-2: #1b1818;
-  --smoke-dark-3: #252121;
-  --smoke-dark-4: #2d2828;
-  --smoke-dark-5: #343030;
-  --smoke-dark-6: #3e3939;
-  --smoke-dark-7: #4b4646;
-  --smoke-dark-8: #645f5f;
-  --smoke-dark-9: #716c6b;
-  --smoke-dark-10: #7f7979;
-  --smoke-dark-11: #b7b1b1;
-  --smoke-dark-12: #f1ecec;
-  --smoke-light-1: #fdfcfc;
-  --smoke-light-2: #f9f8f8;
-  --smoke-light-3: #f1f0f0;
-  --smoke-light-4: #e9e8e8;
-  --smoke-light-5: #e2e0e0;
-  --smoke-light-6: #dad9d9;
-  --smoke-light-7: #cfcecd;
-  --smoke-light-8: #bcbbbb;
-  --smoke-light-9: #8e8b8b;
-  --smoke-light-10: #848181;
-  --smoke-light-11: #656363;
-  --smoke-light-12: #211e1e;
-  --smoke-dark-alpha-1: #bb000003;
-  --smoke-dark-alpha-2: #f9b4b40b;
-  --smoke-dark-alpha-3: #f9caca16;
-  --smoke-dark-alpha-4: #ffd5d51e;
-  --smoke-dark-alpha-5: #fce2e226;
-  --smoke-dark-alpha-6: #fce2e231;
-  --smoke-dark-alpha-7: #fce8e83f;
-  --smoke-dark-alpha-8: #fff1f159;
-  --smoke-dark-alpha-9: #fff3f067;
-  --smoke-dark-alpha-10: #fff2f276;
-  --smoke-dark-alpha-11: #fff7f7b2;
-  --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;
-  --smoke-light-alpha-5: #1100001f;
-  --smoke-light-alpha-6: #07000026;
-  --smoke-light-alpha-7: #0b060032;
-  --smoke-light-alpha-8: #04000044;
-  --smoke-light-alpha-9: #07000074;
-  --smoke-light-alpha-10: #0400009c;
-  --smoke-light-alpha-11: #0700007e;
-  --smoke-light-alpha-12: #020000df;
-  --yuzu-dark-1: #11120c;
-  --yuzu-light-1: #fdfdfb;
-  --yuzu-light-2: #fbfceb;
-  --yuzu-light-3: #f8fac5;
-  --yuzu-light-4: #f2f4a5;
-  --yuzu-light-5: #e9eb9a;
-  --yuzu-light-6: #dcde8e;
-  --yuzu-light-7: #cccd7e;
-  --yuzu-light-8: #b6b768;
-  --yuzu-light-9: #dcde8d;
-  --yuzu-light-10: #d2d384;
-  --yuzu-light-11: #7c7c2c;
-  --yuzu-light-12: #3d3d23;
-  --yuzu-dark-2: #181810;
-  --yuzu-dark-3: #262614;
-  --yuzu-dark-4: #313115;
-  --yuzu-dark-5: #3d3d18;
-  --yuzu-dark-6: #4a4a21;
-  --yuzu-dark-7: #5a5b2c;
-  --yuzu-dark-8: #6f6f36;
-  --yuzu-dark-9: #fdffca;
-  --yuzu-dark-10: #f4f6c1;
-  --yuzu-dark-11: #dbdda0;
-  --yuzu-dark-12: #eff1bd;
-  --yuzu-dark-alpha-1: #11910002;
-  --yuzu-dark-alpha-2: #f1f10008;
-  --yuzu-dark-alpha-3: #fafa3317;
-  --yuzu-dark-alpha-4: #fbfb2f23;
-  --yuzu-dark-alpha-5: #fbfb3730;
-  --yuzu-dark-alpha-6: #fcfc533e;
-  --yuzu-dark-alpha-7: #fafd6750;
-  --yuzu-dark-alpha-8: #ffff6f65;
-  --yuzu-dark-alpha-9: #fdffca;
-  --yuzu-dark-alpha-10: #fcfec7f6;
-  --yuzu-dark-alpha-11: #fdffb8db;
-  --yuzu-dark-alpha-12: #fdffc8f0;
-  --yuzu-light-alpha-1: #80800004;
-  --yuzu-light-alpha-2: #ccd90014;
-  --yuzu-light-alpha-3: #e1ea003a;
-  --yuzu-light-alpha-4: #dbe0015a;
-  --yuzu-light-alpha-5: #c8cd0065;
-  --yuzu-light-alpha-6: #b1b50071;
-  --yuzu-light-alpha-7: #9b9d0081;
-  --yuzu-light-alpha-8: #84860097;
-  --yuzu-light-alpha-9: #b1b60072;
-  --yuzu-light-alpha-10: #a2a4017b;
-  --yuzu-light-alpha-11: #616100d3;
-  --yuzu-light-alpha-12: #1e1e00dc;
-  --cobalt-dark-1: #091120;
-  --cobalt-dark-2: #0d172b;
-  --cobalt-dark-3: #0c2255;
-  --cobalt-dark-4: #0c2a74;
-  --cobalt-dark-5: #113489;
-  --cobalt-dark-6: #18409b;
-  --cobalt-dark-7: #204cb1;
-  --cobalt-dark-8: #2558d0;
-  --cobalt-dark-9: #034cff;
-  --cobalt-dark-10: #0038ee;
-  --cobalt-dark-11: #89b5ff;
-  --cobalt-dark-12: #cde2ff;
-  --cobalt-light-1: #fcfdff;
-  --cobalt-light-2: #f5faff;
-  --cobalt-light-3: #eaf2ff;
-  --cobalt-light-4: #daeaff;
-  --cobalt-light-5: #c8e0ff;
-  --cobalt-light-6: #b4d2ff;
-  --cobalt-light-7: #98bfff;
-  --cobalt-dark-alpha-1: #0011f211;
-  --cobalt-dark-alpha-2: #0048fe1c;
-  --cobalt-dark-alpha-3: #004dff49;
-  --cobalt-dark-alpha-4: #064dfd6b;
-  --cobalt-dark-alpha-5: #1157ff81;
-  --cobalt-dark-alpha-6: #1e62ff94;
-  --cobalt-dark-alpha-7: #2768feac;
-  --cobalt-dark-alpha-8: #2a6affcd;
-  --cobalt-dark-alpha-9: #034cff;
-  --cobalt-dark-alpha-10: #003bffed;
-  --cobalt-dark-alpha-11: #89b5ff;
-  --cobalt-dark-alpha-12: #cde2ff;
-  --cobalt-light-8: #73a4ff;
-  --cobalt-light-9: #034cff;
-  --cobalt-light-10: #0443de;
-  --cobalt-light-11: #1251ec;
-  --cobalt-light-12: #0f2b6c;
-  --cobalt-light-alpha-1: #0055ff03;
-  --cobalt-light-alpha-2: #0080ff0a;
-  --cobalt-light-alpha-3: #0062ff15;
-  --cobalt-light-alpha-4: #006fff25;
-  --cobalt-light-alpha-5: #0070ff37;
-  --cobalt-light-alpha-6: #0167ff4b;
-  --cobalt-light-alpha-7: #0061ff67;
-  --cobalt-light-alpha-8: #005aff8c;
-  --cobalt-light-alpha-9: #004afffc;
-  --cobalt-light-alpha-10: #0040ddfb;
-  --cobalt-light-alpha-11: #0044ebed;
-  --cobalt-light-alpha-12: #001e63f0;
-  --apple-dark-1: #0c140b;
-  --apple-light-1: #fafefa;
-  --apple-light-2: #f4fcf3;
-  --apple-light-3: #e1fade;
-  --apple-light-4: #cef6c9;
-  --apple-light-5: #b9efb3;
-  --apple-light-6: #9fe598;
-  --apple-light-7: #7dd676;
-  --apple-light-8: #43c23b;
-  --apple-light-9: #12c905;
-  --apple-light-10: #00bd00;
-  --apple-light-11: #008600;
-  --apple-light-12: #184115;
-  --apple-dark-2: #121b11;
-  --apple-dark-3: #152d13;
-  --apple-dark-4: #123d0f;
-  --apple-dark-5: #174b14;
-  --apple-dark-6: #1d5b19;
-  --apple-dark-7: #226c1e;
-  --apple-dark-8: #267f20;
-  --apple-dark-9: #12c905;
-  --apple-dark-10: #17bb0d;
-  --apple-dark-11: #37db2e;
-  --apple-dark-12: #aff7a8;
-  --apple-dark-alpha-1: #00d10004;
-  --apple-dark-alpha-2: #29f9120b;
-  --apple-dark-alpha-3: #33ff221e;
-  --apple-dark-alpha-4: #17fb0730;
-  --apple-dark-alpha-5: #2afc1e3f;
-  --apple-dark-alpha-6: #37fd2b50;
-  --apple-dark-alpha-7: #3efe3362;
-  --apple-dark-alpha-8: #3fff3276;
-  --apple-dark-alpha-9: #12fe02c6;
-  --apple-dark-alpha-10: #19fe0cb7;
-  --apple-dark-alpha-11: #3dfe33d9;
-  --apple-dark-alpha-12: #b4feacf7;
-  --apple-light-alpha-1: #00cc0005;
-  --apple-light-alpha-2: #16c0000c;
-  --apple-light-alpha-3: #18d90021;
-  --apple-light-alpha-4: #18d50036;
-  --apple-light-alpha-5: #15ca004c;
-  --apple-light-alpha-6: #12bf0067;
-  --apple-light-alpha-7: #0db30089;
-  --apple-light-alpha-8: #0bb000c4;
-  --apple-light-alpha-9: #0dc800fa;
-  --apple-light-alpha-10: #00bd00;
-  --apple-light-alpha-11: #008600;
-  --apple-light-alpha-12: #033000ea;
-  --ember-dark-1: #170f0d;
-  --ember-dark-2: #201412;
-  --ember-dark-3: #3c140d;
-  --ember-dark-4: #530e05;
-  --ember-dark-5: #631409;
-  --ember-dark-6: #742216;
-  --ember-dark-7: #8d3324;
-  --ember-dark-8: #b64330;
-  --ember-dark-9: #fc533a;
-  --ember-dark-10: #ee462d;
-  --ember-dark-11: #ff917b;
-  --ember-dark-12: #ffd1c8;
-  --ember-light-1: #fffcfb;
-  --ember-light-2: #fff6f3;
-  --ember-light-3: #ffe9e4;
-  --ember-light-4: #ffd7cc;
-  --ember-light-5: #ffc8ba;
-  --ember-light-6: #ffb7a6;
-  --ember-light-7: #ffa392;
-  --ember-light-8: #f68975;
-  --ember-light-9: #fc533a;
-  --ember-light-10: #ef442a;
-  --ember-light-11: #da3319;
-  --ember-light-12: #5c281f;
-  --ember-dark-alpha-1: #ec000007;
-  --ember-dark-alpha-2: #f23e2011;
-  --ember-dark-alpha-3: #fb22002f;
-  --ember-dark-alpha-4: #ff070047;
-  --ember-dark-alpha-5: #ff1a0058;
-  --ember-dark-alpha-6: #fd3a1d6b;
-  --ember-dark-alpha-7: #ff533685;
-  --ember-dark-alpha-8: #ff5a3eb1;
-  --ember-dark-alpha-9: #ff553bfc;
-  --ember-dark-alpha-10: #ff4a2fed;
-  --ember-dark-alpha-11: #ff917b;
-  --ember-dark-alpha-12: #ffd1c8;
-  --ember-light-alpha-1: #ff400004;
-  --ember-light-alpha-2: #ff40000c;
-  --ember-light-alpha-3: #ff30001b;
-  --ember-light-alpha-4: #ff370033;
-  --ember-light-alpha-5: #ff340045;
-  --ember-light-alpha-6: #ff310059;
-  --ember-light-alpha-7: #ff28006d;
-  --ember-light-alpha-8: #ef25008a;
-  --ember-light-alpha-9: #fb2200c5;
-  --ember-light-alpha-10: #ec1f00d5;
-  --ember-light-alpha-11: #d61d00e6;
-  --ember-light-alpha-12: #460a00e0;
-  --solaris-dark-1: #13110b;
-  --solaris-dark-2: #1b180f;
-  --solaris-dark-3: #2a2307;
-  --solaris-dark-4: #382b00;
-  --solaris-dark-5: #443500;
-  --solaris-dark-6: #514307;
-  --solaris-dark-7: #64551a;
-  --solaris-dark-8: #7f6c25;
-  --solaris-dark-9: #fcd53a;
-  --solaris-dark-10: #f2cb2a;
-  --solaris-dark-11: #fdd63c;
-  --solaris-dark-12: #faebb5;
-  --solaris-light-1: #fefdfa;
-  --solaris-light-2: #fffbea;
-  --solaris-light-3: #fff6be;
-  --solaris-light-4: #ffee9c;
-  --solaris-light-5: #ffe47c;
-  --solaris-light-6: #f2d775;
-  --solaris-light-7: #e0c76f;
-  --solaris-light-8: #cdb047;
-  --solaris-light-9: #ffdc17;
-  --solaris-light-10: #fad337;
-  --solaris-light-11: #917500;
-  --solaris-light-12: #433c22;
-  --solaris-dark-alpha-1: #bb110003;
-  --solaris-dark-alpha-2: #f9b4000b;
-  --solaris-dark-alpha-3: #febb001b;
-  --solaris-dark-alpha-4: #feaf002a;
-  --solaris-dark-alpha-5: #feb80037;
-  --solaris-dark-alpha-6: #feca0045;
-  --solaris-dark-alpha-7: #ffd42b59;
-  --solaris-dark-alpha-8: #ffd63d76;
-  --solaris-dark-alpha-9: #ffd83bfc;
-  --solaris-dark-alpha-10: #fed52bf2;
-  --solaris-dark-alpha-11: #ffd83cfd;
-  --solaris-dark-alpha-12: #fff0b9fa;
-  --solaris-light-alpha-1: #cc990005;
-  --solaris-light-alpha-2: #ffcf0015;
-  --solaris-light-alpha-3: #ffdc0041;
-  --solaris-light-alpha-4: #ffd40063;
-  --solaris-light-alpha-5: #ffcb0083;
-  --solaris-light-alpha-6: #e7b6008a;
-  --solaris-light-alpha-7: #c89c0090;
-  --solaris-light-alpha-8: #ba9200b8;
-  --solaris-light-alpha-9: #ffd900e8;
-  --solaris-light-alpha-10: #f9c700c8;
-  --solaris-light-alpha-11: #917500;
-  --solaris-light-alpha-12: #261e00dd;
-  --lilac-dark-1: #140f14;
-  --lilac-dark-2: #1d141d;
-  --lilac-dark-3: #2f1e31;
-  --lilac-dark-4: #3e2440;
-  --lilac-dark-5: #4a2c4c;
-  --lilac-dark-6: #573859;
-  --lilac-dark-7: #6c486e;
-  --lilac-dark-8: #8a5e8d;
-  --lilac-dark-9: #edb2f1;
-  --lilac-dark-10: #e2a8e6;
-  --lilac-dark-11: #dca2e0;
-  --lilac-dark-12: #edd8ef;
-  --lilac-light-1: #fffcff;
-  --lilac-light-2: #fdf7fe;
-  --lilac-light-3: #fceafd;
-  --lilac-light-4: #faddfb;
-  --lilac-light-5: #f5cff7;
-  --lilac-light-6: #eebff1;
-  --lilac-light-7: #e3a9e7;
-  --lilac-light-8: #d78bdd;
-  --lilac-light-9: #a753ae;
-  --lilac-light-10: #9946a0;
-  --lilac-light-11: #95429c;
-  --lilac-light-12: #590b60;
-  --lilac-dark-alpha-1: #d100d104;
-  --lilac-dark-alpha-2: #fd4cfd0d;
-  --lilac-dark-alpha-3: #ec70fb23;
-  --lilac-dark-alpha-4: #f270fc33;
-  --lilac-dark-alpha-5: #f57dfd40;
-  --lilac-dark-alpha-6: #f691fd4e;
-  --lilac-dark-alpha-7: #fa9eff64;
-  --lilac-dark-alpha-8: #f9a5ff85;
-  --lilac-dark-alpha-9: #fbbcfff0;
-  --lilac-dark-alpha-10: #f9b9fee5;
-  --lilac-dark-alpha-11: #fab8ffde;
-  --lilac-dark-alpha-12: #fde6ffee;
-  --lilac-light-alpha-1: #ff00ff03;
-  --lilac-light-alpha-2: #c000e008;
-  --lilac-light-alpha-3: #db00e715;
-  --lilac-light-alpha-4: #da00e122;
-  --lilac-light-alpha-5: #ca00d530;
-  --lilac-light-alpha-6: #bc00c840;
-  --lilac-light-alpha-7: #ac00b856;
-  --lilac-light-alpha-8: #a800b574;
-  --lilac-light-alpha-9: #7d0087ac;
-  --lilac-light-alpha-10: #73007cb9;
-  --lilac-light-alpha-11: #70007abd;
-  --lilac-light-alpha-12: #520059f4;
-  --coral-dark-1: #160f0e;
-  --coral-light-1: #fffcfc;
-  --coral-light-2: #fff8f7;
-  --coral-light-3: #ffebe8;
-  --coral-light-4: #ffdbd5;
-  --coral-light-5: #ffcdc5;
-  --coral-light-6: #f9beb5;
-  --coral-light-7: #e9aea6;
-  --coral-light-8: #d49b93;
-  --coral-light-9: #af7871;
-  --coral-light-10: #a26c65;
-  --coral-light-11: #9c665f;
-  --coral-light-12: #592a24;
-  --coral-dark-2: #1f1413;
-  --coral-dark-3: #391613;
-  --coral-dark-4: #481b17;
-  --coral-dark-5: #542621;
-  --coral-dark-6: #63332d;
-  --coral-dark-7: #77453f;
-  --coral-dark-8: #935e57;
-  --coral-dark-9: #ffd6d0;
-  --coral-dark-10: #f5ccc6;
-  --coral-dark-11: #e2a8a0;
-  --coral-dark-12: #fcd3cd;
-  --coral-dark-alpha-1: #e6000006;
-  --coral-dark-alpha-2: #ff44330f;
-  --coral-dark-alpha-3: #ff2f1d2b;
-  --coral-dark-alpha-4: #ff3d2b3b;
-  --coral-dark-alpha-5: #ff5c4a48;
-  --coral-dark-alpha-6: #ff746358;
-  --coral-dark-alpha-7: #fd897c6e;
-  --coral-dark-alpha-8: #fe9d908c;
-  --coral-dark-alpha-9: #ffd6d0;
-  --coral-dark-alpha-10: #fed3cdf5;
-  --coral-dark-alpha-11: #ffbdb4e0;
-  --coral-dark-alpha-12: #ffd6cffc;
-  --coral-light-alpha-1: #ff000003;
-  --coral-light-alpha-2: #ff200008;
-  --coral-light-alpha-3: #ff220017;
-  --coral-light-alpha-4: #ff25002a;
-  --coral-light-alpha-5: #ff24003a;
-  --coral-light-alpha-6: #eb20014a;
-  --coral-light-alpha-7: #c0170059;
-  --coral-light-alpha-8: #9a13006c;
-  --coral-light-alpha-9: #700d008e;
-  --coral-light-alpha-10: #650c009a;
-  --coral-light-alpha-11: #620b00a0;
-  --coral-light-alpha-12: #3e0700db;
-  --mint-dark-alpha-1: #00bb0003;
-  --mint-dark-alpha-2: #2bf72b0a;
-  --mint-dark-alpha-3: #66fe5d1b;
-  --mint-dark-alpha-4: #63ff5d2c;
-  --mint-dark-alpha-5: #6cff643b;
-  --mint-dark-alpha-6: #71ff6a4b;
-  --mint-dark-alpha-7: #74fd6f5d;
-  --mint-dark-alpha-8: #74ff6f72;
-  --mint-dark-alpha-9: #c8ffc4f5;
-  --mint-dark-alpha-10: #c6fec2f5;
-  --mint-dark-alpha-11: #b4ffafdc;
-  --mint-dark-alpha-12: #c7ffc3fb;
-  --mint-dark-1: #0d130c;
-  --mint-dark-2: #121a12;
-  --mint-dark-3: #1a2a19;
-  --mint-dark-4: #1f3a1e;
-  --mint-dark-5: #264824;
-  --mint-dark-6: #2d572b;
-  --mint-dark-7: #356733;
-  --mint-dark-8: #3d7b3b;
-  --mint-dark-9: #c8ffc4;
-  --mint-dark-10: #bff5bb;
-  --mint-dark-11: #9dde99;
-  --mint-dark-12: #c4fbc0;
-  --mint-light-1: #fafefa;
-  --mint-light-2: #f4fcf3;
-  --mint-light-3: #dbfdd8;
-  --mint-light-4: #c3fabf;
-  --mint-light-5: #adf2a8;
-  --mint-light-6: #96e692;
-  --mint-light-7: #81d47d;
-  --mint-light-8: #6abc67;
-  --mint-light-9: #9ff29a;
-  --mint-light-10: #98e793;
-  --mint-light-11: #318430;
-  --mint-light-12: #1f461d;
-  --mint-dark-alpha-1: #00bb0003;
-  --mint-dark-alpha-2: #2bf72b09;
-  --mint-dark-alpha-3: #66fe5d1b;
-  --mint-dark-alpha-4: #63ff5d2b;
-  --mint-dark-alpha-5: #6cff643b;
-  --mint-dark-alpha-6: #71ff6a4a;
-  --mint-dark-alpha-7: #74fd6f5c;
-  --mint-dark-alpha-8: #74ff6f72;
-  --mint-dark-alpha-9: #c8ffc4f5;
-  --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;
-  --mint-light-alpha-4: #10ec0040;
-  --mint-light-alpha-5: #0fd90057;
-  --mint-light-alpha-6: #0ac5006d;
-  --mint-light-alpha-7: #08ab0082;
-  --mint-light-alpha-8: #058f0098;
-  --mint-light-alpha-9: #0ddf0065;
-  --mint-light-alpha-10: #0cc7006c;
-  --mint-light-alpha-11: #016800cf;
-  --mint-light-alpha-12: #022e00e2;
-  --grey-light-alpha-1: #ffffff;
-  --grey-light-alpha-2: #ffffff;
-  --grey-light-alpha-3: #ffffff;
-  --grey-light-alpha-4: #ffffff;
-  --grey-light-alpha-5: #ffffff;
-  --grey-light-alpha-6: #ffffff;
-  --grey-light-alpha-7: #ffffff;
-  --grey-light-alpha-8: #ffffff;
-  --grey-light-alpha-9: #ffffff;
-  --grey-light-alpha-10: #ffffff;
-  --grey-light-alpha-11: #ffffff;
-  --grey-light-alpha-12: #ffffff;
-}
diff --git a/packages/css/src/components/button.css b/packages/css/src/components/button.css
deleted file mode 100644
index c50d76412..000000000
--- a/packages/css/src/components/button.css
+++ /dev/null
@@ -1,94 +0,0 @@
-[data-component="button"] {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-base);
-  line-height: var(--text-base--line-height);
-  font-weight: var(--font-weight-normal);
-  text-decoration: none;
-  user-select: none;
-  gap: calc(var(--spacing) * 0.5);
-
-  &[data-variant="primary"] {
-    border-color: var(--border-base);
-    background-color: var(--surface-brand-base);
-    color: var(--text-on-brand-strong);
-
-    &:hover:not(:disabled) {
-      border-color: var(--border-hover);
-      background-color: var(--surface-brand-hover);
-    }
-    &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-brand-active);
-    }
-    &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-brand-focus);
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border-color: var(--border-base);
-    background-color: var(--surface-base);
-    color: var(--text-strong);
-
-    &:hover:not(:disabled) {
-      border-color: var(--border-hover);
-      background-color: var(--surface-hover);
-    }
-    &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-active);
-    }
-    &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-focus);
-    }
-  }
-
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-hover);
-    }
-    &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-active);
-    }
-    &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-focus);
-    }
-  }
-
-  &[data-size="normal"] {
-    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
-    font-size: var(--text-xs);
-    line-height: var(--text-sm--line-height);
-  }
-
-  &[data-size="large"] {
-    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm--line-height);
-  }
-
-  &:disabled {
-    border-color: var(--border-disabled);
-    background-color: var(--surface-disabled);
-    color: var(--text-weak);
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
diff --git a/packages/css/src/components/icon.css b/packages/css/src/components/icon.css
deleted file mode 100644
index abc193220..000000000
--- a/packages/css/src/components/icon.css
+++ /dev/null
@@ -1,6 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
diff --git a/packages/css/src/components/select.css b/packages/css/src/components/select.css
deleted file mode 100644
index da3334853..000000000
--- a/packages/css/src/components/select.css
+++ /dev/null
@@ -1,122 +0,0 @@
-[data-component="select"] {
-  [data-slot="trigger"] {
-    [data-slot="value"] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    [data-slot="icon"] {
-      width: fit-content;
-      height: fit-content;
-      flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
-    }
-  }
-}
-
-[data-component="select-content"] {
-  min-width: 8rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--border-weak-base);
-  background-color: var(--surface-raised-base);
-  padding: calc(var(--spacing) * 1);
-  box-shadow: var(--shadow-md);
-  z-index: 50;
-
-  &[data-closed] {
-    animation: select-close 0.15s ease-out;
-  }
-
-  &[data-expanded] {
-    animation: select-open 0.15s ease-out;
-  }
-
-  [data-slot="list"] {
-    overflow-y: auto;
-    max-height: 12rem;
-    white-space: nowrap;
-    overflow-x: hidden;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  [data-slot="section"] {
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    font-weight: var(--font-weight-light);
-    text-transform: uppercase;
-    color: var(--text-weak);
-    opacity: 0.6;
-    margin-top: calc(var(--spacing) * 3);
-    margin-left: calc(var(--spacing) * 2);
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  [data-slot="item"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
-    border-radius: var(--radius-sm);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
-    color: var(--text-base);
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background-color: var(--surface-base);
-    }
-
-    &[data-disabled] {
-      background-color: var(--surface-disabled);
-      pointer-events: none;
-    }
-
-    [data-slot="item-indicator"] {
-      margin-left: auto;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--surface-hover);
-    }
-  }
-}
-
-@keyframes select-open {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes select-close {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
diff --git a/packages/css/src/components/tabs.css b/packages/css/src/components/tabs.css
deleted file mode 100644
index 3790859d1..000000000
--- a/packages/css/src/components/tabs.css
+++ /dev/null
@@ -1,95 +0,0 @@
-[data-component="tabs"] {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--radius-sm);
-  border-color: var(--border-weak-base);
-  background-color: var(--background-weaker);
-  overflow: clip;
-
-  & [data-slot="list"] {
-    width: 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-
-    /* Hide scrollbar */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    /* After element to fill remaining space */
-    &::after {
-      content: "";
-      display: block;
-      flex-grow: 1;
-      height: 100%;
-      border-bottom: 1px solid var(--border-weak-base);
-      background-color: var(--background-weak);
-      border-top-right-radius: var(--radius-sm);
-    }
-
-    &:empty::after {
-      display: none;
-    }
-  }
-
-  & [data-slot="trigger"] {
-    position: relative;
-    height: 36px;
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-    color: var(--text-weak);
-    cursor: pointer;
-    white-space: nowrap;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--border-weak-base);
-    border-right: 1px solid var(--border-weak-base);
-    background-color: var(--background-weak);
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-
-    &:disabled {
-      pointer-events: none;
-      color: var(--text-weaker);
-    }
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--border-focus);
-    }
-    &[data-selected] {
-      color: var(--text-base);
-      background-color: transparent;
-      border-bottom-color: transparent;
-    }
-    &:hover:not(:disabled):not([data-selected]) {
-      color: var(--text-strong);
-    }
-  }
-
-  & [data-slot="content"] {
-    overflow-y: auto;
-    flex: 1;
-
-    /* Hide scrollbar */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-}
diff --git a/packages/css/src/components/tooltip.css b/packages/css/src/components/tooltip.css
deleted file mode 100644
index a17ed4026..000000000
--- a/packages/css/src/components/tooltip.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* [data-component="tooltip-trigger"] { */
-/*   display: flex; */
-/*   align-items: center; */
-/* } */
-
-[data-component="tooltip"] {
-  z-index: 1000;
-  max-width: 320px;
-  border-radius: var(--radius-md);
-  background-color: var(--surface-base);
-  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1);
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-base);
-  box-shadow: var(--shadow-md);
-  pointer-events: none !important;
-  transition: all 150ms ease-out;
-  transform: translate3d(0, 0, 0);
-  transform-origin: var(--kb-tooltip-content-transform-origin);
-
-  &[data-expanded] {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  &[data-closed] {
-    opacity: 0;
-  }
-
-  &[data-placement="top"] {
-    &[data-closed] {
-      transform: translate3d(0, 4px, 0);
-    }
-  }
-
-  &[data-placement="bottom"] {
-    &[data-closed] {
-      transform: translate3d(0, -4px, 0);
-    }
-  }
-
-  &[data-placement="left"] {
-    &[data-closed] {
-      transform: translate3d(4px, 0, 0);
-    }
-  }
-
-  &[data-placement="right"] {
-    &[data-closed] {
-      transform: translate3d(-4px, 0, 0);
-    }
-  }
-}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
deleted file mode 100644
index ff67c6a60..000000000
--- a/packages/css/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-@layer theme, base, components, utilities;
-
-@import "./color.css" layer(theme);
-@import "./theme.css" layer(theme);
-
-@import "./base.css" layer(base);
-
-@import "./components/button.css" layer(components);
-@import "./components/icon.css" layer(components);
-@import "./components/select.css" layer(components);
-@import "./components/tabs.css" layer(components);
-@import "./components/tooltip.css" layer(components);
-
-@import "./utilities.css" layer(utilities);
diff --git a/packages/css/src/tailwind-colors.css b/packages/css/src/tailwind-colors.css
deleted file mode 100644
index 696a14ddc..000000000
--- a/packages/css/src/tailwind-colors.css
+++ /dev/null
@@ -1,220 +0,0 @@
-/* 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
deleted file mode 100644
index 327eba298..000000000
--- a/packages/css/src/tailwind.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@import "./index.css";
-
-@theme {
-  --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
deleted file mode 100644
index cb4931035..000000000
--- a/packages/css/src/theme.css
+++ /dev/null
@@ -1,574 +0,0 @@
-:root {
-  --font-sans:
-    geist, geist-fallback, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-  --font-sans--font-feature-settings: "ss02" 1;
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono:
-    geist-mono, geist-mono-fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  --font-mono--font-feature-settings: "ss02" 1;
-
-  --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;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-
-  --container-3xs: 16rem;
-  --container-2xs: 18rem;
-  --container-xs: 20rem;
-  --container-sm: 24rem;
-  --container-md: 28rem;
-  --container-lg: 32rem;
-  --container-xl: 36rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --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; */
-
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --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; */
-
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
-  --radius-4xl: 2rem;
-
-  --shadow-xs-border-selected:
-    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
-    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
-    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
-
-  /* --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); */
-  /* --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); */
-  /* --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); */
-  /* --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
-  /* --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); */
-  /* --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); */
-}
-
-:root {
-  /* OC-1-Light */
-  color-scheme: light;
-  --background-base: #f8f7f7;
-  --background-weak: var(--smoke-light-3);
-  --background-strong: var(--smoke-light-1);
-  --background-stronger: #fcfcfc;
-  --base: var(--smoke-light-alpha-2);
-  --surface-base: var(--smoke-light-alpha-2);
-  --base2: var(--smoke-light-alpha-2);
-  --base3: var(--smoke-light-alpha-2);
-  --surface-inset-base: var(--smoke-light-alpha-3);
-  --surface-inset-base-hover: var(--smoke-light-alpha-3);
-  --surface-inset-strong: #1f000017;
-  --surface-inset-strong-hover: #1f000017;
-  --surface-raised-base: var(--smoke-light-alpha-1);
-  --surface-float-base: var(--smoke-dark-1);
-  --surface-float-base-hover: var(--smoke-dark-2);
-  --surface-raised-base-hover: var(--smoke-light-alpha-2);
-  --surface-raised-strong: var(--smoke-light-1);
-  --surface-raised-strong-hover: var(--white);
-  --surface-raised-stronger: var(--white);
-  --surface-raised-stronger-hover: var(--white);
-  --surface-weak: var(--smoke-light-alpha-3);
-  --surface-weaker: var(--smoke-light-alpha-4);
-  --surface-strong: #ffffff;
-  --surface-raised-stronger-non-alpha: var(--white);
-  --surface-brand-base: var(--yuzu-light-9);
-  --surface-brand-hover: var(--yuzu-light-10);
-  --surface-interactive-base: var(--cobalt-light-3);
-  --surface-interactive-hover: var(--cobalt-light-4);
-  --surface-interactive-weak: var(--cobalt-light-2);
-  --surface-interactive-weak-hover: var(--cobalt-light-3);
-  --surface-success-base: var(--apple-light-3);
-  --surface-success-weak: var(--apple-light-2);
-  --surface-success-strong: var(--apple-light-9);
-  --surface-warning-base: var(--solaris-light-3);
-  --surface-warning-weak: var(--solaris-light-2);
-  --surface-warning-strong: var(--solaris-light-9);
-  --surface-critical-base: var(--ember-light-3);
-  --surface-critical-weak: var(--ember-light-2);
-  --surface-critical-strong: var(--ember-light-9);
-  --surface-info-base: var(--lilac-light-3);
-  --surface-info-weak: var(--lilac-light-2);
-  --surface-info-strong: var(--lilac-light-9);
-  --surface-diff-skip-base: var(--smoke-light-3);
-  --surface-diff-unchanged-base: #ffffff00;
-  --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-hidden-weak: var(--blue-light-2);
-  --surface-diff-hidden-weaker: var(--blue-light-1);
-  --surface-diff-hidden-strong: var(--blue-light-5);
-  --surface-diff-hidden-stronger: var(--blue-light-9);
-  --surface-diff-add-base: var(--mint-light-3);
-  --surface-diff-add-weak: var(--mint-light-2);
-  --surface-diff-add-weaker: var(--mint-light-1);
-  --surface-diff-add-strong: var(--mint-light-5);
-  --surface-diff-add-stronger: var(--mint-light-9);
-  --surface-diff-delete-base: var(--ember-light-3);
-  --surface-diff-delete-weak: var(--ember-light-2);
-  --surface-diff-delete-weaker: var(--ember-light-1);
-  --surface-diff-delete-strong: var(--ember-light-6);
-  --surface-diff-delete-stronger: var(--ember-light-9);
-  --text-base: var(--smoke-light-11);
-  --input-base: var(--smoke-light-1);
-  --input-hover: var(--smoke-light-2);
-  --input-active: var(--cobalt-light-1);
-  --input-selected: var(--cobalt-light-4);
-  --input-focus: var(--cobalt-light-1);
-  --input-disabled: var(--smoke-light-4);
-  --text-weak: var(--smoke-light-9);
-  --text-weaker: var(--smoke-light-8);
-  --text-strong: var(--smoke-light-12);
-  --text-on-brand-base: var(--smoke-light-alpha-11);
-  --text-on-interactive-base: var(--smoke-light-1);
-  --text-on-success-base: var(--smoke-dark-alpha-11);
-  --text-on-warning-base: var(--smoke-dark-alpha-11);
-  --text-on-info-base: var(--smoke-dark-alpha-11);
-  --text-diff-add-base: var(--mint-light-11);
-  --text-diff-delete-base: var(--ember-light-11);
-  --text-diff-delete-strong: var(--ember-light-12);
-  --text-diff-add-strong: var(--mint-light-12);
-  --text-on-info-weak: var(--smoke-dark-alpha-9);
-  --text-on-info-strong: var(--smoke-dark-alpha-12);
-  --text-on-warning-weak: var(--smoke-dark-alpha-9);
-  --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
-  --text-on-brand-weak: var(--smoke-light-alpha-9);
-  --text-on-brand-weaker: var(--smoke-light-alpha-8);
-  --text-on-brand-strong: var(--smoke-light-alpha-12);
-  --button-secondary-base: #fdfcfc;
-  --border-base: var(--smoke-light-alpha-7);
-  --border-hover: var(--smoke-light-alpha-8);
-  --border-active: var(--smoke-light-alpha-9);
-  --border-selected: var(--cobalt-light-alpha-9);
-  --border-disabled: var(--smoke-light-alpha-8);
-  --border-focus: var(--smoke-light-alpha-9);
-  --border-weak-base: var(--smoke-light-alpha-5);
-  --border-strong-base: var(--smoke-light-alpha-7);
-  --border-strong-hover: var(--smoke-light-alpha-8);
-  --border-strong-active: var(--smoke-light-alpha-7);
-  --border-strong-selected: var(--cobalt-light-alpha-6);
-  --border-strong-disabled: var(--smoke-light-alpha-6);
-  --border-strong-focus: var(--smoke-light-alpha-7);
-  --border-weak-hover: var(--smoke-light-alpha-6);
-  --border-weak-active: var(--smoke-light-alpha-7);
-  --border-weak-selected: var(--cobalt-light-alpha-6);
-  --border-weak-disabled: var(--smoke-light-alpha-6);
-  --border-weak-focus: var(--smoke-light-alpha-7);
-  --border-interactive-base: var(--cobalt-light-7);
-  --border-interactive-hover: var(--cobalt-light-8);
-  --border-interactive-active: var(--cobalt-light-9);
-  --border-interactive-selected: var(--cobalt-light-9);
-  --border-interactive-disabled: var(--smoke-light-8);
-  --border-interactive-focus: var(--cobalt-light-9);
-  --border-success-base: var(--apple-light-6);
-  --border-success-hover: var(--apple-light-7);
-  --border-success-selected: var(--apple-light-9);
-  --border-warning-base: var(--solaris-light-6);
-  --border-warning-hover: var(--solaris-light-7);
-  --border-warning-selected: var(--solaris-light-9);
-  --border-critical-base: var(--ember-light-6);
-  --border-critical-hover: var(--ember-light-7);
-  --border-critical-selected: var(--ember-light-9);
-  --border-info-base: var(--lilac-light-6);
-  --border-info-hover: var(--lilac-light-7);
-  --border-info-selected: var(--lilac-light-9);
-  --icon-base: var(--smoke-light-9);
-  --icon-hover: var(--smoke-light-11);
-  --icon-active: var(--smoke-light-12);
-  --icon-selected: var(--smoke-light-12);
-  --icon-disabled: var(--smoke-light-8);
-  --icon-focus: var(--smoke-light-12);
-  --icon-weak-base: var(--smoke-light-7);
-  --icon-invert-base: #ffffff;
-  --icon-weak-hover: var(--smoke-light-8);
-  --icon-weak-active: var(--smoke-light-9);
-  --icon-weak-selected: var(--smoke-light-10);
-  --icon-weak-disabled: var(--smoke-light-6);
-  --icon-weak-focus: var(--smoke-light-9);
-  --icon-strong-base: var(--smoke-light-12);
-  --icon-strong-hover: var(--smoke-light-12);
-  --icon-strong-active: var(--smoke-light-12);
-  --icon-strong-selected: var(--smoke-light-12);
-  --icon-strong-disabled: var(--smoke-light-8);
-  --icon-strong-focus: var(--smoke-light-12);
-  --icon-brand-base: var(--smoke-light-12);
-  --icon-interactive-base: var(--cobalt-light-9);
-  --icon-success-base: var(--apple-light-7);
-  --icon-success-hover: var(--apple-light-8);
-  --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
-  --icon-warning-hover: var(--amber-light-8);
-  --icon-warning-active: var(--amber-light-11);
-  --icon-critical-base: var(--ember-light-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-light-11);
-  --icon-info-base: var(--lilac-light-7);
-  --icon-info-hover: var(--lilac-light-8);
-  --icon-info-active: var(--lilac-light-11);
-  --icon-on-brand-base: var(--smoke-light-alpha-11);
-  --icon-on-brand-hover: var(--smoke-light-alpha-12);
-  --icon-on-brand-selected: var(--smoke-light-alpha-12);
-  --icon-on-interactive-base: var(--smoke-light-alpha-9);
-  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
-  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
-  --icon-agent-plan-base: var(--purple-light-9);
-  --icon-agent-docs-base: var(--amber-light-9);
-  --icon-agent-ask-base: var(--cyan-light-9);
-  --icon-agent-build-base: var(--blue-light-9);
-  --icon-on-success-base: var(--apple-light-alpha-9);
-  --icon-on-success-hover: var(--apple-light-alpha-10);
-  --icon-on-success-selected: var(--apple-light-alpha-11);
-  --icon-on-warning-base: var(--amber-lightalpha-9);
-  --icon-on-warning-hover: var(--amber-lightalpha-10);
-  --icon-on-warning-selected: var(--amber-lightalpha-11);
-  --icon-on-critical-base: var(--ember-light-alpha-9);
-  --icon-on-critical-hover: var(--ember-light-alpha-10);
-  --icon-on-critical-selected: var(--ember-light-alpha-11);
-  --icon-on-info-base: var(--lilac-light-9);
-  --icon-on-info-hover: var(--lilac-light-alpha-10);
-  --icon-on-info-selected: var(--lilac-light-alpha-11);
-  --icon-diff-add-base: var(--mint-light-11);
-  --icon-diff-add-hover: var(--mint-light-12);
-  --icon-diff-add-active: var(--mint-light-12);
-  --icon-diff-delete-base: var(--ember-light-9);
-  --icon-diff-delete-hover: var(--ember-light-10);
-  --icon-diff-delete-active: var(--ember-light-11);
-  --syntax-comment: #ffffff;
-  --syntax-string: #ffffff;
-  --syntax-keyword: #ffffff;
-  --syntax-function: #ffffff;
-  --syntax-number: #ffffff;
-  --syntax-operator: #ffffff;
-  --syntax-variable: #ffffff;
-  --syntax-type: #ffffff;
-  --syntax-constant: #ffffff;
-  --syntax-punctuation: #ffffff;
-  --syntax-success: #ffffff;
-  --syntax-warning: #ffffff;
-  --syntax-critical: #ffffff;
-  --syntax-info: #ffffff;
-  --markdown-heading: #ffffff;
-  --markdown-text: #ffffff;
-  --markdown-link: #ffffff;
-  --markdown-link-text: #ffffff;
-  --markdown-code: #ffffff;
-  --markdown-block-quote: #ffffff;
-  --markdown-emph: #ffffff;
-  --markdown-strong: #ffffff;
-  --markdown-horizontal-rule: #ffffff;
-  --markdown-list-item: #ffffff;
-  --markdown-list-enumeration: #ffffff;
-  --markdown-image: #ffffff;
-  --markdown-image-text: #ffffff;
-  --markdown-code-block: #ffffff;
-  --border-color: #ffffff;
-
-  .dark {
-    /* OC-1-Dark */
-    color-scheme: dark;
-    --background-base: var(--smoke-dark-1);
-    --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);
-    --surface-interactive-hover: var(--cobalt-light-4);
-    --surface-interactive-weak: var(--cobalt-light-2);
-    --surface-interactive-weak-hover: var(--cobalt-light-3);
-    --surface-success-base: var(--apple-light-3);
-    --surface-success-weak: var(--apple-light-2);
-    --surface-success-strong: var(--apple-light-9);
-    --surface-warning-base: var(--solaris-light-3);
-    --surface-warning-weak: var(--solaris-light-2);
-    --surface-warning-strong: var(--solaris-light-9);
-    --surface-critical-base: var(--ember-light-3);
-    --surface-critical-weak: var(--ember-light-2);
-    --surface-critical-strong: var(--ember-light-9);
-    --surface-info-base: var(--lilac-light-3);
-    --surface-info-weak: var(--lilac-light-2);
-    --surface-info-strong: var(--lilac-light-9);
-    --surface-diff-skip-base: var(--smoke-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-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-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-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);
-    --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);
-    --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);
-    --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-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-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: 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;
-    --syntax-function: #ffffff;
-    --syntax-number: #ffffff;
-    --syntax-operator: #ffffff;
-    --syntax-variable: #ffffff;
-    --syntax-type: #ffffff;
-    --syntax-constant: #ffffff;
-    --syntax-punctuation: #ffffff;
-    --syntax-success: #ffffff;
-    --syntax-warning: #ffffff;
-    --syntax-critical: #ffffff;
-    --syntax-info: #ffffff;
-    --markdown-heading: #ffffff;
-    --markdown-text: #ffffff;
-    --markdown-link: #ffffff;
-    --markdown-link-text: #ffffff;
-    --markdown-code: #ffffff;
-    --markdown-block-quote: #ffffff;
-    --markdown-emph: #ffffff;
-    --markdown-strong: #ffffff;
-    --markdown-horizontal-rule: #ffffff;
-    --markdown-list-item: #ffffff;
-    --markdown-list-enumeration: #ffffff;
-    --markdown-image: #ffffff;
-    --markdown-image-text: #ffffff;
-    --markdown-code-block: #ffffff;
-    --border-color: #ffffff;
-  }
-}
diff --git a/packages/css/src/utilities.css b/packages/css/src/utilities.css
deleted file mode 100644
index d2f614250..000000000
--- a/packages/css/src/utilities.css
+++ /dev/null
@@ -1,37 +0,0 @@
-: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 {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index b399d616f..523242f19 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -42,9 +42,9 @@
     "remeda": "catalog:",
     "solid-js": "catalog:",
     "shiki": "3.9.2",
-    "solid-list": "0.3.0",
+    "solid-list": "catalog:",
     "tailwindcss": "catalog:",
-    "virtua": "0.42.3"
+    "virtua": "catalog:"
   },
   "prettier": {
     "semi": false,
diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index 48d238401..0f8fb5930 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -187,7 +187,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   return (
     <div
       classList={{
-        "size-full max-w-xl bg-surface-base border border-border-base": true,
+        "size-full max-w-xl bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
         "rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
         [props.class ?? ""]: !!props.class,
       }}
diff --git a/packages/desktop/src/components/session-list.tsx b/packages/desktop/src/components/session-list.tsx
deleted file mode 100644
index f26d39af8..000000000
--- a/packages/desktop/src/components/session-list.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useSync, useLocal } from "@/context"
-import { Tooltip } from "@opencode-ai/ui"
-import { DateTime } from "luxon"
-import { VList } from "virtua/solid"
-
-export default function SessionList() {
-  const sync = useSync()
-  const local = useLocal()
-  return (
-    <VList data={sync.data.session} class="no-scrollbar p-3">
-      {(session) => (
-        <Tooltip placement="right" value={session.title} class="w-full min-w-0">
-          <button
-            data-active={local.session.active()?.id === session.id}
-            class="group w-full min-w-0 text-left truncate justify-start text-xs my-0.5 cursor-pointer
-                   flex flex-col gap-1 rounded-md p-2 border-[0.5px] border-transparent
-                   hover:not-data-[active=true]:bg-background-panel
-                   data-[active=true]:bg-background-element data-[active=true]:border-border-subtle"
-            onClick={() => local.session.setActive(session.id)}
-          >
-            <div class="flex gap-1 items-center">
-              <div
-                classList={{
-                  "text-text/80 min-w-0 grow truncate": true,
-                  "group-data-[active=true]:text-text!": true,
-                }}
-              >
-                {session.title}
-              </div>
-              <div class="shrink-0 text-text-muted/60">{DateTime.fromMillis(session.time.updated).toRelative()}</div>
-            </div>
-            <span class="text-text-muted truncate">{session.share?.url}</span>
-          </button>
-        </Tooltip>
-      )}
-    </VList>
-  )
-}
diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index 5d64f3ee7..5ba6b1af2 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -1,4 +1,4 @@
-import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode } from "@opencode-ai/sdk"
+import type { Message, Agent, Provider, Session, Part, Config, Path, File, FileNode, Project } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createContext, createMemo, Show, useContext, type ParentProps } from "solid-js"
 import { useSDK, useEvent } from "@/context"
@@ -9,6 +9,7 @@ function init() {
     ready: boolean
     provider: Provider[]
     agent: Agent[]
+    project: Project
     config: Config
     path: Path
     session: Session[]
@@ -21,6 +22,7 @@ function init() {
     node: FileNode[]
     changes: File[]
   }>({
+    project: { id: "", worktree: "", time: { created: 0, initialized: 0 } },
     config: {},
     path: { state: "", config: "", worktree: "", directory: "" },
     ready: false,
@@ -96,6 +98,7 @@ function init() {
   const sdk = useSDK()
 
   const load = {
+    project: () => sdk.project.current().then((x) => setStore("project", x.data!)),
     provider: () => sdk.config.providers().then((x) => setStore("provider", x.data!.providers)),
     path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
     agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
diff --git a/packages/desktop/src/index.css b/packages/desktop/src/index.css
index b4717a4e8..4af87bca6 100644
--- a/packages/desktop/src/index.css
+++ b/packages/desktop/src/index.css
@@ -1 +1 @@
-@import "@opencode-ai/css/tailwind.css";
+@import "@opencode-ai/ui/styles/tailwind";
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
index 1174f1e16..4133887c9 100644
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Icon, Tooltip } from "@opencode-ai/ui"
+import { Button, Icon, List, Tooltip } from "@opencode-ai/ui"
 import { FileIcon, IconButton } from "@/ui"
 import FileTree from "@/components/file-tree"
 import EditorPane from "@/components/editor-pane"
@@ -6,12 +6,12 @@ import { For, Match, onCleanup, onMount, Show, Switch } from "solid-js"
 import { SelectDialog } from "@/components/select-dialog"
 import { useSync, useSDK, useLocal } from "@/context"
 import type { LocalFile, TextSelection } from "@/context/local"
-import SessionList from "@/components/session-list"
 import SessionTimeline from "@/components/session-timeline"
-import PromptForm, { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
+import { type PromptContentPart, type PromptSubmitValue } from "@/components/prompt-form"
 import { createStore } from "solid-js/store"
 import { getDirectory, getFilename } from "@/utils"
 import { PromptInput } from "@/components/prompt-input"
+import { DateTime } from "luxon"
 
 export default function Page() {
   const local = useLocal()
@@ -225,13 +225,45 @@ export default function Page() {
   )
 
   return (
-    <div class="relative h-screen flex flex-col bg-background-weak">
-      <header class="hidden h-12 shrink-0 bg-background-base border-b border-border-weak-base"></header>
+    <div class="relative h-screen flex flex-col">
+      <header class="hidden h-12 shrink-0 bg-background-strong border-b border-border-weak-base"></header>
       <main class="h-[calc(100vh-0rem)] flex">
-        <div class="shrink-0 w-70">
-          <SessionList />
+        <div class="shrink-0 w-70 p-1.5 bg-background-weak border-r border-border-weak-base flex flex-col items-start gap-1.5">
+          <div class="flex flex-col items-start self-stretch px-3 py-1">
+            <span class="text-12-medium overflow-hidden text-ellipsis">{sync.data.path.directory}</span>
+          </div>
+          <div class="flex flex-col items-start gap-4 self-stretch flex-1">
+            <div class="px-3 py-1.5 w-full">
+              <Button class="w-full" size="large">
+                New Session
+              </Button>
+            </div>
+            <List data={sync.data.session} key={(x) => x.id} onSelect={(s) => local.session.setActive(s?.id)}>
+              {(session) => (
+                <Tooltip placement="right" value={session.title}>
+                  <div>
+                    <div class="flex items-center self-stretch gap-6">
+                      <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate">
+                        {session.title}
+                      </span>
+                      <span class="text-12-regular text-text-weak text-right whitespace-nowrap">
+                        {DateTime.fromMillis(session.time.updated).toRelative()}
+                      </span>
+                    </div>
+                    <div class="flex justify-between items-center self-stretch">
+                      <span class="text-12-regular text-text-weak">2 files changed</span>
+                      <div class="flex gap-2 justify-end items-center">
+                        <span class="text-12-mono text-right text-text-diff-add-base">+43</span>
+                        <span class="text-12-mono text-right text-text-diff-delete-base">-2</span>
+                      </div>
+                    </div>
+                  </div>
+                </Tooltip>
+              )}
+            </List>
+          </div>
         </div>
-        <div class="relative grid grid-cols-2">
+        <div class="relative grid grid-cols-2 bg-background-base">
           <div class="min-w-0 overflow-y-auto no-scrollbar flex justify-center">
             <Show when={local.session.active()}>
               {(activeSession) => <SessionTimeline session={activeSession().id} class="w-full" />}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2a88f86a3..705d8648e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -4,21 +4,30 @@
   "type": "module",
   "exports": {
     ".": "./src/components/index.ts",
-    "./*": "./src/components/*"
+    "./*": "./src/components/*.tsx",
+    "./styles": "./src/styles/index.css",
+    "./styles/tailwind": "./src/styles/tailwind/index.css",
+    "./fonts/*": "./src/assets/fonts/*"
   },
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "generate:tailwind": "bun run script/tailwind.ts"
   },
   "devDependencies": {
+    "@types/bun": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vite-plugin-solid": "catalog:"
+    "vite-plugin-solid": "catalog:",
+    "tailwindcss": "catalog:",
+    "@tailwindcss/vite": "catalog:"
   },
   "dependencies": {
+    "@kobalte/core": "catalog:",
+    "@solidjs/meta": "catalog:",
     "remeda": "catalog:",
+    "luxon": "catalog:",
+    "virtua": "catalog:",
     "solid-js": "catalog:",
-    "@solidjs/meta": "catalog:",
-    "@kobalte/core": "catalog:",
-    "@opencode-ai/css": "workspace:*"
+    "solid-list": "catalog:"
   }
 }
diff --git a/packages/ui/script/colors.txt b/packages/ui/script/colors.txt
new file mode 100644
index 000000000..15f8bb3d1
--- /dev/null
+++ b/packages/ui/script/colors.txt
@@ -0,0 +1,214 @@
+  --background-base: #f8f7f7;
+  --background-weak: var(--smoke-light-3);
+  --background-strong: var(--smoke-light-1);
+  --background-stronger: #fcfcfc;
+  --base: var(--smoke-light-alpha-2);
+  --surface-base: var(--smoke-light-alpha-2);
+  --base2: var(--smoke-light-alpha-2);
+  --base3: var(--smoke-light-alpha-2);
+  --surface-inset-base: var(--smoke-light-alpha-3);
+  --surface-inset-base-hover: var(--smoke-light-alpha-3);
+  --surface-inset-strong: #1f000017;
+  --surface-inset-strong-hover: #1f000017;
+  --surface-raised-base: var(--smoke-light-alpha-1);
+  --surface-float-base: var(--smoke-dark-1);
+  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-strong: var(--smoke-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--smoke-light-alpha-3);
+  --surface-weaker: var(--smoke-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
+  --surface-brand-base: var(--yuzu-light-9);
+  --surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-base: var(--cobalt-light-3);
+  --surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-base: var(--apple-light-3);
+  --surface-success-weak: var(--apple-light-2);
+  --surface-success-strong: var(--apple-light-9);
+  --surface-warning-base: var(--solaris-light-3);
+  --surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-base: var(--ember-light-3);
+  --surface-critical-weak: var(--ember-light-2);
+  --surface-critical-strong: var(--ember-light-9);
+  --surface-info-base: var(--lilac-light-3);
+  --surface-info-weak: var(--lilac-light-2);
+  --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-skip-base: var(--smoke-light-3);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: var(--mint-light-3);
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
+  --text-base: var(--smoke-light-11);
+  --input-base: var(--smoke-light-1);
+  --input-hover: var(--smoke-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--smoke-light-4);
+  --text-weak: var(--smoke-light-9);
+  --text-weaker: var(--smoke-light-8);
+  --text-strong: var(--smoke-light-12);
+  --text-on-brand-base: var(--smoke-light-alpha-11);
+  --text-on-interactive-base: var(--smoke-light-1);
+  --text-on-success-base: var(--smoke-dark-alpha-11);
+  --text-on-warning-base: var(--smoke-dark-alpha-11);
+  --text-on-info-base: var(--smoke-dark-alpha-11);
+  --text-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-11);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
+  --text-on-info-weak: var(--smoke-dark-alpha-9);
+  --text-on-info-strong: var(--smoke-dark-alpha-12);
+  --text-on-warning-weak: var(--smoke-dark-alpha-9);
+  --text-on-warning-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--smoke-dark-alpha-9);
+  --text-on-success-strong: var(--smoke-dark-alpha-12);
+  --text-on-brand-weak: var(--smoke-light-alpha-9);
+  --text-on-brand-weaker: var(--smoke-light-alpha-8);
+  --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-secondary-base: #fdfcfc;
+  --border-base: var(--smoke-light-alpha-7);
+  --border-hover: var(--smoke-light-alpha-8);
+  --border-active: var(--smoke-light-alpha-9);
+  --border-selected: var(--cobalt-light-alpha-9);
+  --border-disabled: var(--smoke-light-alpha-8);
+  --border-focus: var(--smoke-light-alpha-9);
+  --border-weak-base: var(--smoke-light-alpha-5);
+  --border-strong-base: var(--smoke-light-alpha-7);
+  --border-strong-hover: var(--smoke-light-alpha-8);
+  --border-strong-active: var(--smoke-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--smoke-light-alpha-6);
+  --border-strong-focus: var(--smoke-light-alpha-7);
+  --border-weak-hover: var(--smoke-light-alpha-6);
+  --border-weak-active: var(--smoke-light-alpha-7);
+  --border-weak-selected: var(--cobalt-light-alpha-6);
+  --border-weak-disabled: var(--smoke-light-alpha-6);
+  --border-weak-focus: var(--smoke-light-alpha-7);
+  --border-interactive-base: var(--cobalt-light-7);
+  --border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-disabled: var(--smoke-light-8);
+  --border-interactive-focus: var(--cobalt-light-9);
+  --border-success-base: var(--apple-light-6);
+  --border-success-hover: var(--apple-light-7);
+  --border-success-selected: var(--apple-light-9);
+  --border-warning-base: var(--solaris-light-6);
+  --border-warning-hover: var(--solaris-light-7);
+  --border-warning-selected: var(--solaris-light-9);
+  --border-critical-base: var(--ember-light-6);
+  --border-critical-hover: var(--ember-light-7);
+  --border-critical-selected: var(--ember-light-9);
+  --border-info-base: var(--lilac-light-6);
+  --border-info-hover: var(--lilac-light-7);
+  --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--smoke-light-9);
+  --icon-hover: var(--smoke-light-11);
+  --icon-active: var(--smoke-light-12);
+  --icon-selected: var(--smoke-light-12);
+  --icon-disabled: var(--smoke-light-8);
+  --icon-focus: var(--smoke-light-12);
+  --icon-weak-base: var(--smoke-light-7);
+  --icon-invert-base: #ffffff;
+  --icon-weak-hover: var(--smoke-light-8);
+  --icon-weak-active: var(--smoke-light-9);
+  --icon-weak-selected: var(--smoke-light-10);
+  --icon-weak-disabled: var(--smoke-light-6);
+  --icon-weak-focus: var(--smoke-light-9);
+  --icon-strong-base: var(--smoke-light-12);
+  --icon-strong-hover: var(--smoke-light-12);
+  --icon-strong-active: var(--smoke-light-12);
+  --icon-strong-selected: var(--smoke-light-12);
+  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-focus: var(--smoke-light-12);
+  --icon-brand-base: var(--smoke-light-12);
+  --icon-interactive-base: var(--cobalt-light-9);
+  --icon-success-base: var(--apple-light-7);
+  --icon-success-hover: var(--apple-light-8);
+  --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
+  --icon-critical-base: var(--ember-light-7);
+  --icon-critical-hover: var(--ember-light-8);
+  --icon-critical-active: var(--ember-light-11);
+  --icon-info-base: var(--lilac-light-7);
+  --icon-info-hover: var(--lilac-light-8);
+  --icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-base: var(--smoke-light-alpha-11);
+  --icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-interactive-base: var(--smoke-light-alpha-9);
+  --icon-on-interactive-hover: var(--smoke-light-alpha-10);
+  --icon-on-interactive-selected: var(--smoke-light-alpha-11);
+  --icon-agent-plan-base: var(--purple-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--blue-light-9);
+  --icon-on-success-base: var(--apple-light-alpha-9);
+  --icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
+  --icon-on-critical-base: var(--ember-light-alpha-9);
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-base: var(--lilac-light-9);
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-9);
+  --icon-diff-delete-hover: var(--ember-light-10);
+  --icon-diff-delete-active: var(--ember-light-11);
+  --syntax-comment: #ffffff;
+  --syntax-string: #ffffff;
+  --syntax-keyword: #ffffff;
+  --syntax-function: #ffffff;
+  --syntax-number: #ffffff;
+  --syntax-operator: #ffffff;
+  --syntax-variable: #ffffff;
+  --syntax-type: #ffffff;
+  --syntax-constant: #ffffff;
+  --syntax-punctuation: #ffffff;
+  --syntax-success: #ffffff;
+  --syntax-warning: #ffffff;
+  --syntax-critical: #ffffff;
+  --syntax-info: #ffffff;
+  --markdown-heading: #ffffff;
+  --markdown-text: #ffffff;
+  --markdown-link: #ffffff;
+  --markdown-link-text: #ffffff;
+  --markdown-code: #ffffff;
+  --markdown-block-quote: #ffffff;
+  --markdown-emph: #ffffff;
+  --markdown-strong: #ffffff;
+  --markdown-horizontal-rule: #ffffff;
+  --markdown-list-item: #ffffff;
+  --markdown-list-enumeration: #ffffff;
+  --markdown-image: #ffffff;
+  --markdown-image-text: #ffffff;
+  --markdown-code-block: #ffffff;
+  --border-color: #ffffff;
diff --git a/packages/ui/script/tailwind.ts b/packages/ui/script/tailwind.ts
new file mode 100644
index 000000000..1c7064690
--- /dev/null
+++ b/packages/ui/script/tailwind.ts
@@ -0,0 +1,23 @@
+#!/usr/bin/env bun
+
+const colors = await Bun.file(import.meta.dir + "/colors.txt").text()
+
+const variables = []
+for (const line of colors.split("\n")) {
+  if (!line.trim()) continue
+  const [variable] = line.trim().split(":")
+  const name = variable!.trim().substring(2)
+  variables.push(`--color-${name}: var(--${name});`)
+}
+
+const output = `
+/* Generated by script/colors.ts */
+/* Do not edit this file manually */
+
+@theme {
+  --color-*: initial;
+  ${variables.join("\n  ")}
+}
+`
+
+await Bun.file(import.meta.dir + "/../src/styles/tailwind/colors.css").write(output.trim())
diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
deleted file mode 100644
index 6f3e388e9..000000000
--- a/packages/ui/src/app.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { Component } from "solid-js"
-import { Button, Select, Tabs, Tooltip, Fonts } from "./components"
-import "./index.css"
-
-const App: Component = () => {
-  const Content = (props: { dark?: boolean }) => (
-    <div class={`${props.dark ? "dark" : ""}`}>
-      <h3>Buttons</h3>
-      <section>
-        <Button variant="primary" size="normal">
-          Normal Primary
-        </Button>
-        <Button variant="secondary" size="normal">
-          Normal Secondary
-        </Button>
-        <Button variant="ghost" size="normal">
-          Normal Ghost
-        </Button>
-        <Button variant="secondary" size="normal" disabled>
-          Normal Disabled
-        </Button>
-        <Button variant="primary" size="large">
-          Large Primary
-        </Button>
-        <Button variant="secondary" size="large">
-          Large Secondary
-        </Button>
-        <Button variant="ghost" size="large">
-          Large Ghost
-        </Button>
-        <Button variant="secondary" size="large" disabled>
-          Large Disabled
-        </Button>
-      </section>
-      <h3>Select</h3>
-      <section>
-        <Select
-          // we have to pass dark bc of the portal,
-          // normally wouldn't be needed bc root element
-          // would have theme class
-          class={props.dark ? "dark" : ""}
-          variant="primary"
-          options={["Option 1", "Option 2", "Option 3"]}
-          placeholder="Select Primary"
-        />
-        <Select
-          variant="secondary"
-          class={props.dark ? "dark" : ""}
-          options={["Option 1", "Option 2", "Option 3"]}
-          placeholder="Select Secondary"
-        />
-        <Select
-          variant="ghost"
-          class={props.dark ? "dark" : ""}
-          options={["Option 1", "Option 2", "Option 3"]}
-          placeholder="Select Ghost"
-        />
-      </section>
-      <h3>Tabs</h3>
-      <section>
-        <Tabs defaultValue="tab1" style={{ width: "100%" }}>
-          <Tabs.List>
-            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
-            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
-            <Tabs.Trigger value="tab4" disabled>
-              Disabled Tab
-            </Tabs.Trigger>
-          </Tabs.List>
-          <Tabs.Content value="tab1">
-            <div style={{ padding: "16px" }}>
-              <h4>Tab 1 Content</h4>
-              <p>This is the content for the first tab.</p>
-            </div>
-          </Tabs.Content>
-          <Tabs.Content value="tab2">
-            <div style={{ padding: "16px" }}>
-              <h4>Tab 2 Content</h4>
-              <p>This is the content for the second tab.</p>
-            </div>
-          </Tabs.Content>
-          <Tabs.Content value="tab3">
-            <div style={{ padding: "16px" }}>
-              <h4>Tab 3 Content</h4>
-              <p>This is the content for the third tab.</p>
-            </div>
-          </Tabs.Content>
-          <Tabs.Content value="tab4">
-            <div style={{ padding: "16px" }}>
-              <h4>Tab 4 Content</h4>
-              <p>This tab should be disabled.</p>
-            </div>
-          </Tabs.Content>
-        </Tabs>
-      </section>
-      <h3>Tooltips</h3>
-      <section>
-        <Tooltip value="This is a top tooltip" placement="top">
-          <Button variant="secondary">Top Tooltip</Button>
-        </Tooltip>
-        <Tooltip value="This is a bottom tooltip" placement="bottom">
-          <Button variant="secondary">Bottom Tooltip</Button>
-        </Tooltip>
-        <Tooltip value="This is a left tooltip" placement="left">
-          <Button variant="secondary">Left Tooltip</Button>
-        </Tooltip>
-        <Tooltip value="This is a right tooltip" placement="right">
-          <Button variant="secondary">Right Tooltip</Button>
-        </Tooltip>
-        <Tooltip value={() => `Dynamic tooltip: ${new Date().toLocaleTimeString()}`} placement="top">
-          <Button variant="primary">Dynamic Tooltip</Button>
-        </Tooltip>
-      </section>
-    </div>
-  )
-
-  return (
-    <>
-      <Fonts />
-      <main>
-        <Content />
-        <Content dark />
-      </main>
-    </>
-  )
-}
-
-export default App
diff --git a/packages/ui/src/assets/fonts/geist-italic.ttf b/packages/ui/src/assets/fonts/geist-italic.ttf
new file mode 100644
index 000000000..9d29a123b
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-italic.ttf differ
diff --git a/packages/ui/src/assets/fonts/geist-italic.woff2 b/packages/ui/src/assets/fonts/geist-italic.woff2
new file mode 100644
index 000000000..29649a03e
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-italic.woff2 differ
diff --git a/packages/ui/src/assets/fonts/geist-mono-italic.ttf b/packages/ui/src/assets/fonts/geist-mono-italic.ttf
new file mode 100644
index 000000000..7f23cf1b6
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-mono-italic.ttf differ
diff --git a/packages/ui/src/assets/fonts/geist-mono-italic.woff2 b/packages/ui/src/assets/fonts/geist-mono-italic.woff2
new file mode 100644
index 000000000..ad84c9979
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-mono-italic.woff2 differ
diff --git a/packages/ui/src/assets/fonts/geist-mono.ttf b/packages/ui/src/assets/fonts/geist-mono.ttf
new file mode 100644
index 000000000..41208ea87
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-mono.ttf differ
diff --git a/packages/ui/src/assets/fonts/geist-mono.woff2 b/packages/ui/src/assets/fonts/geist-mono.woff2
new file mode 100644
index 000000000..6c2f194c7
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist-mono.woff2 differ
diff --git a/packages/ui/src/assets/fonts/geist.ttf b/packages/ui/src/assets/fonts/geist.ttf
new file mode 100644
index 000000000..e7adab279
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist.ttf differ
diff --git a/packages/ui/src/assets/fonts/geist.woff2 b/packages/ui/src/assets/fonts/geist.woff2
new file mode 100644
index 000000000..38319ea37
Binary files /dev/null and b/packages/ui/src/assets/fonts/geist.woff2 differ
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
new file mode 100644
index 000000000..c9ccf4ecb
--- /dev/null
+++ b/packages/ui/src/components/button.css
@@ -0,0 +1,106 @@
+[data-component="button"] {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 6px;
+  text-decoration: none;
+  user-select: none;
+
+  &[data-variant="primary"] {
+    border-color: var(--border-base);
+    background-color: var(--surface-brand-base);
+    color: var(--text-on-brand-strong);
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-hover);
+      background-color: var(--surface-brand-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-active);
+      background-color: var(--surface-brand-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-focus);
+      background-color: var(--surface-brand-focus);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border-color: var(--border-weak-base);
+    background-color: var(--button-secondary-base);
+    color: var(--text-strong);
+
+    /* shadow-xs */
+    box-shadow:
+      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-hover);
+      background-color: var(--surface-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-active);
+      background-color: var(--surface-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-focus);
+      background-color: var(--surface-focus);
+    }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-strong);
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-active);
+      background-color: var(--surface-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-focus);
+      background-color: var(--surface-focus);
+    }
+  }
+
+  &[data-size="normal"] {
+    padding: 0 6px 0 6px;
+
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-large);
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  &[data-size="large"] {
+    height: 32px;
+    padding: 0 8px 0 6px;
+    gap: 8px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:disabled {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+    color: var(--text-weak);
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/packages/ui/src/components/fonts.tsx b/packages/ui/src/components/fonts.tsx
index 447c486e4..ff4fb7588 100644
--- a/packages/ui/src/components/fonts.tsx
+++ b/packages/ui/src/components/fonts.tsx
@@ -1,20 +1,20 @@
 import { Style, Link } from "@solidjs/meta"
-import geist from "@opencode-ai/css/fonts/geist.woff2"
-import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2"
+import geist from "../assets/fonts/geist.woff2"
+import geistMono from "../assets/fonts/geist-mono.woff2"
 
 export const Fonts = () => {
   return (
     <>
       <Style>{`
         @font-face {
-          font-family: "geist";
+          font-family: "Geist";
           src: url("${geist}") format("woff2-variations");
           font-display: swap;
           font-style: normal;
           font-weight: 100 900;
         }
         @font-face {
-          font-family: "geist-fallback";
+          font-family: "Geist Fallback";
           src: local("Arial");
           size-adjust: 100%;
           ascent-override: 97%;
@@ -22,14 +22,14 @@ export const Fonts = () => {
           line-gap-override: 1%;
         }
         @font-face {
-          font-family: "geist-mono";
+          font-family: "Geist Mono";
           src: url("${geistMono}") format("woff2-variations");
           font-display: swap;
           font-style: normal;
           font-weight: 100 900;
         }
         @font-face {
-          font-family: "geist-mono-fallback";
+          font-family: "Geist Mono Fallback";
           src: local("Courier New");
           size-adjust: 100%;
           ascent-override: 97%;
diff --git a/packages/ui/src/components/icon.css b/packages/ui/src/components/icon.css
new file mode 100644
index 000000000..abc193220
--- /dev/null
+++ b/packages/ui/src/components/icon.css
@@ -0,0 +1,6 @@
+[data-component="icon"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 2048ec639..d6ddc3ec0 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,6 +1,7 @@
 export * from "./button"
 export * from "./icon"
 export * from "./fonts"
+export * from "./list"
 export * from "./select"
 export * from "./tabs"
 export * from "./tooltip"
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
new file mode 100644
index 000000000..b98cae07c
--- /dev/null
+++ b/packages/ui/src/components/list.css
@@ -0,0 +1,30 @@
+[data-component="list"] {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  /* Hide scrollbar */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  [data-slot="item"] {
+    cursor: pointer;
+    width: 100%;
+    padding: 4px 12px;
+    text-align: left;
+
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out;
+
+    &[data-active="true"] {
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+}
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
new file mode 100644
index 000000000..9704e4554
--- /dev/null
+++ b/packages/ui/src/components/list.tsx
@@ -0,0 +1,76 @@
+import { ComponentProps, createEffect, createSignal, type JSX } from "solid-js"
+import { VirtualizerHandle, VList } from "virtua/solid"
+import { createList } from "solid-list"
+import { createStore } from "solid-js/store"
+
+export interface ListProps<T> {
+  data: T[]
+  children: (x: T) => JSX.Element
+  key: (x: T) => string
+  current?: T
+  onSelect?: (value: T | undefined) => void
+  class?: ComponentProps<"div">["class"]
+}
+
+export function List<T>(props: ListProps<T>) {
+  const [virtualizer, setVirtualizer] = createSignal<VirtualizerHandle | undefined>(undefined)
+  const [store, setStore] = createStore({
+    mouseActive: false,
+  })
+  const list = createList({
+    items: () => props.data.map(props.key),
+    initialActive: props.current ? props.key(props.current) : undefined,
+    loop: true,
+  })
+  // const resetSelection = () => {
+  //   if (props.data.length === 0) return
+  //   list.setActive(props.key(props.data[0]))
+  // }
+  const handleSelect = (item: T) => {
+    props.onSelect?.(item)
+  }
+
+  const handleKey = (e: KeyboardEvent) => {
+    setStore("mouseActive", false)
+
+    if (e.key === "Enter") {
+      e.preventDefault()
+      const selected = props.data.find((x) => props.key(x) === list.active())
+      if (selected) handleSelect(selected)
+    } else {
+      list.onKeyDown(e)
+    }
+  }
+
+  createEffect(() => {
+    if (store.mouseActive || props.data.length === 0) return
+    const index = props.data.findIndex((x) => props.key(x) === list.active())
+    if (index === 0) {
+      virtualizer()?.scrollTo(0)
+      return
+    }
+    // virtualizer()?.scrollTo(list.active())
+    // const element = virtualizer()?.querySelector(`[data-key="${list.active()}"]`)
+    // element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
+  })
+
+  return (
+    <VList data-component="list" ref={setVirtualizer} data={props.data} onKeyDown={handleKey} class={props.class}>
+      {(item) => (
+        <button
+          data-slot="item"
+          data-key={props.key(item)}
+          data-active={props.key(item) === list.active()}
+          onClick={() => handleSelect(item)}
+          onMouseMove={(e) => {
+            e.currentTarget.focus()
+            setStore("mouseActive", true)
+            list.setActive(props.key(item))
+          }}
+        >
+          {props.children(item)}
+        </button>
+      )}
+    </VList>
+  )
+}
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
new file mode 100644
index 000000000..b6b884a1f
--- /dev/null
+++ b/packages/ui/src/components/select.css
@@ -0,0 +1,124 @@
+[data-component="select"] {
+  [data-slot="trigger"] {
+    padding: 0 4px 0 8px;
+
+    [data-slot="value"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    [data-slot="icon"] {
+      width: fit-content;
+      height: fit-content;
+      flex-shrink: 0;
+      color: var(--text-weak);
+      transition: transform 0.1s ease-in-out;
+    }
+  }
+}
+
+[data-component="select-content"] {
+  min-width: 8rem;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-weak-base);
+  background-color: var(--surface-raised-base);
+  padding: calc(var(--spacing) * 1);
+  box-shadow: var(--shadow-md);
+  z-index: 50;
+
+  &[data-closed] {
+    animation: select-close 0.15s ease-out;
+  }
+
+  &[data-expanded] {
+    animation: select-open 0.15s ease-out;
+  }
+
+  [data-slot="list"] {
+    overflow-y: auto;
+    max-height: 12rem;
+    white-space: nowrap;
+    overflow-x: hidden;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  [data-slot="section"] {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    font-weight: var(--font-weight-light);
+    text-transform: uppercase;
+    color: var(--text-weak);
+    opacity: 0.6;
+    margin-top: calc(var(--spacing) * 3);
+    margin-left: calc(var(--spacing) * 2);
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  [data-slot="item"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    color: var(--text-base);
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
+    outline: none;
+    user-select: none;
+
+    &[data-highlighted] {
+      background-color: var(--surface-base);
+    }
+
+    &[data-disabled] {
+      background-color: var(--surface-disabled);
+      pointer-events: none;
+    }
+
+    [data-slot="item-indicator"] {
+      margin-left: auto;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--surface-hover);
+    }
+  }
+}
+
+@keyframes select-open {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes select-close {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
diff --git a/packages/ui/src/components/style.css b/packages/ui/src/components/style.css
deleted file mode 100644
index 52539dc8f..000000000
--- a/packages/ui/src/components/style.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* re-exporting for convenience */
-@import "@opencode-ai/css";
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
new file mode 100644
index 000000000..c6d09c656
--- /dev/null
+++ b/packages/ui/src/components/tabs.css
@@ -0,0 +1,95 @@
+[data-component="tabs"] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-sm);
+  border-color: var(--border-weak-base);
+  background-color: var(--background-stronger);
+  overflow: clip;
+
+  & [data-slot="list"] {
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* After element to fill remaining space */
+    &::after {
+      content: "";
+      display: block;
+      flex-grow: 1;
+      height: 100%;
+      border-bottom: 1px solid var(--border-weak-base);
+      background-color: var(--background-base);
+      border-top-right-radius: var(--radius-sm);
+    }
+
+    &:empty::after {
+      display: none;
+    }
+  }
+
+  & [data-slot="trigger"] {
+    position: relative;
+    height: 36px;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-weak);
+    cursor: pointer;
+    white-space: nowrap;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border-weak-base);
+    border-right: 1px solid var(--border-weak-base);
+    background-color: var(--background-weak);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:disabled {
+      pointer-events: none;
+      color: var(--text-weaker);
+    }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--border-focus);
+    }
+    &[data-selected] {
+      color: var(--text-base);
+      background-color: transparent;
+      border-bottom-color: transparent;
+    }
+    &:hover:not(:disabled):not([data-selected]) {
+      color: var(--text-strong);
+    }
+  }
+
+  & [data-slot="content"] {
+    overflow-y: auto;
+    flex: 1;
+
+    /* Hide scrollbar */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
new file mode 100644
index 000000000..0577365d6
--- /dev/null
+++ b/packages/ui/src/components/tooltip.css
@@ -0,0 +1,59 @@
+/* [data-component="tooltip-trigger"] { */
+/*   display: flex; */
+/*   align-items: center; */
+/* } */
+
+[data-component="tooltip"] {
+  z-index: 1000;
+  max-width: 320px;
+  border-radius: 12px;
+  background-color: var(--surface-float-base);
+  color: var(--white);
+  padding: 2px 12px 2px 12px;
+  box-shadow: var(--shadow-md);
+  pointer-events: none !important;
+  transition: all 150ms ease-out;
+  transform: translate3d(0, 0, 0);
+  transform-origin: var(--kb-tooltip-content-transform-origin);
+
+  /* text-14-regular */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+
+  &[data-expanded] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &[data-closed] {
+    opacity: 0;
+  }
+
+  &[data-placement="top"] {
+    &[data-closed] {
+      transform: translate3d(0, 4px, 0);
+    }
+  }
+
+  &[data-placement="bottom"] {
+    &[data-closed] {
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+
+  &[data-placement="left"] {
+    &[data-closed] {
+      transform: translate3d(4px, 0, 0);
+    }
+  }
+
+  &[data-placement="right"] {
+    &[data-closed] {
+      transform: translate3d(-4px, 0, 0);
+    }
+  }
+}
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index 7cb22b290..b975099fb 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -36,7 +36,7 @@ export function Tooltip(props: TooltipProps) {
       <KobalteTooltip.Portal>
         <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
           {typeof others.value === "function" ? others.value() : others.value}
-          <KobalteTooltip.Arrow data-slot="arrow" size={18} />
+          {/* <KobalteTooltip.Arrow data-slot="arrow" size={18} /> */}
         </KobalteTooltip.Content>
       </KobalteTooltip.Portal>
     </KobalteTooltip>
diff --git a/packages/ui/src/demo.tsx b/packages/ui/src/demo.tsx
new file mode 100644
index 000000000..b93dd2c75
--- /dev/null
+++ b/packages/ui/src/demo.tsx
@@ -0,0 +1,134 @@
+import type { Component } from "solid-js"
+import { Button, Select, Tabs, Tooltip, Fonts, List } from "./components"
+import "./index.css"
+
+const Demo: Component = () => {
+  const Content = (props: { dark?: boolean }) => (
+    <div class={`${props.dark ? "dark" : ""}`}>
+      <h3>Buttons</h3>
+      <section>
+        <Button variant="primary" size="normal">
+          Normal Primary
+        </Button>
+        <Button variant="secondary" size="normal">
+          Normal Secondary
+        </Button>
+        <Button variant="ghost" size="normal">
+          Normal Ghost
+        </Button>
+        <Button variant="secondary" size="normal" disabled>
+          Normal Disabled
+        </Button>
+        <Button variant="primary" size="large">
+          Large Primary
+        </Button>
+        <Button variant="secondary" size="large">
+          Large Secondary
+        </Button>
+        <Button variant="ghost" size="large">
+          Large Ghost
+        </Button>
+        <Button variant="secondary" size="large" disabled>
+          Large Disabled
+        </Button>
+      </section>
+      <h3>Select</h3>
+      <section>
+        <Select
+          // we have to pass dark bc of the portal,
+          // normally wouldn't be needed bc root element
+          // would have theme class
+          class={props.dark ? "dark" : ""}
+          variant="primary"
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Primary"
+        />
+        <Select
+          variant="secondary"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Secondary"
+        />
+        <Select
+          variant="ghost"
+          class={props.dark ? "dark" : ""}
+          options={["Option 1", "Option 2", "Option 3"]}
+          placeholder="Select Ghost"
+        />
+      </section>
+      <h3>Tabs</h3>
+      <section>
+        <Tabs defaultValue="tab1" style={{ width: "100%" }}>
+          <Tabs.List>
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            <Tabs.Trigger value="tab4" disabled>
+              Disabled Tab
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 1 Content</h4>
+              <p>This is the content for the first tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab2">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 2 Content</h4>
+              <p>This is the content for the second tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab3">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 3 Content</h4>
+              <p>This is the content for the third tab.</p>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="tab4">
+            <div style={{ padding: "16px" }}>
+              <h4>Tab 4 Content</h4>
+              <p>This tab should be disabled.</p>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </section>
+      <h3>Tooltips</h3>
+      <section>
+        <Tooltip value="This is a top tooltip" placement="top">
+          <Button variant="secondary">Top Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a bottom tooltip" placement="bottom">
+          <Button variant="secondary">Bottom Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a left tooltip" placement="left">
+          <Button variant="secondary">Left Tooltip</Button>
+        </Tooltip>
+        <Tooltip value="This is a right tooltip" placement="right">
+          <Button variant="secondary">Right Tooltip</Button>
+        </Tooltip>
+        <Tooltip value={() => `Dynamic tooltip: ${new Date().toLocaleTimeString()}`} placement="top">
+          <Button variant="primary">Dynamic Tooltip</Button>
+        </Tooltip>
+      </section>
+      <h3>List</h3>
+      <section style={{ height: "300px" }}>
+        <List data={["Item 1", "Item 2", "Item 3"]} key={(x) => x}>
+          {(x) => <div>{x}</div>}
+        </List>
+      </section>
+    </div>
+  )
+
+  return (
+    <>
+      <Fonts />
+      <main>
+        <Content />
+        <Content dark />
+      </main>
+    </>
+  )
+}
+
+export default Demo
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index ab8e72091..27bcac4da 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1,4 +1,4 @@
-@import "@opencode-ai/css";
+@import "./styles/index.css";
 
 :root {
   body {
@@ -9,14 +9,12 @@
   main {
     display: flex;
     flex-direction: row;
-    height: 100vh;
     overflow-x: hidden;
   }
   main > div {
     flex: 1;
     padding: 2rem;
     min-width: 0;
-    overflow-y: auto;
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index caa8b1ccd..fa76ba9af 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -2,7 +2,7 @@
 import { render } from "solid-js/web"
 import { MetaProvider } from "@solidjs/meta"
 
-import App from "./app"
+import Demo from "./demo"
 
 const root = document.getElementById("root")
 
@@ -15,7 +15,7 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
 render(
   () => (
     <MetaProvider>
-      <App />
+      <Demo />
     </MetaProvider>
   ),
   root!,
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
new file mode 100644
index 000000000..b80398e1d
--- /dev/null
+++ b/packages/ui/src/styles/base.css
@@ -0,0 +1,374 @@
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: var(--line-height-large); /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+  font-family: var(--font-family-sans); /* 4 */
+  font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */
+  font-variation-settings: var(--font-family-sans--font-variation-settings, normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-family-mono); /* 1 */
+  font-feature-settings: var(--font-family-mono--font-feature-settings, normal); /* 2 */
+  font-variation-settings: var(--font-family-mono--font-variation-settings, normal); /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
+  /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+/*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type="button"], [type="reset"], [type="submit"]),
+::file-selector-button {
+  appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css
new file mode 100644
index 000000000..b0ddf36b7
--- /dev/null
+++ b/packages/ui/src/styles/colors.css
@@ -0,0 +1,496 @@
+:root {
+  --grey-dark-1: #ffffff;
+  --grey-dark-2: #ffffff;
+  --grey-dark-3: #ffffff;
+  --grey-dark-4: #ffffff;
+  --grey-dark-5: #ffffff;
+  --grey-dark-6: #ffffff;
+  --grey-dark-7: #ffffff;
+  --grey-dark-8: #ffffff;
+  --grey-dark-9: #ffffff;
+  --grey-dark-10: #ffffff;
+  --grey-dark-11: #ffffff;
+  --grey-dark-12: #ffffff;
+  --grey-light-1: #ffffff;
+  --grey-dark-alpha-1: #ffffff;
+  --grey-dark-alpha-2: #ffffff;
+  --grey-dark-alpha-3: #ffffff;
+  --grey-dark-alpha-4: #ffffff;
+  --grey-dark-alpha-5: #ffffff;
+  --grey-dark-alpha-6: #ffffff;
+  --grey-dark-alpha-7: #ffffff;
+  --grey-dark-alpha-8: #ffffff;
+  --grey-dark-alpha-9: #ffffff;
+  --grey-dark-alpha-10: #ffffff;
+  --grey-dark-alpha-11: #ffffff;
+  --grey-dark-alpha-12: #ffffff;
+  --smoke-dark-1: #131010;
+  --grey-light-2: #ffffff;
+  --grey-light-3: #ffffff;
+  --grey-light-4: #ffffff;
+  --grey-light-5: #ffffff;
+  --grey-light-6: #ffffff;
+  --grey-light-7: #ffffff;
+  --grey-light-8: #ffffff;
+  --grey-light-9: #ffffff;
+  --grey-light-10: #ffffff;
+  --grey-light-11: #ffffff;
+  --grey-light-12: #ffffff;
+  --smoke-dark-2: #1b1818;
+  --smoke-dark-3: #252121;
+  --smoke-dark-4: #2d2828;
+  --smoke-dark-5: #343030;
+  --smoke-dark-6: #3e3939;
+  --smoke-dark-7: #4b4646;
+  --smoke-dark-8: #645f5f;
+  --smoke-dark-9: #716c6b;
+  --smoke-dark-10: #7f7979;
+  --smoke-dark-11: #b7b1b1;
+  --smoke-dark-12: #f1ecec;
+  --smoke-light-1: #fdfcfc;
+  --smoke-light-2: #f9f8f8;
+  --smoke-light-3: #f1f0f0;
+  --smoke-light-4: #e9e8e8;
+  --smoke-light-5: #e2e0e0;
+  --smoke-light-6: #dad9d9;
+  --smoke-light-7: #cfcecd;
+  --smoke-light-8: #bcbbbb;
+  --smoke-light-9: #8e8b8b;
+  --smoke-light-10: #848181;
+  --smoke-light-11: #656363;
+  --smoke-light-12: #211e1e;
+  --smoke-dark-alpha-1: #bb000003;
+  --smoke-dark-alpha-2: #f9b4b40b;
+  --smoke-dark-alpha-3: #f9caca16;
+  --smoke-dark-alpha-4: #ffd5d51e;
+  --smoke-dark-alpha-5: #fce2e226;
+  --smoke-dark-alpha-6: #fce2e231;
+  --smoke-dark-alpha-7: #fce8e83f;
+  --smoke-dark-alpha-8: #fff1f159;
+  --smoke-dark-alpha-9: #fff3f067;
+  --smoke-dark-alpha-10: #fff2f276;
+  --smoke-dark-alpha-11: #fff7f7b2;
+  --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;
+  --smoke-light-alpha-5: #1100001f;
+  --smoke-light-alpha-6: #07000026;
+  --smoke-light-alpha-7: #0b060032;
+  --smoke-light-alpha-8: #04000044;
+  --smoke-light-alpha-9: #07000074;
+  --smoke-light-alpha-10: #0400009c;
+  --smoke-light-alpha-11: #0700007e;
+  --smoke-light-alpha-12: #020000df;
+  --yuzu-dark-1: #11120c;
+  --yuzu-light-1: #fdfdfb;
+  --yuzu-light-2: #fbfceb;
+  --yuzu-light-3: #f8fac5;
+  --yuzu-light-4: #f2f4a5;
+  --yuzu-light-5: #e9eb9a;
+  --yuzu-light-6: #dcde8e;
+  --yuzu-light-7: #cccd7e;
+  --yuzu-light-8: #b6b768;
+  --yuzu-light-9: #dcde8d;
+  --yuzu-light-10: #d2d384;
+  --yuzu-light-11: #7c7c2c;
+  --yuzu-light-12: #3d3d23;
+  --yuzu-dark-2: #181810;
+  --yuzu-dark-3: #262614;
+  --yuzu-dark-4: #313115;
+  --yuzu-dark-5: #3d3d18;
+  --yuzu-dark-6: #4a4a21;
+  --yuzu-dark-7: #5a5b2c;
+  --yuzu-dark-8: #6f6f36;
+  --yuzu-dark-9: #fdffca;
+  --yuzu-dark-10: #f4f6c1;
+  --yuzu-dark-11: #dbdda0;
+  --yuzu-dark-12: #eff1bd;
+  --yuzu-dark-alpha-1: #11910002;
+  --yuzu-dark-alpha-2: #f1f10008;
+  --yuzu-dark-alpha-3: #fafa3317;
+  --yuzu-dark-alpha-4: #fbfb2f23;
+  --yuzu-dark-alpha-5: #fbfb3730;
+  --yuzu-dark-alpha-6: #fcfc533e;
+  --yuzu-dark-alpha-7: #fafd6750;
+  --yuzu-dark-alpha-8: #ffff6f65;
+  --yuzu-dark-alpha-9: #fdffca;
+  --yuzu-dark-alpha-10: #fcfec7f6;
+  --yuzu-dark-alpha-11: #fdffb8db;
+  --yuzu-dark-alpha-12: #fdffc8f0;
+  --yuzu-light-alpha-1: #80800004;
+  --yuzu-light-alpha-2: #ccd90014;
+  --yuzu-light-alpha-3: #e1ea003a;
+  --yuzu-light-alpha-4: #dbe0015a;
+  --yuzu-light-alpha-5: #c8cd0065;
+  --yuzu-light-alpha-6: #b1b50071;
+  --yuzu-light-alpha-7: #9b9d0081;
+  --yuzu-light-alpha-8: #84860097;
+  --yuzu-light-alpha-9: #b1b60072;
+  --yuzu-light-alpha-10: #a2a4017b;
+  --yuzu-light-alpha-11: #616100d3;
+  --yuzu-light-alpha-12: #1e1e00dc;
+  --cobalt-dark-1: #091120;
+  --cobalt-dark-2: #0d172b;
+  --cobalt-dark-3: #0c2255;
+  --cobalt-dark-4: #0c2a74;
+  --cobalt-dark-5: #113489;
+  --cobalt-dark-6: #18409b;
+  --cobalt-dark-7: #204cb1;
+  --cobalt-dark-8: #2558d0;
+  --cobalt-dark-9: #034cff;
+  --cobalt-dark-10: #0038ee;
+  --cobalt-dark-11: #89b5ff;
+  --cobalt-dark-12: #cde2ff;
+  --cobalt-light-1: #fcfdff;
+  --cobalt-light-2: #f5faff;
+  --cobalt-light-3: #eaf2ff;
+  --cobalt-light-4: #daeaff;
+  --cobalt-light-5: #c8e0ff;
+  --cobalt-light-6: #b4d2ff;
+  --cobalt-light-7: #98bfff;
+  --cobalt-dark-alpha-1: #0011f211;
+  --cobalt-dark-alpha-2: #0048fe1c;
+  --cobalt-dark-alpha-3: #004dff49;
+  --cobalt-dark-alpha-4: #064dfd6b;
+  --cobalt-dark-alpha-5: #1157ff81;
+  --cobalt-dark-alpha-6: #1e62ff94;
+  --cobalt-dark-alpha-7: #2768feac;
+  --cobalt-dark-alpha-8: #2a6affcd;
+  --cobalt-dark-alpha-9: #034cff;
+  --cobalt-dark-alpha-10: #003bffed;
+  --cobalt-dark-alpha-11: #89b5ff;
+  --cobalt-dark-alpha-12: #cde2ff;
+  --cobalt-light-8: #73a4ff;
+  --cobalt-light-9: #034cff;
+  --cobalt-light-10: #0443de;
+  --cobalt-light-11: #1251ec;
+  --cobalt-light-12: #0f2b6c;
+  --cobalt-light-alpha-1: #0055ff03;
+  --cobalt-light-alpha-2: #0080ff0a;
+  --cobalt-light-alpha-3: #0062ff15;
+  --cobalt-light-alpha-4: #006fff25;
+  --cobalt-light-alpha-5: #0070ff37;
+  --cobalt-light-alpha-6: #0167ff4b;
+  --cobalt-light-alpha-7: #0061ff67;
+  --cobalt-light-alpha-8: #005aff8c;
+  --cobalt-light-alpha-9: #004afffc;
+  --cobalt-light-alpha-10: #0040ddfb;
+  --cobalt-light-alpha-11: #0044ebed;
+  --cobalt-light-alpha-12: #001e63f0;
+  --apple-dark-1: #0c140b;
+  --apple-light-1: #fafefa;
+  --apple-light-2: #f4fcf3;
+  --apple-light-3: #e1fade;
+  --apple-light-4: #cef6c9;
+  --apple-light-5: #b9efb3;
+  --apple-light-6: #9fe598;
+  --apple-light-7: #7dd676;
+  --apple-light-8: #43c23b;
+  --apple-light-9: #12c905;
+  --apple-light-10: #00bd00;
+  --apple-light-11: #008600;
+  --apple-light-12: #184115;
+  --apple-dark-2: #121b11;
+  --apple-dark-3: #152d13;
+  --apple-dark-4: #123d0f;
+  --apple-dark-5: #174b14;
+  --apple-dark-6: #1d5b19;
+  --apple-dark-7: #226c1e;
+  --apple-dark-8: #267f20;
+  --apple-dark-9: #12c905;
+  --apple-dark-10: #17bb0d;
+  --apple-dark-11: #37db2e;
+  --apple-dark-12: #aff7a8;
+  --apple-dark-alpha-1: #00d10004;
+  --apple-dark-alpha-2: #29f9120b;
+  --apple-dark-alpha-3: #33ff221e;
+  --apple-dark-alpha-4: #17fb0730;
+  --apple-dark-alpha-5: #2afc1e3f;
+  --apple-dark-alpha-6: #37fd2b50;
+  --apple-dark-alpha-7: #3efe3362;
+  --apple-dark-alpha-8: #3fff3276;
+  --apple-dark-alpha-9: #12fe02c6;
+  --apple-dark-alpha-10: #19fe0cb7;
+  --apple-dark-alpha-11: #3dfe33d9;
+  --apple-dark-alpha-12: #b4feacf7;
+  --apple-light-alpha-1: #00cc0005;
+  --apple-light-alpha-2: #16c0000c;
+  --apple-light-alpha-3: #18d90021;
+  --apple-light-alpha-4: #18d50036;
+  --apple-light-alpha-5: #15ca004c;
+  --apple-light-alpha-6: #12bf0067;
+  --apple-light-alpha-7: #0db30089;
+  --apple-light-alpha-8: #0bb000c4;
+  --apple-light-alpha-9: #0dc800fa;
+  --apple-light-alpha-10: #00bd00;
+  --apple-light-alpha-11: #008600;
+  --apple-light-alpha-12: #033000ea;
+  --ember-dark-1: #170f0d;
+  --ember-dark-2: #201412;
+  --ember-dark-3: #3c140d;
+  --ember-dark-4: #530e05;
+  --ember-dark-5: #631409;
+  --ember-dark-6: #742216;
+  --ember-dark-7: #8d3324;
+  --ember-dark-8: #b64330;
+  --ember-dark-9: #fc533a;
+  --ember-dark-10: #ee462d;
+  --ember-dark-11: #ff917b;
+  --ember-dark-12: #ffd1c8;
+  --ember-light-1: #fffcfb;
+  --ember-light-2: #fff6f3;
+  --ember-light-3: #ffe9e4;
+  --ember-light-4: #ffd7cc;
+  --ember-light-5: #ffc8ba;
+  --ember-light-6: #ffb7a6;
+  --ember-light-7: #ffa392;
+  --ember-light-8: #f68975;
+  --ember-light-9: #fc533a;
+  --ember-light-10: #ef442a;
+  --ember-light-11: #da3319;
+  --ember-light-12: #5c281f;
+  --ember-dark-alpha-1: #ec000007;
+  --ember-dark-alpha-2: #f23e2011;
+  --ember-dark-alpha-3: #fb22002f;
+  --ember-dark-alpha-4: #ff070047;
+  --ember-dark-alpha-5: #ff1a0058;
+  --ember-dark-alpha-6: #fd3a1d6b;
+  --ember-dark-alpha-7: #ff533685;
+  --ember-dark-alpha-8: #ff5a3eb1;
+  --ember-dark-alpha-9: #ff553bfc;
+  --ember-dark-alpha-10: #ff4a2fed;
+  --ember-dark-alpha-11: #ff917b;
+  --ember-dark-alpha-12: #ffd1c8;
+  --ember-light-alpha-1: #ff400004;
+  --ember-light-alpha-2: #ff40000c;
+  --ember-light-alpha-3: #ff30001b;
+  --ember-light-alpha-4: #ff370033;
+  --ember-light-alpha-5: #ff340045;
+  --ember-light-alpha-6: #ff310059;
+  --ember-light-alpha-7: #ff28006d;
+  --ember-light-alpha-8: #ef25008a;
+  --ember-light-alpha-9: #fb2200c5;
+  --ember-light-alpha-10: #ec1f00d5;
+  --ember-light-alpha-11: #d61d00e6;
+  --ember-light-alpha-12: #460a00e0;
+  --solaris-dark-1: #13110b;
+  --solaris-dark-2: #1b180f;
+  --solaris-dark-3: #2a2307;
+  --solaris-dark-4: #382b00;
+  --solaris-dark-5: #443500;
+  --solaris-dark-6: #514307;
+  --solaris-dark-7: #64551a;
+  --solaris-dark-8: #7f6c25;
+  --solaris-dark-9: #fcd53a;
+  --solaris-dark-10: #f2cb2a;
+  --solaris-dark-11: #fdd63c;
+  --solaris-dark-12: #faebb5;
+  --solaris-light-1: #fefdfa;
+  --solaris-light-2: #fffbea;
+  --solaris-light-3: #fff6be;
+  --solaris-light-4: #ffee9c;
+  --solaris-light-5: #ffe47c;
+  --solaris-light-6: #f2d775;
+  --solaris-light-7: #e0c76f;
+  --solaris-light-8: #cdb047;
+  --solaris-light-9: #ffdc17;
+  --solaris-light-10: #fad337;
+  --solaris-light-11: #917500;
+  --solaris-light-12: #433c22;
+  --solaris-dark-alpha-1: #bb110003;
+  --solaris-dark-alpha-2: #f9b4000b;
+  --solaris-dark-alpha-3: #febb001b;
+  --solaris-dark-alpha-4: #feaf002a;
+  --solaris-dark-alpha-5: #feb80037;
+  --solaris-dark-alpha-6: #feca0045;
+  --solaris-dark-alpha-7: #ffd42b59;
+  --solaris-dark-alpha-8: #ffd63d76;
+  --solaris-dark-alpha-9: #ffd83bfc;
+  --solaris-dark-alpha-10: #fed52bf2;
+  --solaris-dark-alpha-11: #ffd83cfd;
+  --solaris-dark-alpha-12: #fff0b9fa;
+  --solaris-light-alpha-1: #cc990005;
+  --solaris-light-alpha-2: #ffcf0015;
+  --solaris-light-alpha-3: #ffdc0041;
+  --solaris-light-alpha-4: #ffd40063;
+  --solaris-light-alpha-5: #ffcb0083;
+  --solaris-light-alpha-6: #e7b6008a;
+  --solaris-light-alpha-7: #c89c0090;
+  --solaris-light-alpha-8: #ba9200b8;
+  --solaris-light-alpha-9: #ffd900e8;
+  --solaris-light-alpha-10: #f9c700c8;
+  --solaris-light-alpha-11: #917500;
+  --solaris-light-alpha-12: #261e00dd;
+  --lilac-dark-1: #140f14;
+  --lilac-dark-2: #1d141d;
+  --lilac-dark-3: #2f1e31;
+  --lilac-dark-4: #3e2440;
+  --lilac-dark-5: #4a2c4c;
+  --lilac-dark-6: #573859;
+  --lilac-dark-7: #6c486e;
+  --lilac-dark-8: #8a5e8d;
+  --lilac-dark-9: #edb2f1;
+  --lilac-dark-10: #e2a8e6;
+  --lilac-dark-11: #dca2e0;
+  --lilac-dark-12: #edd8ef;
+  --lilac-light-1: #fffcff;
+  --lilac-light-2: #fdf7fe;
+  --lilac-light-3: #fceafd;
+  --lilac-light-4: #faddfb;
+  --lilac-light-5: #f5cff7;
+  --lilac-light-6: #eebff1;
+  --lilac-light-7: #e3a9e7;
+  --lilac-light-8: #d78bdd;
+  --lilac-light-9: #a753ae;
+  --lilac-light-10: #9946a0;
+  --lilac-light-11: #95429c;
+  --lilac-light-12: #590b60;
+  --lilac-dark-alpha-1: #d100d104;
+  --lilac-dark-alpha-2: #fd4cfd0d;
+  --lilac-dark-alpha-3: #ec70fb23;
+  --lilac-dark-alpha-4: #f270fc33;
+  --lilac-dark-alpha-5: #f57dfd40;
+  --lilac-dark-alpha-6: #f691fd4e;
+  --lilac-dark-alpha-7: #fa9eff64;
+  --lilac-dark-alpha-8: #f9a5ff85;
+  --lilac-dark-alpha-9: #fbbcfff0;
+  --lilac-dark-alpha-10: #f9b9fee5;
+  --lilac-dark-alpha-11: #fab8ffde;
+  --lilac-dark-alpha-12: #fde6ffee;
+  --lilac-light-alpha-1: #ff00ff03;
+  --lilac-light-alpha-2: #c000e008;
+  --lilac-light-alpha-3: #db00e715;
+  --lilac-light-alpha-4: #da00e122;
+  --lilac-light-alpha-5: #ca00d530;
+  --lilac-light-alpha-6: #bc00c840;
+  --lilac-light-alpha-7: #ac00b856;
+  --lilac-light-alpha-8: #a800b574;
+  --lilac-light-alpha-9: #7d0087ac;
+  --lilac-light-alpha-10: #73007cb9;
+  --lilac-light-alpha-11: #70007abd;
+  --lilac-light-alpha-12: #520059f4;
+  --coral-dark-1: #160f0e;
+  --coral-light-1: #fffcfc;
+  --coral-light-2: #fff8f7;
+  --coral-light-3: #ffebe8;
+  --coral-light-4: #ffdbd5;
+  --coral-light-5: #ffcdc5;
+  --coral-light-6: #f9beb5;
+  --coral-light-7: #e9aea6;
+  --coral-light-8: #d49b93;
+  --coral-light-9: #af7871;
+  --coral-light-10: #a26c65;
+  --coral-light-11: #9c665f;
+  --coral-light-12: #592a24;
+  --coral-dark-2: #1f1413;
+  --coral-dark-3: #391613;
+  --coral-dark-4: #481b17;
+  --coral-dark-5: #542621;
+  --coral-dark-6: #63332d;
+  --coral-dark-7: #77453f;
+  --coral-dark-8: #935e57;
+  --coral-dark-9: #ffd6d0;
+  --coral-dark-10: #f5ccc6;
+  --coral-dark-11: #e2a8a0;
+  --coral-dark-12: #fcd3cd;
+  --coral-dark-alpha-1: #e6000006;
+  --coral-dark-alpha-2: #ff44330f;
+  --coral-dark-alpha-3: #ff2f1d2b;
+  --coral-dark-alpha-4: #ff3d2b3b;
+  --coral-dark-alpha-5: #ff5c4a48;
+  --coral-dark-alpha-6: #ff746358;
+  --coral-dark-alpha-7: #fd897c6e;
+  --coral-dark-alpha-8: #fe9d908c;
+  --coral-dark-alpha-9: #ffd6d0;
+  --coral-dark-alpha-10: #fed3cdf5;
+  --coral-dark-alpha-11: #ffbdb4e0;
+  --coral-dark-alpha-12: #ffd6cffc;
+  --coral-light-alpha-1: #ff000003;
+  --coral-light-alpha-2: #ff200008;
+  --coral-light-alpha-3: #ff220017;
+  --coral-light-alpha-4: #ff25002a;
+  --coral-light-alpha-5: #ff24003a;
+  --coral-light-alpha-6: #eb20014a;
+  --coral-light-alpha-7: #c0170059;
+  --coral-light-alpha-8: #9a13006c;
+  --coral-light-alpha-9: #700d008e;
+  --coral-light-alpha-10: #650c009a;
+  --coral-light-alpha-11: #620b00a0;
+  --coral-light-alpha-12: #3e0700db;
+  --mint-dark-alpha-1: #00bb0003;
+  --mint-dark-alpha-2: #2bf72b0a;
+  --mint-dark-alpha-3: #66fe5d1b;
+  --mint-dark-alpha-4: #63ff5d2c;
+  --mint-dark-alpha-5: #6cff643b;
+  --mint-dark-alpha-6: #71ff6a4b;
+  --mint-dark-alpha-7: #74fd6f5d;
+  --mint-dark-alpha-8: #74ff6f72;
+  --mint-dark-alpha-9: #c8ffc4f5;
+  --mint-dark-alpha-10: #c6fec2f5;
+  --mint-dark-alpha-11: #b4ffafdc;
+  --mint-dark-alpha-12: #c7ffc3fb;
+  --mint-dark-1: #0d130c;
+  --mint-dark-2: #121a12;
+  --mint-dark-3: #1a2a19;
+  --mint-dark-4: #1f3a1e;
+  --mint-dark-5: #264824;
+  --mint-dark-6: #2d572b;
+  --mint-dark-7: #356733;
+  --mint-dark-8: #3d7b3b;
+  --mint-dark-9: #c8ffc4;
+  --mint-dark-10: #bff5bb;
+  --mint-dark-11: #9dde99;
+  --mint-dark-12: #c4fbc0;
+  --mint-light-1: #fafefa;
+  --mint-light-2: #f4fcf3;
+  --mint-light-3: #dbfdd8;
+  --mint-light-4: #c3fabf;
+  --mint-light-5: #adf2a8;
+  --mint-light-6: #96e692;
+  --mint-light-7: #81d47d;
+  --mint-light-8: #6abc67;
+  --mint-light-9: #9ff29a;
+  --mint-light-10: #98e793;
+  --mint-light-11: #318430;
+  --mint-light-12: #1f461d;
+  --mint-dark-alpha-1: #00bb0003;
+  --mint-dark-alpha-2: #2bf72b09;
+  --mint-dark-alpha-3: #66fe5d1b;
+  --mint-dark-alpha-4: #63ff5d2b;
+  --mint-dark-alpha-5: #6cff643b;
+  --mint-dark-alpha-6: #71ff6a4a;
+  --mint-dark-alpha-7: #74fd6f5c;
+  --mint-dark-alpha-8: #74ff6f72;
+  --mint-dark-alpha-9: #c8ffc4f5;
+  --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;
+  --mint-light-alpha-4: #10ec0040;
+  --mint-light-alpha-5: #0fd90057;
+  --mint-light-alpha-6: #0ac5006d;
+  --mint-light-alpha-7: #08ab0082;
+  --mint-light-alpha-8: #058f0098;
+  --mint-light-alpha-9: #0ddf0065;
+  --mint-light-alpha-10: #0cc7006c;
+  --mint-light-alpha-11: #016800cf;
+  --mint-light-alpha-12: #022e00e2;
+  --grey-light-alpha-1: #ffffff;
+  --grey-light-alpha-2: #ffffff;
+  --grey-light-alpha-3: #ffffff;
+  --grey-light-alpha-4: #ffffff;
+  --grey-light-alpha-5: #ffffff;
+  --grey-light-alpha-6: #ffffff;
+  --grey-light-alpha-7: #ffffff;
+  --grey-light-alpha-8: #ffffff;
+  --grey-light-alpha-9: #ffffff;
+  --grey-light-alpha-10: #ffffff;
+  --grey-light-alpha-11: #ffffff;
+  --grey-light-alpha-12: #ffffff;
+}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
new file mode 100644
index 000000000..0a89a4a0d
--- /dev/null
+++ b/packages/ui/src/styles/index.css
@@ -0,0 +1,15 @@
+@layer theme, base, components, utilities;
+
+@import "./colors.css" layer(theme);
+@import "./theme.css" layer(theme);
+
+@import "./base.css" layer(base);
+
+@import "../components/button.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/list.css" layer(components);
+@import "../components/select.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tooltip.css" layer(components);
+
+@import "./utilities.css" layer(utilities);
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
new file mode 100644
index 000000000..2bf3fd772
--- /dev/null
+++ b/packages/ui/src/styles/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);
+}
\ No newline at end of file
diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css
new file mode 100644
index 000000000..9faa3f970
--- /dev/null
+++ b/packages/ui/src/styles/tailwind/index.css
@@ -0,0 +1,40 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "./utilities.css";
+
+@import "../index.css";
+
+@theme {
+  --*: initial;
+
+  --spacing: 0.25rem;
+  /* --spacing: var(--spacing); */
+
+  --font-sans: var(--font-family-sans);
+  --font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings);
+  --font-mono: var(--font-family-mono);
+  --font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings);
+
+  --text-sm: var(--font-size-small);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-large);
+  --text-xl: var(--font-size-x-large);
+
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+
+  --leading-lg: var(--line-height-large);
+  --leading-xl: var(--line-height-x-large);
+  --leading-2xl: var(--line-height-2x-large);
+
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-tightest: var(--letter-spacing-tightest);
+
+  --shadow-xs: var(--shadow-xs);
+  --shadow-md: var(--shadow-md);
+  --shadow-xs-border-selected: var(--shadow-xs-border-selected);
+}
+
+@import "./colors.css";
diff --git a/packages/ui/src/styles/tailwind/utilities.css b/packages/ui/src/styles/tailwind/utilities.css
new file mode 100644
index 000000000..f3bedca37
--- /dev/null
+++ b/packages/ui/src/styles/tailwind/utilities.css
@@ -0,0 +1,9 @@
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
new file mode 100644
index 000000000..ccfebd4c2
--- /dev/null
+++ b/packages/ui/src/styles/theme.css
@@ -0,0 +1,498 @@
+:root {
+  --font-family-sans: "Geist", "Geist Fallback";
+  --font-family-sans--font-feature-settings: "ss03" 1;
+  --font-family-mono: "Geist Mono", "Geist Mono Fallback";
+  --font-family-mono--font-feature-settings: "ss02" 1;
+
+  --font-size-small: 12px;
+  --font-size-base: 14px;
+  --font-size-large: 16px;
+  --font-size-x-large: 20px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --line-height-large: 20px;
+  --line-height-x-large: 24px;
+  --line-height-2x-large: 30px;
+  --letter-spacing-normal: 0;
+  --letter-spacing-tight: -0.1599999964237213;
+  --letter-spacing-tightest: -0.3199999928474426;
+  --paragraph-spacing-base: 0;
+
+  --spacing: 0.25rem;
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  --shadow-xs:
+    0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
+  --shadow-md:
+    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  --shadow-xs-border-selected:
+    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
+    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+}
+
+:root {
+  /* OC-1-Light */
+  color-scheme: light;
+  --background-base: #f8f7f7;
+  --background-weak: var(--smoke-light-3);
+  --background-strong: var(--smoke-light-1);
+  --background-stronger: #fcfcfc;
+  --surface-base: var(--smoke-light-alpha-2);
+  --base: var(--smoke-light-alpha-2);
+  --base2: var(--smoke-light-alpha-2);
+  --base3: var(--smoke-light-alpha-2);
+  --surface-inset-base: var(--smoke-light-alpha-3);
+  --surface-inset-base-hover: var(--smoke-light-alpha-3);
+  --surface-inset-strong: #1f000017;
+  --surface-inset-strong-hover: #1f000017;
+  --surface-raised-base: var(--smoke-light-alpha-1);
+  --surface-float-base: var(--smoke-dark-1);
+  --surface-float-base-hover: var(--smoke-dark-2);
+  --surface-raised-base-hover: var(--smoke-light-alpha-2);
+  --surface-raised-strong: var(--smoke-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--smoke-light-alpha-3);
+  --surface-weaker: var(--smoke-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
+  --surface-brand-base: var(--yuzu-light-9);
+  --surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-base: var(--cobalt-light-3);
+  --surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-base: var(--apple-light-3);
+  --surface-success-weak: var(--apple-light-2);
+  --surface-success-strong: var(--apple-light-9);
+  --surface-warning-base: var(--solaris-light-3);
+  --surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-base: var(--ember-light-3);
+  --surface-critical-weak: var(--ember-light-2);
+  --surface-critical-strong: var(--ember-light-9);
+  --surface-info-base: var(--lilac-light-3);
+  --surface-info-weak: var(--lilac-light-2);
+  --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-skip-base: var(--smoke-light-3);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: var(--mint-light-3);
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
+  --text-base: var(--smoke-light-11);
+  --input-base: var(--smoke-light-1);
+  --input-hover: var(--smoke-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--smoke-light-4);
+  --text-weak: var(--smoke-light-9);
+  --text-weaker: var(--smoke-light-8);
+  --text-strong: var(--smoke-light-12);
+  --text-on-brand-base: var(--smoke-light-alpha-11);
+  --text-on-interactive-base: var(--smoke-light-1);
+  --text-on-interactive-weak: 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-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-11);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
+  --text-on-info-weak: var(--smoke-dark-alpha-9);
+  --text-on-info-strong: var(--smoke-dark-alpha-12);
+  --text-on-warning-weak: var(--smoke-dark-alpha-9);
+  --text-on-warning-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--smoke-dark-alpha-9);
+  --text-on-success-strong: var(--smoke-dark-alpha-12);
+  --text-on-brand-weak: var(--smoke-light-alpha-9);
+  --text-on-brand-weaker: var(--smoke-light-alpha-8);
+  --text-on-brand-strong: var(--smoke-light-alpha-12);
+  --button-secondary-base: #fdfcfc;
+  --button-secondary-base-hover: var(--smoke-light-2);
+  --border-base: var(--smoke-light-alpha-7);
+  --border-hover: var(--smoke-light-alpha-8);
+  --border-active: var(--smoke-light-alpha-9);
+  --border-selected: var(--cobalt-light-alpha-9);
+  --border-disabled: var(--smoke-light-alpha-8);
+  --border-focus: var(--smoke-light-alpha-9);
+  --border-weak-base: var(--smoke-light-alpha-5);
+  --border-strong-base: var(--smoke-light-alpha-7);
+  --border-strong-hover: var(--smoke-light-alpha-8);
+  --border-strong-active: var(--smoke-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--smoke-light-alpha-6);
+  --border-strong-focus: var(--smoke-light-alpha-7);
+  --border-weak-hover: var(--smoke-light-alpha-6);
+  --border-weak-active: var(--smoke-light-alpha-7);
+  --border-weak-selected: var(--cobalt-light-alpha-4);
+  --border-weak-disabled: var(--smoke-light-alpha-6);
+  --border-weak-focus: var(--smoke-light-alpha-7);
+  --border-interactive-base: var(--cobalt-light-7);
+  --border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-disabled: var(--smoke-light-8);
+  --border-interactive-focus: var(--cobalt-light-9);
+  --border-success-base: var(--apple-light-6);
+  --border-success-hover: var(--apple-light-7);
+  --border-success-selected: var(--apple-light-9);
+  --border-warning-base: var(--solaris-light-6);
+  --border-warning-hover: var(--solaris-light-7);
+  --border-warning-selected: var(--solaris-light-9);
+  --border-critical-base: var(--ember-light-6);
+  --border-critical-hover: var(--ember-light-7);
+  --border-critical-selected: var(--ember-light-9);
+  --border-info-base: var(--lilac-light-6);
+  --border-info-hover: var(--lilac-light-7);
+  --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--smoke-light-9);
+  --icon-hover: var(--smoke-light-11);
+  --icon-active: var(--smoke-light-12);
+  --icon-selected: var(--smoke-light-12);
+  --icon-disabled: var(--smoke-light-8);
+  --icon-focus: var(--smoke-light-12);
+  --icon-weak-base: var(--smoke-light-7);
+  --icon-invert-base: #ffffff;
+  --icon-weak-hover: var(--smoke-light-8);
+  --icon-weak-active: var(--smoke-light-9);
+  --icon-weak-selected: var(--smoke-light-10);
+  --icon-weak-disabled: var(--smoke-light-6);
+  --icon-weak-focus: var(--smoke-light-9);
+  --icon-strong-base: var(--smoke-light-12);
+  --icon-strong-hover: var(--smoke-light-12);
+  --icon-strong-active: var(--smoke-light-12);
+  --icon-strong-selected: var(--smoke-light-12);
+  --icon-strong-disabled: var(--smoke-light-8);
+  --icon-strong-focus: var(--smoke-light-12);
+  --icon-brand-base: var(--smoke-light-12);
+  --icon-interactive-base: var(--cobalt-light-9);
+  --icon-success-base: var(--apple-light-7);
+  --icon-success-hover: var(--apple-light-8);
+  --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
+  --icon-critical-base: var(--ember-light-7);
+  --icon-critical-hover: var(--ember-light-8);
+  --icon-critical-active: var(--ember-light-11);
+  --icon-info-base: var(--lilac-light-7);
+  --icon-info-hover: var(--lilac-light-8);
+  --icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-base: var(--smoke-light-alpha-11);
+  --icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-interactive-base: var(--smoke-light-1);
+  --icon-agent-plan-base: var(--purple-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--blue-light-9);
+  --icon-on-success-base: var(--apple-light-alpha-9);
+  --icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
+  --icon-on-critical-base: var(--ember-light-alpha-9);
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-base: var(--lilac-light-9);
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-9);
+  --icon-diff-delete-hover: var(--ember-light-10);
+  --icon-diff-delete-active: var(--ember-light-11);
+  --syntax-comment: #8a8a8a;
+  --syntax-string: #d68c27;
+  --syntax-keyword: #3b7dd8;
+  --syntax-function: #d1383d;
+  --syntax-number: #3d9a57;
+  --syntax-operator: #d68c27;
+  --syntax-variable: #b0851f;
+  --syntax-type: #318795;
+  --syntax-constant: #953170;
+  --syntax-punctuation: #1a1a1a;
+  --syntax-success: var(--apple-dark-10);
+  --syntax-warning: var(--amber-light-10);
+  --syntax-critical: var(--ember-dark-9);
+  --syntax-info: var(--lilac-dark-11);
+  --markdown-heading: #d68c27;
+  --markdown-text: #1a1a1a;
+  --markdown-link: #3b7dd8;
+  --markdown-link-text: #318795;
+  --markdown-code: #3d9a57;
+  --markdown-block-quote: #b0851f;
+  --markdown-emph: #b0851f;
+  --markdown-strong: #d68c27;
+  --markdown-horizontal-rule: #8a8a8a;
+  --markdown-list-item: #3b7dd8;
+  --markdown-list-enumeration: #318795;
+  --markdown-image: #3b7dd8;
+  --markdown-image-text: #318795;
+  --markdown-code-block: #1a1a1a;
+  --border-color: #ffffff;
+
+  .dark {
+    /* OC-1-Dark */
+    color-scheme: dark;
+    --background-base: var(--smoke-dark-1);
+    --background-weak: #201d1d;
+    --background-strong: #151313;
+    --background-stronger: #201c1c;
+    --surface-base: var(--smoke-dark-alpha-3);
+    --base: var(--smoke-dark-alpha-2);
+    --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-4);
+    --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-4);
+    --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-hidden-base: var(--blue-dark-2);
+    --surface-diff-skip-base: var(--smoke-dark-alpha-2);
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
+    --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-12);
+    --text-on-interactive-weak: 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-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-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);
+    --button-secondary-base-hover: var(--smoke-dark-5);
+    --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);
+    --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);
+    --border-weak-selected: var(--cobalt-dark-alpha-3);
+    --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-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-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-12);
+    --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: #808080;
+    --syntax-string: #9d7cd8;
+    --syntax-keyword: #fab283;
+    --syntax-function: #e06c75;
+    --syntax-number: #7fd88f;
+    --syntax-operator: #f5a742;
+    --syntax-variable: #e5c07b;
+    --syntax-type: #56b6c2;
+    --syntax-constant: #c2569a;
+    --syntax-punctuation: #eeeeee;
+    --syntax-success: var(--apple-dark-10);
+    --syntax-warning: var(--amber-dark-10);
+    --syntax-critical: var(--ember-dark-10);
+    --syntax-info: var(--lilac-dark-10);
+    --markdown-heading: #9d7cd8;
+    --markdown-text: #eeeeee;
+    --markdown-link: #fab283;
+    --markdown-link-text: #56b6c2;
+    --markdown-code: #7fd88f;
+    --markdown-block-quote: #e5c07b;
+    --markdown-emph: #e5c07b;
+    --markdown-strong: #f5a742;
+    --markdown-horizontal-rule: #808080;
+    --markdown-list-item: #fab283;
+    --markdown-list-enumeration: #56b6c2;
+    --markdown-image: #fab283;
+    --markdown-image-text: #56b6c2;
+    --markdown-code-block: #eeeeee;
+    --border-color: #ffffff;
+  }
+}
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
new file mode 100644
index 000000000..f01a6b2ee
--- /dev/null
+++ b/packages/ui/src/styles/utilities.css
@@ -0,0 +1,109 @@
+: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 {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+.text-12-regular {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-12-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-12-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-regular {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-x-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-14-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large); /* 171.429% */
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-16-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 150% */
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.text-20-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-x-large);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-x-large); /* 120% */
+  letter-spacing: var(--letter-spacing-tightest);
+}
-- 
cgit v1.2.3