Merge pull request 'fix(visual): align tokens/cards/buttons/dark mode to Zibll' (#41) from worktree-visual-acceptance into main

Reviewed-on: CYL/wordpress-theme-aksrt#41

assets/css/core/buttons.css

@@ -22,7 +22,7 @@
   height: var(--btn-h);
   padding: 0 var(--btn-px);
   font-size: var(--text-sm);
-  font-weight: 500;
+  font-weight: normal; /* zibll .but: normal — was 500 */
   line-height: 1.44;
   border: 1px solid transparent;
   border-radius: var(--radius-btn);
@@ -31,12 +31,11 @@
   user-select: none;
   text-decoration: none;
   box-shadow: none;
-  transition: opacity var(--dur-fast) var(--ease),
+  transition: opacity 0.15s ease,
-              background var(--dur-fast) var(--ease),
+              background 0.15s ease,
-              border-color var(--dur-fast) var(--ease),
+              border-color 0.15s ease,
-              color var(--dur-fast) var(--ease),
+              color 0.15s ease,
-              box-shadow var(--dur-fast) var(--ease),
+              box-shadow 0.15s ease;
-              transform var(--dur-fast) var(--ease);
 }
 
 /* 尺寸变体 */
@@ -45,32 +44,31 @@
 
 /* === Default (gray background, like zibll .but default) === */
 .btn {
-  background: var(--surface-4, rgba(136, 136, 136, 0.1));
+  background: rgba(136, 136, 136, 0.1);
-  color: var(--color-ink-3);
+  color: #888;
   border-color: transparent;
 }
 
 .btn:hover {
-  opacity: 1;
+  opacity: 0.8;
-  background: var(--surface-2);
+  color: #888;
-  color: var(--color-ink-2);
 }
 
-/* === Primary === */
+/* === Primary — solid theme, opacity hover (no translateY / heavy glow) === */
 .btn-primary {
   background: var(--color-primary);
   color: var(--color-on-primary);
   border-color: var(--color-primary);
-  box-shadow: 0 8px 18px rgba(240, 68, 148, 0.22);
+  box-shadow: none;
 }
 
 .btn-primary:hover {
-  opacity: 1;
+  opacity: 0.8;
   color: var(--color-on-primary);
-  background: var(--color-primary-hover);
+  background: var(--color-primary);
-  border-color: var(--color-primary-hover);
+  border-color: var(--color-primary);
-  transform: translateY(-1px);
+  transform: none;
-  box-shadow: 0 12px 24px rgba(240, 68, 148, 0.28);
+  box-shadow: none;
 }
 
 .btn-primary:active {
@@ -80,16 +78,16 @@
 
 /* === Outline === */
 .btn-outline {
-  background: var(--surface-1);
+  background: transparent;
   color: var(--color-ink-2);
-  border-color: var(--color-line);
+  border-color: var(--color-ink-2);
 }
 
 .btn-outline:hover {
-  background: var(--color-primary-soft);
+  opacity: 0.8;
-  border-color: var(--color-primary);
+  background: transparent;
-  color: var(--color-primary);
+  border-color: var(--color-ink-2);
-  opacity: 1;
+  color: var(--color-ink-2);
 }
 
 /* === Ghost === */
@@ -100,8 +98,8 @@
 }
 
 .btn-ghost:hover {
-  background: var(--surface-4, rgba(136, 136, 136, 0.1));
+  background: rgba(136, 136, 136, 0.1);
-  opacity: 1;
+  opacity: 0.8;
 }
 
 /* === Danger === */

assets/css/core/tokens.css

@@ -24,13 +24,13 @@
   /* ===== Surface — 对齐 zibll --body-bg-color / --main-bg-color / --muted-bg-color ===== */
   --surface-page:          #f5f6f7;   /* zibll --body-bg-color */
   --surface-1:             #FFFFFF;   /* zibll --main-bg-color */
-  --surface-2:             #f0f2f5;   /* 更接近 zibll 柔灰底 */
+  --surface-2:             #eeeeee;   /* zibll --muted-bg-color #eee */
   --surface-3:             #e9ecef;   /* 输入框 / code / 次级面 */
   --surface-4:             #f8f8f8;   /* 分页 / 标签 / hover 薄层 */
 
   /* ===== Borders — 对齐 zibll --main-border-color ===== */
