feat(app): sidebar reveal animation, hover peek overlay, and weaker dividers (#16374)

Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>
This commit is contained in:
David Hill
2026-03-06 22:33:34 +00:00
committed by GitHub
parent a2634337b8
commit b0bc3d87f5
21 changed files with 482 additions and 367 deletions

View File

@@ -146,7 +146,7 @@
--tabs-review-fade: 16px;
gap: var(--tabs-review-gap);
background-color: var(--background-stronger);
border-bottom: 1px solid var(--border-weak-base);
border-bottom: 1px solid var(--border-weaker-base);
&::after {
display: none;

View File

@@ -1,4 +1,4 @@
/* Generated by script/colors.ts */
/* Generated by script/tailwind.ts */
/* Do not edit this file manually */
@theme {
@@ -77,10 +77,6 @@
--color-text-weaker: var(--text-weaker);
--color-text-strong: var(--text-strong);
--color-text-interactive-base: var(--text-interactive-base);
--color-text-invert-base: var(--text-invert-base);
--color-text-invert-weak: var(--text-invert-weak);
--color-text-invert-weaker: var(--text-invert-weaker);
--color-text-invert-strong: var(--text-invert-strong);
--color-text-on-brand-base: var(--text-on-brand-base);
--color-text-on-interactive-base: var(--text-on-interactive-base);
--color-text-on-interactive-weak: var(--text-on-interactive-weak);
@@ -123,6 +119,7 @@
--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-weaker-base: var(--border-weaker-base);
--color-border-interactive-base: var(--border-interactive-base);
--color-border-interactive-hover: var(--border-interactive-hover);
--color-border-interactive-active: var(--border-interactive-active);
@@ -233,12 +230,6 @@
--color-markdown-image-text: var(--markdown-image-text);
--color-markdown-code-block: var(--markdown-code-block);
--color-border-color: var(--border-color);
--color-border-weaker-base: var(--border-weaker-base);
--color-border-weaker-hover: var(--border-weaker-hover);
--color-border-weaker-active: var(--border-weaker-active);
--color-border-weaker-selected: var(--border-weaker-selected);
--color-border-weaker-disabled: var(--border-weaker-disabled);
--color-border-weaker-focus: var(--border-weaker-focus);
--color-button-ghost-hover: var(--button-ghost-hover);
--color-button-ghost-hover2: var(--button-ghost-hover2);
}
}

View File

@@ -85,6 +85,10 @@
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;
@@ -212,6 +216,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);
@@ -323,12 +328,6 @@
--markdown-image-text: #318795;
--markdown-code-block: #1a1a1a;
--border-color: #ffffff;
--border-weaker-base: var(--smoke-light-alpha-3);
--border-weaker-hover: var(--smoke-light-alpha-4);
--border-weaker-active: var(--smoke-light-alpha-6);
--border-weaker-selected: var(--cobalt-light-alpha-4);
--border-weaker-disabled: var(--smoke-light-alpha-2);
--border-weaker-focus: var(--smoke-light-alpha-6);
--button-ghost-hover: var(--smoke-light-alpha-2);
--button-ghost-hover2: var(--smoke-light-alpha-3);
--avatar-background-pink: #feeef8;
@@ -582,12 +581,7 @@
--markdown-image-text: #56b6c2;
--markdown-code-block: #eeeeee;
--border-color: #ffffff;
--border-weaker-base: var(--smoke-dark-alpha-3);
--border-weaker-hover: var(--smoke-dark-alpha-4);
--border-weaker-active: var(--smoke-dark-alpha-6);
--border-weaker-selected: var(--cobalt-dark-alpha-3);
--border-weaker-disabled: var(--smoke-dark-alpha-2);
--border-weaker-focus: var(--smoke-dark-alpha-6);
--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;

View File

@@ -152,11 +152,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
tokens["border-weak-disabled"] = neutralAlpha[5]
tokens["border-weak-focus"] = neutralAlpha[isDark ? 7 : 6]
tokens["border-weaker-base"] = neutralAlpha[2]
tokens["border-weaker-hover"] = neutralAlpha[3]
tokens["border-weaker-active"] = neutralAlpha[5]
tokens["border-weaker-selected"] = withAlpha(interactive[3], isDark ? 0.3 : 0.4) as ColorValue
tokens["border-weaker-disabled"] = neutralAlpha[1]
tokens["border-weaker-focus"] = neutralAlpha[5]
tokens["border-interactive-base"] = interactive[6]
tokens["border-interactive-hover"] = interactive[7]

