& { id: string }) => workspace().update(pty),
+ trim: (id: string) => workspace().trim(id),
+ trimAll: () => workspace().trimAll(),
clone: (id: string) => workspace().clone(id),
open: (id: string) => workspace().open(id),
close: (id: string) => workspace().close(id),
diff --git a/packages/app/src/pages/session/terminal-panel.tsx b/packages/app/src/pages/session/terminal-panel.tsx
index d5eac2322b..8fd652e903 100644
--- a/packages/app/src/pages/session/terminal-panel.tsx
+++ b/packages/app/src/pages/session/terminal-panel.tsx
@@ -250,6 +250,7 @@ export function TerminalPanel() {
terminal.trim(id)}
onCleanup={terminal.update}
onConnectError={() => terminal.clone(id)}
/>
From 5cc4bb408914e2da35de66def1925867bceac230 Mon Sep 17 00:00:00 2001
From: David Hill
Date: Sun, 8 Mar 2026 13:31:18 +0000
Subject: [PATCH 093/101] app: suppress hover when opening project menu or
right-clicking to prevent flickering
---
packages/app/src/pages/layout/sidebar-project.tsx | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/packages/app/src/pages/layout/sidebar-project.tsx b/packages/app/src/pages/layout/sidebar-project.tsx
index fb66dcc975..187cd2f335 100644
--- a/packages/app/src/pages/layout/sidebar-project.tsx
+++ b/packages/app/src/pages/layout/sidebar-project.tsx
@@ -91,6 +91,7 @@ const ProjectTile = (props: {
modal={!props.sidebarHovering()}
onOpenChange={(value) => {
props.setMenu(value)
+ props.setSuppressHover(value)
if (value) props.setOpen(false)
}}
>
@@ -107,6 +108,12 @@ const ProjectTile = (props: {
!props.selected() && !props.active(),
"bg-surface-base-hover border border-border-weak-base": !props.selected() && props.active(),
}}
+ onPointerDown={(event) => {
+ if (!props.overlay()) return
+ if (event.button !== 2 && !(event.button === 0 && event.ctrlKey)) return
+ props.setSuppressHover(true)
+ event.preventDefault()
+ }}
onMouseEnter={(event: MouseEvent) => {
if (!props.overlay()) return
if (props.suppressHover()) return
From d15c2ce349f7c73aad25138de27df61ebe9bc634 Mon Sep 17 00:00:00 2001
From: David Hill
Date: Sun, 8 Mar 2026 13:34:56 +0000
Subject: [PATCH 094/101] tui: fix sidebar background color when collapsed
When the sidebar was collapsed (not on mobile), the background color was showing as the stronger variant instead of matching the base background. This fixes the hover state detection so users see a consistent lighter background when the sidebar is in collapsed mode.
---
packages/app/src/pages/layout.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 30925191f4..b7ac28ae1a 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -1891,6 +1891,7 @@ export default function Layout(props: ParentProps) {
const SidebarPanel = (panelProps: { project: LocalProject | undefined; mobile?: boolean; merged?: boolean }) => {
const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
+ const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
const projectName = createMemo(() => {
const project = panelProps.project
if (!project) return ""
@@ -1919,8 +1920,8 @@ export default function Layout(props: ParentProps) {
"flex flex-col min-h-0 min-w-0 rounded-tl-[12px] px-2": true,
"border border-b-0 border-border-weak-base": !merged(),
"border-l border-t border-border-weaker-base": merged(),
- "bg-background-base": merged(),
- "bg-background-stronger": !merged(),
+ "bg-background-base": merged() || hover(),
+ "bg-background-stronger": !merged() && !hover(),
"flex-1 min-w-0": panelProps.mobile,
"max-w-full overflow-hidden": panelProps.mobile,
}}
From e51ed460a6d5392c67485a829e2b1991ec50dbe8 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Mon, 9 Mar 2026 07:57:48 +1000
Subject: [PATCH 095/101] fix(tui): canonicalize cwd after chdir (#16641)
---
packages/opencode/src/cli/cmd/tui/thread.ts | 12 +-
packages/opencode/test/cli/tui/thread.test.ts | 157 ++++++++++++++++++
2 files changed, 164 insertions(+), 5 deletions(-)
create mode 100644 packages/opencode/test/cli/tui/thread.test.ts
diff --git a/packages/opencode/src/cli/cmd/tui/thread.ts b/packages/opencode/src/cli/cmd/tui/thread.ts
index fea32a2b2b..14a9c88731 100644
--- a/packages/opencode/src/cli/cmd/tui/thread.ts
+++ b/packages/opencode/src/cli/cmd/tui/thread.ts
@@ -110,18 +110,20 @@ export const TuiThreadCommand = cmd({
return
}
- // Resolve relative paths against PWD to preserve behavior when using --cwd flag
+ // Resolve relative --project paths from PWD, then use the real cwd after
+ // chdir so the thread and worker share the same directory key.
const root = Filesystem.resolve(process.env.PWD ?? process.cwd())
- const cwd = args.project
+ const next = args.project
? Filesystem.resolve(path.isAbsolute(args.project) ? args.project : path.join(root, args.project))
- : root
+ : Filesystem.resolve(process.cwd())
const file = await target()
try {
- process.chdir(cwd)
+ process.chdir(next)
} catch {
- UI.error("Failed to change directory to " + cwd)
+ UI.error("Failed to change directory to " + next)
return
}
+ const cwd = Filesystem.resolve(process.cwd())
const worker = new Worker(file, {
env: Object.fromEntries(
diff --git a/packages/opencode/test/cli/tui/thread.test.ts b/packages/opencode/test/cli/tui/thread.test.ts
new file mode 100644
index 0000000000..d3de7c3183
--- /dev/null
+++ b/packages/opencode/test/cli/tui/thread.test.ts
@@ -0,0 +1,157 @@
+import { describe, expect, mock, test } from "bun:test"
+import fs from "fs/promises"
+import path from "path"
+import { tmpdir } from "../../fixture/fixture"
+
+const stop = new Error("stop")
+const seen = {
+ tui: [] as string[],
+ inst: [] as string[],
+}
+
+mock.module("../../../src/cli/cmd/tui/app", () => ({
+ tui: async (input: { directory: string }) => {
+ seen.tui.push(input.directory)
+ throw stop
+ },
+}))
+
+mock.module("@/util/rpc", () => ({
+ Rpc: {
+ client: () => ({
+ call: async () => ({ url: "http://127.0.0.1" }),
+ on: () => {},
+ }),
+ },
+}))
+
+mock.module("@/cli/ui", () => ({
+ UI: {
+ error: () => {},
+ },
+}))
+
+mock.module("@/util/log", () => ({
+ Log: {
+ init: async () => {},
+ create: () => ({
+ error: () => {},
+ info: () => {},
+ warn: () => {},
+ debug: () => {},
+ time: () => ({ stop: () => {} }),
+ }),
+ Default: {
+ error: () => {},
+ info: () => {},
+ warn: () => {},
+ debug: () => {},
+ },
+ },
+}))
+
+mock.module("@/util/timeout", () => ({
+ withTimeout: (input: Promise) => input,
+}))
+
+mock.module("@/cli/network", () => ({
+ withNetworkOptions: (input: T) => input,
+ resolveNetworkOptions: async () => ({
+ mdns: false,
+ port: 0,
+ hostname: "127.0.0.1",
+ }),
+}))
+
+mock.module("../../../src/cli/cmd/tui/win32", () => ({
+ win32DisableProcessedInput: () => {},
+ win32InstallCtrlCGuard: () => undefined,
+}))
+
+mock.module("@/config/tui", () => ({
+ TuiConfig: {
+ get: () => ({}),
+ },
+}))
+
+mock.module("@/project/instance", () => ({
+ Instance: {
+ provide: async (input: { directory: string; fn: () => Promise | unknown }) => {
+ seen.inst.push(input.directory)
+ return input.fn()
+ },
+ },
+}))
+
+describe("tui thread", () => {
+ async function call(project?: string) {
+ const { TuiThreadCommand } = await import("../../../src/cli/cmd/tui/thread")
+ const args: Parameters>[0] = {
+ _: [],
+ $0: "opencode",
+ project,
+ prompt: "hi",
+ model: undefined,
+ agent: undefined,
+ session: undefined,
+ continue: false,
+ fork: false,
+ port: 0,
+ hostname: "127.0.0.1",
+ mdns: false,
+ "mdns-domain": "opencode.local",
+ mdnsDomain: "opencode.local",
+ cors: [],
+ }
+ return TuiThreadCommand.handler(args)
+ }
+
+ async function check(project?: string) {
+ await using tmp = await tmpdir({ git: true })
+ const cwd = process.cwd()
+ const pwd = process.env.PWD
+ const worker = globalThis.Worker
+ const tty = Object.getOwnPropertyDescriptor(process.stdin, "isTTY")
+ const link = path.join(path.dirname(tmp.path), path.basename(tmp.path) + "-link")
+ const type = process.platform === "win32" ? "junction" : "dir"
+ seen.tui.length = 0
+ seen.inst.length = 0
+ await fs.symlink(tmp.path, link, type)
+
+ Object.defineProperty(process.stdin, "isTTY", {
+ configurable: true,
+ value: true,
+ })
+ globalThis.Worker = class extends EventTarget {
+ onerror = null
+ onmessage = null
+ onmessageerror = null
+ postMessage() {}
+ terminate() {}
+ } as unknown as typeof Worker
+
+ try {
+ process.chdir(tmp.path)
+ process.env.PWD = link
+ await expect(call(project)).rejects.toBe(stop)
+ expect(seen.inst[0]).toBe(tmp.path)
+ expect(seen.tui[0]).toBe(tmp.path)
+ } finally {
+ process.chdir(cwd)
+ if (pwd === undefined) delete process.env.PWD
+ else process.env.PWD = pwd
+ if (tty) Object.defineProperty(process.stdin, "isTTY", tty)
+ else delete (process.stdin as { isTTY?: boolean }).isTTY
+ globalThis.Worker = worker
+ await fs.rm(link, { recursive: true, force: true }).catch(() => undefined)
+ }
+ }
+
+ test("uses the real cwd when PWD points at a symlink", async () => {
+ await check()
+ })
+
+ test("uses the real cwd after resolving a relative project from PWD", async () => {
+ await check(".")
+ })
+})
From 49a3a9fe365ab7c971220ac58572e34f2cc68897 Mon Sep 17 00:00:00 2001
From: Sebastian
Date: Sun, 8 Mar 2026 23:14:41 +0100
Subject: [PATCH 096/101] guard tui exit (#16640)
---
packages/opencode/src/cli/cmd/tui/app.tsx | 2 --
.../opencode/src/cli/cmd/tui/context/exit.tsx | 31 +++++++++++--------
2 files changed, 18 insertions(+), 15 deletions(-)
diff --git a/packages/opencode/src/cli/cmd/tui/app.tsx b/packages/opencode/src/cli/cmd/tui/app.tsx
index 97c910a47d..3304d6be6a 100644
--- a/packages/opencode/src/cli/cmd/tui/app.tsx
+++ b/packages/opencode/src/cli/cmd/tui/app.tsx
@@ -111,7 +111,6 @@ export function tui(input: {
fetch?: typeof fetch
headers?: RequestInit["headers"]
events?: EventSource
- onExit?: () => Promise
}) {
// promise to prevent immediate exit
return new Promise(async (resolve) => {
@@ -126,7 +125,6 @@ export function tui(input: {
const onExit = async () => {
unguard?.()
- await input.onExit?.()
resolve()
}
diff --git a/packages/opencode/src/cli/cmd/tui/context/exit.tsx b/packages/opencode/src/cli/cmd/tui/context/exit.tsx
index a6f775913a..3ed4ae3d2c 100644
--- a/packages/opencode/src/cli/cmd/tui/context/exit.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/exit.tsx
@@ -15,6 +15,7 @@ export const { use: useExit, provider: ExitProvider } = createSimpleContext({
init: (input: { onExit?: () => Promise }) => {
const renderer = useRenderer()
let message: string | undefined
+ let task: Promise | undefined
const store = {
set: (value?: string) => {
const prev = message
@@ -29,20 +30,24 @@ export const { use: useExit, provider: ExitProvider } = createSimpleContext({
get: () => message,
}
const exit: Exit = Object.assign(
- async (reason?: unknown) => {
- // Reset window title before destroying renderer
- renderer.setTerminalTitle("")
- renderer.destroy()
- win32FlushInputBuffer()
- if (reason) {
- const formatted = FormatError(reason) ?? FormatUnknownError(reason)
- if (formatted) {
- process.stderr.write(formatted + "\n")
+ (reason?: unknown) => {
+ if (task) return task
+ task = (async () => {
+ // Reset window title before destroying renderer
+ renderer.setTerminalTitle("")
+ renderer.destroy()
+ win32FlushInputBuffer()
+ if (reason) {
+ const formatted = FormatError(reason) ?? FormatUnknownError(reason)
+ if (formatted) {
+ process.stderr.write(formatted + "\n")
+ }
}
- }
- const text = store.get()
- if (text) process.stdout.write(text + "\n")
- await input.onExit?.()
+ const text = store.get()
+ if (text) process.stdout.write(text + "\n")
+ await input.onExit?.()
+ })()
+ return task
},
{
message: store,
From 1db292f4df3bd69d4262ca6471aa5879b83b1fd1 Mon Sep 17 00:00:00 2001
From: opencode
Date: Sun, 8 Mar 2026 22:34:59 +0000
Subject: [PATCH 097/101] release: v1.2.22
---
bun.lock | 32 +++++++++++++-------------
packages/app/package.json | 2 +-
packages/console/app/package.json | 2 +-
packages/console/core/package.json | 2 +-
packages/console/function/package.json | 2 +-
packages/console/mail/package.json | 2 +-
packages/desktop-electron/package.json | 2 +-
packages/desktop/package.json | 2 +-
packages/enterprise/package.json | 2 +-
packages/extensions/zed/extension.toml | 12 +++++-----
packages/function/package.json | 2 +-
packages/opencode/package.json | 2 +-
packages/plugin/package.json | 2 +-
packages/sdk/js/package.json | 2 +-
packages/slack/package.json | 2 +-
packages/ui/package.json | 2 +-
packages/util/package.json | 2 +-
packages/web/package.json | 2 +-
sdks/vscode/package.json | 2 +-
19 files changed, 39 insertions(+), 39 deletions(-)
diff --git a/bun.lock b/bun.lock
index 360ef8facc..5202b70d98 100644
--- a/bun.lock
+++ b/bun.lock
@@ -26,7 +26,7 @@
},
"packages/app": {
"name": "@opencode-ai/app",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@kobalte/core": "catalog:",
"@opencode-ai/sdk": "workspace:*",
@@ -76,7 +76,7 @@
},
"packages/console/app": {
"name": "@opencode-ai/console-app",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@cloudflare/vite-plugin": "1.15.2",
"@ibm/plex": "6.4.1",
@@ -110,7 +110,7 @@
},
"packages/console/core": {
"name": "@opencode-ai/console-core",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@aws-sdk/client-sts": "3.782.0",
"@jsx-email/render": "1.1.1",
@@ -137,7 +137,7 @@
},
"packages/console/function": {
"name": "@opencode-ai/console-function",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@ai-sdk/anthropic": "2.0.0",
"@ai-sdk/openai": "2.0.2",
@@ -161,7 +161,7 @@
},
"packages/console/mail": {
"name": "@opencode-ai/console-mail",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@jsx-email/all": "2.2.3",
"@jsx-email/cli": "1.4.3",
@@ -185,7 +185,7 @@
},
"packages/desktop": {
"name": "@opencode-ai/desktop",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@opencode-ai/app": "workspace:*",
"@opencode-ai/ui": "workspace:*",
@@ -218,7 +218,7 @@
},
"packages/desktop-electron": {
"name": "@opencode-ai/desktop-electron",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@opencode-ai/app": "workspace:*",
"@opencode-ai/ui": "workspace:*",
@@ -248,7 +248,7 @@
},
"packages/enterprise": {
"name": "@opencode-ai/enterprise",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@opencode-ai/ui": "workspace:*",
"@opencode-ai/util": "workspace:*",
@@ -277,7 +277,7 @@
},
"packages/function": {
"name": "@opencode-ai/function",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@octokit/auth-app": "8.0.1",
"@octokit/rest": "catalog:",
@@ -293,7 +293,7 @@
},
"packages/opencode": {
"name": "opencode",
- "version": "1.2.21",
+ "version": "1.2.22",
"bin": {
"opencode": "./bin/opencode",
},
@@ -409,7 +409,7 @@
},
"packages/plugin": {
"name": "@opencode-ai/plugin",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@opencode-ai/sdk": "workspace:*",
"zod": "catalog:",
@@ -429,7 +429,7 @@
},
"packages/sdk/js": {
"name": "@opencode-ai/sdk",
- "version": "1.2.21",
+ "version": "1.2.22",
"devDependencies": {
"@hey-api/openapi-ts": "0.90.10",
"@tsconfig/node22": "catalog:",
@@ -440,7 +440,7 @@
},
"packages/slack": {
"name": "@opencode-ai/slack",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@opencode-ai/sdk": "workspace:*",
"@slack/bolt": "^3.17.1",
@@ -475,7 +475,7 @@
},
"packages/ui": {
"name": "@opencode-ai/ui",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@kobalte/core": "catalog:",
"@opencode-ai/sdk": "workspace:*",
@@ -524,7 +524,7 @@
},
"packages/util": {
"name": "@opencode-ai/util",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"zod": "catalog:",
},
@@ -535,7 +535,7 @@
},
"packages/web": {
"name": "@opencode-ai/web",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@astrojs/cloudflare": "12.6.3",
"@astrojs/markdown-remark": "6.3.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index f87bd978f6..51f9883a56 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/app",
- "version": "1.2.21",
+ "version": "1.2.22",
"description": "",
"type": "module",
"exports": {
diff --git a/packages/console/app/package.json b/packages/console/app/package.json
index 0032a24319..62474711f0 100644
--- a/packages/console/app/package.json
+++ b/packages/console/app/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/console-app",
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"scripts": {
diff --git a/packages/console/core/package.json b/packages/console/core/package.json
index 79de75cfbc..b8cf081047 100644
--- a/packages/console/core/package.json
+++ b/packages/console/core/package.json
@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/package.json",
"name": "@opencode-ai/console-core",
- "version": "1.2.21",
+ "version": "1.2.22",
"private": true,
"type": "module",
"license": "MIT",
diff --git a/packages/console/function/package.json b/packages/console/function/package.json
index 0e4589cc2c..ed4cfed17a 100644
--- a/packages/console/function/package.json
+++ b/packages/console/function/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/console-function",
- "version": "1.2.21",
+ "version": "1.2.22",
"$schema": "https://json.schemastore.org/package.json",
"private": true,
"type": "module",
diff --git a/packages/console/mail/package.json b/packages/console/mail/package.json
index 4e28f18c0d..c41e66c051 100644
--- a/packages/console/mail/package.json
+++ b/packages/console/mail/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/console-mail",
- "version": "1.2.21",
+ "version": "1.2.22",
"dependencies": {
"@jsx-email/all": "2.2.3",
"@jsx-email/cli": "1.4.3",
diff --git a/packages/desktop-electron/package.json b/packages/desktop-electron/package.json
index 7eca0e0417..2b9ce92da4 100644
--- a/packages/desktop-electron/package.json
+++ b/packages/desktop-electron/package.json
@@ -1,7 +1,7 @@
{
"name": "@opencode-ai/desktop-electron",
"private": true,
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"homepage": "https://opencode.ai",
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 13b3bfed6b..8663cc8d58 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -1,7 +1,7 @@
{
"name": "@opencode-ai/desktop",
"private": true,
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"scripts": {
diff --git a/packages/enterprise/package.json b/packages/enterprise/package.json
index 0479f42eb4..9807922a2c 100644
--- a/packages/enterprise/package.json
+++ b/packages/enterprise/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/enterprise",
- "version": "1.2.21",
+ "version": "1.2.22",
"private": true,
"type": "module",
"license": "MIT",
diff --git a/packages/extensions/zed/extension.toml b/packages/extensions/zed/extension.toml
index d2af1bb60f..ddc61ca4c6 100644
--- a/packages/extensions/zed/extension.toml
+++ b/packages/extensions/zed/extension.toml
@@ -1,7 +1,7 @@
id = "opencode"
name = "OpenCode"
description = "The open source coding agent."
-version = "1.2.21"
+version = "1.2.22"
schema_version = 1
authors = ["Anomaly"]
repository = "https://github.com/anomalyco/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
icon = "./icons/opencode.svg"
[agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-darwin-arm64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.22/opencode-darwin-arm64.zip"
cmd = "./opencode"
args = ["acp"]
[agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-darwin-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.22/opencode-darwin-x64.zip"
cmd = "./opencode"
args = ["acp"]
[agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.22/opencode-linux-arm64.tar.gz"
cmd = "./opencode"
args = ["acp"]
[agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-linux-x64.tar.gz"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.22/opencode-linux-x64.tar.gz"
cmd = "./opencode"
args = ["acp"]
[agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.21/opencode-windows-x64.zip"
+archive = "https://github.com/anomalyco/opencode/releases/download/v1.2.22/opencode-windows-x64.zip"
cmd = "./opencode.exe"
args = ["acp"]
diff --git a/packages/function/package.json b/packages/function/package.json
index c00a99ae20..1bbb1dffde 100644
--- a/packages/function/package.json
+++ b/packages/function/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/function",
- "version": "1.2.21",
+ "version": "1.2.22",
"$schema": "https://json.schemastore.org/package.json",
"private": true,
"type": "module",
diff --git a/packages/opencode/package.json b/packages/opencode/package.json
index 716546cbd4..7a25100b0b 100644
--- a/packages/opencode/package.json
+++ b/packages/opencode/package.json
@@ -1,6 +1,6 @@
{
"$schema": "https://json.schemastore.org/package.json",
- "version": "1.2.21",
+ "version": "1.2.22",
"name": "opencode",
"type": "module",
"license": "MIT",
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
index ab0abff1e8..cb6640b5d3 100644
--- a/packages/plugin/package.json
+++ b/packages/plugin/package.json
@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/package.json",
"name": "@opencode-ai/plugin",
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"scripts": {
diff --git a/packages/sdk/js/package.json b/packages/sdk/js/package.json
index c6ab0313a1..19d50e85cd 100644
--- a/packages/sdk/js/package.json
+++ b/packages/sdk/js/package.json
@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/package.json",
"name": "@opencode-ai/sdk",
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"scripts": {
diff --git a/packages/slack/package.json b/packages/slack/package.json
index aa0aeb1f62..b5c02a45ff 100644
--- a/packages/slack/package.json
+++ b/packages/slack/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/slack",
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"scripts": {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6384df19b3..4022deb4ae 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/ui",
- "version": "1.2.21",
+ "version": "1.2.22",
"type": "module",
"license": "MIT",
"exports": {
diff --git a/packages/util/package.json b/packages/util/package.json
index 1caf496d77..04b0bb93f4 100644
--- a/packages/util/package.json
+++ b/packages/util/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/util",
- "version": "1.2.21",
+ "version": "1.2.22",
"private": true,
"type": "module",
"license": "MIT",
diff --git a/packages/web/package.json b/packages/web/package.json
index 79c72a8840..783b3d1a6f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -2,7 +2,7 @@
"name": "@opencode-ai/web",
"type": "module",
"license": "MIT",
- "version": "1.2.21",
+ "version": "1.2.22",
"scripts": {
"dev": "astro dev",
"dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",
diff --git a/sdks/vscode/package.json b/sdks/vscode/package.json
index 9dd009cbd6..dcbbbc3d07 100644
--- a/sdks/vscode/package.json
+++ b/sdks/vscode/package.json
@@ -2,7 +2,7 @@
"name": "opencode",
"displayName": "opencode",
"description": "opencode for VS Code",
- "version": "1.2.21",
+ "version": "1.2.22",
"publisher": "sst-dev",
"repository": {
"type": "git",
From 7d7837e5b6eb0fc88d202936b726ab890f4add53 Mon Sep 17 00:00:00 2001
From: Dax Raad
Date: Sun, 8 Mar 2026 19:27:15 -0400
Subject: [PATCH 098/101] disable fallback to free nano for small model
---
packages/opencode/src/provider/provider.ts | 6 ------
1 file changed, 6 deletions(-)
diff --git a/packages/opencode/src/provider/provider.ts b/packages/opencode/src/provider/provider.ts
index b4836ae047..6d5c9d1ad3 100644
--- a/packages/opencode/src/provider/provider.ts
+++ b/packages/opencode/src/provider/provider.ts
@@ -1288,12 +1288,6 @@ export namespace Provider {
}
}
- // Check if opencode provider is available before using it
- const opencodeProvider = await state().then((state) => state.providers["opencode"])
- if (opencodeProvider && opencodeProvider.models["gpt-5-nano"]) {
- return getModel("opencode", "gpt-5-nano")
- }
-
return undefined
}
From b976f339e857be3fae20f179992aa82fbea24f08 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:28:58 -0500
Subject: [PATCH 099/101] feat(app): generate color palettes (#16232)
---
.../app/e2e/projects/projects-close.spec.ts | 24 +-
packages/app/e2e/settings/settings.spec.ts | 15 +-
packages/app/public/oc-theme-preload.js | 7 +-
packages/app/src/components/terminal.tsx | 2 +-
packages/ui/src/styles/theme.css | 820 +++++++++---------
packages/ui/src/theme/color.ts | 80 +-
packages/ui/src/theme/context.tsx | 6 +-
packages/ui/src/theme/default-themes.ts | 2 +-
.../ui/src/theme/desktop-theme.schema.json | 67 +-
packages/ui/src/theme/index.ts | 4 +
packages/ui/src/theme/loader.ts | 2 +-
packages/ui/src/theme/resolve.ts | 660 +++++++++++---
packages/ui/src/theme/themes/aura.json | 108 +--
packages/ui/src/theme/themes/ayu.json | 110 +--
packages/ui/src/theme/themes/carbonfox.json | 97 +--
packages/ui/src/theme/themes/catppuccin.json | 110 +--
packages/ui/src/theme/themes/dracula.json | 112 +--
packages/ui/src/theme/themes/gruvbox.json | 111 +--
packages/ui/src/theme/themes/monokai.json | 112 +--
packages/ui/src/theme/themes/nightowl.json | 109 +--
packages/ui/src/theme/themes/nord.json | 109 +--
packages/ui/src/theme/themes/oc-1.json | 504 +----------
packages/ui/src/theme/themes/oc-2.json | 495 +----------
packages/ui/src/theme/themes/onedarkpro.json | 110 +--
.../ui/src/theme/themes/shadesofpurple.json | 108 +--
packages/ui/src/theme/themes/solarized.json | 110 +--
packages/ui/src/theme/themes/tokyonight.json | 132 +--
packages/ui/src/theme/themes/vesper.json | 109 +--
packages/ui/src/theme/types.ts | 21 +-
29 files changed, 1268 insertions(+), 2988 deletions(-)
diff --git a/packages/app/e2e/projects/projects-close.spec.ts b/packages/app/e2e/projects/projects-close.spec.ts
index 76b1487e9e..9454d683f0 100644
--- a/packages/app/e2e/projects/projects-close.spec.ts
+++ b/packages/app/e2e/projects/projects-close.spec.ts
@@ -25,16 +25,26 @@ test("closing active project navigates to another open project", async ({ page,
await clickMenuItem(menu, /^Close$/i, { force: true })
await expect
- .poll(() => {
- const pathname = new URL(page.url()).pathname
- if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
- if (pathname === "/") return "home"
- return ""
- })
+ .poll(
+ () => {
+ const pathname = new URL(page.url()).pathname
+ if (new RegExp(`^/${slug}/session(?:/[^/]+)?/?$`).test(pathname)) return "project"
+ if (pathname === "/") return "home"
+ return ""
+ },
+ { timeout: 15_000 },
+ )
.toMatch(/^(project|home)$/)
await expect(page).not.toHaveURL(new RegExp(`/${otherSlug}/session(?:[/?#]|$)`))
- await expect(otherButton).toHaveCount(0)
+ await expect
+ .poll(
+ async () => {
+ return await page.locator(projectSwitchSelector(otherSlug)).count()
+ },
+ { timeout: 15_000 },
+ )
+ .toBe(0)
},
{ extra: [other] },
)
diff --git a/packages/app/e2e/settings/settings.spec.ts b/packages/app/e2e/settings/settings.spec.ts
index c2a8522eb0..42fe0b06c9 100644
--- a/packages/app/e2e/settings/settings.spec.ts
+++ b/packages/app/e2e/settings/settings.spec.ts
@@ -83,16 +83,23 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
const select = dialog.locator(settingsThemeSelector)
await expect(select).toBeVisible()
+ const currentThemeId = await page.evaluate(() => {
+ return document.documentElement.getAttribute("data-theme")
+ })
+ const currentTheme = (await select.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+
await select.locator('[data-slot="select-select-trigger"]').click()
const items = page.locator('[data-slot="select-select-item"]')
const count = await items.count()
expect(count).toBeGreaterThan(1)
- const firstTheme = await items.nth(1).locator('[data-slot="select-select-item-label"]').textContent()
- expect(firstTheme).toBeTruthy()
+ const nextTheme = (await items.locator('[data-slot="select-select-item-label"]').allTextContents())
+ .map((x) => x.trim())
+ .find((x) => x && x !== currentTheme)
+ expect(nextTheme).toBeTruthy()
- await items.nth(1).click()
+ await items.filter({ hasText: nextTheme! }).first().click()
await page.keyboard.press("Escape")
@@ -101,7 +108,7 @@ test("changing theme persists in localStorage", async ({ page, gotoSession }) =>
})
expect(storedThemeId).not.toBeNull()
- expect(storedThemeId).not.toBe("oc-1")
+ expect(storedThemeId).not.toBe(currentThemeId)
const dataTheme = await page.evaluate(() => {
return document.documentElement.getAttribute("data-theme")
diff --git a/packages/app/public/oc-theme-preload.js b/packages/app/public/oc-theme-preload.js
index f8c7104961..5851f756e5 100644
--- a/packages/app/public/oc-theme-preload.js
+++ b/packages/app/public/oc-theme-preload.js
@@ -1,6 +1,5 @@
;(function () {
- var themeId = localStorage.getItem("opencode-theme-id")
- if (!themeId) return
+ var themeId = localStorage.getItem("opencode-theme-id") || "oc-2"
var scheme = localStorage.getItem("opencode-color-scheme") || "system"
var isDark = scheme === "dark" || (scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches)
@@ -9,9 +8,9 @@
document.documentElement.dataset.theme = themeId
document.documentElement.dataset.colorScheme = mode
- if (themeId === "oc-1") return
+ if (themeId === "oc-2") return
- var css = localStorage.getItem("opencode-theme-css-" + themeId + "-" + mode)
+ var css = localStorage.getItem("opencode-theme-css-" + mode)
if (css) {
var style = document.createElement("style")
style.id = "oc-theme-preload"
diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index c27d6a977f..9e5f12ee4c 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -217,7 +217,7 @@ export const Terminal = (props: TerminalProps) => {
const currentTheme = theme.themes()[theme.themeId()]
if (!currentTheme) return fallback
const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
- if (!variant?.seeds) return fallback
+ if (!variant?.seeds && !variant?.palette) return fallback
const resolved = resolveThemeVariant(variant, mode === "dark")
const text = resolved["text-stronger"] ?? fallback.foreground
const background = resolved["background-stronger"] ?? fallback.background
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 2637b4a281..702d1e4e67 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -85,214 +85,218 @@
0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),
0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09);
- --shadow-sidebar-overlay:
- 0 100px 80px 0 rgba(0, 0, 0, 0.29), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.21),
- 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.17), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.14),
- 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.12), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.08);
color-scheme: light;
--text-mix-blend-mode: multiply;
- /* OC-1 fallback variables (light) */
- --background-base: #f8f7f7;
- --background-weak: var(--smoke-light-3);
- --background-strong: var(--smoke-light-1);
+ /* OC-2 fallback variables (light) */
+ --background-base: #f8f8f8;
+ --background-weak: #f3f3f3;
+ --background-strong: #fcfcfc;
--background-stronger: #fcfcfc;
- --surface-base: var(--smoke-light-alpha-2);
- --base: var(--smoke-light-alpha-2);
- --surface-base-hover: #0500000f;
- --surface-base-active: var(--smoke-light-alpha-3);
- --surface-base-interactive-active: var(--cobalt-light-alpha-3);
- --base2: var(--smoke-light-alpha-2);
- --base3: var(--smoke-light-alpha-2);
- --surface-inset-base: var(--smoke-light-alpha-2);
- --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-base-active: var(--smoke-light-alpha-3);
- --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-base: rgba(0, 0, 0, 0.031);
+ --base: rgba(0, 0, 0, 0.034);
+ --surface-base-hover: rgba(0, 0, 0, 0.059);
+ --surface-base-active: rgba(0, 0, 0, 0.051);
+ --surface-base-interactive-active: rgba(3, 76, 255, 0.09);
+ --base2: rgba(0, 0, 0, 0.034);
+ --base3: rgba(0, 0, 0, 0.034);
+ --surface-inset-base: rgba(0, 0, 0, 0.034);
+ --surface-inset-base-hover: rgba(0, 0, 0, 0.055);
+ --surface-inset-strong: rgba(0, 0, 0, 0.09);
+ --surface-inset-strong-hover: rgba(0, 0, 0, 0.09);
+ --surface-raised-base: rgba(0, 0, 0, 0.031);
+ --surface-float-base: #161616;
+ --surface-float-base-hover: #1c1c1c;
+ --surface-raised-base-hover: rgba(0, 0, 0, 0.051);
+ --surface-raised-base-active: rgba(0, 0, 0, 0.09);
+ --surface-raised-strong: #fcfcfc;
+ --surface-raised-strong-hover: #ffffff;
+ --surface-raised-stronger: #ffffff;
+ --surface-raised-stronger-hover: #ffffff;
+ --surface-weak: rgba(0, 0, 0, 0.051);
+ --surface-weaker: rgba(0, 0, 0, 0.071);
--surface-strong: #ffffff;
--surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
- --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: #e5f0ff;
- --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-raised-stronger-non-alpha: #ffffff;
+ --surface-brand-base: #dcde8d;
+ --surface-brand-hover: #d0d283;
+ --surface-interactive-base: #ecf3ff;
+ --surface-interactive-hover: #e0eaff;
+ --surface-interactive-weak: #f7faff;
+ --surface-interactive-weak-hover: #ecf3ff;
+ --surface-success-base: #dbfed7;
+ --surface-success-weak: #f0feee;
+ --surface-success-strong: #12c905;
+ --surface-warning-base: #fcf3cb;
+ --surface-warning-weak: #fdfaec;
+ --surface-warning-strong: #fbdd46;
+ --surface-critical-base: #feefeb;
+ --surface-critical-weak: #fff8f6;
+ --surface-critical-strong: #fc533a;
+ --surface-info-base: #fdecfe;
+ --surface-info-weak: #fef7ff;
+ --surface-info-strong: #a753ae;
--surface-diff-unchanged-base: #ffffff00;
- --surface-diff-skip-base: var(--smoke-light-2);
- --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: #dafbe0;
- --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);
- --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-base: var(--smoke-light-11);
- --text-weak: var(--smoke-light-9);
- --text-weaker: var(--smoke-light-8);
- --text-strong: var(--smoke-light-12);
- --text-invert-base: var(--smoke-dark-alpha-11);
- --text-invert-weak: var(--smoke-dark-alpha-9);
- --text-invert-weaker: var(--smoke-dark-alpha-8);
- --text-invert-strong: var(--smoke-dark-alpha-12);
- --text-interactive-base: var(--cobalt-light-9);
- --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(--apple-light-10);
- --text-on-critical-base: var(--ember-light-10);
- --text-on-critical-weak: var(--ember-light-8);
- --text-on-critical-strong: var(--ember-light-12);
- --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-10);
- --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(--apple-light-6);
- --text-on-success-strong: var(--apple-light-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-primary-base: var(--smoke-light-12);
- --button-secondary-base: #fdfcfc;
- --button-secondary-hover: #faf9f9;
- --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-5);
- --border-weak-disabled: var(--smoke-light-alpha-6);
- --border-weak-focus: var(--smoke-light-alpha-7);
- --border-weaker-base: var(--smoke-light-alpha-3);
- --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);
+ --surface-diff-skip-base: #f8f8f8;
+ --surface-diff-hidden-base: #eaf4ff;
+ --surface-diff-hidden-weak: #f6faff;
+ --surface-diff-hidden-weaker: #fbfdff;
+ --surface-diff-hidden-strong: #cae3ff;
+ --surface-diff-hidden-stronger: #2090f5;
+ --surface-diff-add-base: #e3fae1;
+ --surface-diff-add-weak: #f4fcf3;
+ --surface-diff-add-weaker: #fbfefb;
+ --surface-diff-add-strong: #c2eebf;
+ --surface-diff-add-stronger: #9ff29a;
+ --surface-diff-delete-base: #feefeb;
+ --surface-diff-delete-weak: #fff8f6;
+ --surface-diff-delete-weaker: #fffcfb;
+ --surface-diff-delete-strong: #fdc3b7;
+ --surface-diff-delete-stronger: #fc533a;
+ --input-base: #fcfcfc;
+ --input-hover: #f8f8f8;
+ --input-active: #fcfdff;
+ --input-selected: #e0eaff;
+ --input-focus: #fcfdff;
+ --input-disabled: #ededed;
+ --text-base: #6f6f6f;
+ --text-weak: #8f8f8f;
+ --text-weaker: #c7c7c7;
+ --text-strong: #171717;
+ --text-invert-base: #f8f8f8;
+ --text-invert-weak: #f3f3f3;
+ --text-invert-weaker: #ededed;
+ --text-invert-strong: #fcfcfc;
+ --text-interactive-base: #034cff;
+ --text-on-brand-base: rgba(0, 0, 0, 0.574);
+ --text-on-interactive-base: #fcfcfc;
+ --text-on-interactive-weak: rgba(0, 0, 0, 0.574);
+ --text-on-success-base: #2dba26;
+ --text-on-critical-base: #ed4831;
+ --text-on-critical-weak: #fe806a;
+ --text-on-critical-strong: #601a0f;
+ --text-on-warning-base: rgba(0, 0, 0, 0.574);
+ --text-on-info-base: rgba(0, 0, 0, 0.574);
+ --text-diff-add-base: #3a8437;
+ --text-diff-delete-base: #ed4831;
+ --text-diff-delete-strong: #601a0f;
+ --text-diff-add-strong: #1d3e1c;
+ --text-on-info-weak: rgba(0, 0, 0, 0.453);
+ --text-on-info-strong: rgba(0, 0, 0, 0.915);
+ --text-on-warning-weak: rgba(0, 0, 0, 0.453);
+ --text-on-warning-strong: rgba(0, 0, 0, 0.915);
+ --text-on-success-weak: #96ec8e;
+ --text-on-success-strong: #044202;
+ --text-on-brand-weak: rgba(0, 0, 0, 0.453);
+ --text-on-brand-weaker: rgba(0, 0, 0, 0.232);
+ --text-on-brand-strong: rgba(0, 0, 0, 0.915);
+ --button-primary-base: #171717;
+ --button-secondary-base: #fcfcfc;
+ --button-secondary-hover: #f8f8f8;
+ --button-ghost-hover: rgba(0, 0, 0, 0.031);
+ --button-ghost-hover2: rgba(0, 0, 0, 0.051);
+ --border-base: rgba(0, 0, 0, 0.162);
+ --border-hover: rgba(0, 0, 0, 0.236);
+ --border-active: rgba(0, 0, 0, 0.46);
+ --border-selected: rgba(3, 76, 255, 0.99);
+ --border-disabled: rgba(0, 0, 0, 0.236);
+ --border-focus: rgba(0, 0, 0, 0.46);
+ --border-weak-base: #e5e5e5;
+ --border-strong-base: rgba(0, 0, 0, 0.151);
+ --border-strong-hover: rgba(0, 0, 0, 0.232);
+ --border-strong-active: rgba(0, 0, 0, 0.151);
+ --border-strong-selected: rgba(3, 76, 255, 0.31);
+ --border-strong-disabled: rgba(0, 0, 0, 0.118);
+ --border-strong-focus: rgba(0, 0, 0, 0.151);
+ --border-weak-hover: rgba(0, 0, 0, 0.118);
+ --border-weak-active: rgba(0, 0, 0, 0.151);
+ --border-weak-selected: rgba(3, 76, 255, 0.24);
+ --border-weak-disabled: rgba(0, 0, 0, 0.118);
+ --border-weak-focus: rgba(0, 0, 0, 0.151);
+ --border-weaker-base: #f0f0f0;
+ --border-weaker-hover: rgba(0, 0, 0, 0.075);
+ --border-weaker-active: rgba(0, 0, 0, 0.118);
+ --border-weaker-selected: rgba(3, 76, 255, 0.16);
+ --border-weaker-disabled: rgba(0, 0, 0, 0.034);
+ --border-weaker-focus: rgba(0, 0, 0, 0.118);
+ --border-interactive-base: #a3c1fd;
+ --border-interactive-hover: #7ea9ff;
+ --border-interactive-active: #034cff;
+ --border-interactive-selected: #034cff;
+ --border-interactive-disabled: #c7c7c7;
+ --border-interactive-focus: #034cff;
+ --border-success-base: #96ec8e;
+ --border-success-hover: #7add71;
+ --border-success-selected: #12c905;
+ --border-warning-base: #e8d479;
+ --border-warning-hover: #d8c158;
+ --border-warning-selected: #fbdd46;
+ --border-critical-base: #fdc3b7;
+ --border-critical-hover: #ffa796;
+ --border-critical-selected: #fc533a;
+ --border-info-base: #f4bdf8;
+ --border-info-hover: #e6a8ea;
+ --border-info-selected: #a753ae;
+ --border-color: #ffffff;
+ --icon-base: #8f8f8f;
+ --icon-hover: #6f6f6f;
+ --icon-active: #171717;
+ --icon-selected: #171717;
+ --icon-disabled: #c7c7c7;
+ --icon-focus: #171717;
--icon-invert-base: #ffffff;
- --icon-weak-base: var(--smoke-light-7);
- --icon-weak-hover: var(--smoke-light-8);
- --icon-weak-active: var(--smoke-light-9);
- --icon-weak-selected: var(--smoke-light-10);
- --icon-weak-disabled: var(--smoke-light-6);
- --icon-weak-focus: var(--smoke-light-9);
- --icon-strong-base: var(--smoke-light-12);
+ --icon-weak-base: #dbdbdb;
+ --icon-weak-hover: #c7c7c7;
+ --icon-weak-active: #8f8f8f;
+ --icon-weak-selected: #858585;
+ --icon-weak-disabled: #e2e2e2;
+ --icon-weak-focus: #8f8f8f;
+ --icon-strong-base: #171717;
--icon-strong-hover: #151313;
--icon-strong-active: #020202;
--icon-strong-selected: #020202;
- --icon-strong-disabled: var(--smoke-light-8);
+ --icon-strong-disabled: #c7c7c7;
--icon-strong-focus: #020202;
- --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-9);
- --icon-warning-hover: var(--amber-light-8);
- --icon-warning-active: var(--amber-light-11);
- --icon-critical-base: var(--ember-light-10);
- --icon-critical-hover: var(--ember-light-11);
- --icon-critical-active: var(--ember-light-12);
- --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(--cobalt-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-10);
- --icon-diff-delete-hover: var(--ember-light-11);
+ --icon-brand-base: #171717;
+ --icon-interactive-base: #034cff;
+ --icon-success-base: #7add71;
+ --icon-success-hover: #4cc944;
+ --icon-success-active: #078901;
+ --icon-warning-base: #ebb76e;
+ --icon-warning-hover: #da9e40;
+ --icon-warning-active: #95671b;
+ --icon-critical-base: #ed4831;
+ --icon-critical-hover: #ca2d17;
+ --icon-critical-active: #601a0f;
+ --icon-info-base: #e6a8ea;
+ --icon-info-hover: #d58cda;
+ --icon-info-active: #9b4da1;
+ --icon-on-brand-base: rgba(0, 0, 0, 0.574);
+ --icon-on-brand-hover: rgba(0, 0, 0, 0.915);
+ --icon-on-brand-selected: rgba(0, 0, 0, 0.915);
+ --icon-on-interactive-base: #fcfcfc;
+ --icon-agent-plan-base: #a753ae;
+ --icon-agent-docs-base: #fcb239;
+ --icon-agent-ask-base: #2090f5;
+ --icon-agent-build-base: #034cff;
+ --icon-on-success-base: rgba(18, 201, 5, 0.9);
+ --icon-on-success-hover: rgba(45, 186, 38, 0.9);
+ --icon-on-success-selected: rgba(7, 137, 1, 0.9);
+ --icon-on-warning-base: rgba(252, 178, 57, 0.9);
+ --icon-on-warning-hover: rgba(239, 167, 46, 0.9);
+ --icon-on-warning-selected: rgba(149, 103, 27, 0.9);
+ --icon-on-critical-base: rgba(252, 83, 58, 0.9);
+ --icon-on-critical-hover: rgba(237, 72, 49, 0.9);
+ --icon-on-critical-selected: rgba(202, 45, 23, 0.9);
+ --icon-on-info-base: #a753ae;
+ --icon-on-info-hover: rgba(155, 73, 162, 0.9);
+ --icon-on-info-selected: rgba(155, 77, 161, 0.9);
+ --icon-diff-add-base: #3a8437;
+ --icon-diff-add-hover: #1d3e1c;
+ --icon-diff-add-active: #1d3e1c;
+ --icon-diff-delete-base: #ed4831;
+ --icon-diff-delete-hover: #ca2d17;
--icon-diff-modified-base: #ff8c00;
--syntax-comment: var(--text-weak);
--syntax-regexp: var(--text-base);
@@ -306,12 +310,12 @@
--syntax-constant: #007b80;
--syntax-punctuation: var(--text-base);
--syntax-object: var(--text-strong);
- --syntax-success: var(--apple-light-10);
- --syntax-warning: var(--amber-light-10);
- --syntax-critical: var(--ember-light-10);
+ --syntax-success: #2dba26;
+ --syntax-warning: #efa72e;
+ --syntax-critical: #ed4831;
--syntax-info: #0092a8;
- --syntax-diff-add: var(--mint-light-11);
- --syntax-diff-delete: var(--ember-light-11);
+ --syntax-diff-add: #3a8437;
+ --syntax-diff-delete: #ca2d17;
--syntax-diff-unknown: #ff0000;
--markdown-heading: #d68c27;
--markdown-text: #1a1a1a;
@@ -327,9 +331,6 @@
--markdown-image: #3b7dd8;
--markdown-image-text: #318795;
--markdown-code-block: #1a1a1a;
- --border-color: #ffffff;
- --button-ghost-hover: var(--smoke-light-alpha-2);
- --button-ghost-hover2: var(--smoke-light-alpha-3);
--avatar-background-pink: #feeef8;
--avatar-background-mint: #e1fbf4;
--avatar-background-orange: #fff1e7;
@@ -342,210 +343,220 @@
--avatar-text-purple: #8445bc;
--avatar-text-cyan: #0894b3;
--avatar-text-lime: #5d770d;
+ --text-stronger: #171717;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
--text-mix-blend-mode: plus-lighter;
- /* OC-1 fallback variables (dark) */
- --background-base: var(--smoke-dark-1);
- --background-weak: #1c1717;
- --background-strong: #151313;
- --background-stronger: #191515;
- --surface-base: var(--smoke-dark-alpha-2);
- --base: var(--smoke-dark-alpha-2);
- --surface-base-hover: #e0b7b716;
- --surface-base-active: var(--smoke-dark-alpha-3);
- --surface-base-interactive-active: var(--cobalt-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-base-active: var(--smoke-dark-alpha-5);
- --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-4);
- --surface-weaker: var(--smoke-dark-alpha-5);
- --surface-strong: var(--smoke-dark-alpha-7);
+ /* OC-2 fallback variables (dark) */
+ --background-base: #101010;
+ --background-weak: #1e1e1e;
+ --background-strong: #121212;
+ --background-stronger: #151515;
+ --surface-base: rgba(255, 255, 255, 0.031);
+ --base: rgba(255, 255, 255, 0.034);
+ --surface-base-hover: rgba(255, 255, 255, 0.039);
+ --surface-base-active: rgba(255, 255, 255, 0.059);
+ --surface-base-interactive-active: rgba(3, 76, 255, 0.125);
+ --base2: rgba(255, 255, 255, 0.034);
+ --base3: rgba(255, 255, 255, 0.034);
+ --surface-inset-base: rgba(0, 0, 0, 0.5);
+ --surface-inset-base-hover: rgba(0, 0, 0, 0.5);
+ --surface-inset-strong: rgba(0, 0, 0, 0.8);
+ --surface-inset-strong-hover: rgba(0, 0, 0, 0.8);
+ --surface-raised-base: rgba(255, 255, 255, 0.059);
+ --surface-float-base: #161616;
+ --surface-float-base-hover: #1c1c1c;
+ --surface-raised-base-hover: rgba(255, 255, 255, 0.078);
+ --surface-raised-base-active: rgba(255, 255, 255, 0.102);
+ --surface-raised-strong: rgba(255, 255, 255, 0.078);
+ --surface-raised-strong-hover: rgba(255, 255, 255, 0.129);
+ --surface-raised-stronger: rgba(255, 255, 255, 0.129);
+ --surface-raised-stronger-hover: rgba(255, 255, 255, 0.169);
+ --surface-weak: rgba(255, 255, 255, 0.078);
+ --surface-weaker: rgba(255, 255, 255, 0.102);
+ --surface-strong: rgba(255, 255, 255, 0.169);
--surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
- --surface-raised-stronger-non-alpha: var(--smoke-dark-3);
- --surface-brand-base: var(--yuzu-light-9);
- --surface-brand-hover: var(--yuzu-light-10);
- --surface-interactive-base: var(--cobalt-dark-3);
- --surface-interactive-hover: #0a1d4d;
- --surface-interactive-weak: var(--cobalt-dark-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-dark-3);
- --surface-critical-weak: var(--ember-dark-2);
- --surface-critical-strong: var(--ember-dark-9);
- --surface-info-base: var(--lilac-light-3);
- --surface-info-weak: var(--lilac-light-2);
- --surface-info-strong: var(--lilac-light-9);
- --surface-diff-unchanged-base: var(--smoke-dark-1);
- --surface-diff-skip-base: var(--smoke-dark-alpha-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);
- --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-base: var(--smoke-dark-alpha-11);
- --text-weak: var(--smoke-dark-alpha-9);
- --text-weaker: var(--smoke-dark-alpha-8);
- --text-strong: var(--smoke-dark-alpha-12);
- --text-invert-base: var(--smoke-dark-alpha-11);
- --text-invert-weak: var(--smoke-dark-alpha-9);
- --text-invert-weaker: var(--smoke-dark-alpha-8);
- --text-invert-strong: var(--smoke-dark-alpha-12);
- --text-interactive-base: var(--cobalt-dark-11);
- --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(--apple-dark-9);
- --text-on-critical-base: var(--ember-dark-9);
- --text-on-critical-weak: var(--ember-dark-8);
- --text-on-critical-strong: var(--ember-dark-12);
- --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(--apple-dark-8);
- --text-on-success-strong: var(--apple-dark-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-primary-base: var(--smoke-dark-12);
- --button-secondary-base: #231f1f;
- --button-secondary-hover: #2a2727;
- --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-11);
- --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-dark-5);
- --border-critical-hover: var(--ember-dark-7);
- --border-critical-selected: var(--ember-dark-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-invert-base: var(--smoke-dark-1);
- --icon-weak-base: var(--smoke-dark-6);
- --icon-weak-hover: var(--smoke-light-7);
- --icon-weak-active: var(--smoke-light-8);
- --icon-weak-selected: var(--smoke-light-9);
- --icon-weak-disabled: var(--smoke-light-4);
- --icon-weak-focus: var(--smoke-light-9);
- --icon-strong-base: var(--smoke-dark-12);
+ --surface-raised-stronger-non-alpha: #1c1c1c;
+ --surface-brand-base: #fab283;
+ --surface-brand-hover: #eda779;
+ --surface-interactive-base: #091f52;
+ --surface-interactive-hover: #091f52;
+ --surface-interactive-weak: #0b1730;
+ --surface-interactive-weak-hover: #ecf3ff;
+ --surface-success-base: #062d04;
+ --surface-success-weak: #0a1e08;
+ --surface-success-strong: #12c905;
+ --surface-warning-base: #fdf3cf;
+ --surface-warning-weak: #fdfaed;
+ --surface-warning-strong: #fcd53a;
+ --surface-critical-base: #42120b;
+ --surface-critical-weak: #28110c;
+ --surface-critical-strong: #fc533a;
+ --surface-info-base: #feecfe;
+ --surface-info-weak: #fdf7fe;
+ --surface-info-strong: #edb2f1;
+ --surface-diff-unchanged-base: #161616;
+ --surface-diff-skip-base: #00000000;
+ --surface-diff-hidden-base: #0c1928;
+ --surface-diff-hidden-weak: #09131d;
+ --surface-diff-hidden-weaker: #082542;
+ --surface-diff-hidden-strong: #073966;
+ --surface-diff-hidden-stronger: #8ec2fc;
+ --surface-diff-add-base: #1a2919;
+ --surface-diff-add-weak: #1f351e;
+ --surface-diff-add-weaker: #1a2919;
+ --surface-diff-add-strong: #264024;
+ --surface-diff-add-stronger: #9bcd97;
+ --surface-diff-delete-base: #42120b;
+ --surface-diff-delete-weak: #580f06;
+ --surface-diff-delete-weaker: #42120b;
+ --surface-diff-delete-strong: #6a1206;
+ --surface-diff-delete-stronger: #faa494;
+ --input-base: #1c1c1c;
+ --input-hover: #1c1c1c;
+ --input-active: #091123;
+ --input-selected: #0b1730;
+ --input-focus: #091123;
+ --input-disabled: #282828;
+ --text-base: rgba(255, 255, 255, 0.618);
+ --text-weak: rgba(255, 255, 255, 0.422);
+ --text-weaker: rgba(255, 255, 255, 0.284);
+ --text-strong: rgba(255, 255, 255, 0.936);
+ --text-invert-base: #a0a0a0;
+ --text-invert-weak: #707070;
+ --text-invert-weaker: #505050;
+ --text-invert-strong: #ededed;
+ --text-interactive-base: #9dbefe;
+ --text-on-brand-base: rgba(255, 255, 255, 0.603);
+ --text-on-interactive-base: #ededed;
+ --text-on-interactive-weak: rgba(255, 255, 255, 0.603);
+ --text-on-success-base: #12c905;
+ --text-on-critical-base: #fc533a;
+ --text-on-critical-weak: #b72d1a;
+ --text-on-critical-strong: #ffe0da;
+ --text-on-warning-base: rgba(255, 255, 255, 0.603);
+ --text-on-info-base: rgba(255, 255, 255, 0.603);
+ --text-diff-add-base: #9bcd97;
+ --text-diff-delete-base: #fc533a;
+ --text-diff-delete-strong: #ffe0da;
+ --text-diff-add-strong: #4a7348;
+ --text-on-info-weak: rgba(255, 255, 255, 0.404);
+ --text-on-info-strong: rgba(255, 255, 255, 0.928);
+ --text-on-warning-weak: rgba(255, 255, 255, 0.404);
+ --text-on-warning-strong: rgba(255, 255, 255, 0.928);
+ --text-on-success-weak: #127d0d;
+ --text-on-success-strong: #bafdb3;
+ --text-on-brand-weak: rgba(255, 255, 255, 0.404);
+ --text-on-brand-weaker: rgba(255, 255, 255, 0.266);
+ --text-on-brand-strong: rgba(255, 255, 255, 0.928);
+ --button-primary-base: #ededed;
+ --button-secondary-base: #1c1c1c;
+ --button-secondary-hover: rgba(255, 255, 255, 0.039);
+ --button-ghost-hover: rgba(255, 255, 255, 0.031);
+ --button-ghost-hover2: rgba(255, 255, 255, 0.059);
+ --border-base: rgba(255, 255, 255, 0.195);
+ --border-hover: rgba(255, 255, 255, 0.284);
+ --border-active: rgba(255, 255, 255, 0.418);
+ --border-selected: #9dbefe;
+ --border-disabled: rgba(255, 255, 255, 0.284);
+ --border-focus: rgba(255, 255, 255, 0.418);
+ --border-weak-base: #282828;
+ --border-strong-base: rgba(255, 255, 255, 0.266);
+ --border-strong-hover: rgba(255, 255, 255, 0.266);
+ --border-strong-active: rgba(255, 255, 255, 0.266);
+ --border-strong-selected: rgba(3, 76, 255, 0.62);
+ --border-strong-disabled: rgba(255, 255, 255, 0.138);
+ --border-strong-focus: rgba(255, 255, 255, 0.266);
+ --border-weak-hover: rgba(255, 255, 255, 0.181);
+ --border-weak-active: rgba(255, 255, 255, 0.266);
+ --border-weak-selected: rgba(3, 76, 255, 0.62);
+ --border-weak-disabled: rgba(255, 255, 255, 0.138);
+ --border-weak-focus: rgba(255, 255, 255, 0.266);
+ --border-weaker-base: #202020;
+ --border-weaker-hover: rgba(255, 255, 255, 0.084);
+ --border-weaker-active: rgba(255, 255, 255, 0.138);
+ --border-weaker-selected: rgba(3, 76, 255, 0.32);
+ --border-weaker-disabled: rgba(255, 255, 255, 0.034);
+ --border-weaker-focus: rgba(255, 255, 255, 0.138);
+ --border-interactive-base: #a3c1fd;
+ --border-interactive-hover: #7ea9ff;
+ --border-interactive-active: #034cff;
+ --border-interactive-selected: #034cff;
+ --border-interactive-disabled: #505050;
+ --border-interactive-focus: #034cff;
+ --border-success-base: #96ec8e;
+ --border-success-hover: #7add71;
+ --border-success-selected: #12c905;
+ --border-warning-base: #e9d282;
+ --border-warning-hover: #dac063;
+ --border-warning-selected: #fcd53a;
+ --border-critical-base: #6a1206;
+ --border-critical-hover: #952414;
+ --border-critical-selected: #fc533a;
+ --border-info-base: #eac5ec;
+ --border-info-hover: #dab1dd;
+ --border-info-selected: #edb2f1;
+ --border-color: #ffffff;
+ --icon-base: #7e7e7e;
+ --icon-hover: #a0a0a0;
+ --icon-active: #ededed;
+ --icon-selected: #ededed;
+ --icon-disabled: #3e3e3e;
+ --icon-focus: #ededed;
+ --icon-invert-base: #161616;
+ --icon-weak-base: #343434;
+ --icon-weak-hover: #d9d9d9;
+ --icon-weak-active: #c8c8c8;
+ --icon-weak-selected: #707070;
+ --icon-weak-disabled: #ededed;
+ --icon-weak-focus: #707070;
+ --icon-strong-base: #ededed;
--icon-strong-hover: #f6f3f3;
--icon-strong-active: #fcfcfc;
--icon-strong-selected: #fdfcfc;
- --icon-strong-disabled: var(--smoke-dark-8);
+ --icon-strong-disabled: #3e3e3e;
--icon-strong-focus: #fdfcfc;
- --icon-brand-base: var(--white);
- --icon-interactive-base: var(--cobalt-dark-11);
- --icon-success-base: var(--apple-dark-7);
- --icon-success-hover: var(--apple-dark-8);
- --icon-success-active: var(--apple-dark-11);
- --icon-warning-base: var(--amber-dark-9);
- --icon-warning-hover: var(--amber-dark-8);
- --icon-warning-active: var(--amber-dark-11);
- --icon-critical-base: var(--ember-dark-9);
- --icon-critical-hover: var(--ember-dark-11);
- --icon-critical-active: var(--ember-dark-12);
- --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(--cobalt-dark-11);
- --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-brand-base: #ffffff;
+ --icon-interactive-base: #034cff;
+ --icon-success-base: #12c905;
+ --icon-success-hover: #35c02d;
+ --icon-success-active: #4de144;
+ --icon-warning-base: #fbb73c;
+ --icon-warning-hover: #885e08;
+ --icon-warning-active: #f1b13f;
+ --icon-critical-base: #fc533a;
+ --icon-critical-hover: #faa494;
+ --icon-critical-active: #ffe0da;
+ --icon-info-base: #68446b;
+ --icon-info-hover: #815484;
+ --icon-info-active: #dfa7e3;
+ --icon-on-brand-base: rgba(255, 255, 255, 0.603);
+ --icon-on-brand-hover: rgba(255, 255, 255, 0.928);
+ --icon-on-brand-selected: rgba(255, 255, 255, 0.928);
+ --icon-on-interactive-base: #ededed;
+ --icon-agent-plan-base: #edb2f1;
+ --icon-agent-docs-base: #fbb73c;
+ --icon-agent-ask-base: #2090f5;
+ --icon-agent-build-base: #9dbefe;
+ --icon-on-success-base: rgba(18, 201, 5, 0.9);
+ --icon-on-success-hover: rgba(53, 192, 45, 0.9);
+ --icon-on-success-selected: rgba(77, 225, 68, 0.9);
+ --icon-on-warning-base: rgba(251, 183, 60, 0.9);
+ --icon-on-warning-hover: rgba(245, 178, 56, 0.9);
+ --icon-on-warning-selected: rgba(241, 177, 63, 0.9);
+ --icon-on-critical-base: rgba(252, 83, 58, 0.9);
+ --icon-on-critical-hover: rgba(245, 79, 54, 0.9);
+ --icon-on-critical-selected: rgba(250, 164, 148, 0.9);
+ --icon-on-info-base: #edb2f1;
+ --icon-on-info-hover: rgba(231, 173, 235, 0.9);
+ --icon-on-info-selected: rgba(223, 167, 227, 0.9);
+ --icon-diff-add-base: #9bcd97;
+ --icon-diff-add-hover: #c3f9bf;
+ --icon-diff-add-active: #9bcd97;
+ --icon-diff-delete-base: #fc533a;
+ --icon-diff-delete-hover: #f54f36;
--icon-diff-modified-base: #ffba92;
--syntax-comment: var(--text-weak);
--syntax-regexp: var(--text-base);
@@ -559,12 +570,12 @@
--syntax-constant: #93e9f6;
--syntax-punctuation: var(--text-weak);
--syntax-object: var(--text-strong);
- --syntax-success: var(--apple-dark-10);
- --syntax-warning: var(--amber-dark-10);
- --syntax-critical: var(--ember-dark-10);
+ --syntax-success: #35c02d;
+ --syntax-warning: #f5b238;
+ --syntax-critical: #f54f36;
--syntax-info: #93e9f6;
- --syntax-diff-add: var(--mint-dark-11);
- --syntax-diff-delete: var(--ember-dark-11);
+ --syntax-diff-add: #9bcd97;
+ --syntax-diff-delete: #faa494;
--syntax-diff-unknown: #ff0000;
--markdown-heading: #9d7cd8;
--markdown-text: #eeeeee;
@@ -580,10 +591,6 @@
--markdown-image: #fab283;
--markdown-image-text: #56b6c2;
--markdown-code-block: #eeeeee;
- --border-color: #ffffff;
- --border-weaker-base: var(--smoke-dark-alpha-2);
- --button-ghost-hover: var(--smoke-dark-alpha-2);
- --button-ghost-hover2: var(--smoke-dark-alpha-3);
--avatar-background-pink: #501b3f;
--avatar-background-mint: #033a34;
--avatar-background-orange: #5f2a06;
@@ -596,5 +603,6 @@
--avatar-text-purple: #9d5bd2;
--avatar-text-cyan: #369eff;
--avatar-text-lime: #c4f042;
+ --text-stronger: rgba(255, 255, 255, 0.936);
}
}
diff --git a/packages/ui/src/theme/color.ts b/packages/ui/src/theme/color.ts
index f0e15211e9..89d9a653d7 100644
--- a/packages/ui/src/theme/color.ts
+++ b/packages/ui/src/theme/color.ts
@@ -1,16 +1,25 @@
import type { HexColor, OklchColor } from "./types"
+function clamp(v: number, min: number, max: number) {
+ return Math.max(min, Math.min(max, v))
+}
+
+function hue(v: number) {
+ return ((v % 360) + 360) % 360
+}
+
export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
const h = hex.replace("#", "")
const full =
- h.length === 3
+ h.length === 3 || h.length === 4
? h
.split("")
.map((c) => c + c)
.join("")
: h
+ const rgb = full.length === 8 ? full.slice(0, 6) : full
- const num = parseInt(full, 16)
+ const num = parseInt(rgb, 16)
return {
r: ((num >> 16) & 255) / 255,
g: ((num >> 8) & 255) / 255,
@@ -20,7 +29,7 @@ export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
export function rgbToHex(r: number, g: number, b: number): HexColor {
const toHex = (v: number) => {
- const clamped = Math.max(0, Math.min(1, v))
+ const clamped = clamp(v, 0, 1)
const int = Math.round(clamped * 255)
return int.toString(16).padStart(2, "0")
}
@@ -91,8 +100,33 @@ export function hexToOklch(hex: HexColor): OklchColor {
return rgbToOklch(r, g, b)
}
+export function fitOklch(oklch: OklchColor): OklchColor {
+ const base = {
+ l: clamp(oklch.l, 0, 1),
+ c: Math.max(0, oklch.c),
+ h: hue(oklch.h),
+ }
+
+ const rgb = oklchToRgb(base)
+ if (rgb.r >= 0 && rgb.r <= 1 && rgb.g >= 0 && rgb.g <= 1 && rgb.b >= 0 && rgb.b <= 1) {
+ return base
+ }
+
+ let c = base.c
+ for (let i = 0; i < 24; i++) {
+ c *= 0.9
+ const next = { ...base, c }
+ const out = oklchToRgb(next)
+ if (out.r >= 0 && out.r <= 1 && out.g >= 0 && out.g <= 1 && out.b >= 0 && out.b <= 1) {
+ return next
+ }
+ }
+
+ return { ...base, c: 0 }
+}
+
export function oklchToHex(oklch: OklchColor): HexColor {
- const { r, g, b } = oklchToRgb(oklch)
+ const { r, g, b } = oklchToRgb(fitOklch(oklch))
return rgbToHex(r, g, b)
}
@@ -101,12 +135,12 @@ export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
const scale: HexColor[] = []
const lightSteps = isDark
- ? [0.15, 0.18, 0.22, 0.26, 0.32, 0.38, 0.46, 0.56, base.l, base.l - 0.05, 0.75, 0.93]
- : [0.99, 0.97, 0.94, 0.9, 0.85, 0.79, 0.72, 0.64, base.l, base.l + 0.05, 0.45, 0.25]
+ ? [0.182, 0.21, 0.261, 0.302, 0.341, 0.387, 0.443, 0.514, base.l, Math.max(0, base.l - 0.017), 0.8, 0.93]
+ : [0.993, 0.983, 0.962, 0.936, 0.906, 0.866, 0.811, 0.74, base.l, Math.max(0, base.l - 0.036), 0.548, 0.33]
const chromaMultipliers = isDark
- ? [0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.85, 1, 1, 0.9, 0.6]
- : [0.1, 0.15, 0.25, 0.35, 0.45, 0.55, 0.7, 0.85, 1, 1, 0.95, 0.85]
+ ? [0.205, 0.275, 0.46, 0.62, 0.71, 0.79, 0.87, 0.97, 1.04, 1.03, 1, 0.58]
+ : [0.045, 0.128, 0.34, 0.5, 0.61, 0.69, 0.77, 0.89, 1, 1, 0.97, 0.56]
for (let i = 0; i < 12; i++) {
scale.push(
@@ -127,8 +161,8 @@ export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[
const neutralChroma = Math.min(base.c, 0.02)
const lightSteps = isDark
- ? [0.13, 0.16, 0.2, 0.24, 0.28, 0.33, 0.4, 0.52, 0.58, 0.66, 0.82, 0.96]
- : [0.995, 0.98, 0.96, 0.94, 0.91, 0.88, 0.84, 0.78, 0.62, 0.56, 0.46, 0.2]
+ ? [0.2, 0.226, 0.256, 0.277, 0.301, 0.325, 0.364, 0.431, base.l, 0.593, 0.706, 0.946]
+ : [0.991, 0.979, 0.964, 0.946, 0.931, 0.913, 0.891, 0.83, base.l, 0.617, 0.542, 0.205]
for (let i = 0; i < 12; i++) {
scale.push(
@@ -164,19 +198,39 @@ export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor
export function mixColors(color1: HexColor, color2: HexColor, amount: number): HexColor {
const c1 = hexToOklch(color1)
const c2 = hexToOklch(color2)
+ const delta = ((((c2.h - c1.h) % 360) + 540) % 360) - 180
return oklchToHex({
l: c1.l + (c2.l - c1.l) * amount,
c: c1.c + (c2.c - c1.c) * amount,
- h: c1.h + (c2.h - c1.h) * amount,
+ h: c1.h + delta * amount,
})
}
+export function shift(color: HexColor, value: { l?: number; c?: number; h?: number }): HexColor {
+ const base = hexToOklch(color)
+ return oklchToHex({
+ l: base.l + (value.l ?? 0),
+ c: base.c * (value.c ?? 1),
+ h: base.h + (value.h ?? 0),
+ })
+}
+
+export function blend(color: HexColor, background: HexColor, alpha: number): HexColor {
+ const fg = hexToRgb(color)
+ const bg = hexToRgb(background)
+ return rgbToHex(
+ fg.r * alpha + bg.r * (1 - alpha),
+ fg.g * alpha + bg.g * (1 - alpha),
+ fg.b * alpha + bg.b * (1 - alpha),
+ )
+}
+
export function lighten(color: HexColor, amount: number): HexColor {
const oklch = hexToOklch(color)
return oklchToHex({
...oklch,
- l: Math.min(1, oklch.l + amount),
+ l: clamp(oklch.l + amount, 0, 1),
})
}
@@ -184,7 +238,7 @@ export function darken(color: HexColor, amount: number): HexColor {
const oklch = hexToOklch(color)
return oklchToHex({
...oklch,
- l: Math.max(0, oklch.l - amount),
+ l: clamp(oklch.l - amount, 0, 1),
})
}
diff --git a/packages/ui/src/theme/context.tsx b/packages/ui/src/theme/context.tsx
index c1c1637d67..600c6121c3 100644
--- a/packages/ui/src/theme/context.tsx
+++ b/packages/ui/src/theme/context.tsx
@@ -35,7 +35,7 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
const tokens = resolveThemeVariant(variant, isDark)
const css = themeToCss(tokens)
- if (themeId !== "oc-1") {
+ if (themeId !== "oc-2") {
try {
localStorage.setItem(isDark ? STORAGE_KEYS.THEME_CSS_DARK : STORAGE_KEYS.THEME_CSS_LIGHT, css)
} catch {}
@@ -54,7 +54,7 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
}
function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
- if (themeId === "oc-1") return
+ if (themeId === "oc-2") return
for (const mode of ["light", "dark"] as const) {
const isDark = mode === "dark"
const variant = isDark ? theme.dark : theme.light
@@ -71,7 +71,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
init: (props: { defaultTheme?: string }) => {
const [store, setStore] = createStore({
themes: DEFAULT_THEMES as Record,
- themeId: props.defaultTheme ?? "oc-1",
+ themeId: props.defaultTheme ?? "oc-2",
colorScheme: "system" as ColorScheme,
mode: getSystemMode(),
previewThemeId: null as string | null,
diff --git a/packages/ui/src/theme/default-themes.ts b/packages/ui/src/theme/default-themes.ts
index 52b2b42eba..657d21c3cc 100644
--- a/packages/ui/src/theme/default-themes.ts
+++ b/packages/ui/src/theme/default-themes.ts
@@ -34,8 +34,8 @@ export const gruvboxTheme = gruvboxThemeJson as DesktopTheme
export const auraTheme = auraThemeJson as DesktopTheme
export const DEFAULT_THEMES: Record = {
- "oc-1": oc1Theme,
"oc-2": oc2Theme,
+ "oc-1": oc1Theme,
aura: auraTheme,
ayu: ayuTheme,
carbonfox: carbonfoxTheme,
diff --git a/packages/ui/src/theme/desktop-theme.schema.json b/packages/ui/src/theme/desktop-theme.schema.json
index b60a8f37ca..d4f1ffd21f 100644
--- a/packages/ui/src/theme/desktop-theme.schema.json
+++ b/packages/ui/src/theme/desktop-theme.schema.json
@@ -36,12 +36,13 @@
},
"ColorValue": {
"type": "string",
- "pattern": "^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|var\(--[a-z0-9-]+\))$",
+ "pattern": "^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|var\\(--[a-z0-9-]+\\))$",
"description": "Either a hex color value (#rgb/#rgba/#rrggbb/#rrggbbaa) or a CSS variable reference"
},
"ThemeSeedColors": {
"type": "object",
- "description": "The minimum set of colors needed to generate a theme",
+ "description": "The legacy semantic seed set used to generate a theme",
+ "additionalProperties": false,
"required": ["neutral", "primary", "success", "warning", "error", "info", "interactive", "diffAdd", "diffDelete"],
"properties": {
"neutral": {
@@ -82,14 +83,70 @@
}
}
},
+ "ThemePaletteColors": {
+ "type": "object",
+ "description": "A compact semantic palette used to derive the full theme programmatically",
+ "additionalProperties": false,
+ "required": ["neutral", "primary", "success", "warning", "error", "info"],
+ "properties": {
+ "neutral": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Base neutral color for generating the gray scale"
+ },
+ "ink": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Optional foreground or chrome color used to derive text and border tones"
+ },
+ "primary": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Primary brand color used for brand surfaces and strong emphasis"
+ },
+ "success": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Success state color"
+ },
+ "warning": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Warning state color"
+ },
+ "error": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Error or critical state color"
+ },
+ "info": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Informational state color"
+ },
+ "accent": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Optional extra expressive accent for syntax and rich content"
+ },
+ "interactive": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Optional dedicated interactive color; falls back to primary"
+ },
+ "diffAdd": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Optional diff-add seed; falls back to a softened success color"
+ },
+ "diffDelete": {
+ "$ref": "#/definitions/HexColor",
+ "description": "Optional diff-delete seed; falls back to error"
+ }
+ }
+ },
"ThemeVariant": {
"type": "object",
- "description": "A theme variant (light or dark) with seed colors and optional overrides",
- "required": ["seeds"],
+ "description": "A theme variant (light or dark) with either a compact palette or legacy seeds and optional overrides",
+ "oneOf": [{ "required": ["seeds"] }, { "required": ["palette"] }],
"properties": {
"seeds": {
"$ref": "#/definitions/ThemeSeedColors",
- "description": "Seed colors used to generate the full palette"
+ "description": "Legacy seed colors used to generate the full palette"
+ },
+ "palette": {
+ "$ref": "#/definitions/ThemePaletteColors",
+ "description": "Compact palette used to derive the full token set"
},
"overrides": {
"type": "object",
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
index d2c60179ec..1e6fb79324 100644
--- a/packages/ui/src/theme/index.ts
+++ b/packages/ui/src/theme/index.ts
@@ -1,5 +1,6 @@
export type {
DesktopTheme,
+ ThemePaletteColors,
ThemeSeedColors,
ThemeVariant,
HexColor,
@@ -19,7 +20,10 @@ export {
generateScale,
generateNeutralScale,
generateAlphaScale,
+ fitOklch,
+ blend,
mixColors,
+ shift,
lighten,
darken,
withAlpha,
diff --git a/packages/ui/src/theme/loader.ts b/packages/ui/src/theme/loader.ts
index 0f61076a00..4d48000daf 100644
--- a/packages/ui/src/theme/loader.ts
+++ b/packages/ui/src/theme/loader.ts
@@ -27,7 +27,7 @@ export function applyTheme(theme: DesktopTheme, themeId?: string): void {
}
function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: string): string {
- const isDefaultTheme = themeId === "oc-1"
+ const isDefaultTheme = themeId === "oc-2"
const lightCss = themeToCss(light)
const darkCss = themeToCss(dark)
diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts
index e8fca41036..722648dabc 100644
--- a/packages/ui/src/theme/resolve.ts
+++ b/packages/ui/src/theme/resolve.ts
@@ -1,27 +1,131 @@
import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
-import { generateNeutralScale, generateScale, hexToOklch, oklchToHex, withAlpha } from "./color"
+import { blend, generateNeutralScale, generateScale, hexToOklch, oklchToHex, shift, withAlpha } from "./color"
export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
- const { seeds, overrides = {} } = variant
+ const colors = getColors(variant)
+ const { overrides = {} } = variant
- const neutral = generateNeutralScale(seeds.neutral, isDark)
- const primary = generateScale(seeds.primary, isDark)
- const success = generateScale(seeds.success, isDark)
- const warning = generateScale(seeds.warning, isDark)
- const error = generateScale(seeds.error, isDark)
- const info = generateScale(seeds.info, isDark)
- const interactive = generateScale(seeds.interactive, isDark)
- const diffAdd = generateScale(seeds.diffAdd, isDark)
- const diffDelete = generateScale(seeds.diffDelete, isDark)
+ const neutral = generateNeutralScale(colors.neutral, isDark)
+ const primary = generateScale(colors.primary, isDark)
+ const accent = generateScale(colors.accent, isDark)
+ const success = generateScale(colors.success, isDark)
+ const warning = generateScale(colors.warning, isDark)
+ const error = generateScale(colors.error, isDark)
+ const info = generateScale(colors.info, isDark)
+ const interactive = generateScale(colors.interactive, isDark)
+ const hasInk = colors.compact && Boolean(colors.ink)
+ const noInk = colors.compact && !hasInk
+ const shadow = noInk && !isDark ? generateNeutralScale(colors.neutral, true) : neutral
+ const amber = generateScale(
+ shift(colors.warning, isDark ? { h: -16, l: -0.058, c: 1.14 } : { h: -22, l: -0.082, c: 0.94 }),
+ isDark,
+ )
+ const blue = generateScale(shift(colors.interactive, { h: -12, l: 0.128, c: 1.12 }), isDark)
+ const brandl = noInk && isDark ? generateScale(colors.primary, false) : primary
+ const successl = noInk && isDark ? generateScale(colors.success, false) : success
+ const warningl = noInk && isDark ? generateScale(colors.warning, false) : warning
+ const infol = noInk && isDark ? generateScale(colors.info, false) : info
+ const interl = noInk && isDark ? generateScale(colors.interactive, false) : interactive
+ const diffAdd = generateScale(
+ colors.diffAdd ??
+ (noInk
+ ? shift(colors.success, { c: isDark ? 0.54 : 0.6, l: isDark ? 0.22 : 0.16 })
+ : shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 })),
+ isDark,
+ )
+ const diffDelete = generateScale(
+ colors.diffDelete ??
+ (noInk ? colors.error : shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 })),
+ isDark,
+ )
+ const ink = colors.ink ?? colors.neutral
+ const backgroundOverride = overrides["background-base"]
+ const backgroundHex = getHex(backgroundOverride)
+ const overlay = noInk || (Boolean(backgroundOverride) && !backgroundHex)
+ const content = (seed: HexColor, scale: HexColor[]) => {
+ const value = isDark ? seed : hexToOklch(seed).l > 0.82 ? scale[10] : seed
+ return shift(value, { c: isDark ? 1.16 : 1.1 })
+ }
+ const modified = () => {
+ if (!colors.compact) return isDark ? "#ffba92" : "#FF8C00"
+ if (!hasInk) return isDark ? "#ffba92" : "#FF8C00"
+ const warningHue = hexToOklch(colors.warning).h
+ const deleteHue = hexToOklch(colors.diffDelete ?? colors.error).h
+ const delta = Math.abs(((((deleteHue - warningHue) % 360) + 540) % 360) - 180)
+ if (delta < 48) return isDark ? "#ffba92" : "#FF8C00"
+ return content(colors.warning, warning)
+ }
+ const surface = (
+ seed: HexColor,
+ alpha: { base: number; weak: number; weaker: number; strong: number; stronger: number },
+ ) => {
+ const base = alphaTone(seed, alpha.base)
+ return {
+ base,
+ weak: alphaTone(seed, alpha.weak),
+ weaker: alphaTone(seed, alpha.weaker),
+ strong: alphaTone(seed, alpha.strong),
+ stronger: alphaTone(seed, alpha.stronger),
+ }
+ }
+ const compactBackground =
+ colors.compact && !hasInk
+ ? isDark
+ ? {
+ base: shift(blend(colors.neutral, "#000000", 0.145), { c: 0 }),
+ weak: shift(blend(colors.neutral, "#000000", 0.27), { c: 0 }),
+ strong: shift(blend(colors.neutral, "#000000", 0.165), { c: 0 }),
+ stronger: shift(blend(colors.neutral, "#000000", 0.19), { c: 0 }),
+ }
+ : {
+ base: blend(colors.neutral, "#ffffff", 0.066),
+ weak: blend(colors.neutral, "#ffffff", 0.11),
+ strong: blend(colors.neutral, "#ffffff", 0.024),
+ stronger: blend(colors.neutral, "#ffffff", 0.024),
+ }
+ : undefined
+ const compactInkBackground =
+ colors.compact && hasInk && isDark
+ ? {
+ base: neutral[2],
+ weak: neutral[3],
+ strong: neutral[1],
+ stronger: neutral[2],
+ }
+ : undefined
- const neutralAlpha = generateNeutralAlphaScale(neutral, isDark)
+ const background = backgroundHex ?? compactInkBackground?.base ?? compactBackground?.base ?? neutral[0]
+ const alphaTone = (color: HexColor, alpha: number) =>
+ overlay ? (withAlpha(color, alpha) as ColorValue) : blend(color, background, alpha)
+ const borderTone = (light: number, dark: number) =>
+ alphaTone(
+ ink,
+ isDark ? Math.min(1, dark + 0.024 + (colors.compact && hasInk ? 0.08 : 0)) : Math.min(1, light + 0.024),
+ )
+ const diffHiddenSurface = noInk
+ ? {
+ base: blue[isDark ? 1 : 2],
+ weak: blue[isDark ? 0 : 1],
+ weaker: blue[isDark ? 2 : 0],
+ strong: blue[4],
+ stronger: blue[isDark ? 10 : 8],
+ }
+ : surface(
+ isDark ? shift(colors.interactive, { c: 0.55, l: 0 }) : shift(colors.interactive, { c: 0.45, l: 0.08 }),
+ isDark
+ ? { base: 0.14, weak: 0.08, weaker: 0.18, strong: 0.26, stronger: 0.42 }
+ : { base: 0.12, weak: 0.08, weaker: 0.16, strong: 0.24, stronger: 0.36 },
+ )
+
+ const neutralAlpha = noInk ? generateNeutralOverlayScale(neutral, isDark) : generateNeutralAlphaScale(neutral, isDark)
const tokens: ResolvedTheme = {}
- tokens["background-base"] = neutral[0]
- tokens["background-weak"] = neutral[2]
- tokens["background-strong"] = neutral[0]
- tokens["background-stronger"] = isDark ? neutral[1] : "#fcfcfc"
+ tokens["background-base"] = compactInkBackground?.base ?? compactBackground?.base ?? neutral[0]
+ tokens["background-weak"] = compactInkBackground?.weak ?? compactBackground?.weak ?? neutral[2]
+ tokens["background-strong"] = compactInkBackground?.strong ?? compactBackground?.strong ?? neutral[0]
+ tokens["background-stronger"] =
+ compactInkBackground?.stronger ?? compactBackground?.stronger ?? (isDark ? neutral[1] : "#fcfcfc")
tokens["surface-base"] = neutralAlpha[1]
tokens["base"] = neutralAlpha[1]
@@ -37,8 +141,8 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
: (withAlpha(neutral[3], 0.09) as ColorValue)
tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
tokens["surface-raised-base"] = neutralAlpha[0]
- tokens["surface-float-base"] = isDark ? neutral[0] : neutral[11]
- tokens["surface-float-base-hover"] = isDark ? neutral[1] : neutral[10]
+ tokens["surface-float-base"] = isDark ? neutral[0] : noInk ? shadow[0] : neutral[11]
+ tokens["surface-float-base-hover"] = isDark ? neutral[1] : noInk ? shadow[1] : neutral[10]
tokens["surface-raised-base-hover"] = neutralAlpha[1]
tokens["surface-raised-base-active"] = neutralAlpha[2]
tokens["surface-raised-strong"] = isDark ? neutralAlpha[3] : neutral[0]
@@ -50,34 +154,34 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
- tokens["surface-brand-base"] = primary[8]
- tokens["surface-brand-hover"] = primary[9]
+ tokens["surface-brand-base"] = brandl[8]
+ tokens["surface-brand-hover"] = brandl[9]
- tokens["surface-interactive-base"] = interactive[2]
- tokens["surface-interactive-hover"] = interactive[3]
- tokens["surface-interactive-weak"] = interactive[1]
- tokens["surface-interactive-weak-hover"] = interactive[2]
+ tokens["surface-interactive-base"] = interactive[isDark ? 4 : 3]
+ tokens["surface-interactive-hover"] = interactive[isDark ? 5 : 4]
+ tokens["surface-interactive-weak"] = interactive[isDark ? 3 : 2]
+ tokens["surface-interactive-weak-hover"] = noInk && isDark ? interl[4] : interactive[isDark ? 4 : 3]
- tokens["surface-success-base"] = success[2]
- tokens["surface-success-weak"] = success[1]
- tokens["surface-success-strong"] = success[8]
- tokens["surface-warning-base"] = warning[2]
- tokens["surface-warning-weak"] = warning[1]
- tokens["surface-warning-strong"] = warning[8]
- tokens["surface-critical-base"] = error[2]
- tokens["surface-critical-weak"] = error[1]
- tokens["surface-critical-strong"] = error[8]
- tokens["surface-info-base"] = info[2]
- tokens["surface-info-weak"] = info[1]
- tokens["surface-info-strong"] = info[8]
+ tokens["surface-success-base"] = success[isDark ? 4 : 3]
+ tokens["surface-success-weak"] = success[isDark ? 3 : 2]
+ tokens["surface-success-strong"] = success[9]
+ tokens["surface-warning-base"] = (noInk && isDark ? warningl : warning)[isDark ? 4 : 3]
+ tokens["surface-warning-weak"] = (noInk && isDark ? warningl : warning)[isDark ? 3 : 2]
+ tokens["surface-warning-strong"] = (noInk && isDark ? warningl : warning)[9]
+ tokens["surface-critical-base"] = error[isDark ? 4 : 3]
+ tokens["surface-critical-weak"] = error[isDark ? 3 : 2]
+ tokens["surface-critical-strong"] = error[9]
+ tokens["surface-info-base"] = (noInk && isDark ? infol : info)[isDark ? 4 : 3]
+ tokens["surface-info-weak"] = (noInk && isDark ? infol : info)[isDark ? 3 : 2]
+ tokens["surface-info-strong"] = (noInk && isDark ? infol : info)[9]
tokens["surface-diff-unchanged-base"] = isDark ? neutral[0] : "#ffffff00"
tokens["surface-diff-skip-base"] = isDark ? neutralAlpha[0] : neutral[1]
- tokens["surface-diff-hidden-base"] = interactive[isDark ? 1 : 2]
- tokens["surface-diff-hidden-weak"] = interactive[isDark ? 0 : 1]
- tokens["surface-diff-hidden-weaker"] = interactive[isDark ? 2 : 0]
- tokens["surface-diff-hidden-strong"] = interactive[4]
- tokens["surface-diff-hidden-stronger"] = interactive[isDark ? 10 : 8]
+ tokens["surface-diff-hidden-base"] = diffHiddenSurface.base
+ tokens["surface-diff-hidden-weak"] = diffHiddenSurface.weak
+ tokens["surface-diff-hidden-weaker"] = diffHiddenSurface.weaker
+ tokens["surface-diff-hidden-strong"] = diffHiddenSurface.strong
+ tokens["surface-diff-hidden-stronger"] = diffHiddenSurface.stronger
tokens["surface-diff-add-base"] = diffAdd[2]
tokens["surface-diff-add-weak"] = diffAdd[isDark ? 3 : 1]
tokens["surface-diff-add-weaker"] = diffAdd[isDark ? 2 : 0]
@@ -96,10 +200,36 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["input-focus"] = interactive[0]
tokens["input-disabled"] = neutral[3]
- tokens["text-base"] = neutral[10]
- tokens["text-weak"] = neutral[8]
- tokens["text-weaker"] = neutral[7]
- tokens["text-strong"] = neutral[11]
+ tokens["text-base"] = hasInk ? ink : noInk ? (isDark ? neutralAlpha[10] : neutral[10]) : neutral[10]
+ tokens["text-weak"] = hasInk
+ ? shift(ink, { l: isDark ? -0.18 : 0.16, c: 0.88 })
+ : noInk
+ ? isDark
+ ? neutralAlpha[8]
+ : neutral[8]
+ : neutral[8]
+ tokens["text-weaker"] = hasInk
+ ? shift(ink, { l: isDark ? -0.3 : 0.26, c: isDark ? 0.74 : 0.68 })
+ : noInk
+ ? isDark
+ ? neutralAlpha[7]
+ : neutral[7]
+ : neutral[7]
+ tokens["text-strong"] = hasInk
+ ? isDark && colors.compact
+ ? blend("#ffffff", ink, 0.82)
+ : shift(ink, { l: isDark ? 0.06 : -0.09, c: 1 })
+ : noInk
+ ? isDark
+ ? neutralAlpha[11]
+ : neutral[11]
+ : neutral[11]
+ if (noInk && isDark) {
+ tokens["text-base"] = withAlpha("#ffffff", 0.618) as ColorValue
+ tokens["text-weak"] = withAlpha("#ffffff", 0.422) as ColorValue
+ tokens["text-weaker"] = withAlpha("#ffffff", 0.284) as ColorValue
+ tokens["text-strong"] = withAlpha("#ffffff", 0.936) as ColorValue
+ }
tokens["text-invert-base"] = isDark ? neutral[10] : neutral[1]
tokens["text-invert-weak"] = isDark ? neutral[8] : neutral[2]
tokens["text-invert-weaker"] = isDark ? neutral[7] : neutral[3]
@@ -128,79 +258,166 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["text-on-brand-weaker"] = neutralAlpha[7]
tokens["text-on-brand-strong"] = neutralAlpha[11]
- tokens["button-secondary-base"] = isDark ? neutral[2] : neutral[0]
- tokens["button-secondary-hover"] = isDark ? neutral[3] : neutral[1]
+ tokens["button-primary-base"] = neutral[11]
+ tokens["button-secondary-base"] = noInk ? (isDark ? neutral[1] : neutral[0]) : isDark ? neutral[2] : neutral[0]
+ tokens["button-secondary-hover"] = noInk ? (isDark ? neutral[1] : neutral[1]) : isDark ? neutral[3] : neutral[1]
tokens["button-ghost-hover"] = neutralAlpha[1]
tokens["button-ghost-hover2"] = neutralAlpha[2]
- tokens["border-base"] = neutralAlpha[6]
- tokens["border-hover"] = neutralAlpha[7]
- tokens["border-active"] = neutralAlpha[8]
- tokens["border-selected"] = withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue
- tokens["border-disabled"] = neutralAlpha[7]
- tokens["border-focus"] = neutralAlpha[8]
- tokens["border-weak-base"] = neutralAlpha[isDark ? 5 : 4]
- tokens["border-strong-base"] = neutralAlpha[isDark ? 7 : 6]
- tokens["border-strong-hover"] = neutralAlpha[7]
- tokens["border-strong-active"] = neutralAlpha[isDark ? 7 : 6]
- tokens["border-strong-selected"] = withAlpha(interactive[5], 0.6) as ColorValue
- tokens["border-strong-disabled"] = neutralAlpha[5]
- tokens["border-strong-focus"] = neutralAlpha[isDark ? 7 : 6]
- tokens["border-weak-hover"] = neutralAlpha[isDark ? 6 : 5]
- tokens["border-weak-active"] = neutralAlpha[isDark ? 7 : 6]
- tokens["border-weak-selected"] = withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue
- tokens["border-weak-disabled"] = neutralAlpha[5]
- tokens["border-weak-focus"] = neutralAlpha[isDark ? 7 : 6]
- tokens["border-weaker-base"] = neutralAlpha[2]
+ if (noInk) {
+ const tone = (alpha: number) => alphaTone((isDark ? "#ffffff" : "#000000") as HexColor, alpha)
+ if (isDark) {
+ tokens["surface-base"] = tone(0.031)
+ tokens["surface-base-hover"] = tone(0.039)
+ tokens["surface-base-active"] = tone(0.059)
+ tokens["surface-raised-base"] = tone(0.059)
+ tokens["surface-raised-base-hover"] = tone(0.078)
+ tokens["surface-raised-base-active"] = tone(0.102)
+ tokens["surface-raised-strong"] = tone(0.078)
+ tokens["surface-raised-strong-hover"] = tone(0.129)
+ tokens["surface-raised-stronger"] = tone(0.129)
+ tokens["surface-raised-stronger-hover"] = tone(0.169)
+ tokens["surface-weak"] = tone(0.078)
+ tokens["surface-weaker"] = tone(0.102)
+ tokens["surface-strong"] = tone(0.169)
+ tokens["surface-raised-stronger-non-alpha"] = neutral[1]
+ tokens["surface-inset-base"] = withAlpha("#000000", 0.5) as ColorValue
+ tokens["surface-inset-base-hover"] = tokens["surface-inset-base"]
+ tokens["surface-inset-strong"] = withAlpha("#000000", 0.8) as ColorValue
+ tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
+ tokens["button-secondary-hover"] = tone(0.039)
+ tokens["button-ghost-hover"] = tone(0.031)
+ tokens["button-ghost-hover2"] = tone(0.059)
+ tokens["input-base"] = neutral[1]
+ tokens["input-hover"] = neutral[1]
+ tokens["input-selected"] = interactive[1]
+ tokens["surface-diff-skip-base"] = "#00000000"
+ }
- tokens["border-interactive-base"] = interactive[6]
- tokens["border-interactive-hover"] = interactive[7]
- tokens["border-interactive-active"] = interactive[8]
- tokens["border-interactive-selected"] = interactive[8]
+ if (!isDark) {
+ tokens["surface-base"] = tone(0.031)
+ tokens["surface-base-hover"] = tone(0.059)
+ tokens["surface-base-active"] = tone(0.051)
+ tokens["surface-raised-base"] = tone(0.031)
+ tokens["surface-raised-base-hover"] = tone(0.051)
+ tokens["surface-raised-base-active"] = tone(0.09)
+ tokens["surface-raised-strong"] = neutral[0]
+ tokens["surface-raised-strong-hover"] = "#ffffff"
+ tokens["surface-raised-stronger"] = "#ffffff"
+ tokens["surface-raised-stronger-hover"] = "#ffffff"
+ tokens["surface-weak"] = tone(0.051)
+ tokens["surface-weaker"] = tone(0.071)
+ tokens["surface-strong"] = "#ffffff"
+ tokens["surface-raised-stronger-non-alpha"] = "#ffffff"
+ tokens["surface-inset-strong"] = tone(0.09)
+ tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
+ tokens["button-secondary-hover"] = blend("#ffffff", background, 0.04)
+ tokens["button-ghost-hover"] = tone(0.031)
+ tokens["button-ghost-hover2"] = tone(0.051)
+ tokens["input-base"] = neutral[0]
+ tokens["input-hover"] = neutral[1]
+ }
+
+ tokens["surface-base-interactive-active"] = withAlpha(colors.interactive, isDark ? 0.125 : 0.09) as ColorValue
+ }
+
+ tokens["border-base"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[6]
+ tokens["border-hover"] = hasInk ? borderTone(0.28, 0.2) : neutralAlpha[7]
+ tokens["border-active"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[8]
+ tokens["border-selected"] = noInk
+ ? isDark
+ ? interactive[10]
+ : (withAlpha(colors.interactive, 0.99) as ColorValue)
+ : (withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue)
+ tokens["border-disabled"] = hasInk ? borderTone(0.18, 0.12) : neutralAlpha[7]
+ tokens["border-focus"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[8]
+ tokens["border-weak-base"] = hasInk
+ ? borderTone(0.1, 0.08)
+ : noInk
+ ? isDark
+ ? neutral[3]
+ : blend(neutral[4], neutral[5], 0.5)
+ : neutralAlpha[isDark ? 5 : 4]
+ tokens["border-strong-base"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[isDark ? 7 : 6]
+ tokens["border-strong-hover"] = hasInk ? borderTone(0.4, 0.28) : neutralAlpha[7]
+ tokens["border-strong-active"] = hasInk ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
+ tokens["border-strong-selected"] = noInk
+ ? (withAlpha(colors.interactive, isDark ? 0.62 : 0.31) as ColorValue)
+ : (withAlpha(interactive[5], 0.6) as ColorValue)
+ tokens["border-strong-disabled"] = hasInk ? borderTone(0.14, 0.1) : neutralAlpha[5]
+ tokens["border-strong-focus"] = hasInk ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
+ tokens["border-weak-hover"] = hasInk ? borderTone(0.16, 0.12) : neutralAlpha[isDark ? 6 : 5]
+ tokens["border-weak-active"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
+ tokens["border-weak-selected"] = noInk
+ ? (withAlpha(colors.interactive, isDark ? 0.62 : 0.24) as ColorValue)
+ : (withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue)
+ tokens["border-weak-disabled"] = hasInk ? borderTone(0.08, 0.06) : neutralAlpha[5]
+ tokens["border-weak-focus"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
+ tokens["border-weaker-base"] = hasInk
+ ? borderTone(0.06, 0.04)
+ : noInk
+ ? isDark
+ ? blend(neutral[1], neutral[2], 0.5)
+ : blend(neutral[2], neutral[3], 0.5)
+ : neutralAlpha[2]
+
+ if (noInk) {
+ const line = (l: number, d: number) => alphaTone((isDark ? "#ffffff" : "#000000") as HexColor, isDark ? d : l)
+ tokens["border-base"] = line(0.162, 0.195)
+ tokens["border-hover"] = line(0.236, 0.284)
+ tokens["border-active"] = line(0.46, 0.418)
+ tokens["border-disabled"] = tokens["border-hover"]
+ tokens["border-focus"] = tokens["border-active"]
+ }
+
+ tokens["border-interactive-base"] = (noInk && isDark ? interl : interactive)[6]
+ tokens["border-interactive-hover"] = (noInk && isDark ? interl : interactive)[7]
+ tokens["border-interactive-active"] = (noInk && isDark ? interl : interactive)[8]
+ tokens["border-interactive-selected"] = (noInk && isDark ? interl : interactive)[8]
tokens["border-interactive-disabled"] = neutral[7]
- tokens["border-interactive-focus"] = interactive[8]
+ tokens["border-interactive-focus"] = (noInk && isDark ? interl : interactive)[8]
- tokens["border-success-base"] = success[5]
- tokens["border-success-hover"] = success[6]
- tokens["border-success-selected"] = success[8]
- tokens["border-warning-base"] = warning[5]
- tokens["border-warning-hover"] = warning[6]
- tokens["border-warning-selected"] = warning[8]
+ tokens["border-success-base"] = (noInk && isDark ? successl : success)[5]
+ tokens["border-success-hover"] = (noInk && isDark ? successl : success)[6]
+ tokens["border-success-selected"] = (noInk && isDark ? successl : success)[8]
+ tokens["border-warning-base"] = (noInk && isDark ? warningl : warning)[5]
+ tokens["border-warning-hover"] = (noInk && isDark ? warningl : warning)[6]
+ tokens["border-warning-selected"] = (noInk && isDark ? warningl : warning)[8]
tokens["border-critical-base"] = error[isDark ? 4 : 5]
tokens["border-critical-hover"] = error[6]
tokens["border-critical-selected"] = error[8]
- tokens["border-info-base"] = info[5]
- tokens["border-info-hover"] = info[6]
- tokens["border-info-selected"] = info[8]
+ tokens["border-info-base"] = (noInk && isDark ? infol : info)[5]
+ tokens["border-info-hover"] = (noInk && isDark ? infol : info)[6]
+ tokens["border-info-selected"] = (noInk && isDark ? infol : info)[8]
tokens["border-color"] = "#ffffff"
- tokens["icon-base"] = neutral[8]
- tokens["icon-hover"] = neutral[isDark ? 9 : 10]
- tokens["icon-active"] = neutral[isDark ? 10 : 11]
- tokens["icon-selected"] = neutral[11]
+ tokens["icon-base"] = hasInk && !isDark ? tokens["text-weak"] : neutral[isDark ? 9 : 8]
+ tokens["icon-hover"] = hasInk && !isDark ? tokens["text-base"] : neutral[10]
+ tokens["icon-active"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
+ tokens["icon-selected"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
tokens["icon-disabled"] = neutral[isDark ? 6 : 7]
- tokens["icon-focus"] = neutral[11]
+ tokens["icon-focus"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
tokens["icon-invert-base"] = isDark ? neutral[0] : "#ffffff"
tokens["icon-weak-base"] = neutral[isDark ? 5 : 6]
- tokens["icon-weak-hover"] = neutral[6]
- tokens["icon-weak-active"] = neutral[7]
- tokens["icon-weak-selected"] = neutral[8]
- tokens["icon-weak-disabled"] = neutral[isDark ? 3 : 5]
+ tokens["icon-weak-hover"] = noInk && isDark ? blend(neutral[11], neutral[10], 0.74) : neutral[isDark ? 11 : 7]
+ tokens["icon-weak-active"] = noInk && isDark ? blend(neutral[11], neutral[10], 0.52) : neutral[8]
+ tokens["icon-weak-selected"] = neutral[isDark ? 8 : 9]
+ tokens["icon-weak-disabled"] = noInk && isDark ? neutral[11] : neutral[isDark ? 3 : 5]
tokens["icon-weak-focus"] = neutral[8]
tokens["icon-strong-base"] = neutral[11]
tokens["icon-strong-hover"] = isDark ? "#f6f3f3" : "#151313"
tokens["icon-strong-active"] = isDark ? "#fcfcfc" : "#020202"
tokens["icon-strong-selected"] = isDark ? "#fdfcfc" : "#020202"
- tokens["icon-strong-disabled"] = neutral[7]
+ tokens["icon-strong-disabled"] = noInk && isDark ? neutral[6] : neutral[7]
tokens["icon-strong-focus"] = isDark ? "#fdfcfc" : "#020202"
tokens["icon-brand-base"] = isDark ? "#ffffff" : neutral[11]
tokens["icon-interactive-base"] = interactive[8]
- tokens["icon-success-base"] = success[isDark ? 6 : 6]
- tokens["icon-success-hover"] = success[7]
+ tokens["icon-success-base"] = success[isDark ? 8 : 6]
+ tokens["icon-success-hover"] = success[isDark ? 9 : 7]
tokens["icon-success-active"] = success[10]
- tokens["icon-warning-base"] = warning[6]
- tokens["icon-warning-hover"] = warning[7]
- tokens["icon-warning-active"] = warning[10]
+ tokens["icon-warning-base"] = amber[isDark ? 8 : 6]
+ tokens["icon-warning-hover"] = amber[7]
+ tokens["icon-warning-active"] = amber[10]
tokens["icon-critical-base"] = error[isDark ? 8 : 9]
tokens["icon-critical-hover"] = error[10]
tokens["icon-critical-active"] = error[11]
@@ -213,16 +430,16 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["icon-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
tokens["icon-agent-plan-base"] = info[8]
- tokens["icon-agent-docs-base"] = warning[8]
- tokens["icon-agent-ask-base"] = interactive[8]
+ tokens["icon-agent-docs-base"] = amber[8]
+ tokens["icon-agent-ask-base"] = blue[8]
tokens["icon-agent-build-base"] = interactive[isDark ? 10 : 8]
tokens["icon-on-success-base"] = withAlpha(success[8], 0.9) as ColorValue
tokens["icon-on-success-hover"] = withAlpha(success[9], 0.9) as ColorValue
tokens["icon-on-success-selected"] = withAlpha(success[10], 0.9) as ColorValue
- tokens["icon-on-warning-base"] = withAlpha(warning[8], 0.9) as ColorValue
- tokens["icon-on-warning-hover"] = withAlpha(warning[9], 0.9) as ColorValue
- tokens["icon-on-warning-selected"] = withAlpha(warning[10], 0.9) as ColorValue
+ tokens["icon-on-warning-base"] = withAlpha(amber[8], 0.9) as ColorValue
+ tokens["icon-on-warning-hover"] = withAlpha(amber[9], 0.9) as ColorValue
+ tokens["icon-on-warning-selected"] = withAlpha(amber[10], 0.9) as ColorValue
tokens["icon-on-critical-base"] = withAlpha(error[8], 0.9) as ColorValue
tokens["icon-on-critical-hover"] = withAlpha(error[9], 0.9) as ColorValue
tokens["icon-on-critical-selected"] = withAlpha(error[10], 0.9) as ColorValue
@@ -235,42 +452,120 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
tokens["icon-diff-delete-base"] = diffDelete[isDark ? 8 : 9]
tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 9 : 10]
- tokens["icon-diff-modified-base"] = isDark ? "#ffba92" : "#FF8C00"
+ tokens["icon-diff-modified-base"] = modified()
- tokens["syntax-comment"] = "var(--text-weak)"
- tokens["syntax-regexp"] = "var(--text-base)"
- tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
- tokens["syntax-keyword"] = "var(--text-weak)"
- tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
- tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
- tokens["syntax-variable"] = "var(--text-strong)"
- tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
- tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
- tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
- tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
- tokens["syntax-object"] = "var(--text-strong)"
- tokens["syntax-success"] = success[9]
- tokens["syntax-warning"] = warning[9]
- tokens["syntax-critical"] = error[isDark ? 9 : 9]
- tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
- tokens["syntax-diff-add"] = diffAdd[10]
- tokens["syntax-diff-delete"] = diffDelete[10]
- tokens["syntax-diff-unknown"] = "#ff0000"
+ if (colors.compact) {
+ if (!hasInk) {
+ tokens["syntax-comment"] = "var(--text-weak)"
+ tokens["syntax-regexp"] = "var(--text-base)"
+ tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
+ tokens["syntax-keyword"] = "var(--text-weak)"
+ tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
+ tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-variable"] = "var(--text-strong)"
+ tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
+ tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
+ tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
+ tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-object"] = "var(--text-strong)"
+ tokens["syntax-success"] = success[9]
+ tokens["syntax-warning"] = amber[9]
+ tokens["syntax-critical"] = error[9]
+ tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
+ tokens["syntax-diff-add"] = diffAdd[10]
+ tokens["syntax-diff-delete"] = diffDelete[10]
+ tokens["syntax-diff-unknown"] = "#ff0000"
- tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
- tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
- tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
- tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
- tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
- tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
- tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
- tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
- tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
- tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
- tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
- tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
- tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
- tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
+ tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
+ tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
+ tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
+ tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
+ tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
+ tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
+ tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
+ tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
+ }
+
+ if (hasInk) {
+ tokens["syntax-comment"] = "var(--text-weak)"
+ tokens["syntax-regexp"] = "var(--text-base)"
+ tokens["syntax-string"] = content(colors.success, success)
+ tokens["syntax-keyword"] = "var(--text-weak)"
+ tokens["syntax-primitive"] = content(colors.accent, accent)
+ tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-variable"] = "var(--text-strong)"
+ tokens["syntax-property"] = content(colors.primary, primary)
+ tokens["syntax-type"] = content(colors.warning, warning)
+ tokens["syntax-constant"] = content(colors.info, info)
+ tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-object"] = "var(--text-strong)"
+ tokens["syntax-success"] = success[9]
+ tokens["syntax-warning"] = amber[9]
+ tokens["syntax-critical"] = error[9]
+ tokens["syntax-info"] = content(colors.info, info)
+ tokens["syntax-diff-add"] = diffAdd[10]
+ tokens["syntax-diff-delete"] = diffDelete[10]
+ tokens["syntax-diff-unknown"] = "#ff0000"
+
+ tokens["markdown-heading"] = content(colors.primary, primary)
+ tokens["markdown-text"] = tokens["text-base"]
+ tokens["markdown-link"] = content(colors.interactive, interactive)
+ tokens["markdown-link-text"] = content(colors.info, info)
+ tokens["markdown-code"] = content(colors.success, success)
+ tokens["markdown-block-quote"] = content(colors.warning, warning)
+ tokens["markdown-emph"] = content(colors.warning, warning)
+ tokens["markdown-strong"] = content(colors.accent, accent)
+ tokens["markdown-horizontal-rule"] = tokens["border-base"]
+ tokens["markdown-list-item"] = content(colors.interactive, interactive)
+ tokens["markdown-list-enumeration"] = content(colors.info, info)
+ tokens["markdown-image"] = content(colors.interactive, interactive)
+ tokens["markdown-image-text"] = content(colors.info, info)
+ tokens["markdown-code-block"] = tokens["text-base"]
+ }
+ }
+
+ if (!colors.compact) {
+ tokens["syntax-comment"] = "var(--text-weak)"
+ tokens["syntax-regexp"] = "var(--text-base)"
+ tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
+ tokens["syntax-keyword"] = "var(--text-weak)"
+ tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
+ tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-variable"] = "var(--text-strong)"
+ tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
+ tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
+ tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
+ tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
+ tokens["syntax-object"] = "var(--text-strong)"
+ tokens["syntax-success"] = success[9]
+ tokens["syntax-warning"] = amber[9]
+ tokens["syntax-critical"] = error[9]
+ tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
+ tokens["syntax-diff-add"] = diffAdd[10]
+ tokens["syntax-diff-delete"] = diffDelete[10]
+ tokens["syntax-diff-unknown"] = "#ff0000"
+
+ tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
+ tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
+ tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
+ tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
+ tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
+ tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
+ tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
+ tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
+ tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
+ tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
+ }
tokens["avatar-background-pink"] = isDark ? "#501b3f" : "#feeef8"
tokens["avatar-background-mint"] = isDark ? "#033a34" : "#e1fbf4"
@@ -289,13 +584,101 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens[key] = value
}
+ if (hasInk && "text-weak" in overrides && !("text-weaker" in overrides)) {
+ const weak = tokens["text-weak"]
+ if (weak.startsWith("#")) {
+ tokens["text-weaker"] = shift(weak as HexColor, { l: isDark ? -0.12 : 0.12, c: 0.75 })
+ } else {
+ tokens["text-weaker"] = weak
+ }
+ }
+
+ if (colors.compact && hasInk) {
+ if (!("markdown-text" in overrides)) {
+ tokens["markdown-text"] = tokens["text-base"]
+ }
+ if (!("markdown-code-block" in overrides)) {
+ tokens["markdown-code-block"] = tokens["text-base"]
+ }
+ }
+
+ if (!("text-stronger" in overrides)) {
+ tokens["text-stronger"] = tokens["text-strong"]
+ }
+
return tokens
}
+interface ThemeColors {
+ compact: boolean
+ neutral: HexColor
+ ink?: HexColor
+ primary: HexColor
+ accent: HexColor
+ success: HexColor
+ warning: HexColor
+ error: HexColor
+ info: HexColor
+ interactive: HexColor
+ diffAdd?: HexColor
+ diffDelete?: HexColor
+}
+
+function getColors(variant: ThemeVariant): ThemeColors {
+ const input = variant as { palette?: unknown; seeds?: unknown }
+ if (input.palette && input.seeds) {
+ throw new Error("Theme variant cannot define both `palette` and `seeds`")
+ }
+
+ if (variant.palette) {
+ return {
+ compact: true,
+ neutral: variant.palette.neutral,
+ ink: variant.palette.ink,
+ primary: variant.palette.primary,
+ accent: variant.palette.accent ?? variant.palette.info,
+ success: variant.palette.success,
+ warning: variant.palette.warning,
+ error: variant.palette.error,
+ info: variant.palette.info,
+ interactive: variant.palette.interactive ?? variant.palette.primary,
+ diffAdd: variant.palette.diffAdd,
+ diffDelete: variant.palette.diffDelete,
+ }
+ }
+
+ if (variant.seeds) {
+ return {
+ compact: false,
+ neutral: variant.seeds.neutral,
+ ink: undefined,
+ primary: variant.seeds.primary,
+ accent: variant.seeds.info,
+ success: variant.seeds.success,
+ warning: variant.seeds.warning,
+ error: variant.seeds.error,
+ info: variant.seeds.info,
+ interactive: variant.seeds.interactive,
+ diffAdd: variant.seeds.diffAdd,
+ diffDelete: variant.seeds.diffDelete,
+ }
+ }
+
+ throw new Error("Theme variant requires `palette` or `seeds`")
+}
+
+function generateNeutralOverlayScale(neutralScale: HexColor[], isDark: boolean): ColorValue[] {
+ const alphas = isDark
+ ? [0, 0.034, 0.063, 0.084, 0.109, 0.138, 0.181, 0.266, 0.404, 0.468, 0.603, 0.928]
+ : [0.014, 0.034, 0.055, 0.075, 0.096, 0.118, 0.151, 0.232, 0.453, 0.492, 0.574, 0.915]
+ const color = (isDark ? "#ffffff" : "#000000") as HexColor
+ return alphas.map((alpha) => withAlpha(color, alpha) as ColorValue)
+}
+
function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
const alphas = isDark
- ? [0.02, 0.04, 0.08, 0.12, 0.16, 0.2, 0.26, 0.36, 0.44, 0.52, 0.72, 0.94]
- : [0.01, 0.03, 0.06, 0.09, 0.12, 0.15, 0.2, 0.27, 0.46, 0.61, 0.5, 0.87]
+ ? [0.024, 0.048, 0.088, 0.128, 0.17, 0.215, 0.275, 0.38, 0.46, 0.54, 0.74, 0.95]
+ : [0.014, 0.034, 0.066, 0.098, 0.128, 0.158, 0.208, 0.282, 0.47, 0.625, 0.515, 0.88]
return neutralScale.map((hex, i) => {
const baseOklch = hexToOklch(hex)
@@ -307,6 +690,11 @@ function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): H
})
}
+function getHex(value: ColorValue | undefined): HexColor | undefined {
+ if (!value?.startsWith("#")) return
+ return value as HexColor
+}
+
export function resolveTheme(theme: DesktopTheme): { light: ResolvedTheme; dark: ResolvedTheme } {
return {
light: resolveThemeVariant(theme.light, false),
diff --git a/packages/ui/src/theme/themes/aura.json b/packages/ui/src/theme/themes/aura.json
index 874939fd4d..e65eb4b0aa 100644
--- a/packages/ui/src/theme/themes/aura.json
+++ b/packages/ui/src/theme/themes/aura.json
@@ -3,129 +3,37 @@
"name": "Aura",
"id": "aura",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f5f0ff",
+ "ink": "#2d2640",
"primary": "#a277ff",
+ "accent": "#d94f4f",
"success": "#40bf7a",
"warning": "#d9a24a",
"error": "#d94f4f",
"info": "#5bb8d9",
- "interactive": "#a277ff",
"diffAdd": "#b3e6cc",
"diffDelete": "#f5b3b3"
},
"overrides": {
- "background-base": "#f5f0ff",
- "background-weak": "#efe8fc",
- "background-strong": "#faf7ff",
- "background-stronger": "#fdfcff",
- "border-weak-base": "#e0d6f2",
- "border-weak-hover": "#d5c9eb",
- "border-weak-active": "#cbbee3",
- "border-weak-selected": "#c0b3dc",
- "border-weak-disabled": "#f9f6ff",
- "border-weak-focus": "#c5b8df",
- "border-base": "#b5a6d4",
- "border-hover": "#aa99cc",
- "border-active": "#9f8dc4",
- "border-selected": "#9480bc",
- "border-disabled": "#ede7f9",
- "border-focus": "#a593c8",
- "border-strong-base": "#8068a8",
- "border-strong-hover": "#735a9c",
- "border-strong-active": "#664d90",
- "border-strong-selected": "#5a4184",
- "border-strong-disabled": "#d4c8ed",
- "border-strong-focus": "#6d5396",
- "surface-diff-add-base": "#e8f5ed",
- "surface-diff-delete-base": "#fae8e8",
- "surface-diff-hidden-base": "#e8e4f5",
- "text-base": "#2d2640",
- "text-weak": "#5c5270",
- "text-strong": "#15101f",
- "syntax-string": "#40bf7a",
- "syntax-primitive": "#d94f4f",
- "syntax-property": "#a277ff",
- "syntax-type": "#d9a24a",
- "syntax-constant": "#5bb8d9",
- "syntax-info": "#5bb8d9",
- "markdown-heading": "#a277ff",
- "markdown-text": "#2d2640",
- "markdown-link": "#c17ac8",
- "markdown-link-text": "#a277ff",
- "markdown-code": "#40bf7a",
- "markdown-block-quote": "#6d6d6d",
- "markdown-emph": "#d9a24a",
- "markdown-strong": "#a277ff",
- "markdown-horizontal-rule": "#d4c8ed",
- "markdown-list-item": "#a277ff",
- "markdown-list-enumeration": "#a277ff",
- "markdown-image": "#c17ac8",
- "markdown-image-text": "#a277ff",
- "markdown-code-block": "#5bb8d9"
+ "syntax-keyword": "#7b5ae0"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#15141b",
+ "ink": "#edecee",
"primary": "#a277ff",
+ "accent": "#ff6767",
"success": "#61ffca",
"warning": "#ffca85",
"error": "#ff6767",
"info": "#82e2ff",
- "interactive": "#a277ff",
"diffAdd": "#61ffca",
"diffDelete": "#ff6767"
},
"overrides": {
- "background-base": "#15141b",
- "background-weak": "#1a1921",
- "background-strong": "#121118",
- "background-stronger": "#0f0e14",
- "border-weak-base": "#2d2b38",
- "border-weak-hover": "#332f42",
- "border-weak-active": "#38354c",
- "border-weak-selected": "#3e3a56",
- "border-weak-disabled": "#1a1921",
- "border-weak-focus": "#363350",
- "border-base": "#433f5a",
- "border-hover": "#4a4565",
- "border-active": "#514c70",
- "border-selected": "#58527b",
- "border-disabled": "#1f1e28",
- "border-focus": "#4e496c",
- "border-strong-base": "#635c8a",
- "border-strong-hover": "#6d6597",
- "border-strong-active": "#776fa4",
- "border-strong-selected": "#8179b1",
- "border-strong-disabled": "#2a283a",
- "border-strong-focus": "#716a9e",
- "surface-diff-add-base": "#162620",
- "surface-diff-delete-base": "#26161a",
- "surface-diff-hidden-base": "#1e1d2a",
- "text-base": "#edecee",
- "text-weak": "#6d6d6d",
- "text-strong": "#ffffff",
- "syntax-string": "#61ffca",
- "syntax-primitive": "#ff6767",
- "syntax-property": "#a277ff",
- "syntax-type": "#ffca85",
- "syntax-constant": "#82e2ff",
- "syntax-info": "#82e2ff",
- "markdown-heading": "#a277ff",
- "markdown-text": "#edecee",
- "markdown-link": "#f694ff",
- "markdown-link-text": "#a277ff",
- "markdown-code": "#61ffca",
- "markdown-block-quote": "#6d6d6d",
- "markdown-emph": "#ffca85",
- "markdown-strong": "#a277ff",
- "markdown-horizontal-rule": "#2d2b38",
- "markdown-list-item": "#a277ff",
- "markdown-list-enumeration": "#a277ff",
- "markdown-image": "#f694ff",
- "markdown-image-text": "#a277ff",
- "markdown-code-block": "#edecee"
+ "syntax-keyword": "#a277ff"
}
}
}
diff --git a/packages/ui/src/theme/themes/ayu.json b/packages/ui/src/theme/themes/ayu.json
index eac9e0491f..f459489035 100644
--- a/packages/ui/src/theme/themes/ayu.json
+++ b/packages/ui/src/theme/themes/ayu.json
@@ -3,131 +3,37 @@
"name": "Ayu",
"id": "ayu",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#fdfaf4",
+ "ink": "#4f5964",
"primary": "#4aa8c8",
+ "accent": "#ef7d71",
"success": "#5fb978",
"warning": "#ea9f41",
"error": "#e6656a",
"info": "#2f9bce",
- "interactive": "#4aa8c8",
"diffAdd": "#b1d780",
"diffDelete": "#e6656a"
},
"overrides": {
- "background-base": "#fdfaf4",
- "background-weak": "#fcf9f3",
- "background-strong": "#fbf8f2",
- "background-stronger": "#faf7f1",
- "surface-raised-base-hover": "#f4f0e9",
- "border-weak-base": "#e6ddcf",
- "border-weak-hover": "#dcd3c5",
- "border-weak-active": "#d1c9ba",
- "border-weak-selected": "#c6bfaf",
- "border-weak-disabled": "#f7f0e6",
- "border-weak-focus": "#cbc4b6",
- "border-base": "#bfb3a3",
- "border-hover": "#b4a898",
- "border-active": "#a99e8e",
- "border-selected": "#9e9383",
- "border-disabled": "#efe5d8",
- "border-focus": "#b09f8f",
- "border-strong-base": "#837765",
- "border-strong-hover": "#7a6f5f",
- "border-strong-active": "#716655",
- "border-strong-selected": "#685e4e",
- "border-strong-disabled": "#d8cabc",
- "border-strong-focus": "#766b5c",
- "surface-diff-add-base": "#eef5e4",
- "surface-diff-delete-base": "#fde5e5",
- "surface-diff-hidden-base": "#e3edf3",
- "text-base": "#4f5964",
- "text-weak": "#77818d",
- "text-strong": "#1b232b",
- "syntax-string": "#7fad00",
- "syntax-primitive": "#ef7d71",
- "syntax-property": "#4aa8c8",
- "syntax-type": "#ed982e",
- "syntax-constant": "#2f9bce",
- "syntax-info": "#2f9bce",
- "markdown-heading": "#4aa8c8",
- "markdown-text": "#4f5964",
- "markdown-link": "#4aa8c8",
- "markdown-link-text": "#2f9bce",
- "markdown-code": "#7fad00",
- "markdown-block-quote": "#ed982e",
- "markdown-emph": "#ed982e",
- "markdown-strong": "#f07f72",
- "markdown-horizontal-rule": "#d7cec0",
- "markdown-list-item": "#4aa8c8",
- "markdown-list-enumeration": "#2f9bce",
- "markdown-image": "#4aa8c8",
- "markdown-image-text": "#2f9bce",
- "markdown-code-block": "#4aa8c8"
+ "syntax-keyword": "#ea9f41"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#0f1419",
+ "ink": "#d6dae0",
"primary": "#3fb7e3",
+ "accent": "#f2856f",
"success": "#78d05c",
"warning": "#e4a75c",
"error": "#f58572",
"info": "#66c6f1",
- "interactive": "#3fb7e3",
"diffAdd": "#59c57c",
"diffDelete": "#f58572"
},
"overrides": {
- "background-base": "#0f1419",
- "background-weak": "#18222c",
- "background-strong": "#0b1015",
- "background-stronger": "#080c10",
- "surface-raised-base-hover": "#0f1419",
- "border-weak-base": "#2b3440",
- "border-weak-hover": "#323c49",
- "border-weak-active": "#394454",
- "border-weak-selected": "#415063",
- "border-weak-disabled": "#0a0e12",
- "border-weak-focus": "#374453",
- "border-base": "#475367",
- "border-hover": "#515f75",
- "border-active": "#5d6b83",
- "border-selected": "#687795",
- "border-disabled": "#11161d",
- "border-focus": "#56647c",
- "border-strong-base": "#73819b",
- "border-strong-hover": "#7f8da8",
- "border-strong-active": "#8b99b5",
- "border-strong-selected": "#98a6c3",
- "border-strong-disabled": "#1b222c",
- "border-strong-focus": "#8391ad",
- "surface-diff-add-base": "#132f27",
- "surface-diff-delete-base": "#361d20",
- "surface-diff-hidden-base": "#1b2632",
- "text-base": "#d6dae0",
- "text-weak": "#a3adba",
- "text-strong": "#fbfbfd",
- "syntax-string": "#b1c74a",
- "syntax-primitive": "#f2856f",
- "syntax-property": "#3fb7e3",
- "syntax-type": "#e4a75c",
- "syntax-constant": "#66c6f1",
- "syntax-info": "#66c6f1",
- "markdown-heading": "#3fb7e3",
- "markdown-text": "#d6dae0",
- "markdown-link": "#3fb7e3",
- "markdown-link-text": "#66c6f1",
- "markdown-code": "#b1c74a",
- "markdown-block-quote": "#e4a75c",
- "markdown-emph": "#e4a75c",
- "markdown-strong": "#f2856f",
- "markdown-horizontal-rule": "#2b3542",
- "markdown-list-item": "#3fb7e3",
- "markdown-list-enumeration": "#66c6f1",
- "markdown-image": "#3fb7e3",
- "markdown-image-text": "#66c6f1",
- "markdown-code-block": "#d6dae0"
+ "syntax-keyword": "#ffad66"
}
}
}
diff --git a/packages/ui/src/theme/themes/carbonfox.json b/packages/ui/src/theme/themes/carbonfox.json
index e2fa20d803..54e55cdeae 100644
--- a/packages/ui/src/theme/themes/carbonfox.json
+++ b/packages/ui/src/theme/themes/carbonfox.json
@@ -3,9 +3,11 @@
"name": "Carbonfox",
"id": "carbonfox",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#8e8e8e",
+ "ink": "#161616",
"primary": "#0072c3",
+ "accent": "#da1e28",
"success": "#198038",
"warning": "#f1c21b",
"error": "#da1e28",
@@ -15,44 +17,15 @@
"diffDelete": "#da1e28"
},
"overrides": {
- "background-base": "#ffffff",
- "background-weak": "#f4f4f4",
- "background-strong": "#e8e8e8",
- "background-stronger": "#dcdcdc",
- "surface-raised-strong": "#ffffff",
- "surface-raised-stronger": "#ffffff",
- "surface-float-base": "#161616",
- "surface-float-base-hover": "#262626",
- "text-base": "#161616",
- "text-weak": "#525252",
- "text-strong": "#000000",
- "syntax-string": "#198038",
- "syntax-primitive": "#da1e28",
- "syntax-property": "#0043ce",
- "syntax-type": "#007d79",
- "syntax-constant": "#6929c4",
- "syntax-keyword": "#525252",
- "syntax-info": "#0043ce",
- "markdown-heading": "#0043ce",
- "markdown-text": "#161616",
- "markdown-link": "#0043ce",
- "markdown-link-text": "#0072c3",
- "markdown-code": "#198038",
- "markdown-block-quote": "#525252",
- "markdown-emph": "#6929c4",
- "markdown-strong": "#161616",
- "markdown-horizontal-rule": "#c6c6c6",
- "markdown-list-item": "#0072c3",
- "markdown-list-enumeration": "#0072c3",
- "markdown-image": "#0043ce",
- "markdown-image-text": "#0072c3",
- "markdown-code-block": "#393939"
+ "syntax-keyword": "#8a3ffc"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#393939",
+ "ink": "#f2f4f8",
"primary": "#33b1ff",
+ "accent": "#ff8389",
"success": "#42be65",
"warning": "#f1c21b",
"error": "#ff8389",
@@ -62,61 +35,7 @@
"diffDelete": "#ff8389"
},
"overrides": {
- "background-base": "#161616",
- "background-weak": "#262626",
- "background-strong": "#0d0d0d",
- "background-stronger": "#000000",
- "surface-raised-base": "#1c1c1c",
- "surface-raised-base-hover": "#262626",
- "surface-raised-strong": "#262626",
- "surface-raised-strong-hover": "#303030",
- "surface-raised-stronger": "#303030",
- "surface-raised-stronger-hover": "#393939",
- "surface-raised-stronger-non-alpha": "#303030",
- "surface-float-base": "#0d0d0d",
- "surface-float-base-hover": "#1a1a1a",
- "surface-inset-base": "#0d0d0d",
- "surface-inset-strong": "#000000",
- "surface-base": "#1e1e1e",
- "surface-base-hover": "#262626",
- "surface-diff-add-base": "#0e3a22",
- "surface-diff-delete-base": "#4d1a1f",
- "input-base": "#262626",
- "input-hover": "#303030",
- "button-secondary-base": "#393939",
- "button-secondary-hover": "#4c4c4c",
- "border-weak-base": "#393939",
- "border-weak-hover": "#4c4c4c",
- "border-base": "#525252",
- "border-hover": "#636363",
- "border-strong-base": "#6f6f6f",
- "text-base": "#f2f4f8",
- "text-weak": "#8d8d8d",
- "text-weaker": "#6f6f6f",
- "text-strong": "#ffffff",
- "icon-base": "#8d8d8d",
- "icon-weak-base": "#6f6f6f",
- "syntax-string": "#42be65",
- "syntax-primitive": "#ff8389",
- "syntax-property": "#78a9ff",
- "syntax-type": "#08bdba",
- "syntax-constant": "#be95ff",
- "syntax-keyword": "#8d8d8d",
- "syntax-info": "#78a9ff",
- "markdown-heading": "#82cfff",
- "markdown-text": "#f2f4f8",
- "markdown-link": "#78a9ff",
- "markdown-link-text": "#33b1ff",
- "markdown-code": "#42be65",
- "markdown-block-quote": "#8d8d8d",
- "markdown-emph": "#be95ff",
- "markdown-strong": "#ffffff",
- "markdown-horizontal-rule": "#393939",
- "markdown-list-item": "#33b1ff",
- "markdown-list-enumeration": "#33b1ff",
- "markdown-image": "#78a9ff",
- "markdown-image-text": "#33b1ff",
- "markdown-code-block": "#c6c6c6"
+ "syntax-keyword": "#be95ff"
}
}
}
diff --git a/packages/ui/src/theme/themes/catppuccin.json b/packages/ui/src/theme/themes/catppuccin.json
index 2a32df0984..66fd37e26b 100644
--- a/packages/ui/src/theme/themes/catppuccin.json
+++ b/packages/ui/src/theme/themes/catppuccin.json
@@ -3,129 +3,39 @@
"name": "Catppuccin",
"id": "catppuccin",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f5e0dc",
+ "ink": "#4c4f69",
"primary": "#7287fd",
+ "accent": "#d20f39",
"success": "#40a02b",
"warning": "#df8e1d",
"error": "#d20f39",
"info": "#04a5e5",
- "interactive": "#7287fd",
"diffAdd": "#a6d189",
"diffDelete": "#e78284"
},
"overrides": {
- "background-base": "#f5e0dc",
- "background-weak": "#f2d8d4",
- "background-strong": "#f9e8e4",
- "background-stronger": "#fdeeee",
- "border-weak-base": "#e0cfd3",
- "border-weak-hover": "#d6c4c8",
- "border-weak-active": "#cdb9be",
- "border-weak-selected": "#c2aeb4",
- "border-weak-disabled": "#fbeff2",
- "border-weak-focus": "#c7b4ba",
- "border-base": "#bca6b2",
- "border-hover": "#b19ca8",
- "border-active": "#a6929e",
- "border-selected": "#9a8894",
- "border-disabled": "#f3e4e7",
- "border-focus": "#ab97a1",
- "border-strong-base": "#83677f",
- "border-strong-hover": "#775b73",
- "border-strong-active": "#6b5068",
- "border-strong-selected": "#5f465d",
- "border-strong-disabled": "#d9c5cf",
- "border-strong-focus": "#714f66",
- "surface-diff-add-base": "#edf5e6",
- "surface-diff-delete-base": "#fde1e3",
- "surface-diff-hidden-base": "#e4e2f6",
- "text-base": "#4c4f69",
- "text-weak": "#6c6f85",
- "text-strong": "#1f1f2a",
- "syntax-string": "#40a02b",
- "syntax-primitive": "#d20f39",
- "syntax-property": "#7287fd",
- "syntax-type": "#df8e1d",
- "syntax-constant": "#04a5e5",
- "syntax-info": "#04a5e5",
- "markdown-heading": "#7287fd",
- "markdown-text": "#4c4f69",
- "markdown-link": "#7287fd",
- "markdown-link-text": "#04a5e5",
- "markdown-code": "#40a02b",
- "markdown-block-quote": "#df8e1d",
- "markdown-emph": "#df8e1d",
- "markdown-strong": "#d20f39",
- "markdown-horizontal-rule": "#d4c5cf",
- "markdown-list-item": "#7287fd",
- "markdown-list-enumeration": "#04a5e5",
- "markdown-image": "#7287fd",
- "markdown-image-text": "#04a5e5",
- "markdown-code-block": "#7287fd"
+ "syntax-keyword": "#8839ef",
+ "syntax-primitive": "#fe640b"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#1e1e2e",
+ "ink": "#cdd6f4",
"primary": "#b4befe",
+ "accent": "#f38ba8",
"success": "#a6d189",
"warning": "#f4b8e4",
"error": "#f38ba8",
"info": "#89dceb",
- "interactive": "#b4befe",
"diffAdd": "#94e2d5",
"diffDelete": "#f38ba8"
},
"overrides": {
- "background-base": "#1e1e2e",
- "background-weak": "#211f31",
- "background-strong": "#1c1c29",
- "background-stronger": "#191926",
- "border-weak-base": "#35324a",
- "border-weak-hover": "#393655",
- "border-weak-active": "#403c61",
- "border-weak-selected": "#47436d",
- "border-weak-disabled": "#141426",
- "border-weak-focus": "#3d3a63",
- "border-base": "#4a4763",
- "border-hover": "#524f70",
- "border-active": "#5a577d",
- "border-selected": "#625f8a",
- "border-disabled": "#1b1a2c",
- "border-focus": "#575379",
- "border-strong-base": "#6e6a8c",
- "border-strong-hover": "#787497",
- "border-strong-active": "#8380a2",
- "border-strong-selected": "#8d8bad",
- "border-strong-disabled": "#232237",
- "border-strong-focus": "#7b779b",
- "surface-diff-add-base": "#1d2c30",
- "surface-diff-delete-base": "#2c1f2a",
- "surface-diff-hidden-base": "#232538",
- "text-base": "#cdd6f4",
- "text-weak": "#a6adc8",
- "text-strong": "#f4f2ff",
- "syntax-string": "#a6e3a1",
- "syntax-primitive": "#f38ba8",
- "syntax-property": "#b4befe",
- "syntax-type": "#f9e2af",
- "syntax-constant": "#89dceb",
- "syntax-info": "#89dceb",
- "markdown-heading": "#b4befe",
- "markdown-text": "#cdd6f4",
- "markdown-link": "#b4befe",
- "markdown-link-text": "#89dceb",
- "markdown-code": "#a6e3a1",
- "markdown-block-quote": "#f9e2af",
- "markdown-emph": "#f9e2af",
- "markdown-strong": "#f38ba8",
- "markdown-horizontal-rule": "#2e2d45",
- "markdown-list-item": "#b4befe",
- "markdown-list-enumeration": "#89dceb",
- "markdown-image": "#b4befe",
- "markdown-image-text": "#89dceb",
- "markdown-code-block": "#cdd6f4"
+ "syntax-keyword": "#cba6f7",
+ "syntax-primitive": "#fab387"
}
}
}
diff --git a/packages/ui/src/theme/themes/dracula.json b/packages/ui/src/theme/themes/dracula.json
index 696f1060c7..495042ca7b 100644
--- a/packages/ui/src/theme/themes/dracula.json
+++ b/packages/ui/src/theme/themes/dracula.json
@@ -3,129 +3,41 @@
"name": "Dracula",
"id": "dracula",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f8f8f2",
+ "ink": "#1f1f2f",
"primary": "#7c6bf5",
+ "accent": "#d16090",
"success": "#2fbf71",
"warning": "#f7a14d",
"error": "#d9536f",
"info": "#1d7fc5",
- "interactive": "#7c6bf5",
"diffAdd": "#9fe3b3",
"diffDelete": "#f8a1b8"
},
"overrides": {
- "background-base": "#f8f8f2",
- "background-weak": "#f1f2ed",
- "background-strong": "#f6f6f1",
- "background-stronger": "#f2f2ec",
- "border-weak-base": "#e2e3da",
- "border-weak-hover": "#d8d9d0",
- "border-weak-active": "#cfd0c7",
- "border-weak-selected": "#c4c6bc",
- "border-weak-disabled": "#eceee3",
- "border-weak-focus": "#c9cabf",
- "border-base": "#c4c6ba",
- "border-hover": "#b8baae",
- "border-active": "#abada3",
- "border-selected": "#979a90",
- "border-disabled": "#e5e7dd",
- "border-focus": "#b0b2a7",
- "border-strong-base": "#9fa293",
- "border-strong-hover": "#8e9185",
- "border-strong-active": "#7e8176",
- "border-strong-selected": "#6f7268",
- "border-strong-disabled": "#c7c9be",
- "border-strong-focus": "#878b7f",
- "surface-diff-add-base": "#e4f5e6",
- "surface-diff-delete-base": "#fae4eb",
- "surface-diff-hidden-base": "#dedfe9",
- "text-base": "#1f1f2f",
- "text-weak": "#52526b",
- "text-strong": "#05040c",
- "syntax-string": "#2fbf71",
- "syntax-primitive": "#d16090",
- "syntax-property": "#7c6bf5",
- "syntax-type": "#f7a14d",
- "syntax-constant": "#1d7fc5",
- "syntax-info": "#1d7fc5",
- "markdown-heading": "#7c6bf5",
- "markdown-text": "#1f1f2f",
- "markdown-link": "#7c6bf5",
- "markdown-link-text": "#1d7fc5",
- "markdown-code": "#2fbf71",
- "markdown-block-quote": "#f7a14d",
- "markdown-emph": "#f7a14d",
- "markdown-strong": "#d16090",
- "markdown-horizontal-rule": "#c3c5d4",
- "markdown-list-item": "#7c6bf5",
- "markdown-list-enumeration": "#1d7fc5",
- "markdown-image": "#7c6bf5",
- "markdown-image-text": "#1d7fc5",
- "markdown-code-block": "#1d7fc5"
+ "syntax-keyword": "#d16090",
+ "syntax-string": "#596600",
+ "syntax-primitive": "#7c6bf5"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#1d1e28",
+ "ink": "#f8f8f2",
"primary": "#bd93f9",
+ "accent": "#ff79c6",
"success": "#50fa7b",
"warning": "#ffb86c",
"error": "#ff5555",
"info": "#8be9fd",
- "interactive": "#bd93f9",
"diffAdd": "#2fb27d",
"diffDelete": "#ff6b81"
},
"overrides": {
- "background-base": "#14151f",
- "background-weak": "#181926",
- "background-strong": "#161722",
- "background-stronger": "#191a26",
- "border-weak-base": "#2d2f3c",
- "border-weak-hover": "#303244",
- "border-weak-active": "#35364c",
- "border-weak-selected": "#3b3d55",
- "border-weak-disabled": "#1e1f2b",
- "border-weak-focus": "#383a50",
- "border-base": "#3f415a",
- "border-hover": "#464967",
- "border-active": "#4d5073",
- "border-selected": "#55587f",
- "border-disabled": "#272834",
- "border-focus": "#4a4d6d",
- "border-strong-base": "#606488",
- "border-strong-hover": "#6a6e96",
- "border-strong-active": "#7378a3",
- "border-strong-selected": "#7d82b1",
- "border-strong-disabled": "#343649",
- "border-strong-focus": "#6f739c",
- "surface-diff-add-base": "#1f2a2f",
- "surface-diff-delete-base": "#2d1f27",
- "surface-diff-hidden-base": "#24253a",
- "text-base": "#f8f8f2",
- "text-weak": "#b6b9e4",
- "text-strong": "#ffffff",
- "syntax-string": "#50fa7b",
- "syntax-primitive": "#ff79c6",
- "syntax-property": "#bd93f9",
- "syntax-type": "#ffb86c",
- "syntax-constant": "#8be9fd",
- "syntax-info": "#8be9fd",
- "markdown-heading": "#bd93f9",
- "markdown-text": "#f8f8f2",
- "markdown-link": "#bd93f9",
- "markdown-link-text": "#8be9fd",
- "markdown-code": "#50fa7b",
- "markdown-block-quote": "#ffb86c",
- "markdown-emph": "#ffb86c",
- "markdown-strong": "#ff79c6",
- "markdown-horizontal-rule": "#44475a",
- "markdown-list-item": "#bd93f9",
- "markdown-list-enumeration": "#8be9fd",
- "markdown-image": "#bd93f9",
- "markdown-image-text": "#8be9fd",
- "markdown-code-block": "#f8f8f2"
+ "syntax-keyword": "#ff79c6",
+ "syntax-string": "#f1fa8c",
+ "syntax-primitive": "#bd93f9"
}
}
}
diff --git a/packages/ui/src/theme/themes/gruvbox.json b/packages/ui/src/theme/themes/gruvbox.json
index cf87ccd553..f078db2d4c 100644
--- a/packages/ui/src/theme/themes/gruvbox.json
+++ b/packages/ui/src/theme/themes/gruvbox.json
@@ -3,130 +3,39 @@
"name": "Gruvbox",
"id": "gruvbox",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#fbf1c7",
+ "ink": "#3c3836",
"primary": "#076678",
+ "accent": "#9d0006",
"success": "#79740e",
"warning": "#b57614",
"error": "#9d0006",
"info": "#8f3f71",
- "interactive": "#076678",
"diffAdd": "#79740e",
"diffDelete": "#9d0006"
},
"overrides": {
- "background-base": "#fbf1c7",
- "background-weak": "#f2e5bc",
- "background-strong": "#f9f5d7",
- "background-stronger": "#fdf9e8",
- "surface-raised-stronger-non-alpha": "#fbfaf5",
- "border-weak-base": "#d5c4a1",
- "border-weak-hover": "#c9b897",
- "border-weak-active": "#bdae93",
- "border-weak-selected": "#b0a285",
- "border-weak-disabled": "#f0e4b8",
- "border-weak-focus": "#c4b590",
- "border-base": "#bdae93",
- "border-hover": "#b0a285",
- "border-active": "#a89984",
- "border-selected": "#928374",
- "border-disabled": "#e5d9ad",
- "border-focus": "#a89984",
- "border-strong-base": "#7c6f64",
- "border-strong-hover": "#6e6259",
- "border-strong-active": "#665c54",
- "border-strong-selected": "#5a524b",
- "border-strong-disabled": "#c9bda1",
- "border-strong-focus": "#665c54",
- "surface-diff-add-base": "#dde3b1",
- "surface-diff-delete-base": "#e8c7c3",
- "surface-diff-hidden-base": "#ebdfb5",
- "text-base": "#3c3836",
- "text-weak": "#7c6f64",
- "text-strong": "#282828",
- "syntax-string": "#79740e",
- "syntax-primitive": "#9d0006",
- "syntax-property": "#076678",
- "syntax-type": "#b57614",
- "syntax-constant": "#8f3f71",
- "syntax-info": "#427b58",
- "markdown-heading": "#076678",
- "markdown-text": "#3c3836",
- "markdown-link": "#076678",
- "markdown-link-text": "#427b58",
- "markdown-code": "#79740e",
- "markdown-block-quote": "#928374",
- "markdown-emph": "#8f3f71",
- "markdown-strong": "#af3a03",
- "markdown-horizontal-rule": "#d5c4a1",
- "markdown-list-item": "#076678",
- "markdown-list-enumeration": "#427b58",
- "markdown-image": "#076678",
- "markdown-image-text": "#427b58",
- "markdown-code-block": "#3c3836"
+ "syntax-keyword": "#9d0006",
+ "syntax-primitive": "#8f3f71"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#282828",
+ "ink": "#ebdbb2",
"primary": "#83a598",
+ "accent": "#fb4934",
"success": "#b8bb26",
"warning": "#fabd2f",
"error": "#fb4934",
"info": "#d3869b",
- "interactive": "#83a598",
"diffAdd": "#b8bb26",
"diffDelete": "#fb4934"
},
"overrides": {
- "background-base": "#282828",
- "background-weak": "#32302f",
- "background-strong": "#1d2021",
- "background-stronger": "#141617",
- "border-weak-base": "#504945",
- "border-weak-hover": "#5a524b",
- "border-weak-active": "#665c54",
- "border-weak-selected": "#70665d",
- "border-weak-disabled": "#1e1d1c",
- "border-weak-focus": "#5e5650",
- "border-base": "#665c54",
- "border-hover": "#70665d",
- "border-active": "#7c6f64",
- "border-selected": "#928374",
- "border-disabled": "#2a2827",
- "border-focus": "#7c6f64",
- "border-strong-base": "#928374",
- "border-strong-hover": "#9d8e7f",
- "border-strong-active": "#a89984",
- "border-strong-selected": "#b3a48f",
- "border-strong-disabled": "#3c3836",
- "border-strong-focus": "#a89984",
- "surface-diff-add-base": "#2a3325",
- "surface-diff-delete-base": "#3c2222",
- "surface-diff-hidden-base": "#32302f",
- "text-base": "#ebdbb2",
- "text-weak": "#a89984",
- "text-strong": "#fbf1c7",
- "syntax-string": "#b8bb26",
- "syntax-primitive": "#fb4934",
- "syntax-property": "#83a598",
- "syntax-type": "#fabd2f",
- "syntax-constant": "#d3869b",
- "syntax-info": "#8ec07c",
- "markdown-heading": "#83a598",
- "markdown-text": "#ebdbb2",
- "markdown-link": "#83a598",
- "markdown-link-text": "#8ec07c",
- "markdown-code": "#b8bb26",
- "markdown-block-quote": "#928374",
- "markdown-emph": "#d3869b",
- "markdown-strong": "#fe8019",
- "markdown-horizontal-rule": "#504945",
- "markdown-list-item": "#83a598",
- "markdown-list-enumeration": "#8ec07c",
- "markdown-image": "#83a598",
- "markdown-image-text": "#8ec07c",
- "markdown-code-block": "#ebdbb2"
+ "syntax-keyword": "#fb4934",
+ "syntax-primitive": "#d3869b"
}
}
}
diff --git a/packages/ui/src/theme/themes/monokai.json b/packages/ui/src/theme/themes/monokai.json
index d49846ddb3..3a2656b6ea 100644
--- a/packages/ui/src/theme/themes/monokai.json
+++ b/packages/ui/src/theme/themes/monokai.json
@@ -3,129 +3,41 @@
"name": "Monokai",
"id": "monokai",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#fdf8ec",
+ "ink": "#292318",
"primary": "#bf7bff",
+ "accent": "#d9487c",
"success": "#4fb54b",
"warning": "#f1a948",
"error": "#e54b4b",
"info": "#2d9ad7",
- "interactive": "#bf7bff",
"diffAdd": "#bfe7a3",
"diffDelete": "#f6a3ae"
},
"overrides": {
- "background-base": "#fdf8ec",
- "background-weak": "#f8f2e6",
- "background-strong": "#fbf5e8",
- "background-stronger": "#f7efdd",
- "border-weak-base": "#e9e0cf",
- "border-weak-hover": "#dfd5c3",
- "border-weak-active": "#d5cab7",
- "border-weak-selected": "#cabfad",
- "border-weak-disabled": "#f3ebdd",
- "border-weak-focus": "#d0c2b1",
- "border-base": "#c7b9a5",
- "border-hover": "#bcae98",
- "border-active": "#b0a28c",
- "border-selected": "#a49781",
- "border-disabled": "#efe5d6",
- "border-focus": "#b6a893",
- "border-strong-base": "#998b76",
- "border-strong-hover": "#8a7c67",
- "border-strong-active": "#7a6d58",
- "border-strong-selected": "#6c604c",
- "border-strong-disabled": "#d7cabc",
- "border-strong-focus": "#82745f",
- "surface-diff-add-base": "#e8f7e1",
- "surface-diff-delete-base": "#fde5e4",
- "surface-diff-hidden-base": "#e9e0d0",
- "text-base": "#292318",
- "text-weak": "#6d5c40",
- "text-strong": "#1c150c",
- "syntax-string": "#4fb54b",
- "syntax-primitive": "#d9487c",
- "syntax-property": "#bf7bff",
- "syntax-type": "#f1a948",
- "syntax-constant": "#2d9ad7",
- "syntax-info": "#2d9ad7",
- "markdown-heading": "#bf7bff",
- "markdown-text": "#292318",
- "markdown-link": "#bf7bff",
- "markdown-link-text": "#2d9ad7",
- "markdown-code": "#4fb54b",
- "markdown-block-quote": "#f1a948",
- "markdown-emph": "#f1a948",
- "markdown-strong": "#d9487c",
- "markdown-horizontal-rule": "#cdbdab",
- "markdown-list-item": "#bf7bff",
- "markdown-list-enumeration": "#2d9ad7",
- "markdown-image": "#bf7bff",
- "markdown-image-text": "#2d9ad7",
- "markdown-code-block": "#2d9ad7"
+ "syntax-keyword": "#d9487c",
+ "syntax-string": "#8a6500",
+ "syntax-primitive": "#bf7bff"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#272822",
+ "ink": "#f8f8f2",
"primary": "#ae81ff",
+ "accent": "#f92672",
"success": "#a6e22e",
"warning": "#fd971f",
"error": "#f92672",
"info": "#66d9ef",
- "interactive": "#ae81ff",
"diffAdd": "#4d7f2a",
"diffDelete": "#f4477c"
},
"overrides": {
- "background-base": "#23241e",
- "background-weak": "#27281f",
- "background-strong": "#25261f",
- "background-stronger": "#292a23",
- "border-weak-base": "#343528",
- "border-weak-hover": "#393a2d",
- "border-weak-active": "#3f4033",
- "border-weak-selected": "#454639",
- "border-weak-disabled": "#1d1e16",
- "border-weak-focus": "#414235",
- "border-base": "#494a3a",
- "border-hover": "#50523f",
- "border-active": "#585a45",
- "border-selected": "#60624b",
- "border-disabled": "#23241b",
- "border-focus": "#555741",
- "border-strong-base": "#6a6c55",
- "border-strong-hover": "#73755d",
- "border-strong-active": "#7d7f66",
- "border-strong-selected": "#878970",
- "border-strong-disabled": "#2c2d23",
- "border-strong-focus": "#7a7c63",
- "surface-diff-add-base": "#1e2a1d",
- "surface-diff-delete-base": "#301c24",
- "surface-diff-hidden-base": "#2f2f24",
- "text-base": "#f8f8f2",
- "text-weak": "#c5c5c0",
- "text-strong": "#ffffff",
- "syntax-string": "#a6e22e",
- "syntax-primitive": "#f92672",
- "syntax-property": "#ae81ff",
- "syntax-type": "#fd971f",
- "syntax-constant": "#66d9ef",
- "syntax-info": "#66d9ef",
- "markdown-heading": "#ae81ff",
- "markdown-text": "#f8f8f2",
- "markdown-link": "#ae81ff",
- "markdown-link-text": "#66d9ef",
- "markdown-code": "#a6e22e",
- "markdown-block-quote": "#fd971f",
- "markdown-emph": "#fd971f",
- "markdown-strong": "#f92672",
- "markdown-horizontal-rule": "#3b3c34",
- "markdown-list-item": "#ae81ff",
- "markdown-list-enumeration": "#66d9ef",
- "markdown-image": "#ae81ff",
- "markdown-image-text": "#66d9ef",
- "markdown-code-block": "#f8f8f2"
+ "syntax-keyword": "#f92672",
+ "syntax-string": "#e6db74",
+ "syntax-primitive": "#ae81ff"
}
}
}
diff --git a/packages/ui/src/theme/themes/nightowl.json b/packages/ui/src/theme/themes/nightowl.json
index 5b0331e5fd..d6b4d4dad2 100644
--- a/packages/ui/src/theme/themes/nightowl.json
+++ b/packages/ui/src/theme/themes/nightowl.json
@@ -3,129 +3,40 @@
"name": "Night Owl",
"id": "nightowl",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f0f0f0",
+ "ink": "#403f53",
"primary": "#4876d6",
+ "accent": "#aa0982",
"success": "#2aa298",
"warning": "#c96765",
"error": "#de3d3b",
"info": "#4876d6",
- "interactive": "#4876d6",
"diffAdd": "#2aa298",
"diffDelete": "#de3d3b"
},
"overrides": {
- "background-base": "#fbfbfb",
- "background-weak": "#f0f0f0",
- "background-strong": "#ffffff",
- "background-stronger": "#ffffff",
- "border-weak-base": "#d9d9d9",
- "border-weak-hover": "#cccccc",
- "border-weak-active": "#bfbfbf",
- "border-weak-selected": "#4876d6",
- "border-weak-disabled": "#e6e6e6",
- "border-weak-focus": "#4876d6",
- "border-base": "#c0c0c0",
- "border-hover": "#b3b3b3",
- "border-active": "#a6a6a6",
- "border-selected": "#4876d6",
- "border-disabled": "#d9d9d9",
- "border-focus": "#4876d6",
- "border-strong-base": "#90a7b2",
- "border-strong-hover": "#7d9aa6",
- "border-strong-active": "#6a8d9a",
- "border-strong-selected": "#4876d6",
- "border-strong-disabled": "#c0c0c0",
- "border-strong-focus": "#4876d6",
- "surface-diff-add-base": "#eaf8f6",
- "surface-diff-delete-base": "#fbe9e9",
- "surface-diff-hidden-base": "#e8f0fc",
- "text-base": "#403f53",
- "text-weak": "#7a8181",
- "text-strong": "#1a1a1a",
- "syntax-string": "#c96765",
- "syntax-primitive": "#aa0982",
- "syntax-property": "#4876d6",
- "syntax-type": "#994cc3",
- "syntax-constant": "#2aa298",
- "syntax-info": "#4876d6",
- "markdown-heading": "#4876d6",
- "markdown-text": "#403f53",
- "markdown-link": "#4876d6",
- "markdown-link-text": "#2aa298",
- "markdown-code": "#2aa298",
- "markdown-block-quote": "#7a8181",
- "markdown-emph": "#994cc3",
- "markdown-strong": "#c96765",
- "markdown-horizontal-rule": "#90a7b2",
- "markdown-list-item": "#4876d6",
- "markdown-list-enumeration": "#2aa298",
- "markdown-image": "#4876d6",
- "markdown-image-text": "#2aa298",
- "markdown-code-block": "#403f53"
+ "syntax-keyword": "#994cc3"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#011627",
+ "ink": "#d6deeb",
"primary": "#82aaff",
+ "accent": "#f78c6c",
"success": "#c5e478",
"warning": "#ecc48d",
"error": "#ef5350",
"info": "#82aaff",
- "interactive": "#82aaff",
"diffAdd": "#c5e478",
"diffDelete": "#ef5350"
},
"overrides": {
- "background-base": "#011627",
- "background-weak": "#0b253a",
- "background-strong": "#001122",
- "background-stronger": "#000c17",
- "border-weak-base": "#1d3b53",
- "border-weak-hover": "#234561",
- "border-weak-active": "#2a506f",
- "border-weak-selected": "#82aaff",
- "border-weak-disabled": "#0f2132",
- "border-weak-focus": "#82aaff",
- "border-base": "#3a5a75",
- "border-hover": "#456785",
- "border-active": "#507494",
- "border-selected": "#82aaff",
- "border-disabled": "#1a3347",
- "border-focus": "#82aaff",
- "border-strong-base": "#5f7e97",
- "border-strong-hover": "#6e8da6",
- "border-strong-active": "#7d9cb5",
- "border-strong-selected": "#82aaff",
- "border-strong-disabled": "#2c4a63",
- "border-strong-focus": "#82aaff",
- "surface-diff-add-base": "#0a2e1a",
- "surface-diff-delete-base": "#2d1b1b",
- "surface-diff-hidden-base": "#0b253a",
- "text-base": "#d6deeb",
- "text-weak": "#5f7e97",
- "text-strong": "#ffffff",
+ "syntax-comment": "#637777",
+ "syntax-keyword": "#c792ea",
"syntax-string": "#ecc48d",
- "syntax-primitive": "#f78c6c",
- "syntax-property": "#82aaff",
- "syntax-type": "#c5e478",
- "syntax-constant": "#7fdbca",
- "syntax-info": "#82aaff",
- "markdown-heading": "#82aaff",
- "markdown-text": "#d6deeb",
- "markdown-link": "#82aaff",
- "markdown-link-text": "#7fdbca",
- "markdown-code": "#c5e478",
- "markdown-block-quote": "#5f7e97",
- "markdown-emph": "#c792ea",
- "markdown-strong": "#ecc48d",
- "markdown-horizontal-rule": "#5f7e97",
- "markdown-list-item": "#82aaff",
- "markdown-list-enumeration": "#7fdbca",
- "markdown-image": "#82aaff",
- "markdown-image-text": "#7fdbca",
- "markdown-code-block": "#d6deeb"
+ "syntax-primitive": "#f78c6c"
}
}
}
diff --git a/packages/ui/src/theme/themes/nord.json b/packages/ui/src/theme/themes/nord.json
index 44378de06a..05ec4672ec 100644
--- a/packages/ui/src/theme/themes/nord.json
+++ b/packages/ui/src/theme/themes/nord.json
@@ -3,129 +3,40 @@
"name": "Nord",
"id": "nord",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#eceff4",
+ "ink": "#2e3440",
"primary": "#5e81ac",
+ "accent": "#bf616a",
"success": "#8fbcbb",
"warning": "#d08770",
"error": "#bf616a",
"info": "#81a1c1",
- "interactive": "#5e81ac",
"diffAdd": "#a3be8c",
"diffDelete": "#bf616a"
},
"overrides": {
- "background-base": "#eceff4",
- "background-weak": "#e4e8f0",
- "background-strong": "#f1f3f8",
- "background-stronger": "#f6f8fc",
- "border-weak-base": "#d5dbe7",
- "border-weak-hover": "#c9d0de",
- "border-weak-active": "#bec5d4",
- "border-weak-selected": "#b2bacc",
- "border-weak-disabled": "#f0f3fa",
- "border-weak-focus": "#b9bfd0",
- "border-base": "#afb7cb",
- "border-hover": "#a3abc1",
- "border-active": "#979fb7",
- "border-selected": "#8b94ad",
- "border-disabled": "#e5e9f2",
- "border-focus": "#9ca4ba",
- "border-strong-base": "#757f97",
- "border-strong-hover": "#69718a",
- "border-strong-active": "#5d647d",
- "border-strong-selected": "#525970",
- "border-strong-disabled": "#c9cedc",
- "border-strong-focus": "#636c84",
- "surface-diff-add-base": "#e4f0e4",
- "surface-diff-delete-base": "#f4e1e4",
- "surface-diff-hidden-base": "#dfe6f2",
- "text-base": "#2e3440",
- "text-weak": "#4c566a",
- "text-strong": "#1f2530",
+ "syntax-keyword": "#5e81ac",
"syntax-string": "#a3be8c",
- "syntax-primitive": "#bf616a",
- "syntax-property": "#5e81ac",
- "syntax-type": "#d08770",
- "syntax-constant": "#81a1c1",
- "syntax-info": "#81a1c1",
- "markdown-heading": "#5e81ac",
- "markdown-text": "#2e3440",
- "markdown-link": "#5e81ac",
- "markdown-link-text": "#81a1c1",
- "markdown-code": "#a3be8c",
- "markdown-block-quote": "#d08770",
- "markdown-emph": "#d08770",
- "markdown-strong": "#bf616a",
- "markdown-horizontal-rule": "#cbd3e1",
- "markdown-list-item": "#5e81ac",
- "markdown-list-enumeration": "#81a1c1",
- "markdown-image": "#5e81ac",
- "markdown-image-text": "#81a1c1",
- "markdown-code-block": "#5e81ac"
+ "syntax-primitive": "#b48ead"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#2e3440",
+ "ink": "#e5e9f0",
"primary": "#88c0d0",
+ "accent": "#d57780",
"success": "#a3be8c",
"warning": "#d08770",
"error": "#bf616a",
"info": "#81a1c1",
- "interactive": "#88c0d0",
"diffAdd": "#81a1c1",
"diffDelete": "#bf616a"
},
"overrides": {
- "background-base": "#1f2430",
- "background-weak": "#222938",
- "background-strong": "#1c202a",
- "background-stronger": "#181c24",
- "border-weak-base": "#343a47",
- "border-weak-hover": "#383f50",
- "border-weak-active": "#3d4458",
- "border-weak-selected": "#434a62",
- "border-weak-disabled": "#151923",
- "border-weak-focus": "#3f4359",
- "border-base": "#4a5163",
- "border-hover": "#515870",
- "border-active": "#585f7c",
- "border-selected": "#606889",
- "border-disabled": "#1b202a",
- "border-focus": "#545b78",
- "border-strong-base": "#6a7492",
- "border-strong-hover": "#747e9f",
- "border-strong-active": "#7e88ac",
- "border-strong-selected": "#8993b9",
- "border-strong-disabled": "#232836",
- "border-strong-focus": "#76819f",
- "surface-diff-add-base": "#1f2e33",
- "surface-diff-delete-base": "#2e212a",
- "surface-diff-hidden-base": "#222b3a",
- "text-base": "#e5e9f0",
- "text-weak": "#a4adbf",
- "text-strong": "#f8fafc",
- "syntax-string": "#a3be8c",
- "syntax-primitive": "#d57780",
- "syntax-property": "#88c0d0",
- "syntax-type": "#eac196",
- "syntax-constant": "#81a1c1",
- "syntax-info": "#81a1c1",
- "markdown-heading": "#88c0d0",
- "markdown-text": "#e5e9f0",
- "markdown-link": "#88c0d0",
- "markdown-link-text": "#81a1c1",
- "markdown-code": "#a3be8c",
- "markdown-block-quote": "#d08770",
- "markdown-emph": "#d08770",
- "markdown-strong": "#bf616a",
- "markdown-horizontal-rule": "#2f384a",
- "markdown-list-item": "#88c0d0",
- "markdown-list-enumeration": "#81a1c1",
- "markdown-image": "#88c0d0",
- "markdown-image-text": "#81a1c1",
- "markdown-code-block": "#cbd3e1"
+ "syntax-keyword": "#81a1c1",
+ "syntax-primitive": "#b48ead"
}
}
}
diff --git a/packages/ui/src/theme/themes/oc-1.json b/packages/ui/src/theme/themes/oc-1.json
index 132825e3fe..7dec9cb802 100644
--- a/packages/ui/src/theme/themes/oc-1.json
+++ b/packages/ui/src/theme/themes/oc-1.json
@@ -3,9 +3,11 @@
"name": "OC-1",
"id": "oc-1",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#8e8b8b",
+ "ink": "#656363",
"primary": "#dcde8d",
+ "accent": "#fb4804",
"success": "#12c905",
"warning": "#ffdc17",
"error": "#fc533a",
@@ -13,260 +15,14 @@
"interactive": "#034cff",
"diffAdd": "#9ff29a",
"diffDelete": "#fc533a"
- },
- "overrides": {
- "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)",
- "surface-base-hover": "#0500000f",
- "surface-base-active": "var(--smoke-light-alpha-3)",
- "surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
- "base2": "var(--smoke-light-alpha-2)",
- "base3": "var(--smoke-light-alpha-2)",
- "surface-inset-base": "var(--smoke-light-alpha-2)",
- "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-2)",
- "surface-float-base": "var(--smoke-dark-1)",
- "surface-float-base-hover": "var(--smoke-dark-2)",
- "surface-raised-base-hover": "var(--smoke-light-alpha-3)",
- "surface-raised-base-active": "var(--smoke-light-alpha-4)",
- "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": "#E5F0FF",
- "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-unchanged-base": "#ffffff00",
- "surface-diff-skip-base": "var(--smoke-light-2)",
- "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": "#dafbe0",
- "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)",
- "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-base": "var(--smoke-light-11)",
- "text-weak": "var(--smoke-light-9)",
- "text-weaker": "var(--smoke-light-8)",
- "text-strong": "var(--smoke-light-12)",
- "text-invert-base": "var(--smoke-dark-alpha-11)",
- "text-invert-weak": "var(--smoke-dark-alpha-9)",
- "text-invert-weaker": "var(--smoke-dark-alpha-8)",
- "text-invert-strong": "var(--smoke-dark-alpha-12)",
- "text-interactive-base": "var(--cobalt-light-9)",
- "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(--apple-light-10)",
- "text-on-critical-base": "var(--ember-light-10)",
- "text-on-critical-weak": "var(--ember-light-8)",
- "text-on-critical-strong": "var(--ember-light-12)",
- "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-10)",
- "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(--apple-light-6)",
- "text-on-success-strong": "var(--apple-light-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-primary-base": "var(--smoke-light-12)",
- "button-secondary-base": "#fdfcfc",
- "button-secondary-hover": "#faf9f9",
- "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-5)",
- "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-invert-base": "#ffffff",
- "icon-weak-base": "var(--smoke-light-7)",
- "icon-weak-hover": "var(--smoke-light-8)",
- "icon-weak-active": "var(--smoke-light-9)",
- "icon-weak-selected": "var(--smoke-light-10)",
- "icon-weak-disabled": "var(--smoke-light-6)",
- "icon-weak-focus": "var(--smoke-light-9)",
- "icon-strong-base": "var(--smoke-light-12)",
- "icon-strong-hover": "#151313",
- "icon-strong-active": "#020202",
- "icon-strong-selected": "#020202",
- "icon-strong-disabled": "var(--smoke-light-8)",
- "icon-strong-focus": "#020202",
- "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-10)",
- "icon-critical-hover": "var(--ember-light-11)",
- "icon-critical-active": "var(--ember-light-12)",
- "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(--cobalt-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-10)",
- "icon-diff-delete-hover": "var(--ember-light-11)",
- "syntax-comment": "var(--text-weak)",
- "syntax-regexp": "var(--text-base)",
- "syntax-string": "#006656",
- "syntax-keyword": "var(--text-weak)",
- "syntax-primitive": "#fb4804",
- "syntax-operator": "var(--text-base)",
- "syntax-variable": "var(--text-strong)",
- "syntax-property": "#ed6dc8",
- "syntax-type": "#596600",
- "syntax-constant": "#007b80",
- "syntax-punctuation": "var(--text-base)",
- "syntax-object": "var(--text-strong)",
- "syntax-success": "var(--apple-light-10)",
- "syntax-warning": "var(--amber-light-10)",
- "syntax-critical": "var(--ember-light-10)",
- "syntax-info": "#0092a8",
- "syntax-diff-add": "var(--mint-light-11)",
- "syntax-diff-delete": "var(--ember-light-11)",
- "syntax-diff-unknown": "#ff0000",
- "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",
- "border-weaker-base": "var(--smoke-light-alpha-3)",
- "button-ghost-hover": "var(--smoke-light-alpha-2)",
- "button-ghost-hover2": "var(--smoke-light-alpha-3)",
- "avatar-background-pink": "#feeef8",
- "avatar-background-mint": "#e1fbf4",
- "avatar-background-orange": "#fff1e7",
- "avatar-background-purple": "#f9f1fe",
- "avatar-background-cyan": "#e7f9fb",
- "avatar-background-lime": "#eefadc",
- "avatar-text-pink": "#cd1d8d",
- "avatar-text-mint": "#147d6f",
- "avatar-text-orange": "#ed5f00",
- "avatar-text-purple": "#8445bc",
- "avatar-text-cyan": "#0894b3",
- "avatar-text-lime": "#5d770d"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#716c6b",
+ "ink": "#b7b1b1",
"primary": "#fab283",
+ "accent": "#ffba92",
"success": "#12c905",
"warning": "#fcd53a",
"error": "#fc533a",
@@ -274,254 +30,6 @@
"interactive": "#034cff",
"diffAdd": "#c8ffc4",
"diffDelete": "#fc533a"
- },
- "overrides": {
- "background-base": "var(--smoke-dark-1)",
- "background-weak": "#1c1717",
- "background-strong": "#151313",
- "background-stronger": "#191515",
- "surface-base": "var(--smoke-dark-alpha-2)",
- "base": "var(--smoke-dark-alpha-2)",
- "surface-base-hover": "#e0b7b716",
- "surface-base-active": "var(--smoke-dark-alpha-3)",
- "surface-base-interactive-active": "var(--cobalt-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-base-active": "var(--smoke-dark-alpha-5)",
- "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-4)",
- "surface-weaker": "var(--smoke-dark-alpha-5)",
- "surface-strong": "var(--smoke-dark-alpha-7)",
- "surface-raised-stronger-non-alpha": "var(--smoke-dark-3)",
- "surface-brand-base": "var(--yuzu-light-9)",
- "surface-brand-hover": "var(--yuzu-light-10)",
- "surface-interactive-base": "var(--cobalt-dark-3)",
- "surface-interactive-hover": "#0A1D4D",
- "surface-interactive-weak": "var(--cobalt-dark-2)",
- "surface-interactive-weak-hover": "var(--cobalt-light-3)",
- "surface-success-base": "var(--apple-dark-3)",
- "surface-success-weak": "var(--apple-dark-2)",
- "surface-success-strong": "var(--apple-dark-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-dark-3)",
- "surface-critical-weak": "var(--ember-dark-2)",
- "surface-critical-strong": "var(--ember-dark-9)",
- "surface-info-base": "var(--lilac-light-3)",
- "surface-info-weak": "var(--lilac-light-2)",
- "surface-info-strong": "var(--lilac-light-9)",
- "surface-diff-unchanged-base": "var(--smoke-dark-1)",
- "surface-diff-skip-base": "var(--smoke-dark-alpha-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)",
- "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-base": "var(--smoke-dark-alpha-11)",
- "text-weak": "var(--smoke-dark-alpha-9)",
- "text-weaker": "var(--smoke-dark-alpha-8)",
- "text-strong": "var(--smoke-dark-alpha-12)",
- "text-invert-base": "var(--smoke-dark-alpha-11)",
- "text-invert-weak": "var(--smoke-dark-alpha-9)",
- "text-invert-weaker": "var(--smoke-dark-alpha-8)",
- "text-invert-strong": "var(--smoke-dark-alpha-12)",
- "text-interactive-base": "var(--cobalt-dark-11)",
- "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(--apple-dark-9)",
- "text-on-critical-base": "var(--ember-dark-9)",
- "text-on-critical-weak": "var(--ember-dark-8)",
- "text-on-critical-strong": "var(--ember-dark-12)",
- "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(--apple-dark-8)",
- "text-on-success-strong": "var(--apple-dark-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-primary-base": "var(--smoke-dark-12)",
- "button-secondary-base": "#231f1f",
- "button-secondary-hover": "#2a2727",
- "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-11)",
- "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-dark-5)",
- "border-critical-hover": "var(--ember-dark-7)",
- "border-critical-selected": "var(--ember-dark-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-invert-base": "var(--smoke-dark-1)",
- "icon-weak-base": "var(--smoke-dark-6)",
- "icon-weak-hover": "var(--smoke-light-7)",
- "icon-weak-active": "var(--smoke-light-8)",
- "icon-weak-selected": "var(--smoke-light-9)",
- "icon-weak-disabled": "var(--smoke-light-4)",
- "icon-weak-focus": "var(--smoke-light-9)",
- "icon-strong-base": "var(--smoke-dark-12)",
- "icon-strong-hover": "#f6f3f3",
- "icon-strong-active": "#fcfcfc",
- "icon-strong-selected": "#fdfcfc",
- "icon-strong-disabled": "var(--smoke-dark-8)",
- "icon-strong-focus": "#fdfcfc",
- "icon-brand-base": "var(--white)",
- "icon-interactive-base": "var(--cobalt-dark-11)",
- "icon-success-base": "var(--apple-dark-9)",
- "icon-success-hover": "var(--apple-dark-10)",
- "icon-success-active": "var(--apple-dark-11)",
- "icon-warning-base": "var(--amber-dark-9)",
- "icon-warning-hover": "var(--amber-dark-8)",
- "icon-warning-active": "var(--amber-dark-11)",
- "icon-critical-base": "var(--ember-dark-9)",
- "icon-critical-hover": "var(--ember-dark-11)",
- "icon-critical-active": "var(--ember-dark-12)",
- "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(--cobalt-dark-11)",
- "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)",
- "syntax-comment": "var(--text-weak)",
- "syntax-regexp": "var(--text-base)",
- "syntax-string": "#00ceb9",
- "syntax-keyword": "var(--text-weak)",
- "syntax-primitive": "#ffba92",
- "syntax-operator": "var(--text-weak)",
- "syntax-variable": "var(--text-strong)",
- "syntax-property": "#ff9ae2",
- "syntax-type": "#ecf58c",
- "syntax-constant": "#93e9f6",
- "syntax-punctuation": "var(--text-weak)",
- "syntax-object": "var(--text-strong)",
- "syntax-success": "var(--apple-dark-10)",
- "syntax-warning": "var(--amber-dark-10)",
- "syntax-critical": "var(--ember-dark-10)",
- "syntax-info": "#93e9f6",
- "syntax-diff-add": "var(--mint-dark-11)",
- "syntax-diff-delete": "var(--ember-dark-11)",
- "syntax-diff-unknown": "#ff0000",
- "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",
- "border-weaker-base": "var(--smoke-dark-alpha-3)",
- "button-ghost-hover": "var(--smoke-dark-alpha-2)",
- "button-ghost-hover2": "var(--smoke-dark-alpha-3)",
- "avatar-background-pink": "#501b3f",
- "avatar-background-mint": "#033a34",
- "avatar-background-orange": "#5f2a06",
- "avatar-background-purple": "#432155",
- "avatar-background-cyan": "#0f3058",
- "avatar-background-lime": "#2b3711",
- "avatar-text-pink": "#e34ba9",
- "avatar-text-mint": "#95f3d9",
- "avatar-text-orange": "#ff802b",
- "avatar-text-purple": "#9d5bd2",
- "avatar-text-cyan": "#369eff",
- "avatar-text-lime": "#c4f042"
}
}
}
diff --git a/packages/ui/src/theme/themes/oc-2.json b/packages/ui/src/theme/themes/oc-2.json
index 73ca57da9d..fdf0c2caf4 100644
--- a/packages/ui/src/theme/themes/oc-2.json
+++ b/packages/ui/src/theme/themes/oc-2.json
@@ -3,7 +3,7 @@
"name": "OC-2",
"id": "oc-2",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#8f8f8f",
"primary": "#dcde8d",
"success": "#12c905",
@@ -13,258 +13,10 @@
"interactive": "#034cff",
"diffAdd": "#9ff29a",
"diffDelete": "#fc533a"
- },
- "overrides": {
- "background-base": "#f8f8f8",
- "background-weak": "#f3f3f3",
- "background-strong": "#fcfcfc",
- "background-stronger": "#fcfcfc",
- "surface-base": "#00000008",
- "base": "#00000008",
- "surface-base-hover": "#0000000f",
- "surface-base-active": "#0000000d",
- "surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
- "base2": "#00000008",
- "base3": "#00000008",
- "surface-inset-base": "#00000008",
- "surface-inset-base-hover": "#0000000d",
- "surface-inset-strong": "#00000017",
- "surface-inset-strong-hover": "#00000017",
- "surface-raised-base": "#00000008",
- "surface-float-base": "#161616",
- "surface-float-base-hover": "#1c1c1c",
- "surface-raised-base-hover": "#0000000d",
- "surface-raised-base-active": "#00000017",
- "surface-raised-strong": "#fcfcfc",
- "surface-raised-strong-hover": "var(--white)",
- "surface-raised-stronger": "var(--white)",
- "surface-raised-stronger-hover": "var(--white)",
- "surface-weak": "#0000000d",
- "surface-weaker": "#00000012",
- "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": "#E5F0FF",
- "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-unchanged-base": "#ffffff00",
- "surface-diff-skip-base": "#f8f8f8",
- "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": "#dafbe0",
- "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)",
- "input-base": "#fcfcfc",
- "input-hover": "#f8f8f8",
- "input-active": "var(--cobalt-light-1)",
- "input-selected": "var(--cobalt-light-4)",
- "input-focus": "var(--cobalt-light-1)",
- "input-disabled": "#ededed",
- "text-base": "#6f6f6f",
- "text-weak": "#8f8f8f",
- "text-weaker": "#c7c7c7",
- "text-strong": "#171717",
- "text-invert-base": "#ffffff96",
- "text-invert-weak": "#ffffff63",
- "text-invert-weaker": "#ffffff40",
- "text-invert-strong": "#ffffffeb",
- "text-interactive-base": "var(--cobalt-light-9)",
- "text-on-brand-base": "#0000008f",
- "text-on-interactive-base": "#fcfcfc",
- "text-on-interactive-weak": "#ffffff96",
- "text-on-success-base": "var(--apple-light-10)",
- "text-on-critical-base": "var(--ember-light-10)",
- "text-on-critical-weak": "var(--ember-light-8)",
- "text-on-critical-strong": "var(--ember-light-12)",
- "text-on-warning-base": "#ffffff96",
- "text-on-info-base": "#ffffff96",
- "text-diff-add-base": "var(--mint-light-11)",
- "text-diff-delete-base": "var(--ember-light-10)",
- "text-diff-delete-strong": "var(--ember-light-12)",
- "text-diff-add-strong": "var(--mint-light-12)",
- "text-on-info-weak": "#ffffff63",
- "text-on-info-strong": "#ffffffeb",
- "text-on-warning-weak": "#ffffff63",
- "text-on-warning-strong": "#ffffffeb",
- "text-on-success-weak": "var(--apple-light-6)",
- "text-on-success-strong": "var(--apple-light-12)",
- "text-on-brand-weak": "#00000070",
- "text-on-brand-weaker": "#00000038",
- "text-on-brand-strong": "#000000e8",
- "button-primary-base": "#171717",
- "button-secondary-base": "#fcfcfc",
- "button-secondary-hover": "FFFFFF0A",
- "border-base": "#00000024",
- "border-hover": "#00000038",
- "border-active": "#00000070",
- "border-selected": "var(--cobalt-light-alpha-9)",
- "border-disabled": "#00000038",
- "border-focus": "#00000070",
- "border-weak-base": "#e5e5e5",
- "border-strong-base": "#00000024",
- "border-strong-hover": "#00000038",
- "border-strong-active": "#00000024",
- "border-strong-selected": "var(--cobalt-light-alpha-6)",
- "border-strong-disabled": "#0000001c",
- "border-strong-focus": "#00000024",
- "border-weak-hover": "#0000001c",
- "border-weak-active": "#00000024",
- "border-weak-selected": "var(--cobalt-light-alpha-5)",
- "border-weak-disabled": "#0000001c",
- "border-weak-focus": "#00000024",
- "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": "#c7c7c7",
- "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": "#8f8f8f",
- "icon-hover": "#6f6f6f",
- "icon-active": "#171717",
- "icon-selected": "#171717",
- "icon-disabled": "#c7c7c7",
- "icon-focus": "#171717",
- "icon-invert-base": "#ffffff",
- "icon-weak-base": "#dbdbdb",
- "icon-weak-hover": "#c7c7c7",
- "icon-weak-active": "#8f8f8f",
- "icon-weak-selected": "#858585",
- "icon-weak-disabled": "#e2e2e2",
- "icon-weak-focus": "#8f8f8f",
- "icon-strong-base": "#171717",
- "icon-strong-hover": "#151515",
- "icon-strong-active": "#020202",
- "icon-strong-selected": "#020202",
- "icon-strong-disabled": "#e2e2e2",
- "icon-strong-focus": "#020202",
- "icon-brand-base": "#171717",
- "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-10)",
- "icon-critical-hover": "var(--ember-light-11)",
- "icon-critical-active": "var(--ember-light-12)",
- "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": "#0000008f",
- "icon-on-brand-hover": "#000000e8",
- "icon-on-brand-selected": "#000000e8",
- "icon-on-interactive-base": "#fcfcfc",
- "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(--cobalt-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-10)",
- "icon-diff-delete-hover": "var(--ember-light-11)",
- "syntax-comment": "var(--text-weak)",
- "syntax-regexp": "var(--text-base)",
- "syntax-string": "#006656",
- "syntax-keyword": "var(--text-weak)",
- "syntax-primitive": "#fb4804",
- "syntax-operator": "var(--text-base)",
- "syntax-variable": "var(--text-strong)",
- "syntax-property": "#ed6dc8",
- "syntax-type": "#596600",
- "syntax-constant": "#007b80",
- "syntax-punctuation": "var(--text-base)",
- "syntax-object": "var(--text-strong)",
- "syntax-success": "var(--apple-light-10)",
- "syntax-warning": "var(--amber-light-10)",
- "syntax-critical": "var(--ember-light-10)",
- "syntax-info": "#0092a8",
- "syntax-diff-add": "var(--mint-light-11)",
- "syntax-diff-delete": "var(--ember-light-11)",
- "syntax-diff-unknown": "#ff0000",
- "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",
- "border-weaker-base": "#efefef",
- "button-ghost-hover": "#00000008",
- "button-ghost-hover2": "#0000000d",
- "avatar-background-pink": "#feeef8",
- "avatar-background-mint": "#e1fbf4",
- "avatar-background-orange": "#fff1e7",
- "avatar-background-purple": "#f9f1fe",
- "avatar-background-cyan": "#e7f9fb",
- "avatar-background-lime": "#eefadc",
- "avatar-text-pink": "#cd1d8d",
- "avatar-text-mint": "#147d6f",
- "avatar-text-orange": "#ed5f00",
- "avatar-text-purple": "#8445bc",
- "avatar-text-cyan": "#0894b3",
- "avatar-text-lime": "#5d770d"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#707070",
"primary": "#fab283",
"success": "#12c905",
@@ -274,249 +26,6 @@
"interactive": "#034cff",
"diffAdd": "#c8ffc4",
"diffDelete": "#fc533a"
- },
- "overrides": {
- "base": "#ffffff08",
- "base2": "#ffffff08",
- "base3": "#ffffff08",
- "background-base": "#101010",
- "background-weak": "#1E1E1E",
- "background-strong": "#121212",
- "background-stronger": "#151515",
- "surface-base": "#ffffff08",
- "surface-base-hover": "#FFFFFF0A",
- "surface-base-active": "#ffffff0f",
- "surface-base-interactive-active": "var(--cobalt-dark-alpha-2)",
- "surface-inset-base": "#0000007f",
- "surface-inset-base-hover": "#0000007f",
- "surface-inset-strong": "#000000cc",
- "surface-inset-strong-hover": "#000000cc",
- "surface-raised-base": "#ffffff0f",
- "surface-float-base": "#161616",
- "surface-float-base-hover": "#1c1c1c",
- "surface-raised-base-hover": "#ffffff14",
- "surface-raised-base-active": "#ffffff1a",
- "surface-raised-strong": "#ffffff14",
- "surface-raised-strong-hover": "#ffffff21",
- "surface-raised-stronger": "#ffffff21",
- "surface-raised-stronger-hover": "#ffffff2b",
- "surface-weak": "#ffffff14",
- "surface-weaker": "#ffffff1a",
- "surface-strong": "#ffffff2b",
- "surface-raised-stronger-non-alpha": "#1B1B1B",
- "surface-brand-base": "var(--yuzu-light-9)",
- "surface-brand-hover": "var(--yuzu-light-10)",
- "surface-interactive-base": "var(--cobalt-dark-3)",
- "surface-interactive-hover": "#0A1D4D",
- "surface-interactive-weak": "var(--cobalt-dark-2)",
- "surface-interactive-weak-hover": "var(--cobalt-light-3)",
- "surface-success-base": "var(--apple-dark-3)",
- "surface-success-weak": "var(--apple-dark-2)",
- "surface-success-strong": "var(--apple-dark-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-dark-3)",
- "surface-critical-weak": "var(--ember-dark-2)",
- "surface-critical-strong": "var(--ember-dark-9)",
- "surface-info-base": "var(--lilac-light-3)",
- "surface-info-weak": "var(--lilac-light-2)",
- "surface-info-strong": "var(--lilac-light-9)",
- "surface-diff-unchanged-base": "#161616",
- "surface-diff-skip-base": "#00000000",
- "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)",
- "input-base": "#1c1c1c",
- "input-hover": "#1c1c1c",
- "input-active": "var(--cobalt-dark-1)",
- "input-selected": "var(--cobalt-dark-2)",
- "input-focus": "var(--cobalt-dark-1)",
- "input-disabled": "#282828",
- "text-base": "#ffffff96",
- "text-weak": "#ffffff63",
- "text-weaker": "#ffffff40",
- "text-strong": "#ffffffeb",
- "text-invert-base": "#ffffff96",
- "text-invert-weak": "#ffffff63",
- "text-invert-weaker": "#ffffff40",
- "text-invert-strong": "#ffffffeb",
- "text-interactive-base": "var(--cobalt-dark-11)",
- "text-on-brand-base": "#ffffff96",
- "text-on-interactive-base": "#ededed",
- "text-on-interactive-weak": "#ffffff96",
- "text-on-success-base": "var(--apple-dark-9)",
- "text-on-critical-base": "var(--ember-dark-9)",
- "text-on-critical-weak": "var(--ember-dark-8)",
- "text-on-critical-strong": "var(--ember-dark-12)",
- "text-on-warning-base": "#ffffff96",
- "text-on-info-base": "#ffffff96",
- "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": "#ffffff63",
- "text-on-info-strong": "#ffffffeb",
- "text-on-warning-weak": "#ffffff63",
- "text-on-warning-strong": "#ffffffeb",
- "text-on-success-weak": "var(--apple-dark-8)",
- "text-on-success-strong": "var(--apple-dark-12)",
- "text-on-brand-weak": "#ffffff63",
- "text-on-brand-weaker": "#ffffff40",
- "text-on-brand-strong": "#ffffffeb",
- "button-primary-base": "#ededed",
- "button-secondary-base": "#1c1c1c",
- "button-secondary-hover": "#FFFFFF0A",
- "border-base": "#ffffff2b",
- "border-hover": "#ffffff40",
- "border-active": "#ffffff63",
- "border-selected": "var(--cobalt-dark-alpha-11)",
- "border-disabled": "#ffffff40",
- "border-focus": "#ffffff63",
- "border-weak-base": "#282828",
- "border-weak-hover": "#ffffff2b",
- "border-weak-active": "#ffffff40",
- "border-weak-selected": "var(--cobalt-dark-alpha-6)",
- "border-weak-disabled": "#ffffff21",
- "border-weak-focus": "#ffffff40",
- "border-strong-base": "#ffffff40",
- "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": "#c7c7c7",
- "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-dark-5)",
- "border-critical-hover": "var(--ember-dark-7)",
- "border-critical-selected": "var(--ember-dark-9)",
- "border-info-base": "var(--lilac-light-6)",
- "border-info-hover": "var(--lilac-light-7)",
- "border-info-selected": "var(--lilac-light-9)",
- "icon-base": "#7e7e7e",
- "icon-hover": "#a0a0a0",
- "icon-active": "#ededed",
- "icon-selected": "#ededed",
- "icon-disabled": "#505050",
- "icon-focus": "#ededed",
- "icon-invert-base": "#161616",
- "icon-weak-base": "#343434",
- "icon-weak-hover": "#dbdbdb",
- "icon-weak-active": "#c7c7c7",
- "icon-weak-selected": "#8f8f8f",
- "icon-weak-disabled": "#ededed",
- "icon-weak-focus": "#8f8f8f",
- "icon-strong-base": "#ededed",
- "icon-strong-hover": "#F3F3F3",
- "icon-strong-active": "#EBEBEB",
- "icon-strong-selected": "#FCFCFC",
- "icon-strong-disabled": "#3e3e3e",
- "icon-strong-focus": "#FCFCFC",
- "icon-brand-base": "var(--white)",
- "icon-interactive-base": "var(--cobalt-dark-11)",
- "icon-success-base": "var(--apple-dark-9)",
- "icon-success-hover": "var(--apple-dark-10)",
- "icon-success-active": "var(--apple-dark-11)",
- "icon-warning-base": "var(--amber-dark-9)",
- "icon-warning-hover": "var(--amber-dark-8)",
- "icon-warning-active": "var(--amber-dark-11)",
- "icon-critical-base": "var(--ember-dark-9)",
- "icon-critical-hover": "var(--ember-dark-11)",
- "icon-critical-active": "var(--ember-dark-12)",
- "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": "#0000008f",
- "icon-on-brand-hover": "#000000e8",
- "icon-on-brand-selected": "#000000e8",
- "icon-on-interactive-base": "#ededed",
- "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(--cobalt-dark-11)",
- "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)",
- "syntax-comment": "var(--text-weak)",
- "syntax-regexp": "var(--text-base)",
- "syntax-string": "#00ceb9",
- "syntax-keyword": "var(--text-weak)",
- "syntax-primitive": "#ffba92",
- "syntax-operator": "var(--text-weak)",
- "syntax-variable": "var(--text-strong)",
- "syntax-property": "#ff9ae2",
- "syntax-type": "#ecf58c",
- "syntax-constant": "#93e9f6",
- "syntax-punctuation": "var(--text-weak)",
- "syntax-object": "var(--text-strong)",
- "syntax-success": "var(--apple-dark-10)",
- "syntax-warning": "var(--amber-dark-10)",
- "syntax-critical": "var(--ember-dark-10)",
- "syntax-info": "#93e9f6",
- "syntax-diff-add": "var(--mint-dark-11)",
- "syntax-diff-delete": "var(--ember-dark-11)",
- "syntax-diff-unknown": "#ff0000",
- "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",
- "border-weaker-base": "#1e1e1e",
- "button-ghost-hover": "#ffffff08",
- "button-ghost-hover2": "#ffffff0f",
- "avatar-background-pink": "#501b3f",
- "avatar-background-mint": "#033a34",
- "avatar-background-orange": "#5f2a06",
- "avatar-background-purple": "#432155",
- "avatar-background-cyan": "#0f3058",
- "avatar-background-lime": "#2b3711",
- "avatar-text-pink": "#e34ba9",
- "avatar-text-mint": "#95f3d9",
- "avatar-text-orange": "#ff802b",
- "avatar-text-purple": "#9d5bd2",
- "avatar-text-cyan": "#369eff",
- "avatar-text-lime": "#c4f042"
}
}
}
diff --git a/packages/ui/src/theme/themes/onedarkpro.json b/packages/ui/src/theme/themes/onedarkpro.json
index ce01511e85..be17dedff3 100644
--- a/packages/ui/src/theme/themes/onedarkpro.json
+++ b/packages/ui/src/theme/themes/onedarkpro.json
@@ -3,129 +3,39 @@
"name": "One Dark Pro",
"id": "onedarkpro",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f5f6f8",
+ "ink": "#2b303b",
"primary": "#528bff",
+ "accent": "#d85462",
"success": "#4fa66d",
"warning": "#d19a66",
"error": "#e06c75",
"info": "#61afef",
- "interactive": "#528bff",
"diffAdd": "#c2ebcf",
"diffDelete": "#f7c1c5"
},
"overrides": {
- "background-base": "#f5f6f8",
- "background-weak": "#eef0f4",
- "background-strong": "#fafbfc",
- "background-stronger": "#ffffff",
- "border-weak-base": "#dee2eb",
- "border-weak-hover": "#d4d9e3",
- "border-weak-active": "#caced6",
- "border-weak-selected": "#bec4d0",
- "border-weak-disabled": "#f4f6fb",
- "border-weak-focus": "#c4cada",
- "border-base": "#b5bccd",
- "border-hover": "#aab1c2",
- "border-active": "#a0a7b8",
- "border-selected": "#959cae",
- "border-disabled": "#eceef4",
- "border-focus": "#a6adbf",
- "border-strong-base": "#747c92",
- "border-strong-hover": "#6a7287",
- "border-strong-active": "#60687c",
- "border-strong-selected": "#565e71",
- "border-strong-disabled": "#cbd0dd",
- "border-strong-focus": "#666d82",
- "surface-diff-add-base": "#e5f4ea",
- "surface-diff-delete-base": "#fde7ea",
- "surface-diff-hidden-base": "#e4e8f4",
- "text-base": "#2b303b",
- "text-weak": "#6b717f",
- "text-strong": "#0e1118",
- "syntax-string": "#4fa66d",
- "syntax-primitive": "#d85462",
- "syntax-property": "#528bff",
- "syntax-type": "#d19a66",
- "syntax-constant": "#61afef",
- "syntax-info": "#61afef",
- "markdown-heading": "#528bff",
- "markdown-text": "#2b303b",
- "markdown-link": "#528bff",
- "markdown-link-text": "#61afef",
- "markdown-code": "#4fa66d",
- "markdown-block-quote": "#d19a66",
- "markdown-emph": "#d19a66",
- "markdown-strong": "#d85462",
- "markdown-horizontal-rule": "#d3d7e4",
- "markdown-list-item": "#528bff",
- "markdown-list-enumeration": "#61afef",
- "markdown-image": "#528bff",
- "markdown-image-text": "#61afef",
- "markdown-code-block": "#528bff"
+ "syntax-keyword": "#a626a4",
+ "syntax-primitive": "#986801"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#1e222a",
+ "ink": "#abb2bf",
"primary": "#61afef",
+ "accent": "#e06c75",
"success": "#98c379",
"warning": "#e5c07b",
"error": "#e06c75",
"info": "#56b6c2",
- "interactive": "#61afef",
"diffAdd": "#4b815a",
"diffDelete": "#b2555f"
},
"overrides": {
- "background-base": "#1e222a",
- "background-weak": "#212631",
- "background-strong": "#1b1f27",
- "background-stronger": "#171b23",
- "border-weak-base": "#323848",
- "border-weak-hover": "#363d52",
- "border-weak-active": "#3c435c",
- "border-weak-selected": "#424967",
- "border-weak-disabled": "#141720",
- "border-weak-focus": "#3f4560",
- "border-base": "#4a5164",
- "border-hover": "#515871",
- "border-active": "#585f7e",
- "border-selected": "#60688a",
- "border-disabled": "#1a1e27",
- "border-focus": "#555c79",
- "border-strong-base": "#6a7390",
- "border-strong-hover": "#737c9d",
- "border-strong-active": "#7d87ab",
- "border-strong-selected": "#8791b8",
- "border-strong-disabled": "#212533",
- "border-strong-focus": "#7680a2",
- "surface-diff-add-base": "#1c2a26",
- "surface-diff-delete-base": "#2a1c22",
- "surface-diff-hidden-base": "#232836",
- "text-base": "#abb2bf",
- "text-weak": "#818899",
- "text-strong": "#f6f7fb",
- "syntax-string": "#98c379",
- "syntax-primitive": "#e06c75",
- "syntax-property": "#61afef",
- "syntax-type": "#e5c07b",
- "syntax-constant": "#56b6c2",
- "syntax-info": "#56b6c2",
- "markdown-heading": "#61afef",
- "markdown-text": "#abb2bf",
- "markdown-link": "#61afef",
- "markdown-link-text": "#56b6c2",
- "markdown-code": "#98c379",
- "markdown-block-quote": "#e5c07b",
- "markdown-emph": "#e5c07b",
- "markdown-strong": "#e06c75",
- "markdown-horizontal-rule": "#2d3444",
- "markdown-list-item": "#61afef",
- "markdown-list-enumeration": "#56b6c2",
- "markdown-image": "#61afef",
- "markdown-image-text": "#56b6c2",
- "markdown-code-block": "#abb2bf"
+ "syntax-keyword": "#c678dd",
+ "syntax-primitive": "#d19a66"
}
}
}
diff --git a/packages/ui/src/theme/themes/shadesofpurple.json b/packages/ui/src/theme/themes/shadesofpurple.json
index bc625770f9..03af35c2a3 100644
--- a/packages/ui/src/theme/themes/shadesofpurple.json
+++ b/packages/ui/src/theme/themes/shadesofpurple.json
@@ -3,129 +3,37 @@
"name": "Shades of Purple",
"id": "shadesofpurple",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#f7ebff",
+ "ink": "#3b2c59",
"primary": "#7a5af8",
+ "accent": "#ff6bd5",
"success": "#3dd598",
"warning": "#f7c948",
"error": "#ff6bd5",
"info": "#62d4ff",
- "interactive": "#7a5af8",
"diffAdd": "#c8f8da",
"diffDelete": "#ffc3ef"
},
"overrides": {
- "background-base": "#f7ebff",
- "background-weak": "#f2e2ff",
- "background-strong": "#fbf2ff",
- "background-stronger": "#fff7ff",
- "border-weak-base": "#e5d3ff",
- "border-weak-hover": "#dac8f5",
- "border-weak-active": "#d1bdeb",
- "border-weak-selected": "#c6b3e1",
- "border-weak-disabled": "#fcf6ff",
- "border-weak-focus": "#ccb9e7",
- "border-base": "#baa4d5",
- "border-hover": "#b098cb",
- "border-active": "#a68dc2",
- "border-selected": "#9b82b8",
- "border-disabled": "#f1e7ff",
- "border-focus": "#a692c6",
- "border-strong-base": "#8769a9",
- "border-strong-hover": "#7b5c9d",
- "border-strong-active": "#704f91",
- "border-strong-selected": "#664587",
- "border-strong-disabled": "#d8c4f0",
- "border-strong-focus": "#755495",
- "surface-diff-add-base": "#edf8f1",
- "surface-diff-delete-base": "#ffe4f4",
- "surface-diff-hidden-base": "#e9e4ff",
- "text-base": "#3b2c59",
- "text-weak": "#6c568f",
- "text-strong": "#1c1033",
- "syntax-string": "#3dd598",
- "syntax-primitive": "#ff6bd5",
- "syntax-property": "#7a5af8",
- "syntax-type": "#f7c948",
- "syntax-constant": "#62d4ff",
- "syntax-info": "#62d4ff",
- "markdown-heading": "#7a5af8",
- "markdown-text": "#3b2c59",
- "markdown-link": "#7a5af8",
- "markdown-link-text": "#62d4ff",
- "markdown-code": "#3dd598",
- "markdown-block-quote": "#f7c948",
- "markdown-emph": "#f7c948",
- "markdown-strong": "#ff6bd5",
- "markdown-horizontal-rule": "#decbed",
- "markdown-list-item": "#7a5af8",
- "markdown-list-enumeration": "#62d4ff",
- "markdown-image": "#7a5af8",
- "markdown-image-text": "#62d4ff",
- "markdown-code-block": "#7a5af8"
+ "syntax-keyword": "#ff6bd5"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#1a102b",
+ "ink": "#f5f0ff",
"primary": "#c792ff",
+ "accent": "#ff7ac6",
"success": "#7be0b0",
"warning": "#ffd580",
"error": "#ff7ac6",
"info": "#7dd4ff",
- "interactive": "#c792ff",
"diffAdd": "#53c39f",
"diffDelete": "#d85aa0"
},
"overrides": {
- "background-base": "#1a102b",
- "background-weak": "#1f1434",
- "background-strong": "#1c122f",
- "background-stronger": "#170e26",
- "border-weak-base": "#352552",
- "border-weak-hover": "#3a2a5d",
- "border-weak-active": "#402f68",
- "border-weak-selected": "#463674",
- "border-weak-disabled": "#10091b",
- "border-weak-focus": "#3d2d65",
- "border-base": "#4d3a73",
- "border-hover": "#553f7f",
- "border-active": "#5d468c",
- "border-selected": "#654c99",
- "border-disabled": "#150d21",
- "border-focus": "#594283",
- "border-strong-base": "#7659b0",
- "border-strong-hover": "#8262be",
- "border-strong-active": "#8e6ccc",
- "border-strong-selected": "#9a77da",
- "border-strong-disabled": "#1c122c",
- "border-strong-focus": "#8666c4",
- "surface-diff-add-base": "#142c27",
- "surface-diff-delete-base": "#2d1424",
- "surface-diff-hidden-base": "#231737",
- "text-base": "#f5f0ff",
- "text-weak": "#c9b6ff",
- "text-strong": "#ffffff",
- "syntax-string": "#7be0b0",
- "syntax-primitive": "#ff7ac6",
- "syntax-property": "#c792ff",
- "syntax-type": "#ffd580",
- "syntax-constant": "#7dd4ff",
- "syntax-info": "#7dd4ff",
- "markdown-heading": "#c792ff",
- "markdown-text": "#f5f0ff",
- "markdown-link": "#c792ff",
- "markdown-link-text": "#7dd4ff",
- "markdown-code": "#7be0b0",
- "markdown-block-quote": "#ffd580",
- "markdown-emph": "#ffd580",
- "markdown-strong": "#ff7ac6",
- "markdown-horizontal-rule": "#2d1d41",
- "markdown-list-item": "#c792ff",
- "markdown-list-enumeration": "#7dd4ff",
- "markdown-image": "#c792ff",
- "markdown-image-text": "#7dd4ff",
- "markdown-code-block": "#f5f0ff"
+ "syntax-keyword": "#ff7ac6"
}
}
}
diff --git a/packages/ui/src/theme/themes/solarized.json b/packages/ui/src/theme/themes/solarized.json
index 7cb44775af..24a4daf458 100644
--- a/packages/ui/src/theme/themes/solarized.json
+++ b/packages/ui/src/theme/themes/solarized.json
@@ -3,129 +3,39 @@
"name": "Solarized",
"id": "solarized",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#fdf6e3",
+ "ink": "#586e75",
"primary": "#268bd2",
+ "accent": "#d33682",
"success": "#859900",
"warning": "#b58900",
"error": "#dc322f",
"info": "#2aa198",
- "interactive": "#268bd2",
"diffAdd": "#c6dc7a",
"diffDelete": "#f2a1a1"
},
"overrides": {
- "background-base": "#fdf6e3",
- "background-weak": "#f6efda",
- "background-strong": "#faf3dc",
- "background-stronger": "#f6edd4",
- "border-weak-base": "#e3e0cd",
- "border-weak-hover": "#d9d4c2",
- "border-weak-active": "#cfcab7",
- "border-weak-selected": "#c5c0ad",
- "border-weak-disabled": "#f2edda",
- "border-weak-focus": "#cbc6b2",
- "border-base": "#bcb5a0",
- "border-hover": "#b1aa96",
- "border-active": "#a59f8c",
- "border-selected": "#999382",
- "border-disabled": "#ede7d4",
- "border-focus": "#aca58f",
- "border-strong-base": "#8c8572",
- "border-strong-hover": "#7f7866",
- "border-strong-active": "#716b5b",
- "border-strong-selected": "#645f50",
- "border-strong-disabled": "#d5cdb8",
- "border-strong-focus": "#78715f",
- "surface-diff-add-base": "#eef5d6",
- "surface-diff-delete-base": "#fde4dd",
- "surface-diff-hidden-base": "#e3ecf3",
- "text-base": "#586e75",
- "text-weak": "#7a8c8e",
- "text-strong": "#073642",
- "syntax-string": "#859900",
- "syntax-primitive": "#d33682",
- "syntax-property": "#268bd2",
- "syntax-type": "#b58900",
- "syntax-constant": "#2aa198",
- "syntax-info": "#2aa198",
- "markdown-heading": "#268bd2",
- "markdown-text": "#586e75",
- "markdown-link": "#268bd2",
- "markdown-link-text": "#2aa198",
- "markdown-code": "#859900",
- "markdown-block-quote": "#b58900",
- "markdown-emph": "#b58900",
- "markdown-strong": "#d33682",
- "markdown-horizontal-rule": "#cfd1bf",
- "markdown-list-item": "#268bd2",
- "markdown-list-enumeration": "#2aa198",
- "markdown-image": "#268bd2",
- "markdown-image-text": "#2aa198",
- "markdown-code-block": "#2aa198"
+ "syntax-keyword": "#859900",
+ "syntax-string": "#2aa198"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#002b36",
+ "ink": "#93a1a1",
"primary": "#6c71c4",
+ "accent": "#d33682",
"success": "#859900",
"warning": "#b58900",
"error": "#dc322f",
"info": "#2aa198",
- "interactive": "#6c71c4",
"diffAdd": "#4c7654",
"diffDelete": "#c34b4b"
},
"overrides": {
- "background-base": "#001f27",
- "background-weak": "#022733",
- "background-strong": "#01222b",
- "background-stronger": "#032830",
- "border-weak-base": "#20373f",
- "border-weak-hover": "#243e47",
- "border-weak-active": "#28434f",
- "border-weak-selected": "#2d4958",
- "border-weak-disabled": "#0f2026",
- "border-weak-focus": "#2a4552",
- "border-base": "#31505b",
- "border-hover": "#365765",
- "border-active": "#3c5e70",
- "border-selected": "#42657a",
- "border-disabled": "#13272e",
- "border-focus": "#3a5a6b",
- "border-strong-base": "#4a7887",
- "border-strong-hover": "#528294",
- "border-strong-active": "#5a8ca1",
- "border-strong-selected": "#6396ae",
- "border-strong-disabled": "#1b323b",
- "border-strong-focus": "#56879a",
- "surface-diff-add-base": "#0f2f29",
- "surface-diff-delete-base": "#321c1c",
- "surface-diff-hidden-base": "#0f3844",
- "text-base": "#93a1a1",
- "text-weak": "#6c7f80",
- "text-strong": "#fdf6e3",
- "syntax-string": "#859900",
- "syntax-primitive": "#d33682",
- "syntax-property": "#6c71c4",
- "syntax-type": "#b58900",
- "syntax-constant": "#2aa198",
- "syntax-info": "#2aa198",
- "markdown-heading": "#6c71c4",
- "markdown-text": "#93a1a1",
- "markdown-link": "#6c71c4",
- "markdown-link-text": "#2aa198",
- "markdown-code": "#859900",
- "markdown-block-quote": "#b58900",
- "markdown-emph": "#b58900",
- "markdown-strong": "#d33682",
- "markdown-horizontal-rule": "#0e3b46",
- "markdown-list-item": "#6c71c4",
- "markdown-list-enumeration": "#2aa198",
- "markdown-image": "#6c71c4",
- "markdown-image-text": "#2aa198",
- "markdown-code-block": "#93a1a1"
+ "syntax-keyword": "#859900",
+ "syntax-string": "#2aa198"
}
}
}
diff --git a/packages/ui/src/theme/themes/tokyonight.json b/packages/ui/src/theme/themes/tokyonight.json
index 31d0e8a474..d29c359942 100644
--- a/packages/ui/src/theme/themes/tokyonight.json
+++ b/packages/ui/src/theme/themes/tokyonight.json
@@ -3,153 +3,37 @@
"name": "Tokyonight",
"id": "tokyonight",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#e1e2e7",
+ "ink": "#273153",
"primary": "#2e7de9",
+ "accent": "#b15c00",
"success": "#587539",
"warning": "#8c6c3e",
"error": "#c94060",
"info": "#007197",
- "interactive": "#2e7de9",
"diffAdd": "#4f8f7b",
"diffDelete": "#d05f7c"
},
"overrides": {
- "background-base": "#e1e2e7",
- "background-weak": "#dee0ea",
- "background-strong": "#e5e6ee",
- "background-stronger": "#e9eaf1",
- "border-weak-base": "#cdd0dc",
- "border-weak-hover": "#c3c6d2",
- "border-weak-active": "#b9bcc8",
- "border-weak-selected": "#aeb2bf",
- "border-weak-disabled": "#e6e7ef",
- "border-weak-focus": "#b3b6c3",
- "border-base": "#a7abbb",
- "border-hover": "#9ba0b1",
- "border-active": "#9095a8",
- "border-selected": "#83889e",
- "border-disabled": "#dedfe6",
- "border-focus": "#9599a8",
- "border-strong-base": "#757b90",
- "border-strong-hover": "#6a7084",
- "border-strong-active": "#5f6578",
- "border-strong-selected": "#545a6d",
- "border-strong-disabled": "#c4c6d0",
- "border-strong-focus": "#666b7f",
- "surface-diff-add-base": "#dfe7da",
- "surface-diff-delete-base": "#f4dadd",
- "surface-diff-hidden-base": "#cfd1dd",
- "text-base": "#273153",
- "text-weak": "#5c6390",
- "text-strong": "#1c2544",
- "syntax-string": "#587539",
- "syntax-primitive": "#b15c00",
- "syntax-property": "#9854f1",
- "syntax-type": "#3760bf",
- "syntax-constant": "#007197",
- "syntax-info": "#007197",
- "markdown-heading": "#9854f1",
- "markdown-text": "#273153",
- "markdown-link": "#2e7de9",
- "markdown-link-text": "#007197",
- "markdown-code": "#587539",
- "markdown-block-quote": "#8c6c3e",
- "markdown-emph": "#8c6c3e",
- "markdown-strong": "#b15c00",
- "markdown-horizontal-rule": "#a1a6c5",
- "markdown-list-item": "#2e7de9",
- "markdown-list-enumeration": "#007197",
- "markdown-image": "#2e7de9",
- "markdown-image-text": "#007197",
- "markdown-code-block": "#3760bf"
+ "syntax-keyword": "#9854f1"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#1a1b26",
+ "ink": "#c0caf5",
"primary": "#7aa2f7",
+ "accent": "#ff9e64",
"success": "#9ece6a",
"warning": "#e0af68",
"error": "#f7768e",
"info": "#7dcfff",
- "interactive": "#7aa2f7",
"diffAdd": "#41a6b5",
"diffDelete": "#c34043"
},
"overrides": {
- "background-base": "#0f111a",
- "background-weak": "#111428",
- "background-strong": "#101324",
- "background-stronger": "#13172a",
- "border-weak-base": "#25283b",
- "border-weak-hover": "#292c43",
- "border-weak-active": "#2e314b",
- "border-weak-selected": "#343755",
- "border-weak-disabled": "#151727",
- "border-weak-focus": "#30324f",
- "border-base": "#3a3e57",
- "border-hover": "#414264",
- "border-active": "#474972",
- "border-selected": "#4f507f",
- "border-disabled": "#1c1d2d",
- "border-focus": "#45496f",
- "border-strong-base": "#5a5f82",
- "border-strong-hover": "#646994",
- "border-strong-active": "#6f74a6",
- "border-strong-selected": "#7a7fb8",
- "border-strong-disabled": "#23243a",
- "border-strong-focus": "#6a6f9f",
- "surface-base": "#1f2335",
- "base": "#1f2335",
- "surface-base-hover": "#232840",
- "surface-base-active": "#262c46",
- "surface-base-interactive-active": "#2b3357",
- "base2": "#1f2335",
- "base3": "#1f2335",
- "surface-inset-base": "#161a2ab3",
- "surface-inset-base-hover": "#161a2acc",
- "surface-inset-strong": "#0d111fcc",
- "surface-inset-strong-hover": "#0d111fcc",
- "surface-raised-base": "#242a42",
- "surface-float-base": "#242b45",
- "surface-float-base-hover": "#2a3154",
- "surface-raised-base-hover": "#272e49",
- "surface-raised-base-active": "#2c3353",
- "surface-raised-strong": "#31385a",
- "surface-raised-strong-hover": "#373f6b",
- "surface-raised-stronger": "#3b4261",
- "surface-raised-stronger-hover": "#444c82",
- "surface-weak": "#1b2033",
- "surface-weaker": "#181d2d",
- "surface-strong": "#323858",
- "surface-raised-stronger-non-alpha": "#2b3150",
- "surface-diff-add-base": "#1c2a38",
- "surface-diff-delete-base": "#2a1f32",
- "surface-diff-hidden-base": "#24283b",
- "text-base": "#c0caf5",
- "text-weak": "#7a88cf",
- "text-strong": "#eaeaff",
- "syntax-string": "#9ece6a",
- "syntax-primitive": "#ff9e64",
- "syntax-property": "#bb9af7",
- "syntax-type": "#e0af68",
- "syntax-constant": "#7dcfff",
- "syntax-info": "#7dcfff",
- "markdown-heading": "#bb9af7",
- "markdown-text": "#c0caf5",
- "markdown-link": "#7aa2f7",
- "markdown-link-text": "#7dcfff",
- "markdown-code": "#9ece6a",
- "markdown-block-quote": "#e0af68",
- "markdown-emph": "#e0af68",
- "markdown-strong": "#ff9e64",
- "markdown-horizontal-rule": "#3b4261",
- "markdown-list-item": "#7aa2f7",
- "markdown-list-enumeration": "#7dcfff",
- "markdown-image": "#7aa2f7",
- "markdown-image-text": "#7dcfff",
- "markdown-code-block": "#c0caf5"
+ "syntax-keyword": "#bb9af7"
}
}
}
diff --git a/packages/ui/src/theme/themes/vesper.json b/packages/ui/src/theme/themes/vesper.json
index 040bdc049b..8cc658232f 100644
--- a/packages/ui/src/theme/themes/vesper.json
+++ b/packages/ui/src/theme/themes/vesper.json
@@ -3,129 +3,38 @@
"name": "Vesper",
"id": "vesper",
"light": {
- "seeds": {
+ "palette": {
"neutral": "#F0F0F0",
+ "ink": "#101010",
"primary": "#FFC799",
+ "accent": "#B30000",
"success": "#99FFE4",
"warning": "#FFC799",
"error": "#FF8080",
"info": "#FFC799",
- "interactive": "#FFC799",
"diffAdd": "#99FFE4",
"diffDelete": "#FF8080"
},
"overrides": {
- "background-base": "#FFF",
- "background-weak": "#F8F8F8",
- "background-strong": "#F0F0F0",
- "background-stronger": "#FBFBFB",
- "border-weak-hover": "#E0E0E0",
- "border-weak-active": "#D8D8D8",
- "border-weak-selected": "#D0D0D0",
- "border-weak-disabled": "#F0F0F0",
- "border-weak-focus": "#D8D8D8",
- "border-base": "#D0D0D0",
- "border-hover": "#C8C8C8",
- "border-active": "#C0C0C0",
- "border-selected": "#B8B8B8",
- "border-disabled": "#E8E8E8",
- "border-focus": "#C0C0C0",
- "border-strong-base": "#A0A0A0",
- "border-strong-hover": "#989898",
- "border-strong-active": "#909090",
- "border-strong-selected": "#888888",
- "border-strong-disabled": "#D0D0D0",
- "border-strong-focus": "#909090",
- "surface-diff-add-base": "#e8f5e8",
- "surface-diff-delete-base": "#f5e8e8",
- "surface-diff-hidden-base": "#F0F0F0",
- "text-base": "#101010",
- "text-invert-strong": "var(--smoke-dark-alpha-12)",
- "text-weak": "#606060",
- "text-strong": "#000000",
- "syntax-string": "#0D5C4F",
- "syntax-primitive": "#B30000",
- "syntax-property": "#C66C00",
- "syntax-type": "#9C5C12",
- "syntax-constant": "#404040",
- "syntax-info": "#606060",
- "markdown-heading": "#FFC799",
- "markdown-text": "#101010",
- "markdown-link": "#FFC799",
- "markdown-link-text": "#A0A0A0",
- "markdown-code": "#A0A0A0",
- "markdown-block-quote": "#101010",
- "markdown-emph": "#101010",
- "markdown-strong": "#101010",
- "markdown-horizontal-rule": "#65737E",
- "markdown-list-item": "#101010",
- "markdown-list-enumeration": "#101010",
- "markdown-image": "#FFC799",
- "markdown-image-text": "#A0A0A0",
- "markdown-code-block": "#FFC799"
+ "syntax-keyword": "#b30000"
}
},
"dark": {
- "seeds": {
+ "palette": {
"neutral": "#101010",
+ "ink": "#FFF",
"primary": "#FFC799",
+ "accent": "#FF8080",
"success": "#99FFE4",
"warning": "#FFC799",
"error": "#FF8080",
"info": "#FFC799",
- "interactive": "#FFC799",
"diffAdd": "#99FFE4",
"diffDelete": "#FF8080"
},
"overrides": {
- "background-base": "#101010",
- "background-weak": "#141414",
- "background-strong": "#0C0C0C",
- "background-stronger": "#080808",
- "border-weak-base": "#1C1C1C",
- "border-weak-hover": "#202020",
- "border-weak-active": "#242424",
- "border-weak-selected": "#282828",
- "border-weak-disabled": "#141414",
- "border-weak-focus": "#242424",
- "border-base": "#282828",
- "border-hover": "#303030",
- "border-active": "#383838",
- "border-selected": "#404040",
- "border-disabled": "#181818",
- "border-focus": "#383838",
- "border-strong-base": "#505050",
- "border-strong-hover": "#585858",
- "border-strong-active": "#606060",
- "border-strong-selected": "#686868",
- "border-strong-disabled": "#202020",
- "border-strong-focus": "#606060",
- "surface-diff-add-base": "#0d2818",
- "surface-diff-delete-base": "#281a1a",
- "surface-diff-hidden-base": "#141414",
- "text-base": "#FFF",
- "text-weak": "#A0A0A0",
- "text-strong": "#FFFFFF",
- "syntax-string": "#99FFE4",
- "syntax-primitive": "#FF8080",
- "syntax-property": "#FFC799",
- "syntax-type": "#FFC799",
- "syntax-constant": "#A0A0A0",
- "syntax-info": "#8b8b8b",
- "markdown-heading": "#FFC799",
- "markdown-text": "#FFF",
- "markdown-link": "#FFC799",
- "markdown-link-text": "#A0A0A0",
- "markdown-code": "#A0A0A0",
- "markdown-block-quote": "#FFF",
- "markdown-emph": "#FFF",
- "markdown-strong": "#FFF",
- "markdown-horizontal-rule": "#65737E",
- "markdown-list-item": "#FFF",
- "markdown-list-enumeration": "#FFF",
- "markdown-image": "#FFC799",
- "markdown-image-text": "#A0A0A0",
- "markdown-code-block": "#FFF"
+ "syntax-keyword": "#ff8080",
+ "syntax-primitive": "#ffc799"
}
}
}
diff --git a/packages/ui/src/theme/types.ts b/packages/ui/src/theme/types.ts
index 73bd372b45..126e9bb5aa 100644
--- a/packages/ui/src/theme/types.ts
+++ b/packages/ui/src/theme/types.ts
@@ -18,11 +18,28 @@ export interface ThemeSeedColors {
diffDelete: HexColor
}
-export interface ThemeVariant {
- seeds: ThemeSeedColors
+export interface ThemePaletteColors {
+ neutral: HexColor
+ ink?: HexColor
+ primary: HexColor
+ success: HexColor
+ warning: HexColor
+ error: HexColor
+ info: HexColor
+ accent?: HexColor
+ interactive?: HexColor
+ diffAdd?: HexColor
+ diffDelete?: HexColor
+}
+
+type ThemeVariantBase = {
overrides?: Record
}
+export type ThemeVariant =
+ | ({ seeds: ThemeSeedColors; palette?: never } & ThemeVariantBase)
+ | ({ palette: ThemePaletteColors; seeds?: never } & ThemeVariantBase)
+
export interface DesktopTheme {
$schema?: string
name: string
From 656a8d8f55ad02fd7f849f98dcc4bf09683649b0 Mon Sep 17 00:00:00 2001
From: Ariane Emory <97994360+ariane-emory@users.noreply.github.com>
Date: Sun, 8 Mar 2026 22:03:52 -0400
Subject: [PATCH 100/101] docs: add session_child_first keybinding to
documentation (#16631)
---
packages/web/src/content/docs/keybinds.mdx | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/web/src/content/docs/keybinds.mdx b/packages/web/src/content/docs/keybinds.mdx
index 95b3d49639..54c15e8621 100644
--- a/packages/web/src/content/docs/keybinds.mdx
+++ b/packages/web/src/content/docs/keybinds.mdx
@@ -28,6 +28,7 @@ OpenCode has a list of keybinds that you can customize through `tui.json`.
"session_unshare": "none",
"session_interrupt": "escape",
"session_compact": "c",
+ "session_child_first": "