-  --color-line:            rgba(50, 50, 50, 0.08);
+  --color-line:            rgba(50, 50, 50, 0.06);
-  --color-line-soft:       rgba(0, 0, 0, 0.05);
+  --color-line-soft:       rgba(0, 0, 0, 0.03);
   --color-line-stronger:   rgba(50, 50, 50, 0.12);
 
   /* ===== State colors ===== */
@@ -84,7 +84,7 @@
   --radius-xs:    3px;
   --radius-sm:    4px;
   --radius:       8px;
-  --radius-lg:    10px;
+  --radius-lg:    8px;      /* zibll main-radius — was 10px */
   --radius-xl:    12px;
   --radius-2xl:   16px;
   --radius-pill:  100px;
@@ -93,7 +93,7 @@
   /* ===== Shadows — 对齐 zibll --main-shadow: rgba(116,116,116,0.08) ===== */
   --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.03);
   --shadow-sm:     0 0 10px rgba(116, 116, 116, 0.08);
-  --shadow:        0 6px 24px rgba(18, 18, 18, 0.06);
+  --shadow:        0 0 10px rgba(116, 116, 116, 0.12);
   --shadow-lg:     0 12px 32px rgba(18, 18, 18, 0.10);
   --shadow-drawer: 0 18px 60px rgba(0, 0, 0, 0.20);
 