View File

@@ -247,11 +247,6 @@
"markdown-code-block": "#1a1a1a",
"border-color": "#ffffff",
"border-weaker-base": "var(--smoke-light-alpha-3)",
"border-weaker-hover": "var(--smoke-light-alpha-4)",
"border-weaker-active": "var(--smoke-light-alpha-6)",
"border-weaker-selected": "var(--cobalt-light-alpha-4)",
"border-weaker-disabled": "var(--smoke-light-alpha-2)",
"border-weaker-focus": "var(--smoke-light-alpha-6)",
"button-ghost-hover": "var(--smoke-light-alpha-2)",
"button-ghost-hover2": "var(--smoke-light-alpha-3)",
"avatar-background-pink": "#feeef8",
@@ -513,11 +508,6 @@
"markdown-code-block": "#eeeeee",
"border-color": "#ffffff",
"border-weaker-base": "var(--smoke-dark-alpha-3)",
"border-weaker-hover": "var(--smoke-dark-alpha-4)",
"border-weaker-active": "var(--smoke-dark-alpha-6)",
"border-weaker-selected": "var(--cobalt-dark-alpha-3)",
"border-weaker-disabled": "var(--smoke-dark-alpha-2)",
"border-weaker-focus": "var(--smoke-dark-alpha-6)",
"button-ghost-hover": "var(--smoke-dark-alpha-2)",
"button-ghost-hover2": "var(--smoke-dark-alpha-3)",
"avatar-background-pink": "#501b3f",

View File

