diff options
Diffstat (limited to 'packages/ui/src/styles/theme.css')
| -rw-r--r-- | packages/ui/src/styles/theme.css | 539 |
1 files changed, 502 insertions, 37 deletions
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 05164092e..c65acc207 100644 --- a/packages/ui/src/styles/theme.css +++ b/packages/ui/src/styles/theme.css @@ -40,14 +40,8 @@ --container-6xl: 72rem; --container-7xl: 80rem; - --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; --shadow-xs: 0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08); @@ -65,19 +59,15 @@ 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0), 0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99)); - --text-mix-blend-mode: multiply; -} - -:root { - /* OC-1-Light */ + color-scheme: light; --text-mix-blend-mode: multiply; - color-scheme: light; + /* OC-1-light */ --background-base: #f8f7f7; --background-weak: var(--smoke-light-3); --background-strong: var(--smoke-light-1); --background-stronger: #fcfcfc; - --surface-base: var(--smoke-light-3); + --surface-base: var(--smoke-light-alpha-2); --base: var(--smoke-light-alpha-2); --surface-base-hover: #0500000f; --surface-base-active: var(--smoke-light-alpha-3); @@ -119,9 +109,9 @@ --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); + --surface-diff-unchanged-base: #ffffff00; --surface-diff-skip-base: var(--smoke-light-2); --surface-diff-hidden-base: var(--blue-light-3); - --surface-diff-unchanged-base: #ffffff00; --surface-diff-hidden-weak: var(--blue-light-2); --surface-diff-hidden-weaker: var(--blue-light-1); --surface-diff-hidden-strong: var(--blue-light-5); @@ -170,7 +160,7 @@ --text-on-brand-weaker: var(--smoke-light-alpha-8); --text-on-brand-strong: var(--smoke-light-alpha-12); --button-secondary-base: #fdfcfc; - --button-secondary-hover: #fafafa; + --button-secondary-hover: #faf9f9; --border-base: var(--smoke-light-alpha-7); --border-hover: var(--smoke-light-alpha-8); --border-active: var(--smoke-light-alpha-9); @@ -269,21 +259,21 @@ --syntax-regexp: var(--text-base); --syntax-string: #007663; --syntax-keyword: var(--text-weak); - --syntax-primitive: #f6916b; + --syntax-primitive: #fb7f51; --syntax-operator: var(--text-weak); --syntax-variable: var(--text-strong); - --syntax-property: #ed6dc8; - --syntax-type: #b2cc00; - --syntax-constant: #0092a8; + --syntax-property: #ec6cc8; + --syntax-type: #738400; + --syntax-constant: #00b2b9; --syntax-punctuation: var(--text-weaker); --syntax-object: var(--text-strong); - --syntax-success: var(--apple-dark-10); - --syntax-warning: var(--amber-dark-10); - --syntax-critical: var(--ember-dark-9); - --syntax-info: #0092a8; - --syntax-diff-add: var(--mint-light-alpha-8); - --syntax-diff-delete: var(--ember-light-alpha-8); - --syntax-unknown: var(--text-weak); + --syntax-success: var(--apple-light-10); + --syntax-warning: var(--amber-light-10); + --syntax-critical: var(--ember-light-9); + --syntax-info: #0091a7; + --syntax-diff-add: var(--mint-light-11); + --syntax-diff-delete: var(--ember-light-11); + --syntax-diff-unknown: #ff0000; --markdown-heading: #d68c27; --markdown-text: #1a1a1a; --markdown-link: #3b7dd8; @@ -309,15 +299,15 @@ --button-ghost-hover2: var(--smoke-light-alpha-3); @media (prefers-color-scheme: dark) { + color-scheme: dark; --text-mix-blend-mode: plus-lighter; - /* OC-1-Dark */ - color-scheme: dark; + /* OC-1-dark */ --background-base: var(--smoke-dark-1); - --background-weak: #1b1818; + --background-weak: #1c1717; --background-strong: #151313; --background-stronger: #191515; - --surface-base: var(--smoke-dark-3); + --surface-base: var(--smoke-dark-alpha-2); --base: var(--smoke-dark-alpha-2); --surface-base-hover: #e0b7b716; --surface-base-active: var(--smoke-dark-alpha-3); @@ -359,9 +349,9 @@ --surface-info-base: var(--lilac-light-3); --surface-info-weak: var(--lilac-light-2); --surface-info-strong: var(--lilac-light-9); + --surface-diff-unchanged-base: var(--smoke-dark-1); --surface-diff-skip-base: var(--smoke-dark-alpha-1); --surface-diff-hidden-base: var(--blue-dark-2); - --surface-diff-unchanged-base: var(--smoke-dark-1); --surface-diff-hidden-weak: var(--blue-dark-1); --surface-diff-hidden-weaker: var(--blue-dark-3); --surface-diff-hidden-strong: var(--blue-dark-5); @@ -417,7 +407,7 @@ --border-selected: var(--cobalt-dark-alpha-11); --border-disabled: var(--smoke-dark-alpha-8); --border-focus: var(--smoke-dark-alpha-9); - --border-weak-base: var(--smoke-dark-alpha-4); + --border-weak-base: var(--smoke-dark-alpha-6); --border-strong-base: var(--smoke-dark-alpha-8); --border-strong-hover: var(--smoke-dark-alpha-7); --border-strong-active: var(--smoke-dark-alpha-8); @@ -519,11 +509,11 @@ --syntax-object: var(--text-strong); --syntax-success: var(--apple-dark-10); --syntax-warning: var(--amber-dark-10); - --syntax-critical: var(--ember-dark-9); - --syntax-info: #ff9ae2; - --syntax-diff-add: var(--mint-dark-alpha-6); - --syntax-diff-delete: var(--ember-dark-alpha-4); - --syntax-unknown: var(--text-weak); + --syntax-critical: var(--ember-dark-10); + --syntax-info: #93e9f6; + --syntax-diff-add: var(--mint-dark-11); + --syntax-diff-delete: var(--ember-dark-11); + --syntax-diff-unknown: #ff0000; --markdown-heading: #9d7cd8; --markdown-text: #eeeeee; --markdown-link: #fab283; @@ -549,3 +539,478 @@ --button-ghost-hover2: var(--smoke-dark-alpha-3); } } + +html[data-theme="oc-2-paper"] { + /* OC-2-paper */ + --background-base: #f7f8f8; + --background-weak: var(--ink-light-3); + --background-strong: var(--ink-light-1); + --background-stronger: #fcfcfc; + --surface-base: var(--ink-light-alpha-2); + --base: var(--ink-light-alpha-2); + --surface-base-hover: #0005050f; + --surface-base-active: var(--ink-light-alpha-3); + --surface-base-interactive-active: var(--cobalt-light-alpha-3); + --base2: var(--ink-light-alpha-2); + --base3: var(--ink-light-alpha-2); + --surface-inset-base: var(--ink-light-alpha-2); + --surface-inset-base-hover: var(--ink-light-alpha-3); + --surface-inset-strong: #001f1f17; + --surface-inset-strong-hover: #001f1f17; + --surface-raised-base: var(--ink-light-alpha-1); + --surface-float-base: var(--ink-dark-1); + --surface-float-base-hover: var(--ink-dark-2); + --surface-raised-base-hover: var(--ink-light-alpha-2); + --surface-raised-base-active: var(--ink-light-alpha-3); + --surface-raised-strong: var(--ink-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--ink-light-alpha-3); + --surface-weaker: var(--ink-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-unchanged-base: #ffffff00; + --surface-diff-skip-base: var(--ink-light-2); + --surface-diff-hidden-base: var(--blue-light-3); + --surface-diff-hidden-weak: var(--blue-light-2); + --surface-diff-hidden-weaker: var(--blue-light-1); + --surface-diff-hidden-strong: var(--blue-light-5); + --surface-diff-hidden-stronger: var(--blue-light-9); + --surface-diff-add-base: 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(--ink-light-11); + --input-base: var(--ink-light-1); + --input-hover: var(--ink-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--ink-light-4); + --text-weak: var(--ink-light-9); + --text-weaker: var(--ink-light-8); + --text-strong: var(--ink-light-12); + --text-interactive-base: var(--cobalt-light-9); + --text-on-brand-base: var(--ink-light-alpha-11); + --text-on-interactive-base: var(--ink-light-1); + --text-on-interactive-weak: var(--ink-light-alpha-11); + --text-on-success-base: var(--apple-light-10); + --text-on-critical-base: var(--ember-light-10); + --text-on-critical-weak: var(--ember-light-8); + --text-on-critical-strong: var(--ember-light-12); + --text-on-warning-base: var(--ink-dark-alpha-11); + --text-on-info-base: var(--ink-dark-alpha-11); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-10); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); + --text-on-info-weak: var(--ink-dark-alpha-9); + --text-on-info-strong: var(--ink-dark-alpha-12); + --text-on-warning-weak: var(--ink-dark-alpha-9); + --text-on-warning-strong: var(--ink-dark-alpha-12); + --text-on-success-weak: var(--apple-light-6); + --text-on-success-strong: var(--apple-light-12); + --text-on-brand-weak: var(--ink-light-alpha-9); + --text-on-brand-weaker: var(--ink-light-alpha-8); + --text-on-brand-strong: var(--ink-light-alpha-12); + --button-secondary-base: #fcfdfd; + --button-secondary-hover: #f9fafa; + --border-base: var(--ink-light-alpha-7); + --border-hover: var(--ink-light-alpha-8); + --border-active: var(--ink-light-alpha-9); + --border-selected: var(--cobalt-light-alpha-9); + --border-disabled: var(--ink-light-alpha-8); + --border-focus: var(--ink-light-alpha-9); + --border-weak-base: var(--ink-light-alpha-5); + --border-strong-base: var(--ink-light-alpha-7); + --border-strong-hover: var(--ink-light-alpha-8); + --border-strong-active: var(--ink-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--ink-light-alpha-6); + --border-strong-focus: var(--ink-light-alpha-7); + --border-weak-hover: var(--ink-light-alpha-6); + --border-weak-active: var(--ink-light-alpha-7); + --border-weak-selected: var(--cobalt-light-alpha-5); + --border-weak-disabled: var(--ink-light-alpha-6); + --border-weak-focus: var(--ink-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(--ink-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(--ink-light-9); + --icon-hover: var(--ink-light-11); + --icon-active: var(--ink-light-12); + --icon-selected: var(--ink-light-12); + --icon-disabled: var(--ink-light-8); + --icon-focus: var(--ink-light-12); + --icon-invert-base: #ffffff; + --icon-weak-base: var(--ink-light-7); + --icon-weak-hover: var(--ink-light-8); + --icon-weak-active: var(--ink-light-9); + --icon-weak-selected: var(--ink-light-10); + --icon-weak-disabled: var(--ink-light-6); + --icon-weak-focus: var(--ink-light-9); + --icon-strong-base: var(--ink-light-12); + --icon-strong-hover: #131515; + --icon-strong-active: #020202; + --icon-strong-selected: #020202; + --icon-strong-disabled: var(--ink-light-8); + --icon-strong-focus: #020202; + --icon-brand-base: var(--ink-light-12); + --icon-interactive-base: var(--cobalt-light-9); + --icon-success-base: var(--apple-light-7); + --icon-success-hover: var(--apple-light-8); + --icon-success-active: var(--apple-light-11); + --icon-warning-base: var(--amber-light-7); + --icon-warning-hover: var(--amber-light-8); + --icon-warning-active: var(--amber-light-11); + --icon-critical-base: var(--ember-light-10); + --icon-critical-hover: var(--ember-light-11); + --icon-critical-active: var(--ember-light-12); + --icon-info-base: var(--lilac-light-7); + --icon-info-hover: var(--lilac-light-8); + --icon-info-active: var(--lilac-light-11); + --icon-on-brand-base: var(--ink-light-alpha-11); + --icon-on-brand-hover: var(--ink-light-alpha-12); + --icon-on-brand-selected: var(--ink-light-alpha-12); + --icon-on-interactive-base: var(--ink-light-1); + --icon-agent-plan-base: var(--purple-light-9); + --icon-agent-docs-base: var(--amber-light-9); + --icon-agent-ask-base: var(--cyan-light-9); + --icon-agent-build-base: var(--cobalt-light-9); + --icon-on-success-base: var(--apple-light-alpha-9); + --icon-on-success-hover: var(--apple-light-alpha-10); + --icon-on-success-selected: var(--apple-light-alpha-11); + --icon-on-warning-base: var(--amber-lightalpha-9); + --icon-on-warning-hover: var(--amber-lightalpha-10); + --icon-on-warning-selected: var(--amber-lightalpha-11); + --icon-on-critical-base: var(--ember-light-alpha-9); + --icon-on-critical-hover: var(--ember-light-alpha-10); + --icon-on-critical-selected: var(--ember-light-alpha-11); + --icon-on-info-base: var(--lilac-light-9); + --icon-on-info-hover: var(--lilac-light-alpha-10); + --icon-on-info-selected: var(--lilac-light-alpha-11); + --icon-diff-add-base: var(--mint-light-11); + --icon-diff-add-hover: var(--mint-light-12); + --icon-diff-add-active: var(--mint-light-12); + --icon-diff-delete-base: var(--ember-light-10); + --icon-diff-delete-hover: var(--ember-light-11); + --syntax-comment: var(--text-weaker); + --syntax-regexp: var(--text-base); + --syntax-string: #007663; + --syntax-keyword: var(--text-weak); + --syntax-primitive: #fb7f51; + --syntax-operator: var(--text-weak); + --syntax-variable: var(--text-strong); + --syntax-property: #ec6cc8; + --syntax-type: #738400; + --syntax-constant: #00b2b9; + --syntax-punctuation: var(--text-weaker); + --syntax-object: var(--text-strong); + --syntax-success: var(--apple-light-10); + --syntax-warning: var(--amber-light-10); + --syntax-critical: var(--ember-light-9); + --syntax-info: #0091a7; + --syntax-diff-add: var(--mint-light-11); + --syntax-diff-delete: var(--ember-light-11); + --syntax-diff-unknown: #ff0000; + --markdown-heading: #d68c27; + --markdown-text: #1a1a1a; + --markdown-link: #3b7dd8; + --markdown-link-text: #318795; + --markdown-code: #3d9a57; + --markdown-block-quote: #b0851f; + --markdown-emph: #b0851f; + --markdown-strong: #d68c27; + --markdown-horizontal-rule: #8a8a8a; + --markdown-list-item: #3b7dd8; + --markdown-list-enumeration: #318795; + --markdown-image: #3b7dd8; + --markdown-image-text: #318795; + --markdown-code-block: #1a1a1a; + --border-color: #ffffff; + --border-weaker-base: var(--ink-light-alpha-3); + --border-weaker-hover: var(--ink-light-alpha-4); + --border-weaker-active: var(--ink-light-alpha-6); + --border-weaker-selected: var(--cobalt-light-alpha-4); + --border-weaker-disabled: var(--ink-light-alpha-2); + --border-weaker-focus: var(--ink-light-alpha-6); + --button-ghost-hover: var(--ink-light-alpha-2); + --button-ghost-hover2: var(--ink-light-alpha-3); + + @media (prefers-color-scheme: dark) { + --background-base: var(--ink-dark-1); + --background-weak: #171c1c; + --background-strong: #131515; + --background-stronger: #151919; + --surface-base: var(--ink-dark-alpha-2); + --base: var(--ink-dark-alpha-2); + --surface-base-hover: #b8e0e00f; + --surface-base-active: var(--ink-dark-alpha-3); + --surface-base-interactive-active: var(--cobalt-light-alpha-3); + --base2: var(--ink-dark-alpha-2); + --base3: var(--ink-dark-alpha-2); + --surface-inset-base: #0b0e0e7f; + --surface-inset-base-hover: #0b0e0e7f; + --surface-inset-strong: #050606cc; + --surface-inset-strong-hover: #050606cc; + --surface-raised-base: var(--ink-light-alpha-1); + --surface-float-base: var(--ink-dark-1); + --surface-float-base-hover: var(--ink-dark-2); + --surface-raised-base-hover: var(--ink-light-alpha-2); + --surface-raised-base-active: var(--ink-light-alpha-3); + --surface-raised-strong: var(--ink-light-1); + --surface-raised-strong-hover: var(--white); + --surface-raised-stronger: var(--white); + --surface-raised-stronger-hover: var(--white); + --surface-weak: var(--ink-dark-alpha-4); + --surface-weaker: var(--ink-dark-alpha-5); + --surface-strong: var(--ink-dark-alpha-7); + --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-unchanged-base: #ffffff00; + --surface-diff-skip-base: var(--ink-light-2); + --surface-diff-hidden-base: var(--blue-light-3); + --surface-diff-hidden-weak: var(--blue-light-2); + --surface-diff-hidden-weaker: var(--blue-light-1); + --surface-diff-hidden-strong: var(--blue-light-5); + --surface-diff-hidden-stronger: var(--blue-light-9); + --surface-diff-add-base: 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(--ink-light-11); + --input-base: var(--ink-light-1); + --input-hover: var(--ink-light-2); + --input-active: var(--cobalt-light-1); + --input-selected: var(--cobalt-light-4); + --input-focus: var(--cobalt-light-1); + --input-disabled: var(--ink-light-4); + --text-weak: var(--ink-light-9); + --text-weaker: var(--ink-light-8); + --text-strong: var(--ink-light-12); + --text-interactive-base: var(--cobalt-light-9); + --text-on-brand-base: var(--ink-light-alpha-11); + --text-on-interactive-base: var(--ink-light-1); + --text-on-interactive-weak: var(--ink-light-alpha-11); + --text-on-success-base: var(--apple-light-10); + --text-on-critical-base: var(--ember-light-10); + --text-on-critical-weak: var(--ember-light-8); + --text-on-critical-strong: var(--ember-light-12); + --text-on-warning-base: var(--ink-dark-alpha-11); + --text-on-info-base: var(--ink-dark-alpha-11); + --text-diff-add-base: var(--mint-light-11); + --text-diff-delete-base: var(--ember-light-10); + --text-diff-delete-strong: var(--ember-light-12); + --text-diff-add-strong: var(--mint-light-12); + --text-on-info-weak: var(--ink-dark-alpha-9); + --text-on-info-strong: var(--ink-dark-alpha-12); + --text-on-warning-weak: var(--ink-dark-alpha-9); + --text-on-warning-strong: var(--ink-dark-alpha-12); + --text-on-success-weak: var(--apple-light-6); + --text-on-success-strong: var(--apple-light-12); + --text-on-brand-weak: var(--ink-light-alpha-9); + --text-on-brand-weaker: var(--ink-light-alpha-8); + --text-on-brand-strong: var(--ink-light-alpha-12); + --button-secondary-base: #fcfdfd; + --button-secondary-hover: #f9fafa; + --border-base: var(--ink-light-alpha-7); + --border-hover: var(--ink-light-alpha-8); + --border-active: var(--ink-light-alpha-9); + --border-selected: var(--cobalt-light-alpha-9); + --border-disabled: var(--ink-light-alpha-8); + --border-focus: var(--ink-light-alpha-9); + --border-weak-base: var(--ink-light-alpha-5); + --border-strong-base: var(--ink-light-alpha-7); + --border-strong-hover: var(--ink-light-alpha-8); + --border-strong-active: var(--ink-light-alpha-7); + --border-strong-selected: var(--cobalt-light-alpha-6); + --border-strong-disabled: var(--ink-light-alpha-6); + --border-strong-focus: var(--ink-light-alpha-7); + --border-weak-hover: var(--ink-light-alpha-6); + --border-weak-active: var(--ink-light-alpha-7); + --border-weak-selected: var(--cobalt-light-alpha-5); + --border-weak-disabled: var(--ink-light-alpha-6); + --border-weak-focus: var(--ink-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(--ink-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(--ink-light-9); + --icon-hover: var(--ink-light-11); + --icon-active: var(--ink-light-12); + --icon-selected: var(--ink-light-12); + --icon-disabled: var(--ink-light-8); + --icon-focus: var(--ink-light-12); + --icon-invert-base: #ffffff; + --icon-weak-base: var(--ink-light-7); + --icon-weak-hover: var(--ink-light-8); + --icon-weak-active: var(--ink-light-9); + --icon-weak-selected: var(--ink-light-10); + --icon-weak-disabled: var(--ink-light-6); + --icon-weak-focus: var(--ink-light-9); + --icon-strong-base: var(--ink-light-12); + --icon-strong-hover: #131515; + --icon-strong-active: #020202; + --icon-strong-selected: #020202; + --icon-strong-disabled: var(--ink-light-8); + --icon-strong-focus: #020202; + --icon-brand-base: var(--ink-light-12); + --icon-interactive-base: var(--cobalt-light-9); + --icon-success-base: var(--apple-light-7); + --icon-success-hover: var(--apple-light-8); + --icon-success-active: var(--apple-light-11); + --icon-warning-base: var(--amber-light-7); + --icon-warning-hover: var(--amber-light-8); + --icon-warning-active: var(--amber-light-11); + --icon-critical-base: var(--ember-light-10); + --icon-critical-hover: var(--ember-light-11); + --icon-critical-active: var(--ember-light-12); + --icon-info-base: var(--lilac-light-7); + --icon-info-hover: var(--lilac-light-8); + --icon-info-active: var(--lilac-light-11); + --icon-on-brand-base: var(--ink-light-alpha-11); + --icon-on-brand-hover: var(--ink-light-alpha-12); + --icon-on-brand-selected: var(--ink-light-alpha-12); + --icon-on-interactive-base: var(--ink-light-1); + --icon-agent-plan-base: var(--purple-light-9); + --icon-agent-docs-base: var(--amber-light-9); + --icon-agent-ask-base: var(--cyan-light-9); + --icon-agent-build-base: var(--cobalt-light-9); + --icon-on-success-base: var(--apple-light-alpha-9); + --icon-on-success-hover: var(--apple-light-alpha-10); + --icon-on-success-selected: var(--apple-light-alpha-11); + --icon-on-warning-base: var(--amber-lightalpha-9); + --icon-on-warning-hover: var(--amber-lightalpha-10); + --icon-on-warning-selected: var(--amber-lightalpha-11); + --icon-on-critical-base: var(--ember-light-alpha-9); + --icon-on-critical-hover: var(--ember-light-alpha-10); + --icon-on-critical-selected: var(--ember-light-alpha-11); + --icon-on-info-base: var(--lilac-light-9); + --icon-on-info-hover: var(--lilac-light-alpha-10); + --icon-on-info-selected: var(--lilac-light-alpha-11); + --icon-diff-add-base: var(--mint-light-11); + --icon-diff-add-hover: var(--mint-light-12); + --icon-diff-add-active: var(--mint-light-12); + --icon-diff-delete-base: var(--ember-light-10); + --icon-diff-delete-hover: var(--ember-light-11); + --syntax-comment: var(--text-weaker); + --syntax-regexp: var(--text-base); + --syntax-string: #007663; + --syntax-keyword: var(--text-weak); + --syntax-primitive: #fb7f51; + --syntax-operator: var(--text-weak); + --syntax-variable: var(--text-strong); + --syntax-property: #ec6cc8; + --syntax-type: #738400; + --syntax-constant: #00b2b9; + --syntax-punctuation: var(--text-weaker); + --syntax-object: var(--text-strong); + --syntax-success: var(--apple-light-10); + --syntax-warning: var(--amber-light-10); + --syntax-critical: var(--ember-light-9); + --syntax-info: #0091a7; + --syntax-diff-add: var(--mint-light-11); + --syntax-diff-delete: var(--ember-light-11); + --syntax-diff-unknown: #ff0000; + --markdown-heading: #d68c27; + --markdown-text: #1a1a1a; + --markdown-link: #3b7dd8; + --markdown-link-text: #318795; + --markdown-code: #3d9a57; + --markdown-block-quote: #b0851f; + --markdown-emph: #b0851f; + --markdown-strong: #d68c27; + --markdown-horizontal-rule: #8a8a8a; + --markdown-list-item: #3b7dd8; + --markdown-list-enumeration: #318795; + --markdown-image: #3b7dd8; + --markdown-image-text: #318795; + --markdown-code-block: #1a1a1a; + --border-color: #ffffff; + --border-weaker-base: var(--ink-light-alpha-3); + --border-weaker-hover: var(--ink-light-alpha-4); + --border-weaker-active: var(--ink-light-alpha-6); + --border-weaker-selected: var(--cobalt-light-alpha-4); + --border-weaker-disabled: var(--ink-light-alpha-2); + --border-weaker-focus: var(--ink-light-alpha-6); + --button-ghost-hover: var(--ink-light-alpha-2); + --button-ghost-hover2: var(--ink-light-alpha-3); + } +} |