@@ -294,8 +294,8 @@ body.dialog-open .float-right .float-btn {
 
 html.dark body.modal-open,
 html.dark body.dialog-open,
-body.dark-theme body.modal-open,
+body.dark-theme.modal-open,
-body.dark-theme body.dialog-open {
+body.dark-theme.dialog-open {
   --blur-bg: #37383a;
   --header-bg: #37383a;
 }
@@ -323,22 +323,24 @@ body.dark-theme body.dialog-open {
 }
 
 /* ============================================================
- * Dark Theme — 对齐 zibll .dark-theme (#292a2d 范围)
+ * Dark Theme — 对齐 zibll .dark-theme 精确 hex
+ * body.dark-theme 与 html.dark 同权（zibll 用 body class）
  * ============================================================ */
-html.dark {
+html.dark,
-  --color-ink:             #f5f5f5;
+body.dark-theme {
-  --color-ink-2:           #d7d9dd;
+  --color-ink:             #f8fafc;   /* zibll --key-color */
-  --color-ink-3:           #b0b3b8;
+  --color-ink-2:           #e5eef7;   /* zibll --main-color */
-  --color-ink-4:           #8b8e93;
+  --color-ink-3:           #b4b6bb;   /* zibll --muted-color */
+  --color-ink-4:           #888a8f;   /* zibll --muted-2-color */
 
-  --surface-page:          #1f2023;
+  --surface-page:          #292a2d;   /* zibll --body-bg-color */
-  --surface-1:             #2a2b2f;
+  --surface-1:             #323335;   /* zibll --main-bg-color */
-  --surface-2:             #32343a;
+  --surface-2:             #2d2e31;   /* zibll --muted-bg-color */
   --surface-3:             #3a3c42;
   --surface-4:             #26282d;
 
-  --color-line:            rgba(255, 255, 255, 0.08);
+  --color-line:            rgba(114, 114, 114, 0.1);
-  --color-line-soft:       rgba(255, 255, 255, 0.04);
+  --color-line-soft:       rgba(184, 184, 184, 0.02);
   --color-line-stronger:   rgba(255, 255, 255, 0.12);
 
   --color-primary-soft:    rgba(240, 68, 148, 0.16);
@@ -359,11 +361,10 @@ html.dark {
   --surface-hover:     var(--surface-2);
   --surface-secondary: var(--surface-2);
 
-  --shadow-xl:     0 18px 48px rgba(0, 0, 0, 0.42);
+  --shadow-xl:     0 0 10px rgba(24, 24, 24, 0.18);
-
   --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.18);
-  --shadow-sm:     0 6px 18px rgba(0, 0, 0, 0.20);
+  --shadow-sm:     0 0 10px rgba(24, 24, 24, 0.1);   /* zibll --main-shadow dark */
-  --shadow:        0 10px 30px rgba(0, 0, 0, 0.24);
+  --shadow:        0 0 10px rgba(24, 24, 24, 0.14);
   --shadow-lg:     0 14px 36px rgba(0, 0, 0, 0.32);
   --shadow-drawer: 0 20px 60px rgba(0, 0, 0, 0.60);
 
@@ -392,49 +393,36 @@ html.dark {
 }
 
 /* Dark mode component refinements */
-html.dark .site-nav {
+html.dark .site-nav,
+body.dark-theme .site-nav {
   border-bottom-color: var(--color-line);
   box-shadow: none;
 }
 
-html.dark .footer-tabbar {
+html.dark .footer-tabbar,
+body.dark-theme .footer-tabbar {
   background: rgba(50, 51, 53, 0.80);
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
 }
 
 html.dark .n-drawer,
 html.dark .n-modal,
-html.dark .n-dialog {
+html.dark .n-dialog,
-  background: var(--surface-1);
-}
-
-html.dark .post-card,
-html.dark .widget,
-html.dark .aksrt-theme-box,
-html.dark .theme-box {
-  border-color: var(--color-line);
-}
-
-/* body.dark-theme — zibll compatibility alias for html.dark */
-body.dark-theme .site-nav {
-  border-bottom-color: var(--color-line);
-  box-shadow: none;
-}
-
-body.dark-theme .footer-tabbar {
-  background: rgba(50, 51, 53, 0.80);
-  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
-}
-
 body.dark-theme .n-drawer,
 body.dark-theme .n-modal,
 body.dark-theme .n-dialog {
   background: var(--surface-1);
 }
 
+html.dark .post-card,
+html.dark .widget,
+html.dark .aksrt-theme-box,
+html.dark .theme-box,
+html.dark .posts-item,
 body.dark-theme .post-card,
 body.dark-theme .widget,
 body.dark-theme .aksrt-theme-box,
-body.dark-theme .theme-box {
+body.dark-theme .theme-box,
-  border-color: var(--color-line);
+body.dark-theme .posts-item {
+  border-color: transparent;
 }

assets/css/frontend/card-primitives.css

@@ -12,16 +12,15 @@
  * 对齐 zibll .theme-box + .box-bg
  * ============================================================ */
 .aksrt-theme-box {
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius, 8px);
   background: var(--surface-1);
   box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
+  transition: box-shadow 0.2s ease;
 }
 
 .aksrt-theme-box:hover {
   box-shadow: var(--shadow);
-  border-color: rgba(240, 68, 148, 0.10);
 }
 
 /* ============================================================
@@ -76,16 +75,15 @@
  * ============================================================ */
 .theme-box {
   background: var(--surface-1);
-  border: 1px solid rgba(255, 255, 255, 0.55);
+  border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius, 8px);
   box-shadow: var(--shadow-sm);
   margin-bottom: 20px;
-  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
+  transition: box-shadow 0.2s ease;
 }
 
 .theme-box:hover {
   box-shadow: var(--shadow);
-  border-color: rgba(240, 68, 148, 0.10);
 }
 
 .box-bg {
@@ -129,7 +127,7 @@ html.dark .theme-box,
 body.dark-theme .theme-box,
 html.dark .box-bg,
 body.dark-theme .box-bg {
-  border-color: var(--color-line);
+  border-color: transparent;
   box-shadow: var(--shadow-sm);
 }
 
@@ -164,3 +162,15 @@ body.dark-theme .theme-box:hover {
   box-shadow: none !important;
   transform: none !important;
 }
+
+/* ============================================================
+ * .zib-widget — zibll sidebar/widget surface
+ * ============================================================ */
+.zib-widget {
+  clear: both;
+  background-color: var(--surface-1);
+  padding: var(--card-padding);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius, 8px);
+  margin-bottom: 20px;
+}

assets/css/frontend/home-modules/product-showcase.css

@@ -10,33 +10,33 @@
 
 .aksrt-product-card {
 	background: var(--surface-1, #fff);
-	border-radius: var(--radius-lg, 10px);
+	border-radius: var(--radius, 8px);
-	border: 1px solid rgba(255, 255, 255, 0.55);
+	border: none;
 	box-shadow: var(--shadow-sm);
 	overflow: hidden;
 	text-decoration: none;
 	color: inherit;
-	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
+	transition: box-shadow 0.2s ease;
 }
 
 .aksrt-product-card:hover {
 	box-shadow: var(--shadow);
-	border-color: rgba(240, 68, 148, 0.12);
-	transform: translateY(-2px);
 }
 
 .aksrt-product-card__image img {
 	width: 100%;
-	aspect-ratio: 4/3;
+	aspect-ratio: 1 / 1;
 	object-fit: cover;
+	border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
+	display: block;
 }
 
 .aksrt-product-card__body {
-	padding: 16px;
+	padding: 15px;
 }
 
 .aksrt-product-card__title {
-	font-size: 15px;
+	font-size: 16px;
 	font-weight: 600;
 	margin: 0 0 6px;
 }

assets/css/frontend/home-modules/user-cards.css

@@ -10,18 +10,16 @@
 	flex-direction: column;
 	align-items: center;
 	text-align: center;
-	padding: 24px 18px;
+	padding: 20px 15px;
-	border-radius: var(--radius-lg);
+	border-radius: var(--radius, 8px);
-	border: 1px solid rgba(255, 255, 255, 0.55);
+	border: none;
 	background: var(--surface-1);
 	box-shadow: var(--shadow-sm);
-	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
+	transition: box-shadow 0.2s ease;
 }
 
 .home-module__user-card:hover {
-	border-color: rgba(240, 68, 148, 0.12);
 	box-shadow: var(--shadow);
-	transform: translateY(-2px);
 }
 
 .home-module__user-link {

assets/css/frontend/nav/base.css

@@ -1,11 +1,10 @@
 /* ============================================================
- * AKSRT Navigation — Editorial v3.4
+ * AKSRT Navigation — Zibll-aligned
  *
- * - 高度 60px (--nav-h)
+ * - 高度 60px (--nav-height)
- * - 字体使用 --font-ui (Inter / 思源黑体)
+ * - 毛玻璃 blur-bg（saturate(5) blur(20px)）
- * - 主色蓝调，hover 改为 primary-soft 浅底
+ * - 透明叠 slider → 滚动后恢复实底
- * - 永远实心：白底深字 + 1px 分隔线，滚动后追加 box-shadow
+ * - 滚动隐藏（scroll-down-hide 等价）
- * - 移动端：≤768 显示汉堡菜单
  * ============================================================ */
 
 .site-nav {
@@ -77,7 +76,7 @@ body.dark-theme .site-nav--blur.is-scrolled {
 
 /* 滚动后追加阴影 — 对齐 zibll .body-scroll .header */
 .site-nav.is-scrolled {
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 4px 10px var(--main-shadow, var(--shadow-sm));
 }
 
 /* WordPress Admin Bar 已全局禁用，无需偏移规则 */

assets/css/frontend/post-card.css

@@ -28,20 +28,24 @@
 .posts-item {
     padding: 20px;
     margin: 15px 0;
-    background: var(--main-bg-color, #fff);
+    background: var(--main-bg-color, var(--surface-1, #fff));
-    border: 1px solid rgba(255, 255, 255, 0.55);
+    border: none;
     overflow: hidden;
-    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
+    transition: box-shadow 0.2s ease;
-    box-shadow: var(--shadow-sm);
+    box-shadow: 0 0 10px var(--main-shadow, var(--shadow-sm));
-    border-radius: var(--radius-lg, 10px);
+    border-radius: var(--main-radius, var(--radius, 8px));
 }
 
 /* ============================================================
- * 卡片模式 .posts-item.card — 对齐 zibll line 7733
+ * hover — 对齐 zibll（仅阴影略强，无粉边 / 无抬升）
  * ============================================================ */
 .posts-item:hover {
-    box-shadow: var(--shadow);
+    box-shadow: 0 0 10px rgba(116, 116, 116, 0.14);
-    border-color: rgba(240, 68, 148, 0.10);
+}
+
+html.dark .posts-item:hover,
+body.dark-theme .posts-item:hover {
+    box-shadow: 0 0 10px rgba(24, 24, 24, 0.18);
 }
 
 .posts-item.card {