@xingwangzhe/stalux 1.28.4 → 1.29.0

package/src/styles/components/posts/postSidebar.module.css

@@ -30,11 +30,13 @@
 .sidebarContainer {
     display: flex;
     flex-direction: column;
-    background: var(--black-10p);
-    border-radius: var(--radius-lg);
+    background: var(--surface-glass);
+    border-radius: 14px;
     padding: var(--space-md);
-    box-shadow: var(--shadow-sidebar);
-    transition: all var(--transition-normal) ease;
+    box-shadow: var(--surface-glass-shadow);
+    transition:
+        box-shadow 220ms ease,
+        background-color 220ms ease;
 }
 
 @media (max-width: 1400px) {

package/src/styles/components/posts/waline.css

@@ -1,5 +1,5 @@
 :root {
-    --waline-accent-rgb: 100, 255, 218;
+    --waline-accent-rgb: var(--stalux-accent-rgb);
 }
 
 /* 评论区容器与博客风格一致 */
@@ -8,9 +8,8 @@
     margin-bottom: 1rem;
     padding: 2rem;
     border-radius: 12px;
-    animation: fadeInUpComment 0.8s ease-in-out forwards;
-    opacity: 0;
-    animation-delay: 0.3s;
+    animation: fadeInUpComment 0.35s ease-out both;
+    animation-delay: 0.08s;
 }
 
 /* 评论区标题样式与博客风格一致 */

package/src/styles/components/words/wordCard.module.css

@@ -1,9 +1,10 @@
 .card {
     width: 100%;
-    background: var(--white-10p);
+    box-sizing: border-box;
+    background: var(--surface-glass);
     border-radius: var(--radius-lg, 12px);
     padding: 1.5rem;
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-sidebar);
     transition:
         transform var(--transition-normal) ease,
         box-shadow var(--transition-normal) ease;
@@ -12,9 +13,14 @@
     gap: 0.75rem;
 }
 
+.body :global(.expressive-code) {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
 .card:hover {
     transform: translateY(-4px);
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-raised-hover);
 }
 
 /* 被 hash 定位的卡片 — 主题光晕 */

package/src/styles/components/words/wordList.module.css

@@ -12,19 +12,6 @@
     width: 100%;
     max-width: 900px;
     display: flex;
