diff options
| author | Adam <[email protected]> | 2025-10-15 10:31:14 -0500 |
|---|---|---|
| committer | opencode <[email protected]> | 2025-10-16 18:06:59 +0000 |
| commit | 10680f0cf00d507be8897c9101bb96a40efefdf9 (patch) | |
| tree | 9e5910773e75a664228d7eb11e67dba6913d5d65 | |
| parent | 2517b2255259443795c71852274fc724459cf967 (diff) | |
| download | opencode-10680f0cf00d507be8897c9101bb96a40efefdf9.tar.gz opencode-10680f0cf00d507be8897c9101bb96a40efefdf9.zip | |
wip: css/ui work
| -rw-r--r-- | packages/css/src/color.css | 6 | ||||
| -rw-r--r-- | packages/css/src/tailwind.css | 220 | ||||
| -rw-r--r-- | packages/css/src/theme.css | 838 | ||||
| -rw-r--r-- | packages/css/src/utilities.css | 23 |
4 files changed, 670 insertions, 417 deletions
diff --git a/packages/css/src/color.css b/packages/css/src/color.css index e5ab90097..b0ddf36b7 100644 --- a/packages/css/src/color.css +++ b/packages/css/src/color.css @@ -1,6 +1,4 @@ :root { - --black: #000000; - --white: #ffffff; --grey-dark-1: #ffffff; --grey-dark-2: #ffffff; --grey-dark-3: #ffffff; @@ -72,8 +70,8 @@ --smoke-dark-alpha-9: #fff3f067; --smoke-dark-alpha-10: #fff2f276; --smoke-dark-alpha-11: #fff7f7b2; - --smoke-dark-alpha-12: #fffafaf0; --smoke-light-alpha-1: #55000003; + --smoke-dark-alpha-12: #fffafaf0; --smoke-light-alpha-2: #25000007; --smoke-light-alpha-3: #1100000f; --smoke-light-alpha-4: #0c000017; @@ -469,6 +467,8 @@ --mint-dark-alpha-10: #c6fec2f5; --mint-dark-alpha-11: #b4ffafdb; --mint-dark-alpha-12: #c7ffc3fa; + --black: #000000; + --white: #ffffff; --mint-light-alpha-1: #00cc0005; --mint-light-alpha-2: #16c0000c; --mint-light-alpha-3: #14f20027; 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); +} diff --git a/packages/css/src/theme.css b/packages/css/src/theme.css index 9a9dd8d47..687a4b186 100644 --- a/packages/css/src/theme.css +++ b/packages/css/src/theme.css @@ -114,423 +114,433 @@ :root { /* OC-1-Light */ color-scheme: light; - --background-background: var(--smoke-light-1); - --background-background-weak: #f7f6f6; - --background-background-weaker: #fcfcfc; - --surface-default-surface: var(--smoke-light-2); - --input-input: var(--smoke-light-1); - --input-input-hover: var(--smoke-light-2); - --input-input-active: var(--cobalt-light-1); - --input-input-selected: var(--cobalt-light-4); - --input-input-focus: var(--cobalt-light-1); - --input-input-disabled: var(--smoke-light-4); - --surface-default-surface-hover: var(--smoke-light-4); - --surface-default-surface-active: var(--smoke-light-5); - --surface-default-surface-selected: var(--cobalt-light-3); - --surface-default-surface-disabled: var(--smoke-light-2); - --surface-default-surface-focus: var(--cobalt-light-3); - --surface-inset-surface-inset: var(--smoke-light-3); - --surface-inset-surface-inset-hover: var(--smoke-light-4); - --surface-inset-surface-inset-active: var(--smoke-light-6); - --surface-inset-surface-inset-selected: var(--cobalt-light-4); - --surface-inset-surface-inset-disabled: var(--smoke-light-3); - --surface-inset-surface-inset-focus: var(--cobalt-light-4); - --surface-raised-surface-raised: var(--white); - --surface-raised-surface-raised-hover: var(--smoke-light-3); - --surface-raised-surface-raised-active: var(--smoke-light-4); - --surface-raised-surface-raised-selected: var(--cobalt-light-3); - --surface-raised-surface-raised-disabled: var(--smoke-light-2); - --surface-raised-surface-raised-focus: var(--cobalt-light-3); - --surface-overlay-surface-overlay: var(--smoke-light-alpha-9); - --surface-brand-surface-brand: var(--yuzu-light-9); - --surface-brand-surface-brand-hover: var(--yuzu-light-10); - --surface-interactive-surface-interactive: var(--cobalt-light-3); - --surface-interactive-surface-interactive-hover: var(--cobalt-light-4); - --surface-interactive-surface-interactive-weak: var(--cobalt-light-2); - --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3); - --surface-success-surface-success: var(--apple-light-3); - --surface-success-surface-success-weak: var(--apple-light-2); - --surface-success-surface-success-strong: var(--apple-light-9); - --surface-warning-surface-warning: var(--solaris-light-3); - --surface-warning-surface-warning-weak: var(--solaris-light-2); - --surface-warning-surface-warning-strong: var(--solaris-light-9); - --surface-critical-surface-critical: var(--ember-light-3); - --surface-critical-surface-critical-weak: var(--ember-light-2); - --surface-critical-surface-critical-strong: var(--ember-light-9); - --surface-info-surface-info: var(--lilac-light-3); - --surface-info-surface-info-weak: var(--lilac-light-2); - --surface-info-surface-info-strong: var(--lilac-light-9); - --surface-diff-add-surface-diff-add: var(--coral-light-3); - --surface-diff-add-surface-diff-add-weak: var(--coral-light-2); - --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1); - --surface-diff-add-surface-diff-add-strong: var(--coral-light-9); - --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12); - --surface-diff-delete-surface-diff-delete: var(--mint-light-3); - --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1); - --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2); - --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1); - --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9); - --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11); - --text-default-text: var(--smoke-light-11); - --text-default-text-weak: var(--smoke-light-9); - --text-default-text-weaker: var(--smoke-light-8); - --text-default-text-strong: var(--smoke-light-12); - --text-on-brand-text-on-brand: var(--smoke-light-alpha-11); - --text-on-interactive-text-on-interactive: var(--smoke-light-alpha-11); - --text-on-success-text-on-success: var(--smoke-dark-alpha-11); - --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11); - --text-on-info-text-on-info: var(--smoke-dark-alpha-11); - --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11); - --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11); - --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9); - --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12); - --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9); - --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12); - --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9); - --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12); - --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9); - --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12); - --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9); - --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12); - --text-on-interactive-text-weak-on-interactive: var(--smoke-light-alpha-9); - --text-on-interactive-text-strong-on-interactive: var(--smoke-light-alpha-12); - --text-on-brand-text-weak-on-brand: var(--smoke-light-alpha-9); - --text-on-brand-text-weaker-on-brand: var(--smoke-light-alpha-8); - --text-on-brand-text-strong-on-brand: var(--smoke-light-alpha-12); - --border-default-border: var(--smoke-light-alpha-7); - --border-default-border-hover: var(--smoke-light-alpha-8); - --border-default-border-active: var(--smoke-light-alpha-9); - --border-default-border-selected: var(--cobalt-light-alpha-9); - --border-default-border-disabled: var(--smoke-light-alpha-8); - --border-default-border-focus: var(--smoke-light-alpha-9); - --border-default-border-weak: var(--smoke-light-alpha-5); - --icon-default-icon: var(--smoke-light-9); - --border-default-border-weak-hover: var(--smoke-light-alpha-6); - --icon-default-icon-hover: var(--smoke-light-10); - --border-default-border-weak-active: var(--smoke-light-alpha-7); - --icon-default-icon-active: var(--smoke-light-11); - --icon-default-icon-selected: var(--smoke-light-12); - --icon-default-icon-disabled: var(--smoke-light-7); - --icon-default-icon-focus: var(--smoke-light-12); - --icon-default-icon-weak: var(--smoke-light-7); - --icon-default-icon-weak-hover: var(--smoke-light-8); - --icon-default-icon-weak-active: var(--smoke-light-9); - --icon-default-icon-weak-selected: var(--smoke-light-10); - --icon-default-icon-weak-disabled: var(--smoke-light-6); - --icon-default-icon-weak-focus: var(--smoke-light-9); - --icon-default-icon-strong: var(--smoke-light-12); - --icon-default-icon-strong-hover: var(--smoke-light-12); - --icon-default-icon-strong-active: var(--smoke-light-12); - --icon-default-icon-strong-selected: var(--smoke-light-12); - --icon-default-icon-strong-disabled: var(--smoke-light-8); - --icon-default-icon-strong-focus: var(--smoke-light-12); - --border-default-border-weak-selected: var(--cobalt-light-alpha-6); - --border-default-border-weak-disabled: var(--smoke-light-alpha-6); - --border-default-border-weak-focus: var(--smoke-light-alpha-7); - --border-interactive-border-interactive: var(--cobalt-light-7); - --border-interactive-border-interactive-hover: var(--cobalt-light-8); - --border-interactive-border-interactive-active: var(--cobalt-light-9); - --border-interactive-border-interactive-selected: var(--cobalt-light-9); - --border-interactive-border-interactive-disabled: var(--smoke-light-8); - --border-interactive-border-interactive-focus: var(--cobalt-light-9); - --border-success-border-success: var(--apple-light-6); - --border-success-border-success-hover: var(--apple-light-7); - --border-success-border-success-selected: var(--apple-light-9); - --border-warning-border-warning: var(--solaris-light-6); - --border-warning-border-warning-hover: var(--solaris-light-7); - --border-warning-border-warning-selected: var(--solaris-light-9); - --border-critical-border-critical: var(--ember-light-6); - --border-critical-border-critical-hover: var(--ember-light-7); - --border-critical-border-critical-selected: var(--ember-light-9); - --border-info-border-info: var(--lilac-light-6); - --border-info-border-info-hover: var(--lilac-light-7); - --border-info-border-info-selected: var(--lilac-light-9); - --icon-brand-icon-brand: var(--smoke-light-12); - --icon-success-icon-success: var(--apple-light-7); - --icon-warning-icon-warning: var(--solaris-light-7); - --icon-warning-icon-warning-hover: var(--solaris-light-8); - --icon-warning-icon-warning-active: var(--solaris-light-11); - --icon-success-icon-success-hover: var(--apple-light-8); - --icon-success-icon-success-active: var(--apple-light-11); - --icon-critical-icon-critical: var(--ember-light-7); - --icon-critical-icon-critical-hover: var(--ember-light-8); - --icon-critical-icon-critical-active: var(--ember-light-11); - --icon-info-icon-info: var(--lilac-light-7); - --icon-info-icon-info-hover: var(--lilac-light-8); - --icon-info-icon-info-active: var(--lilac-light-11); - --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11); - --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12); - --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12); - --icon-on-interactive-icon-on-interactive: var(--smoke-light-alpha-9); - --icon-on-interactive-icon-on-interactive-hover: var(--smoke-light-alpha-10); - --icon-on-interactive-icon-on-interactive-selected: var(--smoke-light-alpha-11); - --icon-on-success-icon-on-success: var(--apple-light-alpha-9); - --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10); - --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11); - --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9); - --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10); - --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11); - --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9); - --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10); - --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11); - --icon-on-info-icon-on-info: var(--lilac-light-9); - --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9); - --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9); - --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10); - --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11); - --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10); - --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11); - --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10); - --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11); - --syntax-syntax-comment: #ffffff; - --syntax-syntax-string: #ffffff; - --syntax-syntax-keyword: #ffffff; - --syntax-syntax-function: #ffffff; - --syntax-syntax-number: #ffffff; - --syntax-syntax-operator: #ffffff; - --syntax-syntax-variable: #ffffff; - --syntax-syntax-type: #ffffff; - --syntax-syntax-constant: #ffffff; - --syntax-syntax-punctuation: #ffffff; - --syntax-syntax-success: #ffffff; - --syntax-syntax-warning: #ffffff; - --syntax-syntax-critical: #ffffff; - --syntax-syntax-info: #ffffff; - --markdown-markdown-heading: #ffffff; - --markdown-markdown-text: #ffffff; - --markdown-markdown-link: #ffffff; - --markdown-markdown-link-text: #ffffff; - --markdown-markdown-code: #ffffff; - --markdown-markdown-block-quote: #ffffff; - --markdown-markdown-emph: #ffffff; - --markdown-markdown-strong: #ffffff; - --markdown-markdown-horizontal-rule: #ffffff; - --markdown-markdown-list-item: #ffffff; - --markdown-markdown-list-enumeration: #ffffff; - --markdown-markdown-image: #ffffff; - --markdown-markdown-image-text: #ffffff; - --markdown-markdown-code-block: #ffffff; + --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); + --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-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); + --text-base: var(--smoke-light-11); + --text-weak: var(--smoke-light-9); + --text-weaker: var(--smoke-light-8); + --text-strong: var(--smoke-light-12); + --text-on-brand-base: var(--smoke-light-alpha-11); + --text-on-interactive-base: var(--smoke-light-alpha-11); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-dark-alpha-11); + --text-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-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); + --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); + --icon-base: var(--smoke-light-9); + --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); + --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-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-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-build-base: var(--blue-light-9); + --icon-agent-docs-base: var(--amber-light-9); + --icon-agent-ask-base: var(--cyan-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-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); + --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; .dark { /* OC-1-Dark */ color-scheme: dark; - --background-background: var(--smoke-dark-1); - --background-background-weak: #151313; - --background-background-weaker: #201c1c; - --surface-default-surface: var(--smoke-dark-3); - --input-input: var(--smoke-dark-2); - --input-input-hover: var(--smoke-dark-2); - --input-input-active: var(--cobalt-dark-1); - --input-input-selected: var(--cobalt-dark-2); - --input-input-focus: var(--cobalt-dark-1); - --input-input-disabled: var(--smoke-dark-4); - --surface-default-surface-hover: var(--smoke-dark-4); - --surface-default-surface-active: var(--smoke-dark-5); - --surface-default-surface-selected: var(--cobalt-dark-3); - --surface-default-surface-disabled: var(--smoke-dark-2); - --surface-default-surface-focus: var(--cobalt-dark-3); - --surface-inset-surface-inset: var(--smoke-dark-4); - --surface-inset-surface-inset-hover: var(--smoke-dark-5); - --surface-inset-surface-inset-active: var(--smoke-dark-6); - --surface-inset-surface-inset-selected: var(--cobalt-dark-4); - --surface-inset-surface-inset-disabled: var(--smoke-dark-3); - --surface-inset-surface-inset-focus: var(--cobalt-dark-4); - --surface-raised-surface-raised: var(--smoke-dark-4); - --surface-raised-surface-raised-hover: var(--smoke-dark-7); - --surface-raised-surface-raised-active: var(--smoke-dark-8); - --surface-raised-surface-raised-selected: var(--cobalt-dark-3); - --surface-raised-surface-raised-disabled: var(--smoke-dark-3); - --surface-raised-surface-raised-focus: var(--cobalt-dark-3); - --surface-overlay-surface-overlay: var(--smoke-dark-alpha-2); - --surface-brand-surface-brand: var(--yuzu-light-9); - --surface-brand-surface-brand-hover: var(--yuzu-light-10); - --surface-interactive-surface-interactive: var(--cobalt-light-3); - --surface-interactive-surface-interactive-hover: var(--cobalt-light-4); - --surface-interactive-surface-interactive-weak: var(--cobalt-light-2); - --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3); - --surface-success-surface-success: var(--apple-light-3); - --surface-success-surface-success-weak: var(--apple-light-2); - --surface-success-surface-success-strong: var(--apple-light-9); - --surface-warning-surface-warning: var(--solaris-light-3); - --surface-warning-surface-warning-weak: var(--solaris-light-2); - --surface-warning-surface-warning-strong: var(--solaris-light-9); - --surface-critical-surface-critical: var(--ember-light-3); - --surface-critical-surface-critical-weak: var(--ember-light-2); - --surface-critical-surface-critical-strong: var(--ember-light-9); - --surface-info-surface-info: var(--lilac-light-3); - --surface-info-surface-info-weak: var(--lilac-light-2); - --surface-info-surface-info-strong: var(--lilac-light-9); - --surface-diff-add-surface-diff-add: var(--coral-light-3); - --surface-diff-add-surface-diff-add-weak: var(--coral-light-2); - --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1); - --surface-diff-add-surface-diff-add-strong: var(--coral-light-9); - --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12); - --surface-diff-delete-surface-diff-delete: var(--mint-light-3); - --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-dark-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1); - --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1); - --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2); - --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1); - --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9); - --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11); - --text-default-text: var(--smoke-dark-alpha-11); - --text-default-text-weak: var(--smoke-dark-alpha-9); - --text-default-text-weaker: var(--smoke-dark-alpha-8); - --text-default-text-strong: var(--smoke-dark-alpha-12); - --text-on-brand-text-on-brand: var(--smoke-dark-alpha-11); - --text-on-interactive-text-on-interactive: var(--smoke-dark-alpha-11); - --text-on-success-text-on-success: var(--smoke-dark-alpha-11); - --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11); - --text-on-info-text-on-info: var(--smoke-dark-alpha-11); - --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11); - --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11); - --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9); - --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12); - --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9); - --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12); - --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9); - --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12); - --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9); - --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12); - --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9); - --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12); - --text-on-interactive-text-weak-on-interactive: var(--smoke-dark-alpha-9); - --text-on-interactive-text-strong-on-interactive: var(--smoke-dark-alpha-12); - --text-on-brand-text-weak-on-brand: var(--smoke-dark-alpha-9); - --text-on-brand-text-weaker-on-brand: var(--smoke-dark-alpha-8); - --text-on-brand-text-strong-on-brand: var(--smoke-dark-alpha-12); - --border-default-border: var(--smoke-dark-alpha-7); - --border-default-border-hover: var(--smoke-dark-alpha-8); - --border-default-border-active: var(--smoke-dark-alpha-9); - --border-default-border-selected: var(--cobalt-dark-alpha-9); - --border-default-border-disabled: var(--smoke-dark-alpha-8); - --border-default-border-focus: var(--smoke-dark-alpha-9); - --border-default-border-weak: var(--smoke-dark-alpha-6); - --icon-default-icon: var(--smoke-light-9); - --border-default-border-weak-hover: var(--smoke-dark-alpha-7); - --icon-default-icon-hover: var(--smoke-light-10); - --border-default-border-weak-active: var(--smoke-dark-alpha-8); - --icon-default-icon-active: var(--smoke-light-11); - --icon-default-icon-selected: var(--smoke-light-12); - --icon-default-icon-disabled: var(--smoke-light-7); - --icon-default-icon-focus: var(--smoke-light-12); - --icon-default-icon-weak: var(--smoke-dark-6); - --icon-default-icon-weak-hover: var(--smoke-light-7); - --icon-default-icon-weak-active: var(--smoke-light-8); - --icon-default-icon-weak-selected: var(--smoke-light-9); - --icon-default-icon-weak-disabled: var(--smoke-light-4); - --icon-default-icon-weak-focus: var(--smoke-light-9); - --icon-default-icon-strong: var(--smoke-dark-12); - --icon-default-icon-strong-hover: var(--smoke-light-12); - --icon-default-icon-strong-active: var(--smoke-light-12); - --icon-default-icon-strong-selected: var(--smoke-light-12); - --icon-default-icon-strong-disabled: var(--smoke-light-8); - --icon-default-icon-strong-focus: var(--smoke-light-12); - --border-default-border-weak-selected: var(--cobalt-dark-alpha-6); - --border-default-border-weak-disabled: var(--smoke-dark-alpha-6); - --border-default-border-weak-focus: var(--smoke-dark-alpha-8); - --border-interactive-border-interactive: var(--cobalt-light-7); - --border-interactive-border-interactive-hover: var(--cobalt-light-8); - --border-interactive-border-interactive-active: var(--cobalt-light-9); - --border-interactive-border-interactive-selected: var(--cobalt-light-9); - --border-interactive-border-interactive-disabled: var(--smoke-light-8); - --border-interactive-border-interactive-focus: var(--cobalt-light-9); - --border-success-border-success: var(--apple-light-6); - --border-success-border-success-hover: var(--apple-light-7); - --border-success-border-success-selected: var(--apple-light-9); - --border-warning-border-warning: var(--solaris-light-6); - --border-warning-border-warning-hover: var(--solaris-light-7); - --border-warning-border-warning-selected: var(--solaris-light-9); - --border-critical-border-critical: var(--ember-light-6); - --border-critical-border-critical-hover: var(--ember-light-7); - --border-critical-border-critical-selected: var(--ember-light-9); - --border-info-border-info: var(--lilac-light-6); - --border-info-border-info-hover: var(--lilac-light-7); - --border-info-border-info-selected: var(--lilac-light-9); - --icon-brand-icon-brand: var(--white); - --icon-success-icon-success: var(--apple-light-7); - --icon-warning-icon-warning: var(--solaris-light-7); - --icon-warning-icon-warning-hover: var(--solaris-light-8); - --icon-warning-icon-warning-active: var(--solaris-light-11); - --icon-success-icon-success-hover: var(--apple-light-8); - --icon-success-icon-success-active: var(--apple-light-11); - --icon-critical-icon-critical: var(--ember-light-7); - --icon-critical-icon-critical-hover: var(--ember-light-8); - --icon-critical-icon-critical-active: var(--ember-light-11); - --icon-info-icon-info: var(--lilac-light-7); - --icon-info-icon-info-hover: var(--lilac-light-8); - --icon-info-icon-info-active: var(--lilac-light-11); - --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11); - --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12); - --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12); - --icon-on-interactive-icon-on-interactive: var(--smoke-dark-alpha-9); - --icon-on-interactive-icon-on-interactive-hover: var(--smoke-dark-alpha-10); - --icon-on-interactive-icon-on-interactive-selected: var(--smoke-dark-alpha-11); - --icon-on-success-icon-on-success: var(--apple-light-alpha-9); - --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10); - --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11); - --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9); - --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10); - --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11); - --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9); - --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10); - --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11); - --icon-on-info-icon-on-info: var(--lilac-light-9); - --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9); - --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9); - --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10); - --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11); - --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10); - --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11); - --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10); - --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11); - --syntax-syntax-comment: #ffffff; - --syntax-syntax-string: #ffffff; - --syntax-syntax-keyword: #ffffff; - --syntax-syntax-function: #ffffff; - --syntax-syntax-number: #ffffff; - --syntax-syntax-operator: #ffffff; - --syntax-syntax-variable: #ffffff; - --syntax-syntax-type: #ffffff; - --syntax-syntax-constant: #ffffff; - --syntax-syntax-punctuation: #ffffff; - --syntax-syntax-success: #ffffff; - --syntax-syntax-warning: #ffffff; - --syntax-syntax-critical: #ffffff; - --syntax-syntax-info: #ffffff; - --markdown-markdown-heading: #ffffff; - --markdown-markdown-text: #ffffff; - --markdown-markdown-link: #ffffff; - --markdown-markdown-link-text: #ffffff; - --markdown-markdown-code: #ffffff; - --markdown-markdown-block-quote: #ffffff; - --markdown-markdown-emph: #ffffff; - --markdown-markdown-strong: #ffffff; - --markdown-markdown-horizontal-rule: #ffffff; - --markdown-markdown-list-item: #ffffff; - --markdown-markdown-list-enumeration: #ffffff; - --markdown-markdown-image: #ffffff; - --markdown-markdown-image-text: #ffffff; - --markdown-markdown-code-block: #ffffff; + --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); + --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-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); + --text-base: var(--smoke-dark-alpha-11); + --text-weak: var(--smoke-dark-alpha-9); + --text-weaker: var(--smoke-dark-alpha-8); + --text-strong: var(--smoke-dark-alpha-12); + --text-on-brand-base: var(--smoke-dark-alpha-11); + --text-on-interactive-base: var(--smoke-dark-alpha-11); + --text-on-success-base: var(--smoke-dark-alpha-11); + --text-on-warning-base: var(--smoke-dark-alpha-11); + --text-on-info-base: var(--smoke-dark-alpha-11); + --text-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-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); + --border-base: var(--smoke-dark-alpha-7); + --border-hover: var(--smoke-dark-alpha-8); + --border-active: var(--smoke-dark-alpha-9); + --border-selected: var(--cobalt-dark-alpha-9); + --border-disabled: var(--smoke-dark-alpha-8); + --border-focus: var(--smoke-dark-alpha-9); + --border-weak-base: var(--smoke-dark-alpha-6); + --icon-base: var(--smoke-dark-9); + --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); + --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-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-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); + --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; } } diff --git a/packages/css/src/utilities.css b/packages/css/src/utilities.css index 213a51680..d2f614250 100644 --- a/packages/css/src/utilities.css +++ b/packages/css/src/utilities.css @@ -1,5 +1,28 @@ :root { interpolate-size: allow-keywords; + + [data-popper-positioner] { + pointer-events: none; + } + + ::selection { + background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); + /* background-color: var(--color-primary); */ + /* color: var(--color-background); */ + } + + ::-webkit-scrollbar-track { + background: var(--theme-background-panel); + } + + ::-webkit-scrollbar-thumb { + background-color: var(--theme-border-subtle); + border-radius: 6px; + } + + * { + scrollbar-color: var(--theme-border-subtle) var(--theme-background-panel); + } } .no-scrollbar { |