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

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

2 files changed, 9 insertions, 24 deletions

diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index 376cd35d3..adbe925f6 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -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);
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 832b43ec7..2637b4a28 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -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;