wip: css/ui work

1 files changed, 220 insertions, 0 deletions

diff --git a/packages/css/src/tailwind.css b/packages/css/src/tailwind.css
new file mode 100644
index 000000000..17936627b
--- /dev/null
+++ b/packages/css/src/tailwind.css
@@ -0,0 +1,220 @@
+@import "./index.css";
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@theme {
+  --color-*: initial;
+  --color-background-base: var(--background-base);
+  --color-background-weak: var(--background-weak);
+  --color-background-weaker: var(--background-weaker);
+  --color-surface-base: var(--surface-base);
+  --color-input-base: var(--input-base);
+  --color-input-hover: var(--input-hover);
+  --color-input-active: var(--input-active);
+  --color-input-selected: var(--input-selected);
+  --color-input-focus: var(--input-focus);
+  --color-input-disabled: var(--input-disabled);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-surface-selected: var(--surface-selected);
+  --color-surface-disabled: var(--surface-disabled);
+  --color-surface-focus: var(--surface-focus);
+  --color-surface-inset-base: var(--surface-inset-base);
+  --color-surface-inset-hover: var(--surface-inset-hover);
+  --color-surface-inset-active: var(--surface-inset-active);
+  --color-surface-inset-selected: var(--surface-inset-selected);
+  --color-surface-inset-disabled: var(--surface-inset-disabled);
+  --color-surface-inset-focus: var(--surface-inset-focus);
+  --color-surface-raised-base: var(--surface-raised-base);
+  --color-surface-raised-hover: var(--surface-raised-hover);
+  --color-surface-raised-active: var(--surface-raised-active);
+  --color-surface-raised-selected: var(--surface-raised-selected);
+  --color-surface-raised-disabled: var(--surface-raised-disabled);
+  --color-surface-raised-focus: var(--surface-raised-focus);
+  --color-surface-overlay-base: var(--surface-overlay-base);
+  --color-surface-brand-base: var(--surface-brand-base);
+  --color-surface-brand-hover: var(--surface-brand-hover);
+  --color-surface-interactive-base: var(--surface-interactive-base);
+  --color-surface-interactive-hover: var(--surface-interactive-hover);
+  --color-surface-interactive-weak: var(--surface-interactive-weak);
+  --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover);
+  --color-surface-success-base: var(--surface-success-base);
+  --color-surface-success-weak: var(--surface-success-weak);
+  --color-surface-success-strong: var(--surface-success-strong);
+  --color-surface-warning-base: var(--surface-warning-base);
+  --color-surface-warning-weak: var(--surface-warning-weak);
+  --color-surface-warning-strong: var(--surface-warning-strong);
+  --color-surface-critical-base: var(--surface-critical-base);
+  --color-surface-critical-weak: var(--surface-critical-weak);
+  --color-surface-critical-strong: var(--surface-critical-strong);
+  --color-surface-info-base: var(--surface-info-base);
+  --color-surface-info-weak: var(--surface-info-weak);
+  --color-surface-info-strong: var(--surface-info-strong);
+  --color-surface-diff-add-base: var(--surface-diff-add-base);
+  --color-surface-diff-add-weak: var(--surface-diff-add-weak);
+  --color-surface-diff-add-weaker: var(--surface-diff-add-weaker);
+  --color-surface-diff-add-strong: var(--surface-diff-add-strong);
+  --color-surface-diff-add-stronger: var(--surface-diff-add-stronger);
+  --color-surface-diff-delete-base: var(--surface-diff-delete-base);
+  --color-surface-on-background-weak-base: var(--surface-on-background-weak-base);
+  --color-surface-on-background-weak-inset-base: var(--surface-on-background-weak-inset-base);
+  --color-surface-on-background-weak-hover: var(--surface-on-background-weak-hover);
+  --color-surface-on-background-weak-active: var(--surface-on-background-weak-active);
+  --color-surface-on-background-weak-selected: var(--surface-on-background-weak-selected);
+  --color-surface-on-background-weak-disabled: var(--surface-on-background-weak-disabled);
+  --color-surface-on-background-weak-focus: var(--surface-on-background-weak-focus);
+  --color-surface-on-background-weak-inset-hover: var(--surface-on-background-weak-inset-hover);
+  --color-surface-on-background-weak-inset-active: var(--surface-on-background-weak-inset-active);
+  --color-surface-on-background-weak-inset-selected: var(--surface-on-background-weak-inset-selected);
+  --color-surface-on-background-weak-inset-disabled: var(--surface-on-background-weak-inset-disabled);
+  --color-surface-on-background-weak-inset-focus: var(--surface-on-background-weak-inset-focus);
+  --color-surface-diff-delete-weak: var(--surface-diff-delete-weak);
+  --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker);
+  --color-surface-diff-delete-strong: var(--surface-diff-delete-strong);
+  --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger);
+  --color-text-base: var(--text-base);
+  --color-text-weak: var(--text-weak);
+  --color-text-weaker: var(--text-weaker);
+  --color-text-strong: var(--text-strong);
+  --color-text-on-brand-base: var(--text-on-brand-base);
+  --color-text-on-interactive-base: var(--text-on-interactive-base);
+  --color-text-on-success-base: var(--text-on-success-base);
+  --color-text-on-warning-base: var(--text-on-warning-base);
+  --color-text-on-info-base: var(--text-on-info-base);
+  --color-text-on-diff-add-base: var(--text-on-diff-add-base);
+  --color-text-on-diff-delete-base: var(--text-on-diff-delete-base);
+  --color-text-on-diff-delete-weak: var(--text-on-diff-delete-weak);
+  --color-text-on-diff-delete-strong: var(--text-on-diff-delete-strong);
+  --color-text-on-diff-add-weak: var(--text-on-diff-add-weak);
+  --color-text-on-diff-add-strong: var(--text-on-diff-add-strong);
+  --color-text-on-info-weak: var(--text-on-info-weak);
+  --color-text-on-info-strong: var(--text-on-info-strong);
+  --color-text-on-warning-weak: var(--text-on-warning-weak);
+  --color-text-on-warning-strong: var(--text-on-warning-strong);
+  --color-text-on-success-weak: var(--text-on-success-weak);
+  --color-text-on-success-strong: var(--text-on-success-strong);
+  --color-text-on-interactive-weak: var(--text-on-interactive-weak);
+  --color-text-on-interactive-strong: var(--text-on-interactive-strong);
+  --color-text-on-brand-weak: var(--text-on-brand-weak);
+  --color-text-on-brand-weaker: var(--text-on-brand-weaker);
+  --color-text-on-brand-strong: var(--text-on-brand-strong);
+  --color-border-base: var(--border-base);
+  --color-border-hover: var(--border-hover);
+  --color-border-active: var(--border-active);
+  --color-border-selected: var(--border-selected);
+  --color-border-disabled: var(--border-disabled);
+  --color-border-focus: var(--border-focus);
+  --color-border-weak-base: var(--border-weak-base);
+  --color-border-weak-hover: var(--border-weak-hover);
+  --color-border-weak-active: var(--border-weak-active);
+  --color-icon-base: var(--icon-base);
+  --color-icon-hover: var(--icon-hover);
+  --color-icon-active: var(--icon-active);
+  --color-icon-selected: var(--icon-selected);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-icon-focus: var(--icon-focus);
+  --color-icon-weak-base: var(--icon-weak-base);
+  --color-icon-weak-hover: var(--icon-weak-hover);
+  --color-icon-weak-active: var(--icon-weak-active);
+  --color-icon-weak-selected: var(--icon-weak-selected);
+  --color-icon-weak-disabled: var(--icon-weak-disabled);
+  --color-icon-weak-focus: var(--icon-weak-focus);
+  --color-icon-strong-base: var(--icon-strong-base);
+  --color-icon-strong-hover: var(--icon-strong-hover);
+  --color-icon-strong-active: var(--icon-strong-active);
+  --color-icon-strong-selected: var(--icon-strong-selected);
+  --color-icon-strong-disabled: var(--icon-strong-disabled);
+  --color-icon-strong-focus: var(--icon-strong-focus);
+  --color-border-weak-selected: var(--border-weak-selected);
+  --color-border-weak-disabled: var(--border-weak-disabled);
+  --color-border-weak-focus: var(--border-weak-focus);
+  --color-border-interactive-base: var(--border-interactive-base);
+  --color-border-interactive-hover: var(--border-interactive-hover);
+  --color-border-interactive-active: var(--border-interactive-active);
+  --color-border-interactive-selected: var(--border-interactive-selected);
+  --color-border-interactive-disabled: var(--border-interactive-disabled);
+  --color-border-interactive-focus: var(--border-interactive-focus);
+  --color-border-success-base: var(--border-success-base);
+  --color-border-success-hover: var(--border-success-hover);
+  --color-border-success-selected: var(--border-success-selected);
+  --color-border-warning-base: var(--border-warning-base);
+  --color-border-warning-hover: var(--border-warning-hover);
+  --color-border-warning-selected: var(--border-warning-selected);
+  --color-border-critical-base: var(--border-critical-base);
+  --color-border-critical-hover: var(--border-critical-hover);
+  --color-border-critical-selected: var(--border-critical-selected);
+  --color-border-info-base: var(--border-info-base);
+  --color-border-info-hover: var(--border-info-hover);
+  --color-border-info-selected: var(--border-info-selected);
+  --color-icon-brand-base: var(--icon-brand-base);
+  --color-icon-interactive-base: var(--icon-interactive-base);
+  --color-icon-success-base: var(--icon-success-base);
+  --color-icon-warning-base: var(--icon-warning-base);
+  --color-icon-warning-hover: var(--icon-warning-hover);
+  --color-icon-warning-active: var(--icon-warning-active);
+  --color-icon-success-hover: var(--icon-success-hover);
+  --color-icon-success-active: var(--icon-success-active);
+  --color-icon-critical-base: var(--icon-critical-base);
+  --color-icon-critical-hover: var(--icon-critical-hover);
+  --color-icon-critical-active: var(--icon-critical-active);
+  --color-icon-info-base: var(--icon-info-base);
+  --color-icon-info-hover: var(--icon-info-hover);
+  --color-icon-info-active: var(--icon-info-active);
+  --color-icon-on-brand-base: var(--icon-on-brand-base);
+  --color-icon-on-brand-hover: var(--icon-on-brand-hover);
+  --color-icon-on-brand-selected: var(--icon-on-brand-selected);
+  --color-icon-on-interactive-base: var(--icon-on-interactive-base);
+  --color-icon-on-interactive-hover: var(--icon-on-interactive-hover);
+  --color-icon-on-interactive-selected: var(--icon-on-interactive-selected);
+  --color-icon-agent-plan-base: var(--icon-agent-plan-base);
+  --color-icon-agent-build-base: var(--icon-agent-build-base);
+  --color-icon-agent-docs-base: var(--icon-agent-docs-base);
+  --color-icon-agent-ask-base: var(--icon-agent-ask-base);
+  --color-icon-on-success-base: var(--icon-on-success-base);
+  --color-icon-on-success-hover: var(--icon-on-success-hover);
+  --color-icon-on-success-selected: var(--icon-on-success-selected);
+  --color-icon-on-warning-base: var(--icon-on-warning-base);
+  --color-icon-on-warning-hover: var(--icon-on-warning-hover);
+  --color-icon-on-warning-selected: var(--icon-on-warning-selected);
+  --color-icon-on-critical-base: var(--icon-on-critical-base);
+  --color-icon-on-critical-hover: var(--icon-on-critical-hover);
+  --color-icon-on-critical-selected: var(--icon-on-critical-selected);
+  --color-icon-on-info-base: var(--icon-on-info-base);
+  --color-icon-on-diff-add-base: var(--icon-on-diff-add-base);
+  --color-icon-on-diff-delete-base: var(--icon-on-diff-delete-base);
+  --color-icon-on-diff-delete-hover: var(--icon-on-diff-delete-hover);
+  --color-icon-on-diff-delete-active: var(--icon-on-diff-delete-active);
+  --color-icon-on-diff-add-hover: var(--icon-on-diff-add-hover);
+  --color-icon-on-diff-add-active: var(--icon-on-diff-add-active);
+  --color-icon-on-info-hover: var(--icon-on-info-hover);
+  --color-icon-on-info-selected: var(--icon-on-info-selected);
+  --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-function: var(--syntax-function);
+  --color-syntax-number: var(--syntax-number);
+  --color-syntax-operator: var(--syntax-operator);
+  --color-syntax-variable: var(--syntax-variable);
+  --color-syntax-type: var(--syntax-type);
+  --color-syntax-constant: var(--syntax-constant);
+  --color-syntax-punctuation: var(--syntax-punctuation);
+  --color-syntax-success: var(--syntax-success);
+  --color-syntax-warning: var(--syntax-warning);
+  --color-syntax-critical: var(--syntax-critical);
+  --color-syntax-info: var(--syntax-info);
+  --color-markdown-heading: var(--markdown-heading);
+  --color-markdown-text: var(--markdown-text);
+  --color-markdown-link: var(--markdown-link);
+  --color-markdown-link-text: var(--markdown-link-text);
+  --color-markdown-code: var(--markdown-code);
+  --color-markdown-block-quote: var(--markdown-block-quote);
+  --color-markdown-emph: var(--markdown-emph);
+  --color-markdown-strong: var(--markdown-strong);
+  --color-markdown-horizontal-rule: var(--markdown-horizontal-rule);
+  --color-markdown-list-item: var(--markdown-list-item);
+  --color-markdown-list-enumeration: var(--markdown-list-enumeration);
+  --color-markdown-image: var(--markdown-image);
+  --color-markdown-image-text: var(--markdown-image-text);
+  --color-markdown-code-block: var(--markdown-code-block);
+}