aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-21 09:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: css/ui and desktop work

Browse Source
This commit is contained in:
Adam
2025-10-16 14:01:49 -05:00
parent 149cb6a9ec
commit 20229f147b
9 changed files with 1016 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/css/package.json
View File

@@ -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:"
}
}

31
packages/css/script/colors.ts Normal file
View File

@@ -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())

214
packages/css/script/colors.txt Normal file
View File

@@ -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;

220
packages/css/src/tailwind-colors.css Normal file
View File

@@ -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);
}

217
packages/css/src/tailwind.css
View File

@@ -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";

526
packages/css/src/theme.css
View File

@@ -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;
}
}

264
packages/desktop/src/components/prompt-input.tsx Normal file
View File

@@ -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<PromptInputProps> = (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 (
<div
classList={{
"size-full max-w-xl bg-surface-base border border-border-base": true,
"rounded-2xl overflow-clip focus-within:shadow-xs-border-selected": true,
[props.class ?? ""]: !!props.class,
}}
>
<div class="p-3" />
<div class="relative">
<div
ref={editorRef}
contenteditable="true"
onInput={handleInput}
onKeyDown={handleKeyDown}
classList={{
"w-full p-3 text-sm focus:outline-none": true,
}}
/>
<Show when={isEmpty()}>
<div class="absolute bottom-0 left-0 p-3 text-sm text-text-weak pointer-events-none">
Plan and build anything
</div>
</Show>
</div>
<div class="p-3" />
</div>
)
}
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
}
}
}

2
packages/desktop/src/components/session-list.tsx
View File

@@ -7,7 +7,7 @@ export default function SessionList() {
const sync = useSync()
const local = useLocal()
return (
<VList data={sync.data.session} class="p-3">
<VList data={sync.data.session} class="no-scrollbar p-3">
{(session) => (
<Tooltip placement="right" value={session.title} class="w-full min-w-0">
<button

8
packages/desktop/src/pages/index.tsx
View File

@@ -225,10 +225,10 @@ export default function Page() {
)
return (
<div class="relative h-screen flex flex-col">
<header class="h-12 shrink-0"></header>
<main class="h-[calc(100vh-3rem)] flex">
<div class="hidden shrink-0 w-64">
<div class="relative h-screen flex flex-col bg-background-weak">
<header class="hidden h-12 shrink-0 bg-background-base border-b border-border-weak-base"></header>
<main class="h-[calc(100vh-0rem)] flex">
<div class="shrink-0 w-70">
<SessionList />
</div>
<div class="grow w-full min-w-0 overflow-y-auto flex justify-center">