From 320c4dc257a542c8fd271929b960bdab22cf18bb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 19 Jun 2026 22:57:48 +0000
Subject: [PATCH] refactor(ui): modern-2026 button feel, neutral scrollbar,
 sticky token

Friendly/warm direction, modernised:
- Buttons: drop the translateY lift on every variant (it read jittery and
  dated). They now rest on a soft neutral elevation, bloom their warm brand
  glow in on hover, and scale-down 0.98 for a tactile press. Motion uses the
  --motion-base / --ease-standard tokens.
- Scrollbar: neutral padded pill at rest that warms to the accent on hover,
  instead of an always-orange thumb that competed with content.
- page-sticky-header: replace the magic top: -20px (coupled to the content
  gutter) with calc(-1 * var(--space-5)); tokenise its z-index to --z-sticky.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
---
 frontend/src/lib/styles/ported/buttons.css | 32 ++++++++++++----------
 frontend/src/lib/styles/ported/content.css | 27 ++++++++++++------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/styles/ported/buttons.css b/frontend/src/lib/styles/ported/buttons.css
index 3f015274..3717c2e1 100644
--- a/frontend/src/lib/styles/ported/buttons.css
+++ b/frontend/src/lib/styles/ported/buttons.css
@@ -9,27 +9,32 @@
     font-size: var(--text-base);
     font-weight: var(--weight-medium);
     gap: var(--space-2);
-    transition: all 0.2s ease;
+    transition: all var(--motion-base) var(--ease-standard);
 }
 
 .btn i {
     font-size: 15px;
 }
 
+/* Filled buttons rest on a soft, neutral elevation; their warm brand glow
+   blooms in on hover (rather than glowing at rest), and a gentle scale-down
+   gives a tactile press. The old "translateY lift on every button" is gone —
+   vertical lift is reserved for cards now, so buttons feel calm, not jittery. */
 .btn-primary {
     background: var(--color-accent-gradient);
     color: var(--color-on-accent);
-    box-shadow: 0 4px 15px var(--color-accent-shadow);
+    box-shadow: var(--shadow-sm);
 }
 
 .btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
+    box-shadow: 0 4px 14px var(--color-accent-shadow);
+    filter: brightness(1.05);
 }
 
 .btn-primary:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px var(--color-accent-shadow);
+    transform: scale(0.98);
+    box-shadow: var(--shadow-xs);
+    filter: brightness(0.97);
 }
 
 .btn-secondary {
@@ -41,29 +46,28 @@
 .btn-secondary:hover {
     background-color: var(--color-bg-input-alt);
     border-color: var(--color-border-medium);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px var(--color-shadow-sm);
 }
 
 .btn-secondary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
     background-color: var(--color-border);
 }
 
 .btn-danger {
     background: var(--color-danger-gradient);
     color: var(--color-danger-text);
-    box-shadow: 0 4px 15px var(--color-danger-ring);
+    box-shadow: var(--shadow-sm);
 }
 
 .btn-danger:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px var(--color-danger-ring-lg);
+    box-shadow: 0 4px 14px var(--color-danger-ring);
+    filter: brightness(1.05);
 }
 
 .btn-danger:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px var(--color-danger-ring);
+    transform: scale(0.98);
+    box-shadow: var(--shadow-xs);
+    filter: brightness(0.97);
 }
 
 /* ── State matrix: focus / disabled / loading ───────────────── */
diff --git a/frontend/src/lib/styles/ported/content.css b/frontend/src/lib/styles/ported/content.css
index 7f212f33..52922fbe 100644
--- a/frontend/src/lib/styles/ported/content.css
+++ b/frontend/src/lib/styles/ported/content.css
@@ -1,18 +1,27 @@
 /* ── Scrollbar ── */
 
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 10px;
+    height: 10px;
 }
 ::-webkit-scrollbar-track {
-    background: var(--color-bg-surface);
+    background: transparent;
 }
+/* Neutral, padded pill that blends in at rest and warms to the brand accent
+   only on hover — the bar no longer competes with content for attention. */
 ::-webkit-scrollbar-thumb {
+    background: var(--color-border-medium);
+    border: 2px solid transparent;
+    border-radius: var(--radius-full);
+    background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
     background: var(--color-accent);
-    border-radius: 3px;
+    background-clip: padding-box;
 }
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-accent) var(--color-bg-surface);
+    scrollbar-color: var(--color-border-medium) transparent;
 }
 
 /* Content area */
@@ -50,11 +59,13 @@
 
 .page-sticky-header {
     position: sticky;
-    margin: 0px;
-    padding: var(--space-2-5) 0px;
-    top: -20px; /* due to padding top of content-area */
+    margin: 0;
+    padding: var(--space-2-5) 0;
+    /* Cancel .content-area's --space-5 top padding so the header sticks flush;
+       stays correct if the gutter token ever changes. */
+    top: calc(-1 * var(--space-5));
     background-color: var(--color-bg-page);
-    z-index: 100; /* ensure header is above image preview */
+    z-index: var(--z-sticky); /* ensure header is above image preview */
 }
 
 .actions-bar {