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

Co-authored-by: Adam <[email protected]>

3 files changed, 170 insertions, 195 deletions

diff --git a/packages/ui/src/theme/resolve.ts b/packages/ui/src/theme/resolve.ts
index f098e8028..e8fca4103 100644
--- a/packages/ui/src/theme/resolve.ts
+++ b/packages/ui/src/theme/resolve.ts
@@ -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]
diff --git a/packages/ui/src/theme/themes/oc-1.json b/packages/ui/src/theme/themes/oc-1.json
index 03a67ee23..132825e3f 100644
--- a/packages/ui/src/theme/themes/oc-1.json
+++ b/packages/ui/src/theme/themes/oc-1.json
@@ -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",
diff --git a/packages/ui/src/theme/themes/oc-2.json b/packages/ui/src/theme/themes/oc-2.json
index 01ec1131a..73ca57da9 100644
--- a/packages/ui/src/theme/themes/oc-2.json
+++ b/packages/ui/src/theme/themes/oc-2.json
@@ -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",