From 20229f147bbe5e096e1863391246eaaa798f40ce Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Thu, 16 Oct 2025 14:01:49 -0500 Subject: [PATCH] wip: css/ui and desktop work --- packages/css/package.json | 7 +- packages/css/script/colors.ts | 31 ++ packages/css/script/colors.txt | 214 +++++++ packages/css/src/tailwind-colors.css | 220 ++++++++ packages/css/src/tailwind.css | 217 +------- packages/css/src/theme.css | 526 +++++++++--------- .../desktop/src/components/prompt-input.tsx | 264 +++++++++ .../desktop/src/components/session-list.tsx | 2 +- packages/desktop/src/pages/index.tsx | 8 +- 9 files changed, 1016 insertions(+), 473 deletions(-) create mode 100644 packages/css/script/colors.ts create mode 100644 packages/css/script/colors.txt create mode 100644 packages/css/src/tailwind-colors.css create mode 100644 packages/desktop/src/components/prompt-input.tsx diff --git a/packages/css/package.json b/packages/css/package.json index 4f8b3bd9..46970ec7 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -7,6 +7,11 @@ "./*": "./src/*" }, "scripts": { - "dev": "bun run dev.ts" + "dev": "bun run dev.ts", + "generate:tailwind": "bun run script/colors.ts" + }, + "dependencies": { + "tailwindcss": "catalog:", + "@tailwindcss/vite": "catalog:" } } diff --git a/packages/css/script/colors.ts b/packages/css/script/colors.ts new file mode 100644 index 00000000..b4f1e7f0 --- /dev/null +++ b/packages/css/script/colors.ts @@ -0,0 +1,31 @@ +#!/usr/bin/env bun + +// read lines from colors.txt +// parse each line into a color name and hex value +// create a css variable for each color +// NOTE: only use Bun file APIs here + +const colors = await Bun.file(import.meta.dir + "/colors.txt").text() + +const variables = [] +for (const line of colors.split("\n")) { + if (!line.trim()) continue + const [variable] = line.trim().split(":") + const name = variable!.trim().substring(2) + variables.push(`--color-${name}: var(--${name});`) +} + +const output = ` +/* Generated by script/colors.ts */ +/* Do not edit this file manually */ + +@theme { + --color-*: initial; + ${variables.join("\n ")} +} +` + +// write to src/tailwind-colors.css +Bun.file(import.meta.dir + "/../src/tailwind-colors.css").write(output.trim()) + +// Bun.file(import.meta.dir + "../src/tailwind-colors.css").write(output.trim()) diff --git a/packages/css/script/colors.txt b/packages/css/script/colors.txt new file mode 100644 index 00000000..15f8bb3d --- /dev/null +++ b/packages/css/script/colors.txt @@ -0,0 +1,214 @@ + --background-base: #f8f7f7; + --background-weak: var(--smoke-light-3); + --background-strong: var(--smoke-light-1); + --background-stronger: #fcfcfc; + --base: var(--smoke-light-alpha-2); + --surface-base: var(--smoke-light-alpha-2); + --base2: var(--smoke-light-alpha-2); + --base3: var(--smoke-light-alpha-2); + --surface-inset-base: var(--smoke-light-alpha-3); + --surface-inset-base-hover: var(--smoke-light-alpha-3); + --surface-inset-strong: #1f000017; + --surface-inset-strong-hover: #1f000017; + --surface-raised-base: var(--smoke-light-alpha-1); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-light-alpha-2); + --surface-raised-strong: var(--smoke-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--smoke-light-alpha-3); + --surface-weaker: var(--smoke-light-alpha-4); + --surface-strong: #ffffff; + --surface-raised-stronger-non-alpha: var(--white); + --surface-brand-base: var(--yuzu-light-9); + --surface-brand-hover: var(--yuzu-light-10); + --surface-interactive-base: var(--cobalt-light-3); + --surface-interactive-hover: var(--cobalt-light-4); + --surface-interactive-weak: var(--cobalt-light-2); + --surface-interactive-weak-hover: var(--cobalt-light-3); + --surface-success-base: var(--apple-light-3); + --surface-success-weak: var(--apple-light-2); + --surface-success-strong: var(--apple-light-9); + --surface-warning-base: var(--solaris-light-3); + --surface-warning-weak: var(--solaris-light-2); + --surface-warning-strong: var(--solaris-light-9); + --surface-critical-base: var(--ember-light-3); + --surface-critical-weak: var(--ember-light-2); + --surface-critical-strong: var(--ember-light-9); + --surface-info-base: var(--lilac-light-3); + --surface-info-weak: var(--lilac-light-2); + --surface-info-strong: var(--lilac-light-9); + --surface-diff-skip-base: var(--smoke-light-3); + --surface-diff-unchanged-base: #ffffff00; + --surface-diff-hidden-base: var(--blue-light-3); + --surface-diff-hidden-weak: var(--blue-light-2); + --surface-diff-hidden-weaker: var(--blue-light-1); + --surface-diff-hidden-strong: var(--blue-light-5); + --surface-diff-hidden-stronger: var(--blue-light-9); + --surface-diff-add-base: var(--mint-light-3); + --surface-diff-add-weak: var(--mint-light-2); + --surface-diff-add-weaker: var(--mint-light-1); + --surface-diff-add-strong: var(--mint-light-5); + --surface-diff-add-stronger: var(--mint-light-9); + --surface-diff-delete-base: var(--ember-light-3); + --surface-diff-delete-weak: var(--ember-light-2); + --surface-diff-delete-weaker: var(--ember-light-1); + --surface-diff-delete-strong: var(--ember-light-6); + --surface-diff-delete-stronger: var(--ember-light-9); + --text-base: var(--smoke-light-11); + --input-base: var(--smoke-light-1); + --input-hover: var(--smoke-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--smoke-light-4); + --text-weak: var(--smoke-light-9); + --text-weaker: var(--smoke-light-8); + --text-strong: var(--smoke-light-12); + --text-on-brand-base: var(--smoke-light-alpha-11); + --text-on-interactive-base: var(--smoke-light-1); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-dark-alpha-11); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-11); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); + --text-on-info-weak: var(--smoke-dark-alpha-9); + --text-on-info-strong: var(--smoke-dark-alpha-12); + --text-on-warning-weak: var(--smoke-dark-alpha-9); + --text-on-warning-strong: var(--smoke-dark-alpha-12); + --text-on-success-weak: var(--smoke-dark-alpha-9); + --text-on-success-strong: var(--smoke-dark-alpha-12); + --text-on-brand-weak: var(--smoke-light-alpha-9); + --text-on-brand-weaker: var(--smoke-light-alpha-8); + --text-on-brand-strong: var(--smoke-light-alpha-12); + --button-secondary-base: #fdfcfc; + --border-base: var(--smoke-light-alpha-7); + --border-hover: var(--smoke-light-alpha-8); + --border-active: var(--smoke-light-alpha-9); + --border-selected: var(--cobalt-light-alpha-9); + --border-disabled: var(--smoke-light-alpha-8); + --border-focus: var(--smoke-light-alpha-9); + --border-weak-base: var(--smoke-light-alpha-5); + --border-strong-base: var(--smoke-light-alpha-7); + --border-strong-hover: var(--smoke-light-alpha-8); + --border-strong-active: var(--smoke-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--smoke-light-alpha-6); + --border-strong-focus: var(--smoke-light-alpha-7); + --border-weak-hover: var(--smoke-light-alpha-6); + --border-weak-active: var(--smoke-light-alpha-7); + --border-weak-selected: var(--cobalt-light-alpha-6); + --border-weak-disabled: var(--smoke-light-alpha-6); + --border-weak-focus: var(--smoke-light-alpha-7); + --border-interactive-base: var(--cobalt-light-7); + --border-interactive-hover: var(--cobalt-light-8); + --border-interactive-active: var(--cobalt-light-9); + --border-interactive-selected: var(--cobalt-light-9); + --border-interactive-disabled: var(--smoke-light-8); + --border-interactive-focus: var(--cobalt-light-9); + --border-success-base: var(--apple-light-6); + --border-success-hover: var(--apple-light-7); + --border-success-selected: var(--apple-light-9); + --border-warning-base: var(--solaris-light-6); + --border-warning-hover: var(--solaris-light-7); + --border-warning-selected: var(--solaris-light-9); + --border-critical-base: var(--ember-light-6); + --border-critical-hover: var(--ember-light-7); + --border-critical-selected: var(--ember-light-9); + --border-info-base: var(--lilac-light-6); + --border-info-hover: var(--lilac-light-7); + --border-info-selected: var(--lilac-light-9); + --icon-base: var(--smoke-light-9); + --icon-hover: var(--smoke-light-11); + --icon-active: var(--smoke-light-12); + --icon-selected: var(--smoke-light-12); + --icon-disabled: var(--smoke-light-8); + --icon-focus: var(--smoke-light-12); + --icon-weak-base: var(--smoke-light-7); + --icon-invert-base: #ffffff; + --icon-weak-hover: var(--smoke-light-8); + --icon-weak-active: var(--smoke-light-9); + --icon-weak-selected: var(--smoke-light-10); + --icon-weak-disabled: var(--smoke-light-6); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-light-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); + --icon-brand-base: var(--smoke-light-12); + --icon-interactive-base: var(--cobalt-light-9); + --icon-success-base: var(--apple-light-7); + --icon-success-hover: var(--apple-light-8); + --icon-success-active: var(--apple-light-11); + --icon-warning-base: var(--amber-light-7); + --icon-warning-hover: var(--amber-light-8); + --icon-warning-active: var(--amber-light-11); + --icon-critical-base: var(--ember-light-7); + --icon-critical-hover: var(--ember-light-8); + --icon-critical-active: var(--ember-light-11); + --icon-info-base: var(--lilac-light-7); + --icon-info-hover: var(--lilac-light-8); + --icon-info-active: var(--lilac-light-11); + --icon-on-brand-base: var(--smoke-light-alpha-11); + --icon-on-brand-hover: var(--smoke-light-alpha-12); + --icon-on-brand-selected: var(--smoke-light-alpha-12); + --icon-on-interactive-base: var(--smoke-light-alpha-9); + --icon-on-interactive-hover: var(--smoke-light-alpha-10); + --icon-on-interactive-selected: var(--smoke-light-alpha-11); + --icon-agent-plan-base: var(--purple-light-9); + --icon-agent-docs-base: var(--amber-light-9); + --icon-agent-ask-base: var(--cyan-light-9); + --icon-agent-build-base: var(--blue-light-9); + --icon-on-success-base: var(--apple-light-alpha-9); + --icon-on-success-hover: var(--apple-light-alpha-10); + --icon-on-success-selected: var(--apple-light-alpha-11); + --icon-on-warning-base: var(--amber-lightalpha-9); + --icon-on-warning-hover: var(--amber-lightalpha-10); + --icon-on-warning-selected: var(--amber-lightalpha-11); + --icon-on-critical-base: var(--ember-light-alpha-9); + --icon-on-critical-hover: var(--ember-light-alpha-10); + --icon-on-critical-selected: var(--ember-light-alpha-11); + --icon-on-info-base: var(--lilac-light-9); + --icon-on-info-hover: var(--lilac-light-alpha-10); + --icon-on-info-selected: var(--lilac-light-alpha-11); + --icon-diff-add-base: var(--mint-light-11); + --icon-diff-add-hover: var(--mint-light-12); + --icon-diff-add-active: var(--mint-light-12); + --icon-diff-delete-base: var(--ember-light-9); + --icon-diff-delete-hover: var(--ember-light-10); + --icon-diff-delete-active: var(--ember-light-11); + --syntax-comment: #ffffff; + --syntax-string: #ffffff; + --syntax-keyword: #ffffff; + --syntax-function: #ffffff; + --syntax-number: #ffffff; + --syntax-operator: #ffffff; + --syntax-variable: #ffffff; + --syntax-type: #ffffff; + --syntax-constant: #ffffff; + --syntax-punctuation: #ffffff; + --syntax-success: #ffffff; + --syntax-warning: #ffffff; + --syntax-critical: #ffffff; + --syntax-info: #ffffff; + --markdown-heading: #ffffff; + --markdown-text: #ffffff; + --markdown-link: #ffffff; + --markdown-link-text: #ffffff; + --markdown-code: #ffffff; + --markdown-block-quote: #ffffff; + --markdown-emph: #ffffff; + --markdown-strong: #ffffff; + --markdown-horizontal-rule: #ffffff; + --markdown-list-item: #ffffff; + --markdown-list-enumeration: #ffffff; + --markdown-image: #ffffff; + --markdown-image-text: #ffffff; + --markdown-code-block: #ffffff; + --border-color: #ffffff; diff --git a/packages/css/src/tailwind-colors.css b/packages/css/src/tailwind-colors.css new file mode 100644 index 00000000..696a14dd --- /dev/null +++ b/packages/css/src/tailwind-colors.css @@ -0,0 +1,220 @@ +/* Generated by script/colors.ts */ +/* Do not edit this file manually */ + +@theme { + --color-*: initial; + --color-background-base: var(--background-base); + --color-background-weak: var(--background-weak); + --color-background-strong: var(--background-strong); + --color-background-stronger: var(--background-stronger); + --color-base: var(--base); + --color-surface-base: var(--surface-base); + --color-base2: var(--base2); + --color-base3: var(--base3); + --color-surface-inset-base: var(--surface-inset-base); + --color-surface-inset-base-hover: var(--surface-inset-base-hover); + --color-surface-inset-strong: var(--surface-inset-strong); + --color-surface-inset-strong-hover: var(--surface-inset-strong-hover); + --color-surface-raised-base: var(--surface-raised-base); + --color-surface-float-base: var(--surface-float-base); + --color-surface-float-base-hover: var(--surface-float-base-hover); + --color-surface-raised-base-hover: var(--surface-raised-base-hover); + --color-surface-raised-strong: var(--surface-raised-strong); + --color-surface-raised-strong-hover: var(--surface-raised-strong-hover); + --color-surface-raised-stronger: var(--surface-raised-stronger); + --color-surface-raised-stronger-hover: var(--surface-raised-stronger-hover); + --color-surface-weak: var(--surface-weak); + --color-surface-weaker: var(--surface-weaker); + --color-surface-strong: var(--surface-strong); + --color-surface-raised-stronger-non-alpha: var(--surface-raised-stronger-non-alpha); + --color-surface-brand-base: var(--surface-brand-base); + --color-surface-brand-hover: var(--surface-brand-hover); + --color-surface-interactive-base: var(--surface-interactive-base); + --color-surface-interactive-hover: var(--surface-interactive-hover); + --color-surface-interactive-weak: var(--surface-interactive-weak); + --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover); + --color-surface-success-base: var(--surface-success-base); + --color-surface-success-weak: var(--surface-success-weak); + --color-surface-success-strong: var(--surface-success-strong); + --color-surface-warning-base: var(--surface-warning-base); + --color-surface-warning-weak: var(--surface-warning-weak); + --color-surface-warning-strong: var(--surface-warning-strong); + --color-surface-critical-base: var(--surface-critical-base); + --color-surface-critical-weak: var(--surface-critical-weak); + --color-surface-critical-strong: var(--surface-critical-strong); + --color-surface-info-base: var(--surface-info-base); + --color-surface-info-weak: var(--surface-info-weak); + --color-surface-info-strong: var(--surface-info-strong); + --color-surface-diff-skip-base: var(--surface-diff-skip-base); + --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base); + --color-surface-diff-hidden-base: var(--surface-diff-hidden-base); + --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak); + --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker); + --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong); + --color-surface-diff-hidden-stronger: var(--surface-diff-hidden-stronger); + --color-surface-diff-add-base: var(--surface-diff-add-base); + --color-surface-diff-add-weak: var(--surface-diff-add-weak); + --color-surface-diff-add-weaker: var(--surface-diff-add-weaker); + --color-surface-diff-add-strong: var(--surface-diff-add-strong); + --color-surface-diff-add-stronger: var(--surface-diff-add-stronger); + --color-surface-diff-delete-base: var(--surface-diff-delete-base); + --color-surface-diff-delete-weak: var(--surface-diff-delete-weak); + --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker); + --color-surface-diff-delete-strong: var(--surface-diff-delete-strong); + --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger); + --color-text-base: var(--text-base); + --color-input-base: var(--input-base); + --color-input-hover: var(--input-hover); + --color-input-active: var(--input-active); + --color-input-selected: var(--input-selected); + --color-input-focus: var(--input-focus); + --color-input-disabled: var(--input-disabled); + --color-text-weak: var(--text-weak); + --color-text-weaker: var(--text-weaker); + --color-text-strong: var(--text-strong); + --color-text-on-brand-base: var(--text-on-brand-base); + --color-text-on-interactive-base: var(--text-on-interactive-base); + --color-text-on-success-base: var(--text-on-success-base); + --color-text-on-warning-base: var(--text-on-warning-base); + --color-text-on-info-base: var(--text-on-info-base); + --color-text-diff-add-base: var(--text-diff-add-base); + --color-text-diff-delete-base: var(--text-diff-delete-base); + --color-text-diff-delete-strong: var(--text-diff-delete-strong); + --color-text-diff-add-strong: var(--text-diff-add-strong); + --color-text-on-info-weak: var(--text-on-info-weak); + --color-text-on-info-strong: var(--text-on-info-strong); + --color-text-on-warning-weak: var(--text-on-warning-weak); + --color-text-on-warning-strong: var(--text-on-warning-strong); + --color-text-on-success-weak: var(--text-on-success-weak); + --color-text-on-success-strong: var(--text-on-success-strong); + --color-text-on-brand-weak: var(--text-on-brand-weak); + --color-text-on-brand-weaker: var(--text-on-brand-weaker); + --color-text-on-brand-strong: var(--text-on-brand-strong); + --color-button-secondary-base: var(--button-secondary-base); + --color-border-base: var(--border-base); + --color-border-hover: var(--border-hover); + --color-border-active: var(--border-active); + --color-border-selected: var(--border-selected); + --color-border-disabled: var(--border-disabled); + --color-border-focus: var(--border-focus); + --color-border-weak-base: var(--border-weak-base); + --color-border-strong-base: var(--border-strong-base); + --color-border-strong-hover: var(--border-strong-hover); + --color-border-strong-active: var(--border-strong-active); + --color-border-strong-selected: var(--border-strong-selected); + --color-border-strong-disabled: var(--border-strong-disabled); + --color-border-strong-focus: var(--border-strong-focus); + --color-border-weak-hover: var(--border-weak-hover); + --color-border-weak-active: var(--border-weak-active); + --color-border-weak-selected: var(--border-weak-selected); + --color-border-weak-disabled: var(--border-weak-disabled); + --color-border-weak-focus: var(--border-weak-focus); + --color-border-interactive-base: var(--border-interactive-base); + --color-border-interactive-hover: var(--border-interactive-hover); + --color-border-interactive-active: var(--border-interactive-active); + --color-border-interactive-selected: var(--border-interactive-selected); + --color-border-interactive-disabled: var(--border-interactive-disabled); + --color-border-interactive-focus: var(--border-interactive-focus); + --color-border-success-base: var(--border-success-base); + --color-border-success-hover: var(--border-success-hover); + --color-border-success-selected: var(--border-success-selected); + --color-border-warning-base: var(--border-warning-base); + --color-border-warning-hover: var(--border-warning-hover); + --color-border-warning-selected: var(--border-warning-selected); + --color-border-critical-base: var(--border-critical-base); + --color-border-critical-hover: var(--border-critical-hover); + --color-border-critical-selected: var(--border-critical-selected); + --color-border-info-base: var(--border-info-base); + --color-border-info-hover: var(--border-info-hover); + --color-border-info-selected: var(--border-info-selected); + --color-icon-base: var(--icon-base); + --color-icon-hover: var(--icon-hover); + --color-icon-active: var(--icon-active); + --color-icon-selected: var(--icon-selected); + --color-icon-disabled: var(--icon-disabled); + --color-icon-focus: var(--icon-focus); + --color-icon-weak-base: var(--icon-weak-base); + --color-icon-invert-base: var(--icon-invert-base); + --color-icon-weak-hover: var(--icon-weak-hover); + --color-icon-weak-active: var(--icon-weak-active); + --color-icon-weak-selected: var(--icon-weak-selected); + --color-icon-weak-disabled: var(--icon-weak-disabled); + --color-icon-weak-focus: var(--icon-weak-focus); + --color-icon-strong-base: var(--icon-strong-base); + --color-icon-strong-hover: var(--icon-strong-hover); + --color-icon-strong-active: var(--icon-strong-active); + --color-icon-strong-selected: var(--icon-strong-selected); + --color-icon-strong-disabled: var(--icon-strong-disabled); + --color-icon-strong-focus: var(--icon-strong-focus); + --color-icon-brand-base: var(--icon-brand-base); + --color-icon-interactive-base: var(--icon-interactive-base); + --color-icon-success-base: var(--icon-success-base); + --color-icon-success-hover: var(--icon-success-hover); + --color-icon-success-active: var(--icon-success-active); + --color-icon-warning-base: var(--icon-warning-base); + --color-icon-warning-hover: var(--icon-warning-hover); + --color-icon-warning-active: var(--icon-warning-active); + --color-icon-critical-base: var(--icon-critical-base); + --color-icon-critical-hover: var(--icon-critical-hover); + --color-icon-critical-active: var(--icon-critical-active); + --color-icon-info-base: var(--icon-info-base); + --color-icon-info-hover: var(--icon-info-hover); + --color-icon-info-active: var(--icon-info-active); + --color-icon-on-brand-base: var(--icon-on-brand-base); + --color-icon-on-brand-hover: var(--icon-on-brand-hover); + --color-icon-on-brand-selected: var(--icon-on-brand-selected); + --color-icon-on-interactive-base: var(--icon-on-interactive-base); + --color-icon-on-interactive-hover: var(--icon-on-interactive-hover); + --color-icon-on-interactive-selected: var(--icon-on-interactive-selected); + --color-icon-agent-plan-base: var(--icon-agent-plan-base); + --color-icon-agent-docs-base: var(--icon-agent-docs-base); + --color-icon-agent-ask-base: var(--icon-agent-ask-base); + --color-icon-agent-build-base: var(--icon-agent-build-base); + --color-icon-on-success-base: var(--icon-on-success-base); + --color-icon-on-success-hover: var(--icon-on-success-hover); + --color-icon-on-success-selected: var(--icon-on-success-selected); + --color-icon-on-warning-base: var(--icon-on-warning-base); + --color-icon-on-warning-hover: var(--icon-on-warning-hover); + --color-icon-on-warning-selected: var(--icon-on-warning-selected); + --color-icon-on-critical-base: var(--icon-on-critical-base); + --color-icon-on-critical-hover: var(--icon-on-critical-hover); + --color-icon-on-critical-selected: var(--icon-on-critical-selected); + --color-icon-on-info-base: var(--icon-on-info-base); + --color-icon-on-info-hover: var(--icon-on-info-hover); + --color-icon-on-info-selected: var(--icon-on-info-selected); + --color-icon-diff-add-base: var(--icon-diff-add-base); + --color-icon-diff-add-hover: var(--icon-diff-add-hover); + --color-icon-diff-add-active: var(--icon-diff-add-active); + --color-icon-diff-delete-base: var(--icon-diff-delete-base); + --color-icon-diff-delete-hover: var(--icon-diff-delete-hover); + --color-icon-diff-delete-active: var(--icon-diff-delete-active); + --color-syntax-comment: var(--syntax-comment); + --color-syntax-string: var(--syntax-string); + --color-syntax-keyword: var(--syntax-keyword); + --color-syntax-function: var(--syntax-function); + --color-syntax-number: var(--syntax-number); + --color-syntax-operator: var(--syntax-operator); + --color-syntax-variable: var(--syntax-variable); + --color-syntax-type: var(--syntax-type); + --color-syntax-constant: var(--syntax-constant); + --color-syntax-punctuation: var(--syntax-punctuation); + --color-syntax-success: var(--syntax-success); + --color-syntax-warning: var(--syntax-warning); + --color-syntax-critical: var(--syntax-critical); + --color-syntax-info: var(--syntax-info); + --color-markdown-heading: var(--markdown-heading); + --color-markdown-text: var(--markdown-text); + --color-markdown-link: var(--markdown-link); + --color-markdown-link-text: var(--markdown-link-text); + --color-markdown-code: var(--markdown-code); + --color-markdown-block-quote: var(--markdown-block-quote); + --color-markdown-emph: var(--markdown-emph); + --color-markdown-strong: var(--markdown-strong); + --color-markdown-horizontal-rule: var(--markdown-horizontal-rule); + --color-markdown-list-item: var(--markdown-list-item); + --color-markdown-list-enumeration: var(--markdown-list-enumeration); + --color-markdown-image: var(--markdown-image); + --color-markdown-image-text: var(--markdown-image-text); + --color-markdown-code-block: var(--markdown-code-block); + --color-border-color: var(--border-color); +} diff --git a/packages/css/src/tailwind.css b/packages/css/src/tailwind.css index 17936627..35cbbd07 100644 --- a/packages/css/src/tailwind.css +++ b/packages/css/src/tailwind.css @@ -4,217 +4,8 @@ @import "tailwindcss/utilities.css" layer(utilities); @theme { - --color-*: initial; - --color-background-base: var(--background-base); - --color-background-weak: var(--background-weak); - --color-background-weaker: var(--background-weaker); - --color-surface-base: var(--surface-base); - --color-input-base: var(--input-base); - --color-input-hover: var(--input-hover); - --color-input-active: var(--input-active); - --color-input-selected: var(--input-selected); - --color-input-focus: var(--input-focus); - --color-input-disabled: var(--input-disabled); - --color-surface-hover: var(--surface-hover); - --color-surface-active: var(--surface-active); - --color-surface-selected: var(--surface-selected); - --color-surface-disabled: var(--surface-disabled); - --color-surface-focus: var(--surface-focus); - --color-surface-inset-base: var(--surface-inset-base); - --color-surface-inset-hover: var(--surface-inset-hover); - --color-surface-inset-active: var(--surface-inset-active); - --color-surface-inset-selected: var(--surface-inset-selected); - --color-surface-inset-disabled: var(--surface-inset-disabled); - --color-surface-inset-focus: var(--surface-inset-focus); - --color-surface-raised-base: var(--surface-raised-base); - --color-surface-raised-hover: var(--surface-raised-hover); - --color-surface-raised-active: var(--surface-raised-active); - --color-surface-raised-selected: var(--surface-raised-selected); - --color-surface-raised-disabled: var(--surface-raised-disabled); - --color-surface-raised-focus: var(--surface-raised-focus); - --color-surface-overlay-base: var(--surface-overlay-base); - --color-surface-brand-base: var(--surface-brand-base); - --color-surface-brand-hover: var(--surface-brand-hover); - --color-surface-interactive-base: var(--surface-interactive-base); - --color-surface-interactive-hover: var(--surface-interactive-hover); - --color-surface-interactive-weak: var(--surface-interactive-weak); - --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover); - --color-surface-success-base: var(--surface-success-base); - --color-surface-success-weak: var(--surface-success-weak); - --color-surface-success-strong: var(--surface-success-strong); - --color-surface-warning-base: var(--surface-warning-base); - --color-surface-warning-weak: var(--surface-warning-weak); - --color-surface-warning-strong: var(--surface-warning-strong); - --color-surface-critical-base: var(--surface-critical-base); - --color-surface-critical-weak: var(--surface-critical-weak); - --color-surface-critical-strong: var(--surface-critical-strong); - --color-surface-info-base: var(--surface-info-base); - --color-surface-info-weak: var(--surface-info-weak); - --color-surface-info-strong: var(--surface-info-strong); - --color-surface-diff-add-base: var(--surface-diff-add-base); - --color-surface-diff-add-weak: var(--surface-diff-add-weak); - --color-surface-diff-add-weaker: var(--surface-diff-add-weaker); - --color-surface-diff-add-strong: var(--surface-diff-add-strong); - --color-surface-diff-add-stronger: var(--surface-diff-add-stronger); - --color-surface-diff-delete-base: var(--surface-diff-delete-base); - --color-surface-on-background-weak-base: var(--surface-on-background-weak-base); - --color-surface-on-background-weak-inset-base: var(--surface-on-background-weak-inset-base); - --color-surface-on-background-weak-hover: var(--surface-on-background-weak-hover); - --color-surface-on-background-weak-active: var(--surface-on-background-weak-active); - --color-surface-on-background-weak-selected: var(--surface-on-background-weak-selected); - --color-surface-on-background-weak-disabled: var(--surface-on-background-weak-disabled); - --color-surface-on-background-weak-focus: var(--surface-on-background-weak-focus); - --color-surface-on-background-weak-inset-hover: var(--surface-on-background-weak-inset-hover); - --color-surface-on-background-weak-inset-active: var(--surface-on-background-weak-inset-active); - --color-surface-on-background-weak-inset-selected: var(--surface-on-background-weak-inset-selected); - --color-surface-on-background-weak-inset-disabled: var(--surface-on-background-weak-inset-disabled); - --color-surface-on-background-weak-inset-focus: var(--surface-on-background-weak-inset-focus); - --color-surface-diff-delete-weak: var(--surface-diff-delete-weak); - --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker); - --color-surface-diff-delete-strong: var(--surface-diff-delete-strong); - --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger); - --color-text-base: var(--text-base); - --color-text-weak: var(--text-weak); - --color-text-weaker: var(--text-weaker); - --color-text-strong: var(--text-strong); - --color-text-on-brand-base: var(--text-on-brand-base); - --color-text-on-interactive-base: var(--text-on-interactive-base); - --color-text-on-success-base: var(--text-on-success-base); - --color-text-on-warning-base: var(--text-on-warning-base); - --color-text-on-info-base: var(--text-on-info-base); - --color-text-on-diff-add-base: var(--text-on-diff-add-base); - --color-text-on-diff-delete-base: var(--text-on-diff-delete-base); - --color-text-on-diff-delete-weak: var(--text-on-diff-delete-weak); - --color-text-on-diff-delete-strong: var(--text-on-diff-delete-strong); - --color-text-on-diff-add-weak: var(--text-on-diff-add-weak); - --color-text-on-diff-add-strong: var(--text-on-diff-add-strong); - --color-text-on-info-weak: var(--text-on-info-weak); - --color-text-on-info-strong: var(--text-on-info-strong); - --color-text-on-warning-weak: var(--text-on-warning-weak); - --color-text-on-warning-strong: var(--text-on-warning-strong); - --color-text-on-success-weak: var(--text-on-success-weak); - --color-text-on-success-strong: var(--text-on-success-strong); - --color-text-on-interactive-weak: var(--text-on-interactive-weak); - --color-text-on-interactive-strong: var(--text-on-interactive-strong); - --color-text-on-brand-weak: var(--text-on-brand-weak); - --color-text-on-brand-weaker: var(--text-on-brand-weaker); - --color-text-on-brand-strong: var(--text-on-brand-strong); - --color-border-base: var(--border-base); - --color-border-hover: var(--border-hover); - --color-border-active: var(--border-active); - --color-border-selected: var(--border-selected); - --color-border-disabled: var(--border-disabled); - --color-border-focus: var(--border-focus); - --color-border-weak-base: var(--border-weak-base); - --color-border-weak-hover: var(--border-weak-hover); - --color-border-weak-active: var(--border-weak-active); - --color-icon-base: var(--icon-base); - --color-icon-hover: var(--icon-hover); - --color-icon-active: var(--icon-active); - --color-icon-selected: var(--icon-selected); - --color-icon-disabled: var(--icon-disabled); - --color-icon-focus: var(--icon-focus); - --color-icon-weak-base: var(--icon-weak-base); - --color-icon-weak-hover: var(--icon-weak-hover); - --color-icon-weak-active: var(--icon-weak-active); - --color-icon-weak-selected: var(--icon-weak-selected); - --color-icon-weak-disabled: var(--icon-weak-disabled); - --color-icon-weak-focus: var(--icon-weak-focus); - --color-icon-strong-base: var(--icon-strong-base); - --color-icon-strong-hover: var(--icon-strong-hover); - --color-icon-strong-active: var(--icon-strong-active); - --color-icon-strong-selected: var(--icon-strong-selected); - --color-icon-strong-disabled: var(--icon-strong-disabled); - --color-icon-strong-focus: var(--icon-strong-focus); - --color-border-weak-selected: var(--border-weak-selected); - --color-border-weak-disabled: var(--border-weak-disabled); - --color-border-weak-focus: var(--border-weak-focus); - --color-border-interactive-base: var(--border-interactive-base); - --color-border-interactive-hover: var(--border-interactive-hover); - --color-border-interactive-active: var(--border-interactive-active); - --color-border-interactive-selected: var(--border-interactive-selected); - --color-border-interactive-disabled: var(--border-interactive-disabled); - --color-border-interactive-focus: var(--border-interactive-focus); - --color-border-success-base: var(--border-success-base); - --color-border-success-hover: var(--border-success-hover); - --color-border-success-selected: var(--border-success-selected); - --color-border-warning-base: var(--border-warning-base); - --color-border-warning-hover: var(--border-warning-hover); - --color-border-warning-selected: var(--border-warning-selected); - --color-border-critical-base: var(--border-critical-base); - --color-border-critical-hover: var(--border-critical-hover); - --color-border-critical-selected: var(--border-critical-selected); - --color-border-info-base: var(--border-info-base); - --color-border-info-hover: var(--border-info-hover); - --color-border-info-selected: var(--border-info-selected); - --color-icon-brand-base: var(--icon-brand-base); - --color-icon-interactive-base: var(--icon-interactive-base); - --color-icon-success-base: var(--icon-success-base); - --color-icon-warning-base: var(--icon-warning-base); - --color-icon-warning-hover: var(--icon-warning-hover); - --color-icon-warning-active: var(--icon-warning-active); - --color-icon-success-hover: var(--icon-success-hover); - --color-icon-success-active: var(--icon-success-active); - --color-icon-critical-base: var(--icon-critical-base); - --color-icon-critical-hover: var(--icon-critical-hover); - --color-icon-critical-active: var(--icon-critical-active); - --color-icon-info-base: var(--icon-info-base); - --color-icon-info-hover: var(--icon-info-hover); - --color-icon-info-active: var(--icon-info-active); - --color-icon-on-brand-base: var(--icon-on-brand-base); - --color-icon-on-brand-hover: var(--icon-on-brand-hover); - --color-icon-on-brand-selected: var(--icon-on-brand-selected); - --color-icon-on-interactive-base: var(--icon-on-interactive-base); - --color-icon-on-interactive-hover: var(--icon-on-interactive-hover); - --color-icon-on-interactive-selected: var(--icon-on-interactive-selected); - --color-icon-agent-plan-base: var(--icon-agent-plan-base); - --color-icon-agent-build-base: var(--icon-agent-build-base); - --color-icon-agent-docs-base: var(--icon-agent-docs-base); - --color-icon-agent-ask-base: var(--icon-agent-ask-base); - --color-icon-on-success-base: var(--icon-on-success-base); - --color-icon-on-success-hover: var(--icon-on-success-hover); - --color-icon-on-success-selected: var(--icon-on-success-selected); - --color-icon-on-warning-base: var(--icon-on-warning-base); - --color-icon-on-warning-hover: var(--icon-on-warning-hover); - --color-icon-on-warning-selected: var(--icon-on-warning-selected); - --color-icon-on-critical-base: var(--icon-on-critical-base); - --color-icon-on-critical-hover: var(--icon-on-critical-hover); - --color-icon-on-critical-selected: var(--icon-on-critical-selected); - --color-icon-on-info-base: var(--icon-on-info-base); - --color-icon-on-diff-add-base: var(--icon-on-diff-add-base); - --color-icon-on-diff-delete-base: var(--icon-on-diff-delete-base); - --color-icon-on-diff-delete-hover: var(--icon-on-diff-delete-hover); - --color-icon-on-diff-delete-active: var(--icon-on-diff-delete-active); - --color-icon-on-diff-add-hover: var(--icon-on-diff-add-hover); - --color-icon-on-diff-add-active: var(--icon-on-diff-add-active); - --color-icon-on-info-hover: var(--icon-on-info-hover); - --color-icon-on-info-selected: var(--icon-on-info-selected); - --color-syntax-comment: var(--syntax-comment); - --color-syntax-string: var(--syntax-string); - --color-syntax-keyword: var(--syntax-keyword); - --color-syntax-function: var(--syntax-function); - --color-syntax-number: var(--syntax-number); - --color-syntax-operator: var(--syntax-operator); - --color-syntax-variable: var(--syntax-variable); - --color-syntax-type: var(--syntax-type); - --color-syntax-constant: var(--syntax-constant); - --color-syntax-punctuation: var(--syntax-punctuation); - --color-syntax-success: var(--syntax-success); - --color-syntax-warning: var(--syntax-warning); - --color-syntax-critical: var(--syntax-critical); - --color-syntax-info: var(--syntax-info); - --color-markdown-heading: var(--markdown-heading); - --color-markdown-text: var(--markdown-text); - --color-markdown-link: var(--markdown-link); - --color-markdown-link-text: var(--markdown-link-text); - --color-markdown-code: var(--markdown-code); - --color-markdown-block-quote: var(--markdown-block-quote); - --color-markdown-emph: var(--markdown-emph); - --color-markdown-strong: var(--markdown-strong); - --color-markdown-horizontal-rule: var(--markdown-horizontal-rule); - --color-markdown-list-item: var(--markdown-list-item); - --color-markdown-list-enumeration: var(--markdown-list-enumeration); - --color-markdown-image: var(--markdown-image); - --color-markdown-image-text: var(--markdown-image-text); - --color-markdown-code-block: var(--markdown-code-block); + --shadow-*: initial; + --shadow-xs-border-selected: var(--shadow-xs-border-selected); } + +@import "./tailwind-colors.css"; diff --git a/packages/css/src/theme.css b/packages/css/src/theme.css index 687a4b18..e3c523b1 100644 --- a/packages/css/src/theme.css +++ b/packages/css/src/theme.css @@ -4,6 +4,20 @@ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --size-12: 12; + --size-14: 14; + --size-16: 16; + --size-20: 20; + --weight-regular: 400; + --weight-medium: 500; + --line-height-lg: 20; + --line-height-xl: 24; + --line-height-2xl: 30; + --letter-spacing-normal: 0; + --letter-spacing-tight: -0.1599999964237213; + --letter-spacing-tightest: -0.3199999928474426; + --paragraph-spacing-0: 0; + --spacing: 0.25rem; --breakpoint-sm: 40rem; @@ -26,32 +40,32 @@ --container-6xl: 72rem; --container-7xl: 80rem; - --text-xs: 0.75rem; - --text-xs--line-height: calc(1 / 0.75); - --text-sm: 0.875rem; - --text-sm--line-height: calc(1.25 / 0.875); - --text-base: 1rem; - --text-base--line-height: calc(1.5 / 1); - --text-lg: 1.125rem; - --text-lg--line-height: calc(1.75 / 1.125); - --text-xl: 1.25rem; - --text-xl--line-height: calc(1.75 / 1.25); - --text-2xl: 1.5rem; - --text-2xl--line-height: calc(2 / 1.5); - --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); - --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); - --text-5xl: 3rem; - --text-5xl--line-height: 1; - --text-6xl: 3.75rem; - --text-6xl--line-height: 1; - --text-7xl: 4.5rem; - --text-7xl--line-height: 1; - --text-8xl: 6rem; - --text-8xl--line-height: 1; - --text-9xl: 8rem; - --text-9xl--line-height: 1; + /* --text-xs: 0.75rem; */ + /* --text-xs--line-height: calc(1 / 0.75); */ + /* --text-sm: 0.875rem; */ + /* --text-sm--line-height: calc(1.25 / 0.875); */ + /* --text-base: 1rem; */ + /* --text-base--line-height: calc(1.5 / 1); */ + /* --text-lg: 1.125rem; */ + /* --text-lg--line-height: calc(1.75 / 1.125); */ + /* --text-xl: 1.25rem; */ + /* --text-xl--line-height: calc(1.75 / 1.25); */ + /* --text-2xl: 1.5rem; */ + /* --text-2xl--line-height: calc(2 / 1.5); */ + /* --text-3xl: 1.875rem; */ + /* --text-3xl--line-height: calc(2.25 / 1.875); */ + /* --text-4xl: 2.25rem; */ + /* --text-4xl--line-height: calc(2.5 / 2.25); */ + /* --text-5xl: 3rem; */ + /* --text-5xl--line-height: 1; */ + /* --text-6xl: 3.75rem; */ + /* --text-6xl--line-height: 1; */ + /* --text-7xl: 4.5rem; */ + /* --text-7xl--line-height: 1; */ + /* --text-8xl: 6rem; */ + /* --text-8xl--line-height: 1; */ + /* --text-9xl: 8rem; */ + /* --text-9xl--line-height: 1; */ --font-weight-thin: 100; --font-weight-extralight: 200; @@ -63,18 +77,18 @@ --font-weight-extrabold: 800; --font-weight-black: 900; - --tracking-tighter: -0.05em; - --tracking-tight: -0.025em; - --tracking-normal: 0em; - --tracking-wide: 0.025em; - --tracking-wider: 0.05em; - --tracking-widest: 0.1em; - - --leading-tight: 1.25; - --leading-snug: 1.375; - --leading-normal: 1.5; - --leading-relaxed: 1.625; - --leading-loose: 2; + /* --tracking-tighter: -0.05em; */ + /* --tracking-tight: -0.025em; */ + /* --tracking-normal: 0em; */ + /* --tracking-wide: 0.025em; */ + /* --tracking-wider: 0.05em; */ + /* --tracking-widest: 0.1em; */ + /**/ + /* --leading-tight: 1.25; */ + /* --leading-snug: 1.375; */ + /* --leading-normal: 1.5; */ + /* --leading-relaxed: 1.625; */ + /* --leading-loose: 2; */ --radius-xs: 0.125rem; --radius-sm: 0.25rem; @@ -93,55 +107,51 @@ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); - --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); - - --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); - --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); - --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); - --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); - --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); - --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); - - --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); - --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); - --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); - --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); - --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); + /* --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); */ + /* --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); */ + /* --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); */ + /**/ + /* --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); */ + /* --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); */ + /* --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); */ + /* --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); */ + /* --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); */ + /* --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); */ + /**/ + /* --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); */ + /* --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); */ + /* --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); */ + /* --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); */ + /* --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); */ } :root { /* OC-1-Light */ color-scheme: light; - --background-base: var(--smoke-light-1); - --background-weak: #f7f6f6; - --background-weaker: #fcfcfc; - --surface-base: var(--smoke-light-2); - --input-base: var(--smoke-light-1); - --input-hover: var(--smoke-light-2); - --input-active: var(--cobalt-light-1); - --input-selected: var(--cobalt-light-4); - --input-focus: var(--cobalt-light-1); - --input-disabled: var(--smoke-light-4); - --surface-hover: var(--smoke-light-4); - --surface-active: var(--smoke-light-5); - --surface-selected: var(--cobalt-light-3); - --surface-disabled: var(--smoke-light-2); - --surface-focus: var(--cobalt-light-3); - --surface-inset-base: var(--smoke-light-3); - --surface-inset-hover: var(--smoke-light-4); - --surface-inset-active: var(--smoke-light-6); - --surface-inset-selected: var(--cobalt-light-4); - --surface-inset-disabled: var(--smoke-light-3); - --surface-inset-focus: var(--cobalt-light-4); - --surface-raised-base: var(--white); - --surface-raised-hover: var(--smoke-light-3); - --surface-raised-active: var(--smoke-light-4); - --surface-raised-selected: var(--cobalt-light-3); - --surface-raised-disabled: var(--smoke-light-2); - --surface-raised-focus: var(--cobalt-light-3); - --surface-overlay-base: var(--smoke-light-alpha-9); + --background-base: #f8f7f7; + --background-weak: var(--smoke-light-3); + --background-strong: var(--smoke-light-1); + --background-stronger: #fcfcfc; + --base: var(--smoke-light-alpha-2); + --surface-base: var(--smoke-light-alpha-2); + --base2: var(--smoke-light-alpha-2); + --base3: var(--smoke-light-alpha-2); + --surface-inset-base: var(--smoke-light-alpha-3); + --surface-inset-base-hover: var(--smoke-light-alpha-3); + --surface-inset-strong: #1f000017; + --surface-inset-strong-hover: #1f000017; + --surface-raised-base: var(--smoke-light-alpha-1); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-light-alpha-2); + --surface-raised-strong: var(--smoke-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--smoke-light-alpha-3); + --surface-weaker: var(--smoke-light-alpha-4); + --surface-strong: #ffffff; + --surface-raised-stronger-non-alpha: var(--white); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-light-3); @@ -160,54 +170,52 @@ --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); - --surface-diff-add-base: var(--coral-light-3); - --surface-diff-add-weak: var(--coral-light-2); - --surface-diff-add-weaker: var(--coral-light-1); - --surface-diff-add-strong: var(--coral-light-9); - --surface-diff-add-stronger: var(--coral-light-12); - --surface-diff-delete-base: var(--mint-light-3); - --surface-on-background-weak-base: var(--smoke-light-1); - --surface-on-background-weak-inset-base: var(--smoke-light-1); - --surface-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-focus: var(--smoke-light-1); - --surface-on-background-weak-inset-hover: var(--smoke-light-1); - --surface-on-background-weak-inset-active: var(--smoke-light-1); - --surface-on-background-weak-inset-selected: var(--smoke-light-1); - --surface-on-background-weak-inset-disabled: var(--smoke-light-1); - --surface-on-background-weak-inset-focus: var(--smoke-light-1); - --surface-diff-delete-weak: var(--mint-light-2); - --surface-diff-delete-weaker: var(--mint-light-1); - --surface-diff-delete-strong: var(--mint-light-9); - --surface-diff-delete-stronger: var(--mint-light-11); + --surface-diff-skip-base: var(--smoke-light-3); + --surface-diff-unchanged-base: #ffffff00; + --surface-diff-hidden-base: var(--blue-light-3); + --surface-diff-hidden-weak: var(--blue-light-2); + --surface-diff-hidden-weaker: var(--blue-light-1); + --surface-diff-hidden-strong: var(--blue-light-5); + --surface-diff-hidden-stronger: var(--blue-light-9); + --surface-diff-add-base: var(--mint-light-3); + --surface-diff-add-weak: var(--mint-light-2); + --surface-diff-add-weaker: var(--mint-light-1); + --surface-diff-add-strong: var(--mint-light-5); + --surface-diff-add-stronger: var(--mint-light-9); + --surface-diff-delete-base: var(--ember-light-3); + --surface-diff-delete-weak: var(--ember-light-2); + --surface-diff-delete-weaker: var(--ember-light-1); + --surface-diff-delete-strong: var(--ember-light-6); + --surface-diff-delete-stronger: var(--ember-light-9); --text-base: var(--smoke-light-11); + --input-base: var(--smoke-light-1); + --input-hover: var(--smoke-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--smoke-light-4); --text-weak: var(--smoke-light-9); --text-weaker: var(--smoke-light-8); --text-strong: var(--smoke-light-12); --text-on-brand-base: var(--smoke-light-alpha-11); - --text-on-interactive-base: var(--smoke-light-alpha-11); + --text-on-interactive-base: var(--smoke-light-1); --text-on-success-base: var(--smoke-dark-alpha-11); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); - --text-on-diff-add-base: var(--mint-light-11); - --text-on-diff-delete-base: var(--coral-light-11); - --text-on-diff-delete-weak: var(--coral-light-9); - --text-on-diff-delete-strong: var(--coral-light-12); - --text-on-diff-add-weak: var(--mint-light-9); - --text-on-diff-add-strong: var(--mint-light-12); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-11); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--smoke-dark-alpha-9); --text-on-success-strong: var(--smoke-dark-alpha-12); - --text-on-interactive-weak: var(--smoke-light-alpha-9); - --text-on-interactive-strong: var(--smoke-light-alpha-12); --text-on-brand-weak: var(--smoke-light-alpha-9); --text-on-brand-weaker: var(--smoke-light-alpha-8); --text-on-brand-strong: var(--smoke-light-alpha-12); + --button-secondary-base: #fdfcfc; --border-base: var(--smoke-light-alpha-7); --border-hover: var(--smoke-light-alpha-8); --border-active: var(--smoke-light-alpha-9); @@ -215,26 +223,14 @@ --border-disabled: var(--smoke-light-alpha-8); --border-focus: var(--smoke-light-alpha-9); --border-weak-base: var(--smoke-light-alpha-5); - --icon-base: var(--smoke-light-9); + --border-strong-base: var(--smoke-light-alpha-7); + --border-strong-hover: var(--smoke-light-alpha-8); + --border-strong-active: var(--smoke-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--smoke-light-alpha-6); + --border-strong-focus: var(--smoke-light-alpha-7); --border-weak-hover: var(--smoke-light-alpha-6); --border-weak-active: var(--smoke-light-alpha-7); - --icon-hover: var(--smoke-light-11); - --icon-active: var(--smoke-light-12); - --icon-selected: var(--smoke-light-12); - --icon-disabled: var(--smoke-light-8); - --icon-focus: var(--smoke-light-12); - --icon-weak-base: var(--smoke-light-7); - --icon-weak-hover: var(--smoke-light-8); - --icon-weak-active: var(--smoke-light-9); - --icon-weak-selected: var(--smoke-light-10); - --icon-weak-disabled: var(--smoke-light-6); - --icon-weak-focus: var(--smoke-light-9); - --icon-strong-base: var(--smoke-light-12); - --icon-strong-hover: var(--smoke-light-12); - --icon-strong-active: var(--smoke-light-12); - --icon-strong-selected: var(--smoke-light-12); - --icon-strong-disabled: var(--smoke-light-8); - --icon-strong-focus: var(--smoke-light-12); --border-weak-selected: var(--cobalt-light-alpha-6); --border-weak-disabled: var(--smoke-light-alpha-6); --border-weak-focus: var(--smoke-light-alpha-7); @@ -256,14 +252,33 @@ --border-info-base: var(--lilac-light-6); --border-info-hover: var(--lilac-light-7); --border-info-selected: var(--lilac-light-9); + --icon-base: var(--smoke-light-9); + --icon-hover: var(--smoke-light-11); + --icon-active: var(--smoke-light-12); + --icon-selected: var(--smoke-light-12); + --icon-disabled: var(--smoke-light-8); + --icon-focus: var(--smoke-light-12); + --icon-weak-base: var(--smoke-light-7); + --icon-invert-base: #ffffff; + --icon-weak-hover: var(--smoke-light-8); + --icon-weak-active: var(--smoke-light-9); + --icon-weak-selected: var(--smoke-light-10); + --icon-weak-disabled: var(--smoke-light-6); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-light-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); --icon-brand-base: var(--smoke-light-12); --icon-interactive-base: var(--cobalt-light-9); --icon-success-base: var(--apple-light-7); - --icon-warning-base: var(--solaris-light-7); - --icon-warning-hover: var(--solaris-light-8); - --icon-warning-active: var(--solaris-light-11); --icon-success-hover: var(--apple-light-8); --icon-success-active: var(--apple-light-11); + --icon-warning-base: var(--amber-light-7); + --icon-warning-hover: var(--amber-light-8); + --icon-warning-active: var(--amber-light-11); --icon-critical-base: var(--ember-light-7); --icon-critical-hover: var(--ember-light-8); --icon-critical-active: var(--ember-light-11); @@ -277,27 +292,27 @@ --icon-on-interactive-hover: var(--smoke-light-alpha-10); --icon-on-interactive-selected: var(--smoke-light-alpha-11); --icon-agent-plan-base: var(--purple-light-9); - --icon-agent-build-base: var(--blue-light-9); --icon-agent-docs-base: var(--amber-light-9); --icon-agent-ask-base: var(--cyan-light-9); + --icon-agent-build-base: var(--blue-light-9); --icon-on-success-base: var(--apple-light-alpha-9); --icon-on-success-hover: var(--apple-light-alpha-10); --icon-on-success-selected: var(--apple-light-alpha-11); - --icon-on-warning-base: var(--solaris-light-alpha-9); - --icon-on-warning-hover: var(--solaris-light-alpha-10); - --icon-on-warning-selected: var(--solaris-light-alpha-11); + --icon-on-warning-base: var(--amber-lightalpha-9); + --icon-on-warning-hover: var(--amber-lightalpha-10); + --icon-on-warning-selected: var(--amber-lightalpha-11); --icon-on-critical-base: var(--ember-light-alpha-9); --icon-on-critical-hover: var(--ember-light-alpha-10); --icon-on-critical-selected: var(--ember-light-alpha-11); --icon-on-info-base: var(--lilac-light-9); - --icon-on-diff-add-base: var(--mint-dark-alpha-9); - --icon-on-diff-delete-base: var(--coral-light-alpha-9); - --icon-on-diff-delete-hover: var(--coral-light-alpha-10); - --icon-on-diff-delete-active: var(--coral-light-alpha-11); - --icon-on-diff-add-hover: var(--mint-dark-alpha-10); - --icon-on-diff-add-active: var(--mint-dark-alpha-11); --icon-on-info-hover: var(--lilac-light-alpha-10); --icon-on-info-selected: var(--lilac-light-alpha-11); + --icon-diff-add-base: var(--mint-light-11); + --icon-diff-add-hover: var(--mint-light-12); + --icon-diff-add-active: var(--mint-light-12); + --icon-diff-delete-base: var(--ember-light-9); + --icon-diff-delete-hover: var(--ember-light-10); + --icon-diff-delete-active: var(--ember-light-11); --syntax-comment: #ffffff; --syntax-string: #ffffff; --syntax-keyword: #ffffff; @@ -326,38 +341,35 @@ --markdown-image: #ffffff; --markdown-image-text: #ffffff; --markdown-code-block: #ffffff; + --border-color: #ffffff; .dark { /* OC-1-Dark */ color-scheme: dark; --background-base: var(--smoke-dark-1); - --background-weak: #151313; - --background-weaker: #201c1c; - --surface-base: var(--smoke-dark-3); - --input-base: var(--smoke-dark-2); - --input-hover: var(--smoke-dark-2); - --input-active: var(--cobalt-dark-1); - --input-selected: var(--cobalt-dark-2); - --input-focus: var(--cobalt-dark-1); - --input-disabled: var(--smoke-dark-4); - --surface-hover: var(--smoke-dark-4); - --surface-active: var(--smoke-dark-5); - --surface-selected: var(--cobalt-dark-3); - --surface-disabled: var(--smoke-dark-2); - --surface-focus: var(--cobalt-dark-3); - --surface-inset-base: var(--smoke-dark-4); - --surface-inset-hover: var(--smoke-dark-5); - --surface-inset-active: var(--smoke-dark-6); - --surface-inset-selected: var(--cobalt-dark-4); - --surface-inset-disabled: var(--smoke-dark-3); - --surface-inset-focus: var(--cobalt-dark-4); - --surface-raised-base: var(--smoke-dark-4); - --surface-raised-hover: var(--smoke-dark-7); - --surface-raised-active: var(--smoke-dark-8); - --surface-raised-selected: var(--cobalt-dark-3); - --surface-raised-disabled: var(--smoke-dark-3); - --surface-raised-focus: var(--cobalt-dark-3); - --surface-overlay-base: var(--smoke-dark-alpha-2); + --background-weak: #201d1d; + --background-strong: #151313; + --background-stronger: #201c1c; + --base: var(--smoke-dark-alpha-2); + --surface-base: var(--smoke-dark-alpha-3); + --base2: var(--smoke-dark-alpha-2); + --base3: var(--smoke-dark-alpha-2); + --surface-inset-base: #0e0b0b7f; + --surface-inset-base-hover: #0e0b0b7f; + --surface-inset-strong: #060505cc; + --surface-inset-strong-hover: #060505cc; + --surface-raised-base: var(--smoke-dark-alpha-3); + --surface-float-base: var(--smoke-dark-1); + --surface-float-base-hover: var(--smoke-dark-2); + --surface-raised-base-hover: var(--smoke-dark-alpha-4); + --surface-raised-strong: var(--smoke-dark-alpha-5); + --surface-raised-strong-hover: var(--smoke-dark-alpha-6); + --surface-raised-stronger: var(--smoke-dark-alpha-6); + --surface-raised-stronger-hover: var(--smoke-dark-alpha-7); + --surface-weak: var(--smoke-dark-alpha-5); + --surface-weaker: var(--smoke-dark-alpha-6); + --surface-strong: var(--smoke-dark-alpha-7); + --surface-raised-stronger-non-alpha: var(--smoke-dark-5); --surface-brand-base: var(--yuzu-light-9); --surface-brand-hover: var(--yuzu-light-10); --surface-interactive-base: var(--cobalt-light-3); @@ -376,54 +388,52 @@ --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); - --surface-diff-add-base: var(--coral-light-3); - --surface-diff-add-weak: var(--coral-light-2); - --surface-diff-add-weaker: var(--coral-light-1); - --surface-diff-add-strong: var(--coral-light-9); - --surface-diff-add-stronger: var(--coral-light-12); - --surface-diff-delete-base: var(--mint-light-3); - --surface-on-background-weak-base: var(--smoke-dark-1); - --surface-on-background-weak-inset-base: var(--smoke-light-1); - --surface-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-focus: var(--smoke-light-1); - --surface-on-background-weak-inset-hover: var(--smoke-light-1); - --surface-on-background-weak-inset-active: var(--smoke-light-1); - --surface-on-background-weak-inset-selected: var(--smoke-light-1); - --surface-on-background-weak-inset-disabled: var(--smoke-light-1); - --surface-on-background-weak-inset-focus: var(--smoke-light-1); - --surface-diff-delete-weak: var(--mint-light-2); - --surface-diff-delete-weaker: var(--mint-light-1); - --surface-diff-delete-strong: var(--mint-light-9); - --surface-diff-delete-stronger: var(--mint-light-11); + --surface-diff-skip-base: var(--smoke-dark-alpha-2); + --surface-diff-unchanged-base: var(--smoke-dark-1); + --surface-diff-hidden-base: var(--blue-dark-2); + --surface-diff-hidden-weak: var(--blue-dark-1); + --surface-diff-hidden-weaker: var(--blue-dark-3); + --surface-diff-hidden-strong: var(--blue-dark-5); + --surface-diff-hidden-stronger: var(--blue-dark-11); + --surface-diff-add-base: var(--mint-dark-3); + --surface-diff-add-weak: var(--mint-dark-4); + --surface-diff-add-weaker: var(--mint-dark-3); + --surface-diff-add-strong: var(--mint-dark-5); + --surface-diff-add-stronger: var(--mint-dark-11); + --surface-diff-delete-base: var(--ember-dark-3); + --surface-diff-delete-weak: var(--ember-dark-4); + --surface-diff-delete-weaker: var(--ember-dark-3); + --surface-diff-delete-strong: var(--ember-dark-5); + --surface-diff-delete-stronger: var(--ember-dark-11); --text-base: var(--smoke-dark-alpha-11); + --input-base: var(--smoke-dark-2); + --input-hover: var(--smoke-dark-2); + --input-active: var(--cobalt-dark-1); + --input-selected: var(--cobalt-dark-2); + --input-focus: var(--cobalt-dark-1); + --input-disabled: var(--smoke-dark-4); --text-weak: var(--smoke-dark-alpha-9); --text-weaker: var(--smoke-dark-alpha-8); --text-strong: var(--smoke-dark-alpha-12); --text-on-brand-base: var(--smoke-dark-alpha-11); - --text-on-interactive-base: var(--smoke-dark-alpha-11); + --text-on-interactive-base: var(--smoke-dark-12); --text-on-success-base: var(--smoke-dark-alpha-11); --text-on-warning-base: var(--smoke-dark-alpha-11); --text-on-info-base: var(--smoke-dark-alpha-11); - --text-on-diff-add-base: var(--mint-dark-11); - --text-on-diff-delete-base: var(--coral-dark-11); - --text-on-diff-delete-weak: var(--coral-dark-9); - --text-on-diff-delete-strong: var(--coral-dark-12); - --text-on-diff-add-weak: var(--mint-dark-9); - --text-on-diff-add-strong: var(--mint-dark-12); + --text-diff-add-base: var(--mint-dark-11); + --text-diff-delete-base: var(--ember-dark-9); + --text-diff-delete-strong: var(--ember-dark-12); + --text-diff-add-strong: var(--mint-dark-8); --text-on-info-weak: var(--smoke-dark-alpha-9); --text-on-info-strong: var(--smoke-dark-alpha-12); --text-on-warning-weak: var(--smoke-dark-alpha-9); --text-on-warning-strong: var(--smoke-dark-alpha-12); --text-on-success-weak: var(--smoke-dark-alpha-9); --text-on-success-strong: var(--smoke-dark-alpha-12); - --text-on-interactive-weak: var(--smoke-dark-alpha-9); - --text-on-interactive-strong: var(--smoke-dark-alpha-12); --text-on-brand-weak: var(--smoke-dark-alpha-9); --text-on-brand-weaker: var(--smoke-dark-alpha-8); --text-on-brand-strong: var(--smoke-dark-alpha-12); + --button-secondary-base: var(--smoke-dark-6); --border-base: var(--smoke-dark-alpha-7); --border-hover: var(--smoke-dark-alpha-8); --border-active: var(--smoke-dark-alpha-9); @@ -431,26 +441,14 @@ --border-disabled: var(--smoke-dark-alpha-8); --border-focus: var(--smoke-dark-alpha-9); --border-weak-base: var(--smoke-dark-alpha-6); - --icon-base: var(--smoke-dark-9); + --border-strong-base: var(--smoke-dark-alpha-8); + --border-strong-hover: var(--smoke-dark-alpha-7); + --border-strong-active: var(--smoke-dark-alpha-8); + --border-strong-selected: var(--cobalt-dark-alpha-6); + --border-strong-disabled: var(--smoke-dark-alpha-6); + --border-strong-focus: var(--smoke-dark-alpha-8); --border-weak-hover: var(--smoke-dark-alpha-7); --border-weak-active: var(--smoke-dark-alpha-8); - --icon-hover: var(--smoke-dark-10); - --icon-active: var(--smoke-dark-11); - --icon-selected: var(--smoke-dark-12); - --icon-disabled: var(--smoke-dark-7); - --icon-focus: var(--smoke-dark-12); - --icon-weak-base: var(--smoke-dark-6); - --icon-weak-hover: var(--smoke-light-7); - --icon-weak-active: var(--smoke-light-8); - --icon-weak-selected: var(--smoke-light-9); - --icon-weak-disabled: var(--smoke-light-4); - --icon-weak-focus: var(--smoke-light-9); - --icon-strong-base: var(--smoke-dark-12); - --icon-strong-hover: var(--smoke-light-12); - --icon-strong-active: var(--smoke-light-12); - --icon-strong-selected: var(--smoke-light-12); - --icon-strong-disabled: var(--smoke-light-8); - --icon-strong-focus: var(--smoke-light-12); --border-weak-selected: var(--cobalt-dark-alpha-6); --border-weak-disabled: var(--smoke-dark-alpha-6); --border-weak-focus: var(--smoke-dark-alpha-8); @@ -472,48 +470,67 @@ --border-info-base: var(--lilac-light-6); --border-info-hover: var(--lilac-light-7); --border-info-selected: var(--lilac-light-9); + --icon-base: var(--smoke-dark-9); + --icon-hover: var(--smoke-dark-10); + --icon-active: var(--smoke-dark-11); + --icon-selected: var(--smoke-dark-12); + --icon-disabled: var(--smoke-dark-7); + --icon-focus: var(--smoke-dark-12); + --icon-weak-base: var(--smoke-dark-6); + --icon-invert-base: var(--smoke-dark-1); + --icon-weak-hover: var(--smoke-light-7); + --icon-weak-active: var(--smoke-light-8); + --icon-weak-selected: var(--smoke-light-9); + --icon-weak-disabled: var(--smoke-light-4); + --icon-weak-focus: var(--smoke-light-9); + --icon-strong-base: var(--smoke-dark-12); + --icon-strong-hover: var(--smoke-light-12); + --icon-strong-active: var(--smoke-light-12); + --icon-strong-selected: var(--smoke-light-12); + --icon-strong-disabled: var(--smoke-light-8); + --icon-strong-focus: var(--smoke-light-12); --icon-brand-base: var(--white); --icon-interactive-base: var(--cobalt-dark-9); - --icon-success-base: var(--apple-light-7); - --icon-warning-base: var(--solaris-light-7); - --icon-warning-hover: var(--solaris-light-8); - --icon-warning-active: var(--solaris-light-11); - --icon-success-hover: var(--apple-light-8); - --icon-success-active: var(--apple-light-11); - --icon-critical-base: var(--ember-light-7); - --icon-critical-hover: var(--ember-light-8); - --icon-critical-active: var(--ember-light-11); - --icon-info-base: var(--lilac-light-7); - --icon-info-hover: var(--lilac-light-8); - --icon-info-active: var(--lilac-light-11); + --icon-success-base: var(--apple-dark-7); + --icon-success-hover: var(--apple-dark-8); + --icon-success-active: var(--apple-dark-11); + --icon-warning-base: var(--amber-dark-7); + --icon-warning-hover: var(--amber-dark-8); + --icon-warning-active: var(--amber-dark-11); + --icon-critical-base: var(--ember-dark-7); + --icon-critical-hover: var(--ember-dark-8); + --icon-critical-active: var(--ember-dark-11); + --icon-info-base: var(--lilac-dark-7); + --icon-info-hover: var(--lilac-dark-8); + --icon-info-active: var(--lilac-dark-11); --icon-on-brand-base: var(--smoke-light-alpha-11); --icon-on-brand-hover: var(--smoke-light-alpha-12); --icon-on-brand-selected: var(--smoke-light-alpha-12); --icon-on-interactive-base: var(--smoke-dark-alpha-9); --icon-on-interactive-hover: var(--smoke-dark-alpha-10); --icon-on-interactive-selected: var(--smoke-dark-alpha-11); - --icon-agent-plan-base: #ffffff; - --icon-agent-build-base: #ffffff; - --icon-agent-docs-base: #ffffff; - --icon-agent-ask-base: #ffffff; - --icon-on-success-base: var(--apple-light-alpha-9); - --icon-on-success-hover: var(--apple-light-alpha-10); - --icon-on-success-selected: var(--apple-light-alpha-11); - --icon-on-warning-base: var(--solaris-light-alpha-9); - --icon-on-warning-hover: var(--solaris-light-alpha-10); - --icon-on-warning-selected: var(--solaris-light-alpha-11); - --icon-on-critical-base: var(--ember-light-alpha-9); - --icon-on-critical-hover: var(--ember-light-alpha-10); - --icon-on-critical-selected: var(--ember-light-alpha-11); - --icon-on-info-base: var(--lilac-light-9); - --icon-on-diff-add-base: var(--mint-dark-alpha-9); - --icon-on-diff-delete-base: var(--coral-light-alpha-9); - --icon-on-diff-delete-hover: var(--coral-light-alpha-10); - --icon-on-diff-delete-active: var(--coral-light-alpha-11); - --icon-on-diff-add-hover: var(--mint-dark-alpha-10); - --icon-on-diff-add-active: var(--mint-dark-alpha-11); - --icon-on-info-hover: var(--lilac-light-alpha-10); - --icon-on-info-selected: var(--lilac-light-alpha-11); + --icon-agent-plan-base: var(--purple-dark-9); + --icon-agent-docs-base: var(--amber-dark-9); + --icon-agent-ask-base: var(--cyan-dark-9); + --icon-agent-build-base: var(--blue-dark-9); + --icon-on-success-base: var(--apple-dark-alpha-9); + --icon-on-success-hover: var(--apple-dark-alpha-10); + --icon-on-success-selected: var(--apple-dark-alpha-11); + --icon-on-warning-base: var(--amber-darkalpha-9); + --icon-on-warning-hover: var(--amber-darkalpha-10); + --icon-on-warning-selected: var(--amber-darkalpha-11); + --icon-on-critical-base: var(--ember-dark-alpha-9); + --icon-on-critical-hover: var(--ember-dark-alpha-10); + --icon-on-critical-selected: var(--ember-dark-alpha-11); + --icon-on-info-base: var(--lilac-dark-9); + --icon-on-info-hover: var(--lilac-dark-alpha-10); + --icon-on-info-selected: var(--lilac-dark-alpha-11); + --icon-diff-add-base: var(--mint-dark-11); + --icon-diff-add-hover: var(--mint-dark-10); + --icon-diff-add-active: var(--mint-dark-11); + --icon-diff-delete-base: var(--ember-dark-9); + --icon-diff-delete-hover: var(--ember-dark-10); + --icon-diff-delete-active: var(--ember-dark-11); --syntax-comment: #ffffff; --syntax-string: #ffffff; --syntax-keyword: #ffffff; @@ -542,5 +559,6 @@ --markdown-image: #ffffff; --markdown-image-text: #ffffff; --markdown-code-block: #ffffff; + --border-color: #ffffff; } } diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx new file mode 100644 index 00000000..48d23840 --- /dev/null +++ b/packages/desktop/src/components/prompt-input.tsx @@ -0,0 +1,264 @@ +import { createEffect, on, Component, createMemo, Show } from "solid-js" +import { createStore } from "solid-js/store" + +interface TextPart { + type: "text" + content: string +} + +interface AttachmentPart { + type: "attachment" + fileId: string + name: string +} + +export type ContentPart = TextPart | AttachmentPart + +export interface AttachmentToAdd { + id: string + name: string +} + +type AddAttachmentCallback = (attachment: AttachmentToAdd) => void + +export interface PopoverState { + isOpen: boolean + searchQuery: string + addAttachment: AddAttachmentCallback +} + +interface PromptInputProps { + onSubmit: (parts: ContentPart[]) => void + onShowAttachments?: (state: PopoverState | null) => void + class?: string +} + +export const PromptInput: Component = (props) => { + let editorRef: HTMLDivElement | undefined + + const defaultParts = [{ type: "text", content: "" } as const] + const [store, setStore] = createStore<{ + contentParts: ContentPart[] + popover: { + isOpen: boolean + searchQuery: string + } + }>({ + contentParts: defaultParts, + popover: { + isOpen: false, + searchQuery: "", + }, + }) + + const isEmpty = createMemo(() => isEqual(store.contentParts, defaultParts)) + + createEffect( + on( + () => store.contentParts, + (currentParts) => { + if (!editorRef) return + const domParts = parseFromDOM() + if (isEqual(currentParts, domParts)) return + + const selection = window.getSelection() + let cursorPosition: number | null = null + if (selection && selection.rangeCount > 0 && editorRef.contains(selection.anchorNode)) { + cursorPosition = getCursorPosition(editorRef) + } + + editorRef.innerHTML = "" + currentParts.forEach((part) => { + if (part.type === "text") { + editorRef!.appendChild(document.createTextNode(part.content)) + } else if (part.type === "attachment") { + const pill = document.createElement("span") + pill.textContent = `@${part.name}` + pill.className = "attachment-pill" + pill.setAttribute("data-file-id", part.fileId) + pill.setAttribute("contenteditable", "false") + editorRef!.appendChild(pill) + } + }) + + if (cursorPosition !== null) { + setCursorPosition(editorRef, cursorPosition) + } + }, + ), + ) + + createEffect(() => { + if (store.popover.isOpen) { + props.onShowAttachments?.({ + isOpen: true, + searchQuery: store.popover.searchQuery, + addAttachment: addAttachment, + }) + } else { + props.onShowAttachments?.(null) + } + }) + + const parseFromDOM = (): ContentPart[] => { + if (!editorRef) return [] + const newParts: ContentPart[] = [] + editorRef.childNodes.forEach((node) => { + if (node.nodeType === Node.TEXT_NODE) { + if (node.textContent) newParts.push({ type: "text", content: node.textContent }) + } else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.fileId) { + newParts.push({ + type: "attachment", + fileId: (node as HTMLElement).dataset.fileId!, + name: node.textContent!.substring(1), + }) + } + }) + if (newParts.length === 0) newParts.push(...defaultParts) + return newParts + } + + const handleInput = () => { + const rawParts = parseFromDOM() + const cursorPosition = getCursorPosition(editorRef!) + const rawText = rawParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("") + + const atMatch = rawText.substring(0, cursorPosition).match(/@(\S*)$/) + if (atMatch) { + setStore("popover", { isOpen: true, searchQuery: atMatch[1] }) + } else if (store.popover.isOpen) { + setStore("popover", "isOpen", false) + } + + setStore("contentParts", rawParts) + } + + const addAttachment: AddAttachmentCallback = (attachment) => { + const rawText = store.contentParts.map((p) => (p.type === "text" ? p.content : `@${p.name}`)).join("") + const cursorPosition = getCursorPosition(editorRef!) + + const textBeforeCursor = rawText.substring(0, cursorPosition) + const atMatch = textBeforeCursor.match(/@(\S*)$/) + + if (!atMatch) return + + const startIndex = atMatch.index! + + // Create new structured content + const newParts: ContentPart[] = [] + const textBeforeTrigger = rawText.substring(0, startIndex) + if (textBeforeTrigger) newParts.push({ type: "text", content: textBeforeTrigger }) + + newParts.push({ type: "attachment", fileId: attachment.id, name: attachment.name }) + + // Add a space after the pill for better UX + newParts.push({ type: "text", content: " " }) + + const textAfterCursor = rawText.substring(cursorPosition) + if (textAfterCursor) newParts.push({ type: "text", content: textAfterCursor }) + + setStore("contentParts", newParts) + setStore("popover", "isOpen", false) + + // Set cursor position after the newly added pill + space + // We need to wait for the DOM to update + queueMicrotask(() => { + setCursorPosition(editorRef!, textBeforeTrigger.length + 1 + attachment.name.length + 1) + }) + } + + const handleKeyDown = (event: KeyboardEvent) => { + if (store.popover.isOpen && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) { + // In a real implementation, you'd prevent default and delegate this to the popover + console.log("Key press delegated to popover:", event.key) + event.preventDefault() + return + } + + if (event.key === "Enter" && !event.shiftKey) { + event.preventDefault() + if (store.contentParts.length > 0) { + props.onSubmit([...store.contentParts]) + setStore("contentParts", defaultParts) + } + } + } + + return ( +
+
+
+
+ +
+ Plan and build anything +
+ +
+
+
+ ) +} + +function isEqual(arrA: ContentPart[], arrB: ContentPart[]): boolean { + if (arrA.length !== arrB.length) return false + for (let i = 0; i < arrA.length; i++) { + const partA = arrA[i] + const partB = arrB[i] + if (partA.type !== partB.type) return false + if (partA.type === "text" && partA.content !== (partB as TextPart).content) { + return false + } + if (partA.type === "attachment" && partA.fileId !== (partB as AttachmentPart).fileId) { + return false + } + } + return true +} + +function getCursorPosition(parent: HTMLElement): number { + const selection = window.getSelection() + if (!selection || selection.rangeCount === 0) return 0 + const range = selection.getRangeAt(0) + const preCaretRange = range.cloneRange() + preCaretRange.selectNodeContents(parent) + preCaretRange.setEnd(range.startContainer, range.startOffset) + return preCaretRange.toString().length +} + +function setCursorPosition(parent: HTMLElement, position: number) { + let child = parent.firstChild + let offset = position + while (child) { + if (offset > child.textContent!.length) { + offset -= child.textContent!.length + child = child.nextSibling + } else { + try { + const range = document.createRange() + const sel = window.getSelection() + range.setStart(child, offset) + range.collapse(true) + sel?.removeAllRanges() + sel?.addRange(range) + } catch (e) { + console.error("Failed to set cursor position.", e) + } + return + } + } +} diff --git a/packages/desktop/src/components/session-list.tsx b/packages/desktop/src/components/session-list.tsx index 5b6dc0f5..a339fc6b 100644 --- a/packages/desktop/src/components/session-list.tsx +++ b/packages/desktop/src/components/session-list.tsx @@ -7,7 +7,7 @@ export default function SessionList() { const sync = useSync() const local = useLocal() return ( - + {(session) => (