-    animation: fadeInUp 0.5s ease forwards;
-    opacity: 0;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
 @media (max-width: 768px) {

package/src/styles/shared/view-transitions.css

@@ -1,52 +1,36 @@
-/* 页面外壳的路由专属入场动画；列表和卡片继续使用各自的 stagger。 */
-@keyframes stalux-sidebar-left-out {
-    from {
-        opacity: 1;
-        transform: translateX(0);
-    }
+/* Keep route motion on the page shell; named child elements handle continuity. */
+@keyframes stalux-page-exit {
     to {
         opacity: 0;
-        transform: translateX(-34px);
     }
 }
 
-@keyframes stalux-sidebar-left-in {
+@keyframes stalux-page-enter {
     from {
         opacity: 0;
-        transform: translateX(-34px);
+        transform: translateY(9px);
     }
     to {
         opacity: 1;
-        transform: translateX(0);
+        transform: translateY(0);
     }
 }
 
-@keyframes stalux-sidebar-left-back-in {
+@keyframes stalux-page-enter-back {
     from {
         opacity: 0;
-        transform: translateX(34px);
+        transform: translateY(-9px);
     }
     to {
         opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes stalux-sidebar-left-back-out {
-    from {
-        opacity: 1;
-        transform: translateX(0);
-    }
-    to {
-        opacity: 0;
-        transform: translateX(34px);
+        transform: translateY(0);
     }
 }
 
-@keyframes stalux-sidebar-right-in {
+@keyframes stalux-taxonomy-enter {
     from {
         opacity: 0;
-        transform: translateX(34px);
+        transform: translateX(12px);
     }
     to {
         opacity: 1;
@@ -54,10 +38,10 @@
     }
 }
 
-@keyframes stalux-sidebar-right-back-in {
+@keyframes stalux-taxonomy-enter-back {
     from {
         opacity: 0;
-        transform: translateX(-34px);
+        transform: translateX(-12px);
     }
     to {
         opacity: 1;
@@ -65,74 +49,10 @@
     }
 }
 
-@keyframes stalux-sidebar-right-out {
+@keyframes stalux-article-enter {
     from {
-        opacity: 1;
-        transform: translateX(0);
-    }
-    to {
         opacity: 0;
-        transform: translateX(34px);
-    }
-}
-
-@keyframes stalux-sidebar-right-back-out {
-    from {
-        opacity: 1;
-        transform: translateX(0);
-    }
-    to {
-        opacity: 0;
-        transform: translateX(-34px);
-    }
-}
-
-@keyframes stalux-page-fade-out {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes stalux-page-home-in {
-    from {
-        opacity: 0;
-        transform: scale(0.98);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes stalux-page-home-back-in {
-    from {
-        opacity: 0;
-        transform: scale(1.02);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes stalux-page-vertical-in {
-    from {
-        opacity: 0;
-        transform: translateY(14px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-page-vertical-back-in {
-    from {
-        opacity: 0;
-        transform: translateY(-14px);
+        transform: translateY(6px);
     }
     to {
         opacity: 1;
@@ -140,54 +60,10 @@
     }
 }
 
-@keyframes stalux-page-grid-in {
-    from {
-        opacity: 0;
-        transform: translateY(8px) scale(0.975);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-@keyframes stalux-page-category-grid-in {
-    from {
-        opacity: 0;
-        transform: translateY(8px) scale(0.975);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-@keyframes stalux-page-grid-back-in {
+@keyframes stalux-article-enter-back {
     from {
         opacity: 0;
-        transform: translateY(-8px) scale(0.985);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-@keyframes stalux-page-category-grid-back-in {
-    from {
-        opacity: 0;
-        transform: translateY(-8px) scale(0.985);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-@keyframes stalux-page-rise-in {
-    from {
-        opacity: 0;
-        transform: translateY(18px);
+        transform: translateY(-6px);
     }
     to {
         opacity: 1;
@@ -195,76 +71,46 @@
     }
 }
 
-@keyframes stalux-page-rise-back-in {
+@keyframes stalux-sidebar-left-in {
     from {
         opacity: 0;
-        transform: translateY(-18px);
+        transform: translateX(-14px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translateX(0);
     }
 }
 
-@keyframes stalux-page-content-in {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
+@keyframes stalux-sidebar-left-out {
     to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-page-content-back-in {
-    from {
         opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+        transform: translateX(-10px);
     }
 }
 
-@keyframes stalux-page-tag-cloud-in {
+@keyframes stalux-sidebar-left-back-in {
     from {
         opacity: 0;
-        transform: scale(0.985);
+        transform: translateX(14px);
     }
     to {
         opacity: 1;
-        transform: scale(1);
+        transform: translateX(0);
     }
 }
 
-@keyframes stalux-page-tag-cloud-back-in {
-    from {
-        opacity: 0;
-        transform: scale(1.015);
-    }
+@keyframes stalux-sidebar-left-back-out {
     to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-@keyframes stalux-page-from-right-in {
-    from {
         opacity: 0;
-        transform: translateX(22px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
+        transform: translateX(10px);
     }
 }
 
-@keyframes stalux-page-from-left-in {
+@keyframes stalux-sidebar-right-in {
     from {
         opacity: 0;
-        transform: translateX(-22px);
+        transform: translateX(14px);
     }
     to {
         opacity: 1;
@@ -272,65 +118,28 @@
     }
 }
 
-@keyframes stalux-page-article-in {
-    from {
-        opacity: 0;
-        transform: translateY(6px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-page-article-back-in {
-    from {
-        opacity: 0;
-        transform: translateY(-6px);
-    }
+@keyframes stalux-sidebar-right-out {
     to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes stalux-page-error-in {
-    from {
         opacity: 0;
-        transform: scale(0.97);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
+        transform: translateX(10px);
     }
 }
 
-@keyframes stalux-page-error-back-in {
+@keyframes stalux-sidebar-right-back-in {
     from {
         opacity: 0;
-        transform: scale(0.97);
+        transform: translateX(-14px);
     }
     to {
         opacity: 1;
-        transform: scale(1);
+        transform: translateX(0);
     }
 }
 
-@keyframes stalux-page-fade-in {
-    from {
-        opacity: 0;
-    }
+@keyframes stalux-sidebar-right-back-out {
     to {
-        opacity: 1;
-    }
-}
-
-@keyframes stalux-page-fade-back-in {
-    from {
         opacity: 0;
-    }
-    to {
-        opacity: 1;
+        transform: translateX(-10px);
     }
 }
 
@@ -343,14 +152,25 @@
     transform-origin: center top;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    ::view-transition-group(stalux-page),
-    ::view-transition-old(stalux-page),
-    ::view-transition-new(stalux-page) {
-        animation: none !important;
-    }
+::view-transition-group(*) {
+    animation-duration: 240ms;
+    animation-timing-function: cubic-bezier(0.22, 0.72, 0.22, 1);
+}
 
-    .stalux-main {
-        animation: none !important;
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation-duration: 1ms !important;
+        animation-delay: 0ms !important;
+    }
+
+    .stalux-main,
+    .stalux-main *,
+    .postLayout * {
+        animation-duration: 1ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 1ms !important;
+        scroll-behavior: auto !important;
     }
 }

package/src/utils/accent-color.ts

@@ -0,0 +1,24 @@
+const ACCENT_COLOR_PATTERN = /^#[\da-fA-F]{6}$/;
+
+const ACCENT_OPACITIES = [90, 85, 80, 70, 60, 50, 40, 30, 20] as const;
+
+/** Build the CSS custom properties shared by Stalux and its comment styles. */
+export function getAccentColorStyle(accentColor: string): string {
+    if (!ACCENT_COLOR_PATTERN.test(accentColor)) {
+        throw new Error(`Invalid Stalux accent color "${accentColor}". Expected #RRGGBB.`);
+    }
+
+    const hex = accentColor.slice(1);
+    const red = Number.parseInt(hex.slice(0, 2), 16);
+    const green = Number.parseInt(hex.slice(2, 4), 16);
+    const blue = Number.parseInt(hex.slice(4, 6), 16);
+    const rgb = `${red}, ${green}, ${blue}`;
+
+    return [
+        `--stalux-accent-color: ${accentColor.toLowerCase()}`,
+        `--stalux-accent-rgb: ${rgb}`,
+        ...ACCENT_OPACITIES.map(
+            (opacity) => `--accent-${opacity}p: rgba(${rgb}, ${opacity / 100})`,
+        ),
+    ].join("; ");
+}

package/src/utils/view-transitions.ts

@@ -2,6 +2,16 @@ import { getRouteKind, type RouteKind } from "./public-routes";
 
 export { getRouteKind, type RouteKind };
 
+/** Stable, CSS-safe transition names for matching a post card to its title. */
+export function getPostTitleTransitionName(postId: string | number): string {
+    let hash = 2166136261;
+    for (const character of String(postId)) {
+        hash ^= character.codePointAt(0) ?? 0;
+        hash = Math.imul(hash, 16777619);
+    }
+    return `stalux-post-title-${(hash >>> 0).toString(36)}`;
+}
+
 export type TransitionAnimation = {
     name: string;
     delay?: number | string;
@@ -24,10 +34,10 @@ export type RouteAnimation = {
     };
 };
 
-const easing = "cubic-bezier(0.25, 0.9, 0.2, 1)";
+const easing = "cubic-bezier(0.22, 0.72, 0.22, 1)";
 const exitAnimation: TransitionAnimation = {
-    name: "stalux-page-fade-out",
-    duration: "0.16s",
+    name: "stalux-page-exit",
+    duration: "0.14s",
     easing,
     fillMode: "both",
 };
@@ -37,8 +47,8 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
         forwards: {
             old: exitAnimation,
             new: {
-                name: `stalux-page-${name}-in`,
-                duration: "0.2s",
+                name: `stalux-${name}`,
+                duration: "0.22s",
                 easing,
                 fillMode: "both",
             },
@@ -46,8 +56,8 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
         backwards: {
             old: exitAnimation,
             new: {
-                name: `stalux-page-${backName}-in`,
-                duration: "0.2s",
+                name: `stalux-${backName}`,
+                duration: "0.22s",
                 easing,
                 fillMode: "both",
             },
@@ -56,18 +66,18 @@ function createRouteAnimation(name: string, backName = `${name}-back`): RouteAni
 }
 
 const routeAnimations: Record<RouteKind, RouteAnimation> = {
-    home: createRouteAnimation("home", "home-back"),
-    archive: createRouteAnimation("vertical", "vertical-back"),
-    links: createRouteAnimation("grid", "grid-back"),
-    words: createRouteAnimation("rise", "rise-back"),
-    about: createRouteAnimation("content", "content-back"),
-    "tags-index": createRouteAnimation("tag-cloud", "tag-cloud-back"),
-    "tags-detail": createRouteAnimation("from-right", "from-left"),
-    "categories-index": createRouteAnimation("category-grid", "category-grid-back"),
-    "categories-detail": createRouteAnimation("from-left", "from-right"),
-    article: createRouteAnimation("article", "article-back"),
-    "not-found": createRouteAnimation("error", "error-back"),
-    other: createRouteAnimation("fade", "fade-back"),
+    home: createRouteAnimation("page-enter"),
+    archive: createRouteAnimation("page-enter"),
+    links: createRouteAnimation("page-enter"),
+    words: createRouteAnimation("page-enter"),
+    about: createRouteAnimation("page-enter"),
+    "tags-index": createRouteAnimation("page-enter"),
+    "tags-detail": createRouteAnimation("taxonomy-enter", "taxonomy-enter-back"),
+    "categories-index": createRouteAnimation("page-enter"),
+    "categories-detail": createRouteAnimation("taxonomy-enter", "taxonomy-enter-back"),
+    article: createRouteAnimation("article-enter", "article-enter-back"),
+    "not-found": createRouteAnimation("page-enter"),
+    other: createRouteAnimation("page-enter"),
 };
 
 export function getRouteAnimation(routeKind: RouteKind): RouteAnimation {
@@ -81,7 +91,7 @@ function createSidebarAnimation(
 ): TransitionAnimation {
     return {
         name: `stalux-sidebar-${side}-${backwards ? "back-" : ""}${phase}`,
-        duration: "0.8s",
+        duration: "0.22s",
         easing,
         fillMode: "both",
     };