feat(app): generate color palettes (#16232)

This commit is contained in:
Adam
2026-03-08 19:28:58 -05:00
committed by GitHub
parent 7d7837e5b6
commit b976f339e8
29 changed files with 1268 additions and 2988 deletions

View File

@@ -85,214 +85,218 @@
0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),
0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09);
--shadow-sidebar-overlay:
0 100px 80px 0 rgba(0, 0, 0, 0.29), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.21),
0 22.336px 17.869px 0 rgba(0, 0, 0, 0.17), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.14),
0 6.65px 5.32px 0 rgba(0, 0, 0, 0.12), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.08);
color-scheme: light;
--text-mix-blend-mode: multiply;
/* OC-1 fallback variables (light) */
--background-base: #f8f7f7;
--background-weak: var(--smoke-light-3);
--background-strong: var(--smoke-light-1);
/* OC-2 fallback variables (light) */
--background-base: #f8f8f8;
--background-weak: #f3f3f3;
--background-strong: #fcfcfc;
--background-stronger: #fcfcfc;
--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);
--surface-base-interactive-active: var(--cobalt-light-alpha-3);
--base2: var(--smoke-light-alpha-2);
--base3: var(--smoke-light-alpha-2);
--surface-inset-base: var(--smoke-light-alpha-2);
--surface-inset-base-hover: var(--smoke-light-alpha-3);
--surface-inset-strong: #1f000017;
--surface-inset-strong-hover: #1f000017;
--surface-raised-base: var(--smoke-light-alpha-1);
--surface-float-base: var(--smoke-dark-1);
--surface-float-base-hover: var(--smoke-dark-2);
--surface-raised-base-hover: var(--smoke-light-alpha-2);
--surface-raised-base-active: var(--smoke-light-alpha-3);
--surface-raised-strong: var(--smoke-light-1);
--surface-raised-strong-hover: var(--white);
--surface-raised-stronger: var(--white);
--surface-raised-stronger-hover: var(--white);
--surface-weak: var(--smoke-light-alpha-3);
--surface-weaker: var(--smoke-light-alpha-4);
--surface-base: rgba(0, 0, 0, 0.031);
--base: rgba(0, 0, 0, 0.034);
--surface-base-hover: rgba(0, 0, 0, 0.059);
--surface-base-active: rgba(0, 0, 0, 0.051);
--surface-base-interactive-active: rgba(3, 76, 255, 0.09);
--base2: rgba(0, 0, 0, 0.034);
--base3: rgba(0, 0, 0, 0.034);
--surface-inset-base: rgba(0, 0, 0, 0.034);
--surface-inset-base-hover: rgba(0, 0, 0, 0.055);
--surface-inset-strong: rgba(0, 0, 0, 0.09);
--surface-inset-strong-hover: rgba(0, 0, 0, 0.09);
--surface-raised-base: rgba(0, 0, 0, 0.031);
--surface-float-base: #161616;
--surface-float-base-hover: #1c1c1c;
--surface-raised-base-hover: rgba(0, 0, 0, 0.051);
--surface-raised-base-active: rgba(0, 0, 0, 0.09);
--surface-raised-strong: #fcfcfc;
--surface-raised-strong-hover: #ffffff;
--surface-raised-stronger: #ffffff;
--surface-raised-stronger-hover: #ffffff;
--surface-weak: rgba(0, 0, 0, 0.051);
--surface-weaker: rgba(0, 0, 0, 0.071);
--surface-strong: #ffffff;
--surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
--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: #e5f0ff;
--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-raised-stronger-non-alpha: #ffffff;
--surface-brand-base: #dcde8d;
--surface-brand-hover: #d0d283;
--surface-interactive-base: #ecf3ff;
--surface-interactive-hover: #e0eaff;
--surface-interactive-weak: #f7faff;
--surface-interactive-weak-hover: #ecf3ff;
--surface-success-base: #dbfed7;
--surface-success-weak: #f0feee;
--surface-success-strong: #12c905;
--surface-warning-base: #fcf3cb;
--surface-warning-weak: #fdfaec;
--surface-warning-strong: #fbdd46;
--surface-critical-base: #feefeb;
--surface-critical-weak: #fff8f6;
--surface-critical-strong: #fc533a;
--surface-info-base: #fdecfe;
--surface-info-weak: #fef7ff;
--surface-info-strong: #a753ae;
--surface-diff-unchanged-base: #ffffff00;
--surface-diff-skip-base: var(--smoke-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: #dafbe0;
--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);
--input-base: var(--smoke-light-1);
--input-hover: var(--smoke-light-2);
--input-active: var(--cobalt-light-1);
--input-selected: var(--cobalt-light-4);
--input-focus: var(--cobalt-light-1);
--input-disabled: var(--smoke-light-4);
--text-base: var(--smoke-light-11);
--text-weak: var(--smoke-light-9);
--text-weaker: var(--smoke-light-8);
--text-strong: var(--smoke-light-12);
--text-invert-base: var(--smoke-dark-alpha-11);
--text-invert-weak: var(--smoke-dark-alpha-9);
--text-invert-weaker: var(--smoke-dark-alpha-8);
--text-invert-strong: var(--smoke-dark-alpha-12);
--text-interactive-base: var(--cobalt-light-9);
--text-on-brand-base: var(--smoke-light-alpha-11);
--text-on-interactive-base: var(--smoke-light-1);
--text-on-interactive-weak: var(--smoke-dark-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(--smoke-dark-alpha-11);
--text-on-info-base: var(--smoke-dark-alpha-11);
--text-diff-add-base: var(--mint-light-11);
--text-diff-delete-base: var(--ember-light-10);
--text-diff-delete-strong: var(--ember-light-12);
--text-diff-add-strong: var(--mint-light-12);
--text-on-info-weak: var(--smoke-dark-alpha-9);
--text-on-info-strong: var(--smoke-dark-alpha-12);
--text-on-warning-weak: var(--smoke-dark-alpha-9);
--text-on-warning-strong: var(--smoke-dark-alpha-12);
--text-on-success-weak: var(--apple-light-6);
--text-on-success-strong: var(--apple-light-12);
--text-on-brand-weak: var(--smoke-light-alpha-9);
--text-on-brand-weaker: var(--smoke-light-alpha-8);
--text-on-brand-strong: var(--smoke-light-alpha-12);
--button-primary-base: var(--smoke-light-12);
--button-secondary-base: #fdfcfc;
--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);
--border-selected: var(--cobalt-light-alpha-9);
--border-disabled: var(--smoke-light-alpha-8);
--border-focus: var(--smoke-light-alpha-9);
--border-weak-base: var(--smoke-light-alpha-5);
--border-strong-base: var(--smoke-light-alpha-7);
--border-strong-hover: var(--smoke-light-alpha-8);
--border-strong-active: var(--smoke-light-alpha-7);
--border-strong-selected: var(--cobalt-light-alpha-6);
--border-strong-disabled: var(--smoke-light-alpha-6);
--border-strong-focus: var(--smoke-light-alpha-7);
--border-weak-hover: var(--smoke-light-alpha-6);
--border-weak-active: var(--smoke-light-alpha-7);
--border-weak-selected: var(--cobalt-light-alpha-5);
--border-weak-disabled: var(--smoke-light-alpha-6);
--border-weak-focus: var(--smoke-light-alpha-7);
--border-weaker-base: var(--smoke-light-alpha-3);
--border-interactive-base: var(--cobalt-light-7);
--border-interactive-hover: var(--cobalt-light-8);
--border-interactive-active: var(--cobalt-light-9);
--border-interactive-selected: var(--cobalt-light-9);
--border-interactive-disabled: var(--smoke-light-8);
--border-interactive-focus: var(--cobalt-light-9);
--border-success-base: var(--apple-light-6);
--border-success-hover: var(--apple-light-7);
--border-success-selected: var(--apple-light-9);
--border-warning-base: var(--solaris-light-6);
--border-warning-hover: var(--solaris-light-7);
--border-warning-selected: var(--solaris-light-9);
--border-critical-base: var(--ember-light-6);
--border-critical-hover: var(--ember-light-7);
--border-critical-selected: var(--ember-light-9);
--border-info-base: var(--lilac-light-6);
--border-info-hover: var(--lilac-light-7);
--border-info-selected: var(--lilac-light-9);
--icon-base: var(--smoke-light-9);
--icon-hover: var(--smoke-light-11);
--icon-active: var(--smoke-light-12);
--icon-selected: var(--smoke-light-12);
--icon-disabled: var(--smoke-light-8);
--icon-focus: var(--smoke-light-12);
--surface-diff-skip-base: #f8f8f8;
--surface-diff-hidden-base: #eaf4ff;
--surface-diff-hidden-weak: #f6faff;
--surface-diff-hidden-weaker: #fbfdff;
--surface-diff-hidden-strong: #cae3ff;
--surface-diff-hidden-stronger: #2090f5;
--surface-diff-add-base: #e3fae1;
--surface-diff-add-weak: #f4fcf3;
--surface-diff-add-weaker: #fbfefb;
--surface-diff-add-strong: #c2eebf;
--surface-diff-add-stronger: #9ff29a;
--surface-diff-delete-base: #feefeb;
--surface-diff-delete-weak: #fff8f6;
--surface-diff-delete-weaker: #fffcfb;
--surface-diff-delete-strong: #fdc3b7;
--surface-diff-delete-stronger: #fc533a;
--input-base: #fcfcfc;
--input-hover: #f8f8f8;
--input-active: #fcfdff;
--input-selected: #e0eaff;
--input-focus: #fcfdff;
--input-disabled: #ededed;
--text-base: #6f6f6f;
--text-weak: #8f8f8f;
--text-weaker: #c7c7c7;
--text-strong: #171717;
--text-invert-base: #f8f8f8;
--text-invert-weak: #f3f3f3;
--text-invert-weaker: #ededed;
--text-invert-strong: #fcfcfc;
--text-interactive-base: #034cff;
--text-on-brand-base: rgba(0, 0, 0, 0.574);
--text-on-interactive-base: #fcfcfc;
--text-on-interactive-weak: rgba(0, 0, 0, 0.574);
--text-on-success-base: #2dba26;
--text-on-critical-base: #ed4831;
--text-on-critical-weak: #fe806a;
--text-on-critical-strong: #601a0f;
--text-on-warning-base: rgba(0, 0, 0, 0.574);
--text-on-info-base: rgba(0, 0, 0, 0.574);
--text-diff-add-base: #3a8437;
--text-diff-delete-base: #ed4831;
--text-diff-delete-strong: #601a0f;
--text-diff-add-strong: #1d3e1c;
--text-on-info-weak: rgba(0, 0, 0, 0.453);
--text-on-info-strong: rgba(0, 0, 0, 0.915);
--text-on-warning-weak: rgba(0, 0, 0, 0.453);
--text-on-warning-strong: rgba(0, 0, 0, 0.915);
--text-on-success-weak: #96ec8e;
--text-on-success-strong: #044202;
--text-on-brand-weak: rgba(0, 0, 0, 0.453);
--text-on-brand-weaker: rgba(0, 0, 0, 0.232);
--text-on-brand-strong: rgba(0, 0, 0, 0.915);
--button-primary-base: #171717;
--button-secondary-base: #fcfcfc;
--button-secondary-hover: #f8f8f8;
--button-ghost-hover: rgba(0, 0, 0, 0.031);
--button-ghost-hover2: rgba(0, 0, 0, 0.051);
--border-base: rgba(0, 0, 0, 0.162);
--border-hover: rgba(0, 0, 0, 0.236);
--border-active: rgba(0, 0, 0, 0.46);
--border-selected: rgba(3, 76, 255, 0.99);
--border-disabled: rgba(0, 0, 0, 0.236);
--border-focus: rgba(0, 0, 0, 0.46);
--border-weak-base: #e5e5e5;
--border-strong-base: rgba(0, 0, 0, 0.151);
--border-strong-hover: rgba(0, 0, 0, 0.232);
--border-strong-active: rgba(0, 0, 0, 0.151);
--border-strong-selected: rgba(3, 76, 255, 0.31);
--border-strong-disabled: rgba(0, 0, 0, 0.118);
--border-strong-focus: rgba(0, 0, 0, 0.151);
--border-weak-hover: rgba(0, 0, 0, 0.118);
--border-weak-active: rgba(0, 0, 0, 0.151);
--border-weak-selected: rgba(3, 76, 255, 0.24);
--border-weak-disabled: rgba(0, 0, 0, 0.118);
--border-weak-focus: rgba(0, 0, 0, 0.151);
--border-weaker-base: #f0f0f0;
--border-weaker-hover: rgba(0, 0, 0, 0.075);
--border-weaker-active: rgba(0, 0, 0, 0.118);
--border-weaker-selected: rgba(3, 76, 255, 0.16);
--border-weaker-disabled: rgba(0, 0, 0, 0.034);
--border-weaker-focus: rgba(0, 0, 0, 0.118);
--border-interactive-base: #a3c1fd;
--border-interactive-hover: #7ea9ff;
--border-interactive-active: #034cff;
--border-interactive-selected: #034cff;
--border-interactive-disabled: #c7c7c7;
--border-interactive-focus: #034cff;
--border-success-base: #96ec8e;
--border-success-hover: #7add71;
--border-success-selected: #12c905;
--border-warning-base: #e8d479;
--border-warning-hover: #d8c158;
--border-warning-selected: #fbdd46;
--border-critical-base: #fdc3b7;
--border-critical-hover: #ffa796;
--border-critical-selected: #fc533a;
--border-info-base: #f4bdf8;
--border-info-hover: #e6a8ea;
--border-info-selected: #a753ae;
--border-color: #ffffff;
--icon-base: #8f8f8f;
--icon-hover: #6f6f6f;
--icon-active: #171717;
--icon-selected: #171717;
--icon-disabled: #c7c7c7;
--icon-focus: #171717;
--icon-invert-base: #ffffff;
--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-weak-base: #dbdbdb;
--icon-weak-hover: #c7c7c7;
--icon-weak-active: #8f8f8f;
--icon-weak-selected: #858585;
--icon-weak-disabled: #e2e2e2;
--icon-weak-focus: #8f8f8f;
--icon-strong-base: #171717;
--icon-strong-hover: #151313;
--icon-strong-active: #020202;
--icon-strong-selected: #020202;
--icon-strong-disabled: var(--smoke-light-8);
--icon-strong-disabled: #c7c7c7;
--icon-strong-focus: #020202;
--icon-brand-base: var(--smoke-light-12);
--icon-interactive-base: var(--cobalt-light-9);
--icon-success-base: var(--apple-light-7);
--icon-success-hover: var(--apple-light-8);
--icon-success-active: var(--apple-light-11);
--icon-warning-base: var(--amber-light-9);
--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(--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-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);
--icon-brand-base: #171717;
--icon-interactive-base: #034cff;
--icon-success-base: #7add71;
--icon-success-hover: #4cc944;
--icon-success-active: #078901;
--icon-warning-base: #ebb76e;
--icon-warning-hover: #da9e40;
--icon-warning-active: #95671b;
--icon-critical-base: #ed4831;
--icon-critical-hover: #ca2d17;
--icon-critical-active: #601a0f;
--icon-info-base: #e6a8ea;
--icon-info-hover: #d58cda;
--icon-info-active: #9b4da1;
--icon-on-brand-base: rgba(0, 0, 0, 0.574);
--icon-on-brand-hover: rgba(0, 0, 0, 0.915);
--icon-on-brand-selected: rgba(0, 0, 0, 0.915);
--icon-on-interactive-base: #fcfcfc;
--icon-agent-plan-base: #a753ae;
--icon-agent-docs-base: #fcb239;
--icon-agent-ask-base: #2090f5;
--icon-agent-build-base: #034cff;
--icon-on-success-base: rgba(18, 201, 5, 0.9);
--icon-on-success-hover: rgba(45, 186, 38, 0.9);
--icon-on-success-selected: rgba(7, 137, 1, 0.9);
--icon-on-warning-base: rgba(252, 178, 57, 0.9);
--icon-on-warning-hover: rgba(239, 167, 46, 0.9);
--icon-on-warning-selected: rgba(149, 103, 27, 0.9);
--icon-on-critical-base: rgba(252, 83, 58, 0.9);
--icon-on-critical-hover: rgba(237, 72, 49, 0.9);
--icon-on-critical-selected: rgba(202, 45, 23, 0.9);
--icon-on-info-base: #a753ae;
--icon-on-info-hover: rgba(155, 73, 162, 0.9);
--icon-on-info-selected: rgba(155, 77, 161, 0.9);
--icon-diff-add-base: #3a8437;
--icon-diff-add-hover: #1d3e1c;
--icon-diff-add-active: #1d3e1c;
--icon-diff-delete-base: #ed4831;
--icon-diff-delete-hover: #ca2d17;
--icon-diff-modified-base: #ff8c00;
--syntax-comment: var(--text-weak);
--syntax-regexp: var(--text-base);
@@ -306,12 +310,12 @@
--syntax-constant: #007b80;
--syntax-punctuation: var(--text-base);
--syntax-object: var(--text-strong);
--syntax-success: var(--apple-light-10);
--syntax-warning: var(--amber-light-10);
--syntax-critical: var(--ember-light-10);
--syntax-success: #2dba26;
--syntax-warning: #efa72e;
--syntax-critical: #ed4831;
--syntax-info: #0092a8;
--syntax-diff-add: var(--mint-light-11);
--syntax-diff-delete: var(--ember-light-11);
--syntax-diff-add: #3a8437;
--syntax-diff-delete: #ca2d17;
--syntax-diff-unknown: #ff0000;
--markdown-heading: #d68c27;
--markdown-text: #1a1a1a;
@@ -327,9 +331,6 @@
--markdown-image: #3b7dd8;
--markdown-image-text: #318795;
--markdown-code-block: #1a1a1a;
--border-color: #ffffff;
--button-ghost-hover: var(--smoke-light-alpha-2);
--button-ghost-hover2: var(--smoke-light-alpha-3);
--avatar-background-pink: #feeef8;
--avatar-background-mint: #e1fbf4;
--avatar-background-orange: #fff1e7;
@@ -342,210 +343,220 @@
--avatar-text-purple: #8445bc;
--avatar-text-cyan: #0894b3;
--avatar-text-lime: #5d770d;
--text-stronger: #171717;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
--text-mix-blend-mode: plus-lighter;
/* OC-1 fallback variables (dark) */
--background-base: var(--smoke-dark-1);
--background-weak: #1c1717;
--background-strong: #151313;
--background-stronger: #191515;
--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);
--surface-base-interactive-active: var(--cobalt-dark-alpha-2);
--base2: var(--smoke-dark-alpha-2);
--base3: var(--smoke-dark-alpha-2);
--surface-inset-base: #0e0b0b7f;
--surface-inset-base-hover: #0e0b0b7f;
--surface-inset-strong: #060505cc;
--surface-inset-strong-hover: #060505cc;
--surface-raised-base: var(--smoke-dark-alpha-3);
--surface-float-base: var(--smoke-dark-1);
--surface-float-base-hover: var(--smoke-dark-2);
--surface-raised-base-hover: var(--smoke-dark-alpha-4);
--surface-raised-base-active: var(--smoke-dark-alpha-5);
--surface-raised-strong: var(--smoke-dark-alpha-4);
--surface-raised-strong-hover: var(--smoke-dark-alpha-6);
--surface-raised-stronger: var(--smoke-dark-alpha-6);
--surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
--surface-weak: var(--smoke-dark-alpha-4);
--surface-weaker: var(--smoke-dark-alpha-5);
--surface-strong: var(--smoke-dark-alpha-7);
/* OC-2 fallback variables (dark) */
--background-base: #101010;
--background-weak: #1e1e1e;
--background-strong: #121212;
--background-stronger: #151515;
--surface-base: rgba(255, 255, 255, 0.031);
--base: rgba(255, 255, 255, 0.034);
--surface-base-hover: rgba(255, 255, 255, 0.039);
--surface-base-active: rgba(255, 255, 255, 0.059);
--surface-base-interactive-active: rgba(3, 76, 255, 0.125);
--base2: rgba(255, 255, 255, 0.034);
--base3: rgba(255, 255, 255, 0.034);
--surface-inset-base: rgba(0, 0, 0, 0.5);
--surface-inset-base-hover: rgba(0, 0, 0, 0.5);
--surface-inset-strong: rgba(0, 0, 0, 0.8);
--surface-inset-strong-hover: rgba(0, 0, 0, 0.8);
--surface-raised-base: rgba(255, 255, 255, 0.059);
--surface-float-base: #161616;
--surface-float-base-hover: #1c1c1c;
--surface-raised-base-hover: rgba(255, 255, 255, 0.078);
--surface-raised-base-active: rgba(255, 255, 255, 0.102);
--surface-raised-strong: rgba(255, 255, 255, 0.078);
--surface-raised-strong-hover: rgba(255, 255, 255, 0.129);
--surface-raised-stronger: rgba(255, 255, 255, 0.129);
--surface-raised-stronger-hover: rgba(255, 255, 255, 0.169);
--surface-weak: rgba(255, 255, 255, 0.078);
--surface-weaker: rgba(255, 255, 255, 0.102);
--surface-strong: rgba(255, 255, 255, 0.169);
--surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
--surface-raised-stronger-non-alpha: var(--smoke-dark-3);
--surface-brand-base: var(--yuzu-light-9);
--surface-brand-hover: var(--yuzu-light-10);
--surface-interactive-base: var(--cobalt-dark-3);
--surface-interactive-hover: #0a1d4d;
--surface-interactive-weak: var(--cobalt-dark-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-dark-3);
--surface-critical-weak: var(--ember-dark-2);
--surface-critical-strong: var(--ember-dark-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-hidden-weak: var(--blue-dark-1);
--surface-diff-hidden-weaker: var(--blue-dark-3);
--surface-diff-hidden-strong: var(--blue-dark-5);
--surface-diff-hidden-stronger: var(--blue-dark-11);
--surface-diff-add-base: var(--mint-dark-3);
--surface-diff-add-weak: var(--mint-dark-4);
--surface-diff-add-weaker: var(--mint-dark-3);
--surface-diff-add-strong: var(--mint-dark-5);
--surface-diff-add-stronger: var(--mint-dark-11);
--surface-diff-delete-base: var(--ember-dark-3);
--surface-diff-delete-weak: var(--ember-dark-4);
--surface-diff-delete-weaker: var(--ember-dark-3);
--surface-diff-delete-strong: var(--ember-dark-5);
--surface-diff-delete-stronger: var(--ember-dark-11);
--input-base: var(--smoke-dark-2);
--input-hover: var(--smoke-dark-2);
--input-active: var(--cobalt-dark-1);
--input-selected: var(--cobalt-dark-2);
--input-focus: var(--cobalt-dark-1);
--input-disabled: var(--smoke-dark-4);
--text-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-invert-base: var(--smoke-dark-alpha-11);
--text-invert-weak: var(--smoke-dark-alpha-9);
--text-invert-weaker: var(--smoke-dark-alpha-8);
--text-invert-strong: var(--smoke-dark-alpha-12);
--text-interactive-base: var(--cobalt-dark-11);
--text-on-brand-base: var(--smoke-dark-alpha-11);
--text-on-interactive-base: var(--smoke-dark-12);
--text-on-interactive-weak: var(--smoke-dark-alpha-11);
--text-on-success-base: var(--apple-dark-9);
--text-on-critical-base: var(--ember-dark-9);
--text-on-critical-weak: var(--ember-dark-8);
--text-on-critical-strong: var(--ember-dark-12);
--text-on-warning-base: var(--smoke-dark-alpha-11);
--text-on-info-base: var(--smoke-dark-alpha-11);
--text-diff-add-base: var(--mint-dark-11);
--text-diff-delete-base: var(--ember-dark-9);
--text-diff-delete-strong: var(--ember-dark-12);
--text-diff-add-strong: var(--mint-dark-8);
--text-on-info-weak: var(--smoke-dark-alpha-9);
--text-on-info-strong: var(--smoke-dark-alpha-12);
--text-on-warning-weak: var(--smoke-dark-alpha-9);
--text-on-warning-strong: var(--smoke-dark-alpha-12);
--text-on-success-weak: var(--apple-dark-8);
--text-on-success-strong: var(--apple-dark-12);
--text-on-brand-weak: var(--smoke-dark-alpha-9);
--text-on-brand-weaker: var(--smoke-dark-alpha-8);
--text-on-brand-strong: var(--smoke-dark-alpha-12);
--button-primary-base: var(--smoke-dark-12);
--button-secondary-base: #231f1f;
--button-secondary-hover: #2a2727;
--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-11);
--border-disabled: var(--smoke-dark-alpha-8);
--border-focus: var(--smoke-dark-alpha-9);
--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);
--border-strong-selected: var(--cobalt-dark-alpha-6);
--border-strong-disabled: var(--smoke-dark-alpha-6);
--border-strong-focus: var(--smoke-dark-alpha-8);
--border-weak-hover: var(--smoke-dark-alpha-7);
--border-weak-active: var(--smoke-dark-alpha-8);
--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-dark-5);
--border-critical-hover: var(--ember-dark-7);
--border-critical-selected: var(--ember-dark-9);
--border-info-base: var(--lilac-light-6);
--border-info-hover: var(--lilac-light-7);
--border-info-selected: var(--lilac-light-9);
--icon-base: var(--smoke-dark-9);
--icon-hover: var(--smoke-dark-10);
--icon-active: var(--smoke-dark-11);
--icon-selected: var(--smoke-dark-12);
--icon-disabled: var(--smoke-dark-7);
--icon-focus: var(--smoke-dark-12);
--icon-invert-base: var(--smoke-dark-1);
--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);
--surface-raised-stronger-non-alpha: #1c1c1c;
--surface-brand-base: #fab283;
--surface-brand-hover: #eda779;
--surface-interactive-base: #091f52;
--surface-interactive-hover: #091f52;
--surface-interactive-weak: #0b1730;
--surface-interactive-weak-hover: #ecf3ff;
--surface-success-base: #062d04;
--surface-success-weak: #0a1e08;
--surface-success-strong: #12c905;
--surface-warning-base: #fdf3cf;
--surface-warning-weak: #fdfaed;
--surface-warning-strong: #fcd53a;
--surface-critical-base: #42120b;
--surface-critical-weak: #28110c;
--surface-critical-strong: #fc533a;
--surface-info-base: #feecfe;
--surface-info-weak: #fdf7fe;
--surface-info-strong: #edb2f1;
--surface-diff-unchanged-base: #161616;
--surface-diff-skip-base: #00000000;
--surface-diff-hidden-base: #0c1928;
--surface-diff-hidden-weak: #09131d;
--surface-diff-hidden-weaker: #082542;
--surface-diff-hidden-strong: #073966;
--surface-diff-hidden-stronger: #8ec2fc;
--surface-diff-add-base: #1a2919;
--surface-diff-add-weak: #1f351e;
--surface-diff-add-weaker: #1a2919;
--surface-diff-add-strong: #264024;
--surface-diff-add-stronger: #9bcd97;
--surface-diff-delete-base: #42120b;
--surface-diff-delete-weak: #580f06;
--surface-diff-delete-weaker: #42120b;
--surface-diff-delete-strong: #6a1206;
--surface-diff-delete-stronger: #faa494;
--input-base: #1c1c1c;
--input-hover: #1c1c1c;
--input-active: #091123;
--input-selected: #0b1730;
--input-focus: #091123;
--input-disabled: #282828;
--text-base: rgba(255, 255, 255, 0.618);
--text-weak: rgba(255, 255, 255, 0.422);
--text-weaker: rgba(255, 255, 255, 0.284);
--text-strong: rgba(255, 255, 255, 0.936);
--text-invert-base: #a0a0a0;
--text-invert-weak: #707070;
--text-invert-weaker: #505050;
--text-invert-strong: #ededed;
--text-interactive-base: #9dbefe;
--text-on-brand-base: rgba(255, 255, 255, 0.603);
--text-on-interactive-base: #ededed;
--text-on-interactive-weak: rgba(255, 255, 255, 0.603);
--text-on-success-base: #12c905;
--text-on-critical-base: #fc533a;
--text-on-critical-weak: #b72d1a;
--text-on-critical-strong: #ffe0da;
--text-on-warning-base: rgba(255, 255, 255, 0.603);
--text-on-info-base: rgba(255, 255, 255, 0.603);
--text-diff-add-base: #9bcd97;
--text-diff-delete-base: #fc533a;
--text-diff-delete-strong: #ffe0da;
--text-diff-add-strong: #4a7348;
--text-on-info-weak: rgba(255, 255, 255, 0.404);
--text-on-info-strong: rgba(255, 255, 255, 0.928);
--text-on-warning-weak: rgba(255, 255, 255, 0.404);
--text-on-warning-strong: rgba(255, 255, 255, 0.928);
--text-on-success-weak: #127d0d;
--text-on-success-strong: #bafdb3;
--text-on-brand-weak: rgba(255, 255, 255, 0.404);
--text-on-brand-weaker: rgba(255, 255, 255, 0.266);
--text-on-brand-strong: rgba(255, 255, 255, 0.928);
--button-primary-base: #ededed;
--button-secondary-base: #1c1c1c;
--button-secondary-hover: rgba(255, 255, 255, 0.039);
--button-ghost-hover: rgba(255, 255, 255, 0.031);
--button-ghost-hover2: rgba(255, 255, 255, 0.059);
--border-base: rgba(255, 255, 255, 0.195);
--border-hover: rgba(255, 255, 255, 0.284);
--border-active: rgba(255, 255, 255, 0.418);
--border-selected: #9dbefe;
--border-disabled: rgba(255, 255, 255, 0.284);
--border-focus: rgba(255, 255, 255, 0.418);
--border-weak-base: #282828;
--border-strong-base: rgba(255, 255, 255, 0.266);
--border-strong-hover: rgba(255, 255, 255, 0.266);
--border-strong-active: rgba(255, 255, 255, 0.266);
--border-strong-selected: rgba(3, 76, 255, 0.62);
--border-strong-disabled: rgba(255, 255, 255, 0.138);
--border-strong-focus: rgba(255, 255, 255, 0.266);
--border-weak-hover: rgba(255, 255, 255, 0.181);
--border-weak-active: rgba(255, 255, 255, 0.266);
--border-weak-selected: rgba(3, 76, 255, 0.62);
--border-weak-disabled: rgba(255, 255, 255, 0.138);
--border-weak-focus: rgba(255, 255, 255, 0.266);
--border-weaker-base: #202020;
--border-weaker-hover: rgba(255, 255, 255, 0.084);
--border-weaker-active: rgba(255, 255, 255, 0.138);
--border-weaker-selected: rgba(3, 76, 255, 0.32);
--border-weaker-disabled: rgba(255, 255, 255, 0.034);
--border-weaker-focus: rgba(255, 255, 255, 0.138);
--border-interactive-base: #a3c1fd;
--border-interactive-hover: #7ea9ff;
--border-interactive-active: #034cff;
--border-interactive-selected: #034cff;
--border-interactive-disabled: #505050;
--border-interactive-focus: #034cff;
--border-success-base: #96ec8e;
--border-success-hover: #7add71;
--border-success-selected: #12c905;
--border-warning-base: #e9d282;
--border-warning-hover: #dac063;
--border-warning-selected: #fcd53a;
--border-critical-base: #6a1206;
--border-critical-hover: #952414;
--border-critical-selected: #fc533a;
--border-info-base: #eac5ec;
--border-info-hover: #dab1dd;
--border-info-selected: #edb2f1;
--border-color: #ffffff;
--icon-base: #7e7e7e;
--icon-hover: #a0a0a0;
--icon-active: #ededed;
--icon-selected: #ededed;
--icon-disabled: #3e3e3e;
--icon-focus: #ededed;
--icon-invert-base: #161616;
--icon-weak-base: #343434;
--icon-weak-hover: #d9d9d9;
--icon-weak-active: #c8c8c8;
--icon-weak-selected: #707070;
--icon-weak-disabled: #ededed;
--icon-weak-focus: #707070;
--icon-strong-base: #ededed;
--icon-strong-hover: #f6f3f3;
--icon-strong-active: #fcfcfc;
--icon-strong-selected: #fdfcfc;
--icon-strong-disabled: var(--smoke-dark-8);
--icon-strong-disabled: #3e3e3e;
--icon-strong-focus: #fdfcfc;
--icon-brand-base: var(--white);
--icon-interactive-base: var(--cobalt-dark-11);
--icon-success-base: var(--apple-dark-7);
--icon-success-hover: var(--apple-dark-8);
--icon-success-active: var(--apple-dark-11);
--icon-warning-base: var(--amber-dark-9);
--icon-warning-hover: var(--amber-dark-8);
--icon-warning-active: var(--amber-dark-11);
--icon-critical-base: var(--ember-dark-9);
--icon-critical-hover: var(--ember-dark-11);
--icon-critical-active: var(--ember-dark-12);
--icon-info-base: var(--lilac-dark-7);
--icon-info-hover: var(--lilac-dark-8);
--icon-info-active: var(--lilac-dark-11);
--icon-on-brand-base: var(--smoke-light-alpha-11);
--icon-on-brand-hover: var(--smoke-light-alpha-12);
--icon-on-brand-selected: var(--smoke-light-alpha-12);
--icon-on-interactive-base: var(--smoke-dark-12);
--icon-agent-plan-base: var(--purple-dark-9);
--icon-agent-docs-base: var(--amber-dark-9);
--icon-agent-ask-base: var(--cyan-dark-9);
--icon-agent-build-base: var(--cobalt-dark-11);
--icon-on-success-base: var(--apple-dark-alpha-9);
--icon-on-success-hover: var(--apple-dark-alpha-10);
--icon-on-success-selected: var(--apple-dark-alpha-11);
--icon-on-warning-base: var(--amber-darkalpha-9);
--icon-on-warning-hover: var(--amber-darkalpha-10);
--icon-on-warning-selected: var(--amber-darkalpha-11);
--icon-on-critical-base: var(--ember-dark-alpha-9);
--icon-on-critical-hover: var(--ember-dark-alpha-10);
--icon-on-critical-selected: var(--ember-dark-alpha-11);
--icon-on-info-base: var(--lilac-dark-9);
--icon-on-info-hover: var(--lilac-dark-alpha-10);
--icon-on-info-selected: var(--lilac-dark-alpha-11);
--icon-diff-add-base: var(--mint-dark-11);
--icon-diff-add-hover: var(--mint-dark-10);
--icon-diff-add-active: var(--mint-dark-11);
--icon-diff-delete-base: var(--ember-dark-9);
--icon-diff-delete-hover: var(--ember-dark-10);
--icon-brand-base: #ffffff;
--icon-interactive-base: #034cff;
--icon-success-base: #12c905;
--icon-success-hover: #35c02d;
--icon-success-active: #4de144;
--icon-warning-base: #fbb73c;
--icon-warning-hover: #885e08;
--icon-warning-active: #f1b13f;
--icon-critical-base: #fc533a;
--icon-critical-hover: #faa494;
--icon-critical-active: #ffe0da;
--icon-info-base: #68446b;
--icon-info-hover: #815484;
--icon-info-active: #dfa7e3;
--icon-on-brand-base: rgba(255, 255, 255, 0.603);
--icon-on-brand-hover: rgba(255, 255, 255, 0.928);
--icon-on-brand-selected: rgba(255, 255, 255, 0.928);
--icon-on-interactive-base: #ededed;
--icon-agent-plan-base: #edb2f1;
--icon-agent-docs-base: #fbb73c;
--icon-agent-ask-base: #2090f5;
--icon-agent-build-base: #9dbefe;
--icon-on-success-base: rgba(18, 201, 5, 0.9);
--icon-on-success-hover: rgba(53, 192, 45, 0.9);
--icon-on-success-selected: rgba(77, 225, 68, 0.9);
--icon-on-warning-base: rgba(251, 183, 60, 0.9);
--icon-on-warning-hover: rgba(245, 178, 56, 0.9);
--icon-on-warning-selected: rgba(241, 177, 63, 0.9);
--icon-on-critical-base: rgba(252, 83, 58, 0.9);
--icon-on-critical-hover: rgba(245, 79, 54, 0.9);
--icon-on-critical-selected: rgba(250, 164, 148, 0.9);
--icon-on-info-base: #edb2f1;
--icon-on-info-hover: rgba(231, 173, 235, 0.9);
--icon-on-info-selected: rgba(223, 167, 227, 0.9);
--icon-diff-add-base: #9bcd97;
--icon-diff-add-hover: #c3f9bf;
--icon-diff-add-active: #9bcd97;
--icon-diff-delete-base: #fc533a;
--icon-diff-delete-hover: #f54f36;
--icon-diff-modified-base: #ffba92;
--syntax-comment: var(--text-weak);
--syntax-regexp: var(--text-base);
@@ -559,12 +570,12 @@
--syntax-constant: #93e9f6;
--syntax-punctuation: var(--text-weak);
--syntax-object: var(--text-strong);
--syntax-success: var(--apple-dark-10);
--syntax-warning: var(--amber-dark-10);
--syntax-critical: var(--ember-dark-10);
--syntax-success: #35c02d;
--syntax-warning: #f5b238;
--syntax-critical: #f54f36;
--syntax-info: #93e9f6;
--syntax-diff-add: var(--mint-dark-11);
--syntax-diff-delete: var(--ember-dark-11);
--syntax-diff-add: #9bcd97;
--syntax-diff-delete: #faa494;
--syntax-diff-unknown: #ff0000;
--markdown-heading: #9d7cd8;
--markdown-text: #eeeeee;
@@ -580,10 +591,6 @@
--markdown-image: #fab283;
--markdown-image-text: #56b6c2;
--markdown-code-block: #eeeeee;
--border-color: #ffffff;
--border-weaker-base: var(--smoke-dark-alpha-2);
--button-ghost-hover: var(--smoke-dark-alpha-2);
--button-ghost-hover2: var(--smoke-dark-alpha-3);
--avatar-background-pink: #501b3f;
--avatar-background-mint: #033a34;
--avatar-background-orange: #5f2a06;
@@ -596,5 +603,6 @@
--avatar-text-purple: #9d5bd2;
--avatar-text-cyan: #369eff;
--avatar-text-lime: #c4f042;
--text-stronger: rgba(255, 255, 255, 0.936);
}
}