@@ -4,7 +4,7 @@
"id": "oc-2",
"light": {
"seeds": {
"neutral": "#8e8b8b",
"neutral": "#8f8f8f",
"primary": "#dcde8d",
"success": "#12c905",
"warning": "#ffdc17",
@@ -15,32 +15,32 @@
"diffDelete": "#fc533a"
},
"overrides": {
"background-base": "#f8f7f7",
"background-weak": "var(--gray-light-3)",
"background-strong": "var(--gray-light-1)",
"background-base": "#f8f8f8",
"background-weak": "#f3f3f3",
"background-strong": "#fcfcfc",
"background-stronger": "#fcfcfc",
"surface-base": "var(--gray-light-alpha-2)",
"base": "var(--gray-light-alpha-2)",
"surface-base-hover": "#0500000f",
"surface-base-active": "var(--gray-light-alpha-3)",
"surface-base": "#00000008",
"base": "#00000008",
"surface-base-hover": "#0000000f",
"surface-base-active": "#0000000d",
"surface-base-interactive-active": "var(--cobalt-light-alpha-3)",
"base2": "var(--gray-light-alpha-2)",
"base3": "var(--gray-light-alpha-2)",
"surface-inset-base": "var(--gray-light-alpha-2)",
"surface-inset-base-hover": "var(--gray-light-alpha-3)",
"surface-inset-strong": "#1f000017",
"surface-inset-strong-hover": "#1f000017",
"surface-raised-base": "var(--gray-light-alpha-2)",
"surface-float-base": "var(--gray-dark-1)",
"surface-float-base-hover": "var(--gray-dark-2)",
"surface-raised-base-hover": "var(--gray-light-alpha-3)",
"surface-raised-base-active": "var(--gray-light-alpha-5)",
"surface-raised-strong": "var(--gray-light-1)",
"base2": "#00000008",
"base3": "#00000008",
"surface-inset-base": "#00000008",
"surface-inset-base-hover": "#0000000d",
"surface-inset-strong": "#00000017",
"surface-inset-strong-hover": "#00000017",
"surface-raised-base": "#00000008",
"surface-float-base": "#161616",
"surface-float-base-hover": "#1c1c1c",
"surface-raised-base-hover": "#0000000d",
"surface-raised-base-active": "#00000017",
"surface-raised-strong": "#fcfcfc",
"surface-raised-strong-hover": "var(--white)",
"surface-raised-stronger": "var(--white)",
"surface-raised-stronger-hover": "var(--white)",
"surface-weak": "var(--gray-light-alpha-3)",
"surface-weaker": "var(--gray-light-alpha-4)",
"surface-weak": "#0000000d",
"surface-weaker": "#00000012",
"surface-strong": "#ffffff",
"surface-raised-stronger-non-alpha": "var(--white)",
"surface-brand-base": "var(--yuzu-light-9)",
@@ -62,7 +62,7 @@
"surface-info-weak": "var(--lilac-light-2)",
"surface-info-strong": "var(--lilac-light-9)",
"surface-diff-unchanged-base": "#ffffff00",
"surface-diff-skip-base": "var(--gray-light-2)",
"surface-diff-skip-base": "#f8f8f8",
"surface-diff-hidden-base": "var(--blue-light-3)",
"surface-diff-hidden-weak": "var(--blue-light-2)",
"surface-diff-hidden-weaker": "var(--blue-light-1)",
@@ -78,69 +78,69 @@
"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(--gray-light-1)",
"input-hover": "var(--gray-light-2)",
"input-base": "#fcfcfc",
"input-hover": "#f8f8f8",
"input-active": "var(--cobalt-light-1)",
"input-selected": "var(--cobalt-light-4)",
"input-focus": "var(--cobalt-light-1)",
"input-disabled": "var(--gray-light-4)",
"text-base": "var(--gray-light-11)",
"text-weak": "var(--gray-light-9)",
"text-weaker": "var(--gray-light-8)",
"text-strong": "var(--gray-light-12)",
"text-invert-base": "var(--gray-dark-alpha-11)",
"text-invert-weak": "var(--gray-dark-alpha-9)",
"text-invert-weaker": "var(--gray-dark-alpha-8)",
"text-invert-strong": "var(--gray-dark-alpha-12)",
"input-disabled": "#ededed",
"text-base": "#6f6f6f",
"text-weak": "#8f8f8f",
"text-weaker": "#c7c7c7",
"text-strong": "#171717",
"text-invert-base": "#ffffff96",
"text-invert-weak": "#ffffff63",
"text-invert-weaker": "#ffffff40",
"text-invert-strong": "#ffffffeb",
"text-interactive-base": "var(--cobalt-light-9)",
"text-on-brand-base": "var(--gray-light-alpha-11)",
"text-on-interactive-base": "var(--gray-light-1)",
"text-on-interactive-weak": "var(--gray-dark-alpha-11)",
"text-on-brand-base": "#0000008f",
"text-on-interactive-base": "#fcfcfc",
"text-on-interactive-weak": "#ffffff96",
"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(--gray-dark-alpha-11)",
"text-on-info-base": "var(--gray-dark-alpha-11)",
"text-on-warning-base": "#ffffff96",
"text-on-info-base": "#ffffff96",
"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(--gray-dark-alpha-9)",
"text-on-info-strong": "var(--gray-dark-alpha-12)",
"text-on-warning-weak": "var(--gray-dark-alpha-9)",
"text-on-warning-strong": "var(--gray-dark-alpha-12)",
"text-on-info-weak": "#ffffff63",
"text-on-info-strong": "#ffffffeb",
"text-on-warning-weak": "#ffffff63",
"text-on-warning-strong": "#ffffffeb",
"text-on-success-weak": "var(--apple-light-6)",
"text-on-success-strong": "var(--apple-light-12)",
"text-on-brand-weak": "var(--gray-light-alpha-9)",
"text-on-brand-weaker": "var(--gray-light-alpha-8)",
"text-on-brand-strong": "var(--gray-light-alpha-12)",
"button-primary-base": "var(--gray-light-12)",
"button-secondary-base": "var(--gray-light-1)",
"text-on-brand-weak": "#00000070",
"text-on-brand-weaker": "#00000038",
"text-on-brand-strong": "#000000e8",
"button-primary-base": "#171717",
"button-secondary-base": "#fcfcfc",
"button-secondary-hover": "FFFFFF0A",
"border-base": "var(--gray-light-alpha-7)",
"border-hover": "var(--gray-light-alpha-8)",
"border-active": "var(--gray-light-alpha-9)",
"border-base": "#00000024",
"border-hover": "#00000038",
"border-active": "#00000070",
"border-selected": "var(--cobalt-light-alpha-9)",
"border-disabled": "var(--gray-light-alpha-8)",
"border-focus": "var(--gray-light-alpha-9)",
"border-weak-base": "var(--gray-light-alpha-5)",
"border-strong-base": "var(--gray-light-alpha-7)",
"border-strong-hover": "var(--gray-light-alpha-8)",
"border-strong-active": "var(--gray-light-alpha-7)",
"border-disabled": "#00000038",
"border-focus": "#00000070",
"border-weak-base": "#e5e5e5",
"border-strong-base": "#00000024",
"border-strong-hover": "#00000038",
"border-strong-active": "#00000024",
"border-strong-selected": "var(--cobalt-light-alpha-6)",
"border-strong-disabled": "var(--gray-light-alpha-6)",
"border-strong-focus": "var(--gray-light-alpha-7)",
"border-weak-hover": "var(--gray-light-alpha-6)",
"border-weak-active": "var(--gray-light-alpha-7)",
"border-strong-disabled": "#0000001c",
"border-strong-focus": "#00000024",
"border-weak-hover": "#0000001c",
"border-weak-active": "#00000024",
"border-weak-selected": "var(--cobalt-light-alpha-5)",
"border-weak-disabled": "var(--gray-light-alpha-6)",
"border-weak-focus": "var(--gray-light-alpha-7)",
"border-weak-disabled": "#0000001c",
"border-weak-focus": "#00000024",
"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(--gray-light-8)",
"border-interactive-disabled": "#c7c7c7",
"border-interactive-focus": "var(--cobalt-light-9)",
"border-success-base": "var(--apple-light-6)",
"border-success-hover": "var(--apple-light-7)",
@@ -154,26 +154,26 @@
"border-info-base": "var(--lilac-light-6)",
"border-info-hover": "var(--lilac-light-7)",
"border-info-selected": "var(--lilac-light-9)",
"icon-base": "var(--gray-light-9)",
"icon-hover": "var(--gray-light-11)",
"icon-active": "var(--gray-light-12)",
"icon-selected": "var(--gray-light-12)",
"icon-disabled": "var(--gray-light-8)",
"icon-focus": "var(--gray-light-12)",
"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(--gray-light-7)",
"icon-weak-hover": "var(--gray-light-8)",
"icon-weak-active": "var(--gray-light-9)",
"icon-weak-selected": "var(--gray-light-10)",
"icon-weak-disabled": "var(--gray-light-6)",
"icon-weak-focus": "var(--gray-light-9)",
"icon-strong-base": "var(--gray-light-12)",
"icon-strong-hover": "#151313",
"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": "#151515",
"icon-strong-active": "#020202",
"icon-strong-selected": "#020202",
"icon-strong-disabled": "var(--gray-light-6)",
"icon-strong-disabled": "#e2e2e2",
"icon-strong-focus": "#020202",
"icon-brand-base": "var(--gray-light-12)",
"icon-brand-base": "#171717",
"icon-interactive-base": "var(--cobalt-light-9)",
"icon-success-base": "var(--apple-light-7)",
"icon-success-hover": "var(--apple-light-8)",
@@ -187,10 +187,10 @@
"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(--gray-light-alpha-11)",
"icon-on-brand-hover": "var(--gray-light-alpha-12)",
"icon-on-brand-selected": "var(--gray-light-alpha-12)",
"icon-on-interactive-base": "var(--gray-light-1)",
"icon-on-brand-base": "#0000008f",
"icon-on-brand-hover": "#000000e8",
"icon-on-brand-selected": "#000000e8",
"icon-on-interactive-base": "#fcfcfc",
"icon-agent-plan-base": "var(--purple-light-9)",
"icon-agent-docs-base": "var(--amber-light-9)",
"icon-agent-ask-base": "var(--cyan-light-9)",
@@ -246,14 +246,9 @@
"markdown-image-text": "#318795",
"markdown-code-block": "#1a1a1a",
"border-color": "#ffffff",
"border-weaker-base": "var(--gray-light-alpha-3)",
"border-weaker-hover": "var(--gray-light-alpha-4)",
"border-weaker-active": "var(--gray-light-alpha-6)",
"border-weaker-selected": "var(--cobalt-light-alpha-4)",
"border-weaker-disabled": "var(--gray-light-alpha-2)",
"border-weaker-focus": "var(--gray-light-alpha-6)",
"button-ghost-hover": "var(--gray-light-alpha-2)",
"button-ghost-hover2": "var(--gray-light-alpha-3)",
"border-weaker-base": "#efefef",
"button-ghost-hover": "#00000008",
"button-ghost-hover2": "#0000000d",
"avatar-background-pink": "#feeef8",
"avatar-background-mint": "#e1fbf4",
"avatar-background-orange": "#fff1e7",
@@ -270,7 +265,7 @@
},
"dark": {
"seeds": {
"neutral": "#716c6b",
"neutral": "#707070",
"primary": "#fab283",
"success": "#12c905",
"warning": "#fcd53a",
@@ -281,33 +276,33 @@
"diffDelete": "#fc533a"
},
"overrides": {
"base": "var(--gray-dark-alpha-2)",
"base2": "var(--gray-dark-alpha-2)",
"base3": "var(--gray-dark-alpha-2)",
"base": "#ffffff08",
"base2": "#ffffff08",
"base3": "#ffffff08",
"background-base": "#101010",
"background-weak": "#1E1E1E",
"background-strong": "#121212",
"background-stronger": "#151515",
"surface-base": "var(--gray-dark-alpha-2)",
"surface-base": "#ffffff08",
"surface-base-hover": "#FFFFFF0A",
"surface-base-active": "var(--gray-dark-alpha-3)",
"surface-base-active": "#ffffff0f",
"surface-base-interactive-active": "var(--cobalt-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(--gray-dark-alpha-3)",
"surface-float-base": "var(--gray-dark-1)",
"surface-float-base-hover": "var(--gray-dark-2)",
"surface-raised-base-hover": "var(--gray-dark-alpha-4)",
"surface-raised-base-active": "var(--gray-dark-alpha-5)",
"surface-raised-strong": "var(--gray-dark-alpha-4)",
"surface-raised-strong-hover": "var(--gray-dark-alpha-6)",
"surface-raised-stronger": "var(--gray-dark-alpha-6)",
"surface-raised-stronger-hover": "var(--gray-dark-alpha-7)",
"surface-weak": "var(--gray-dark-alpha-4)",
"surface-weaker": "var(--gray-dark-alpha-5)",
"surface-strong": "var(--gray-dark-alpha-7)",
"surface-inset-base": "#0000007f",
"surface-inset-base-hover": "#0000007f",
"surface-inset-strong": "#000000cc",
"surface-inset-strong-hover": "#000000cc",
"surface-raised-base": "#ffffff0f",
"surface-float-base": "#161616",
"surface-float-base-hover": "#1c1c1c",
"surface-raised-base-hover": "#ffffff14",
"surface-raised-base-active": "#ffffff1a",
"surface-raised-strong": "#ffffff14",
"surface-raised-strong-hover": "#ffffff21",
"surface-raised-stronger": "#ffffff21",
"surface-raised-stronger-hover": "#ffffff2b",
"surface-weak": "#ffffff14",
"surface-weaker": "#ffffff1a",
"surface-strong": "#ffffff2b",
"surface-raised-stronger-non-alpha": "#1B1B1B",
"surface-brand-base": "var(--yuzu-light-9)",
"surface-brand-hover": "var(--yuzu-light-10)",
@@ -327,8 +322,8 @@
"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(--gray-dark-1)",
"surface-diff-skip-base": "var(--gray-dark-alpha-1)",
"surface-diff-unchanged-base": "#161616",
"surface-diff-skip-base": "#00000000",
"surface-diff-hidden-base": "var(--blue-dark-2)",
"surface-diff-hidden-weak": "var(--blue-dark-1)",
"surface-diff-hidden-weaker": "var(--blue-dark-3)",
@@ -344,64 +339,64 @@
"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(--gray-dark-2)",
"input-hover": "var(--gray-dark-2)",
"input-base": "#1c1c1c",
"input-hover": "#1c1c1c",
"input-active": "var(--cobalt-dark-1)",
"input-selected": "var(--cobalt-dark-2)",
"input-focus": "var(--cobalt-dark-1)",
"input-disabled": "var(--gray-dark-4)",
"text-base": "var(--gray-dark-alpha-11)",
"text-weak": "var(--gray-dark-alpha-9)",
"text-weaker": "var(--gray-dark-alpha-8)",
"text-strong": "var(--gray-dark-alpha-12)",
"text-invert-base": "var(--gray-dark-alpha-11)",
"text-invert-weak": "var(--gray-dark-alpha-9)",
"text-invert-weaker": "var(--gray-dark-alpha-8)",
"text-invert-strong": "var(--gray-dark-alpha-12)",
"input-disabled": "#282828",
"text-base": "#ffffff96",
"text-weak": "#ffffff63",
"text-weaker": "#ffffff40",
"text-strong": "#ffffffeb",
"text-invert-base": "#ffffff96",
"text-invert-weak": "#ffffff63",
"text-invert-weaker": "#ffffff40",
"text-invert-strong": "#ffffffeb",
"text-interactive-base": "var(--cobalt-dark-11)",
"text-on-brand-base": "var(--gray-dark-alpha-11)",
"text-on-interactive-base": "var(--gray-dark-12)",
"text-on-interactive-weak": "var(--gray-dark-alpha-11)",
"text-on-brand-base": "#ffffff96",
"text-on-interactive-base": "#ededed",
"text-on-interactive-weak": "#ffffff96",
"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(--gray-dark-alpha-11)",
"text-on-info-base": "var(--gray-dark-alpha-11)",
"text-on-warning-base": "#ffffff96",
"text-on-info-base": "#ffffff96",
"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(--gray-dark-alpha-9)",
"text-on-info-strong": "var(--gray-dark-alpha-12)",
"text-on-warning-weak": "var(--gray-dark-alpha-9)",
"text-on-warning-strong": "var(--gray-dark-alpha-12)",
"text-on-info-weak": "#ffffff63",
"text-on-info-strong": "#ffffffeb",
"text-on-warning-weak": "#ffffff63",
"text-on-warning-strong": "#ffffffeb",
"text-on-success-weak": "var(--apple-dark-8)",
"text-on-success-strong": "var(--apple-dark-12)",
"text-on-brand-weak": "var(--gray-dark-alpha-9)",
"text-on-brand-weaker": "var(--gray-dark-alpha-8)",
"text-on-brand-strong": "var(--gray-dark-alpha-12)",
"button-primary-base": "var(--gray-dark-12)",
"button-secondary-base": "var(--gray-dark-2)",
"text-on-brand-weak": "#ffffff63",
"text-on-brand-weaker": "#ffffff40",
"text-on-brand-strong": "#ffffffeb",
"button-primary-base": "#ededed",
"button-secondary-base": "#1c1c1c",
"button-secondary-hover": "#FFFFFF0A",
"border-base": "var(--gray-dark-alpha-7)",
"border-hover": "var(--gray-dark-alpha-8)",
"border-active": "var(--gray-dark-alpha-9)",
"border-base": "#ffffff2b",
"border-hover": "#ffffff40",
"border-active": "#ffffff63",
"border-selected": "var(--cobalt-dark-alpha-11)",
"border-disabled": "var(--gray-dark-alpha-8)",
"border-focus": "var(--gray-dark-alpha-9)",
"border-weak-base": "var(--gray-dark-alpha-5)",
"border-weak-hover": "var(--gray-dark-alpha-7)",
"border-weak-active": "var(--gray-dark-alpha-8)",
"border-disabled": "#ffffff40",
"border-focus": "#ffffff63",
"border-weak-base": "#282828",
"border-weak-hover": "#ffffff2b",
"border-weak-active": "#ffffff40",
"border-weak-selected": "var(--cobalt-dark-alpha-6)",
"border-weak-disabled": "var(--gray-dark-alpha-6)",
"border-weak-focus": "var(--gray-dark-alpha-8)",
"border-strong-base": "var(--gray-dark-alpha-8)",
"border-weak-disabled": "#ffffff21",
"border-weak-focus": "#ffffff40",
"border-strong-base": "#ffffff40",
"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(--gray-light-8)",
"border-interactive-disabled": "#c7c7c7",
"border-interactive-focus": "var(--cobalt-light-9)",
"border-success-base": "var(--apple-light-6)",
"border-success-hover": "var(--apple-light-7)",
@@ -415,24 +410,24 @@
"border-info-base": "var(--lilac-light-6)",
"border-info-hover": "var(--lilac-light-7)",
"border-info-selected": "var(--lilac-light-9)",
"icon-base": "var(--gray-dark-10)",
"icon-hover": "var(--gray-dark-11)",
"icon-active": "var(--gray-dark-12)",
"icon-selected": "var(--gray-dark-12)",
"icon-disabled": "var(--gray-dark-8)",
"icon-focus": "var(--gray-dark-12)",
"icon-invert-base": "var(--gray-dark-1)",
"icon-weak-base": "var(--gray-dark-6)",
"icon-weak-hover": "var(--gray-light-7)",
"icon-weak-active": "var(--gray-light-8)",
"icon-weak-selected": "var(--gray-light-9)",
"icon-weak-disabled": "var(--gray-light-4)",
"icon-weak-focus": "var(--gray-light-9)",
"icon-strong-base": "var(--gray-dark-12)",
"icon-base": "#7e7e7e",
"icon-hover": "#a0a0a0",
"icon-active": "#ededed",
"icon-selected": "#ededed",
"icon-disabled": "#505050",
"icon-focus": "#ededed",
"icon-invert-base": "#161616",
"icon-weak-base": "#343434",
"icon-weak-hover": "#dbdbdb",
"icon-weak-active": "#c7c7c7",
"icon-weak-selected": "#8f8f8f",
"icon-weak-disabled": "#ededed",
"icon-weak-focus": "#8f8f8f",
"icon-strong-base": "#ededed",
"icon-strong-hover": "#F3F3F3",
"icon-strong-active": "#EBEBEB",
"icon-strong-selected": "#FCFCFC",
"icon-strong-disabled": "var(--gray-dark-7)",
"icon-strong-disabled": "#3e3e3e",
"icon-strong-focus": "#FCFCFC",
"icon-brand-base": "var(--white)",
"icon-interactive-base": "var(--cobalt-dark-11)",
@@ -448,10 +443,10 @@
"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(--gray-light-alpha-11)",
"icon-on-brand-hover": "var(--gray-light-alpha-12)",
"icon-on-brand-selected": "var(--gray-light-alpha-12)",
"icon-on-interactive-base": "var(--gray-dark-12)",
"icon-on-brand-base": "#0000008f",
"icon-on-brand-hover": "#000000e8",
"icon-on-brand-selected": "#000000e8",
"icon-on-interactive-base": "#ededed",
"icon-agent-plan-base": "var(--purple-dark-9)",
"icon-agent-docs-base": "var(--amber-dark-9)",
"icon-agent-ask-base": "var(--cyan-dark-9)",
@@ -507,14 +502,9 @@
"markdown-image-text": "#56b6c2",
"markdown-code-block": "#eeeeee",
"border-color": "#ffffff",
"border-weaker-base": "var(--gray-dark-alpha-3)",
"border-weaker-hover": "var(--gray-dark-alpha-4)",
"border-weaker-active": "var(--gray-dark-alpha-6)",
"border-weaker-selected": "var(--cobalt-dark-alpha-3)",
"border-weaker-disabled": "var(--gray-dark-alpha-2)",
"border-weaker-focus": "var(--gray-dark-alpha-6)",
"button-ghost-hover": "var(--gray-dark-alpha-2)",
"button-ghost-hover2": "var(--gray-dark-alpha-3)",
"border-weaker-base": "#1e1e1e",
"button-ghost-hover": "#ffffff08",
"button-ghost-hover2": "#ffffff0f",
"avatar-background-pink": "#501b3f",
"avatar-background-mint": "#033a34",
"avatar-background-orange": "#5f2a06",