@xingwangzhe/stalux 1.34.0 → 1.35.1

package/src/internal/style-names.generated.ts

@@ -0,0 +1,353 @@
+// Generated by scripts/build-style-names.ts. Production names are version-local.
+export const styleNames: { classes: Record<string, string>; variables: Record<string, string>; animations: Record<string, string> } = {
+    "classes": {
+        "a-none": "s0",
+        "agent-home-summary": "s1",
+        "agent-recovery": "s2",
+        "badge-group": "s3",
+        "bg-a": "s4",
+        "bg-b": "s5",
+        "bg-layer": "s6",
+        "date-time": "s7",
+        "home-btn": "s8",
+        "nav-icon": "s9",
+        "postLayout": "sa",
+        "random-post-item": "sb",
+        "random-post-link": "sc",
+        "stagger-children": "sd",
+        "stalux-404-countdown-text": "se",
+        "stalux-404-error-container": "sf",
+        "stalux-404-error-content": "sg",
+        "stalux-404-home-btn": "sh",
+        "stalux-ai-prompt": "si",
+        "stalux-archive-container": "sj",
+        "stalux-archive-description": "sk",
+        "stalux-archive-month-section": "sl",
+        "stalux-archive-month-title": "sm",
+        "stalux-archive-no-posts": "sn",
+        "stalux-archive-page-header": "so",
+        "stalux-archive-post-date": "sp",
+        "stalux-archive-post-item": "sq",
+        "stalux-archive-post-link": "sr",
+        "stalux-archive-post-list": "ss",
+        "stalux-archive-timeline-container": "st",
+        "stalux-archive-year-count": "su",
+        "stalux-archive-year-header": "sv",
+        "stalux-archive-year-section": "sw",
+        "stalux-archive-year-title": "sx",
+        "stalux-archives-archives-container": "sy",
+        "stalux-article": "sz",
+        "stalux-article-summary": "s10",
+        "stalux-article-summary-label": "s11",
+        "stalux-article-summary-text": "s12",
+        "stalux-author": "s13",
+        "stalux-author-figure": "s14",
+        "stalux-author-figure-column": "s15",
+        "stalux-back-to-top": "s16",
+        "stalux-badge": "s17",
+        "stalux-badge-group": "s18",
+        "stalux-badge-group-arrow": "s19",
+        "stalux-badge-group-hint": "s1a",
+        "stalux-badge-group-items": "s1b",
+        "stalux-badge-group-summary": "s1c",
+        "stalux-badge-group-title": "s1d",
+        "stalux-badges": "s1e",
+        "stalux-badges-wrapper": "s1f",
+        "stalux-beian-beian-info": "s1g",
+        "stalux-beian-public-security-beian": "s1h",
+        "stalux-byline-author-bio": "s1i",
+        "stalux-byline-author-card": "s1j",
+        "stalux-byline-author-section": "s1k",
+        "stalux-byline-sidebar-container": "s1l",
+        "stalux-card-post-categories": "s1m",
+        "stalux-card-post-category": "s1n",
+        "stalux-card-post-cover": "s1o",
+        "stalux-card-post-date": "s1p",
+        "stalux-card-post-description": "s1q",
+        "stalux-card-post-meta": "s1r",
+        "stalux-card-post-tag": "s1s",
+        "stalux-card-post-tags": "s1t",
+        "stalux-card-post-title": "s1u",
+        "stalux-card-post-updated": "s1v",
+        "stalux-card-read-more": "s1w",
+        "stalux-card-time": "s1x",
+        "stalux-categories": "s1y",
+        "stalux-category-card": "s1z",
+        "stalux-category-content": "s20",
+        "stalux-category-icon": "s21",
+        "stalux-category-shell": "s22",
+        "stalux-categoryheader": "s23",
+        "stalux-cloud-canvas": "s24",
+        "stalux-cloud-canvas-frame": "s25",
+        "stalux-cloud-cards": "s26",
+        "stalux-cloud-no-tags": "s27",
+        "stalux-cloud-tag-card": "s28",
+        "stalux-cloud-tag-count": "s29",
+        "stalux-cloud-tag-group": "s2a",
+        "stalux-cloud-tag-name": "s2b",
+        "stalux-copyright": "s2c",
+        "stalux-footer": "s2d",
+        "stalux-footer-content": "s2e",
+        "stalux-home-body": "s2f",
+        "stalux-home-navs": "s2g",
+        "stalux-home-title": "s2h",
+        "stalux-license-author": "s2i",
+        "stalux-license-box": "s2j",
+        "stalux-license-content": "s2k",
+        "stalux-license-icon": "s2l",
+        "stalux-license-license": "s2m",
+        "stalux-license-title": "s2n",
+        "stalux-license-url": "s2o",
+        "stalux-license-watermark": "s2p",
+        "stalux-link-card": "s2q",
+        "stalux-link-card-avatar": "s2r",
+        "stalux-link-card-content": "s2s",
+        "stalux-link-card-description": "s2t",
+        "stalux-link-card-title": "s2u",
+        "stalux-link-list-item": "s2v",
+        "stalux-link-shell": "s2w",
+        "stalux-links": "s2x",
+        "stalux-main": "s2y",
+        "stalux-nav-container": "s2z",
+        "stalux-nav-item": "s30",
+        "stalux-nav-link": "s31",
+        "stalux-nav-list": "s32",
+        "stalux-nav-overlay": "s33",
+        "stalux-nav-scroll-btn": "s34",
+        "stalux-nav-text": "s35",
+        "stalux-nav-toggle": "s36",
+        "stalux-page-description": "s37",
+        "stalux-page-title": "s38",
+        "stalux-pagination": "s39",
+        "stalux-pagination-arrow": "s3a",
+        "stalux-pagination-content": "s3b",
+        "stalux-pagination-disabled": "s3c",
+        "stalux-pagination-inner": "s3d",
+        "stalux-pagination-label": "s3e",
+        "stalux-pagination-link": "s3f",
+        "stalux-pagination-next-post": "s3g",
+        "stalux-pagination-prev-post": "s3h",
+        "stalux-pagination-title": "s3i",
+        "stalux-post-article-footer": "s3j",
+        "stalux-post-article-header": "s3k",
+        "stalux-post-body": "s3l",
+        "stalux-post-card": "s3m",
+        "stalux-post-card-shell": "s3n",
+        "stalux-post-footer-content": "s3o",
+        "stalux-post-layout": "s3p",
+        "stalux-post-list-container": "s3q",
+        "stalux-post-meta-item": "s3r",
+        "stalux-post-meta-row": "s3s",
+        "stalux-post-metadata": "s3t",
+        "stalux-post-page": "s3u",
+        "stalux-post-page-stats": "s3v",
+        "stalux-post-reading-time": "s3w",
+        "stalux-post-source-link": "s3x",
+        "stalux-post-source-link-row": "s3y",
+        "stalux-post-taxonomy-container": "s3z",
+        "stalux-post-taxonomy-empty": "s40",
+        "stalux-post-taxonomy-item-column": "s41",
+        "stalux-post-taxonomy-item-pill": "s42",
+        "stalux-post-taxonomy-list": "s43",
+        "stalux-post-taxonomy-list-column": "s44",
+        "stalux-post-taxonomy-list-wrap": "s45",
+        "stalux-post-taxonomy-title": "s46",
+        "stalux-post-title": "s47",
+        "stalux-prose": "s48",
+        "stalux-random-container": "s49",
+        "stalux-random-error": "s4a",
+        "stalux-random-header": "s4b",
+        "stalux-random-list": "s4c",
+        "stalux-random-loading": "s4d",
+        "stalux-random-no-more": "s4e",
+        "stalux-random-refresh": "s4f",
+        "stalux-random-rotating": "s4g",
+        "stalux-random-title": "s4h",
+        "stalux-root": "s4i",
+        "stalux-sidebar": "s4j",
+        "stalux-sidebar-container": "s4k",
+        "stalux-sidebar-right": "s4l",
+        "stalux-social": "s4m",
+        "stalux-social-custom-icon": "s4n",
+        "stalux-social-icon-container": "s4o",
+        "stalux-stats-site-build-time": "s4p",
+        "stalux-stats-site-stats": "s4q",
+        "stalux-stats-stats-separator": "s4r",
+        "stalux-tag-back-link": "s4s",
+        "stalux-tag-category-icon": "s4t",
+        "stalux-tag-category-name": "s4u",
+        "stalux-tag-header": "s4v",
+        "stalux-tag-page-description": "s4w",
+        "stalux-tag-page-title": "s4x",
+        "stalux-theme-info": "s4y",
+        "stalux-toc-active": "s4z",
+        "stalux-toc-depth-1": "s50",
+        "stalux-toc-depth-2": "s51",
+        "stalux-toc-depth-3": "s52",
+        "stalux-toc-depth-4": "s53",
+        "stalux-toc-depth-5": "s54",
+        "stalux-toc-depth-6": "s55",
+        "stalux-toc-empty": "s56",
+        "stalux-toc-item": "s57",
+        "stalux-toc-list": "s58",
+        "stalux-toc-title": "s59",
+        "stalux-typewriter": "s5a",
+        "stalux-typewriter-accessible": "s5b",
+        "stalux-typewriter-text": "s5c",
+        "stalux-u-flex": "s5d",
+        "stalux-u-flex-col": "s5e",
+        "stalux-u-flex-wrap": "s5f",
+        "stalux-u-items-center": "s5g",
+        "stalux-u-justify-center": "s5h",
+        "stalux-u-min-w-0": "s5i",
+        "stalux-u-text-center": "s5j",
+        "stalux-u-w-full": "s5k",
+        "stalux-weather": "s5l",
+        "stalux-weather-footer": "s5m",
+        "stalux-weather-heading": "s5n",
+        "stalux-weather-location": "s5o",
+        "stalux-weather-main": "s5p",
+        "stalux-weather-source": "s5q",
+        "stalux-weather-status": "s5r",
+        "stalux-word-body": "s5s",
+        "stalux-word-card": "s5t",
+        "stalux-word-date": "s5u",
+        "stalux-word-footer": "s5v",
+        "stalux-word-list-item": "s5w",
+        "stalux-word-list-list": "s5x",
+        "stalux-word-source-date": "s5y",
+        "stalux-word-source-link": "s5z",
+        "stalux-word-source-meta": "s60",
+        "stalux-word-source-text": "s61"
+    },
+    "variables": {
+        "--accent-20p": "--s0",
+        "--accent-30p": "--s1",
+        "--accent-40p": "--s2",
+        "--accent-50p": "--s3",
+        "--accent-60p": "--s4",
+        "--accent-70p": "--s5",
+        "--accent-80p": "--s6",
+        "--accent-85p": "--s7",
+        "--accent-90p": "--s8",
+        "--archive-estimate": "--s9",
+        "--archive-group-estimate": "--sa",
+        "--black-05p": "--sb",
+        "--black-10p": "--sc",
+        "--black-15p": "--sd",
+        "--black-20p": "--se",
+        "--black-30p": "--sf",
+        "--border-medium": "--sg",
+        "--border-thick": "--sh",
+        "--border-thin": "--si",
+        "--card-bg": "--sj",
+        "--card-border": "--sk",
+        "--card-box-shadow": "--sl",
+        "--card-box-shadow-hover": "--sm",
+        "--category-bg": "--sn",
+        "--category-bg-hover": "--so",
+        "--cloud-base-diameter": "--sp",
+        "--cloud-density": "--sq",
+        "--date-bg": "--sr",
+        "--date-border": "--ss",
+        "--dot": "--st",
+        "--easing-bounce": "--su",
+        "--font-size-base": "--sv",
+        "--font-size-small": "--sw",
+        "--font-size-smaller": "--sx",
+        "--font-size-subtitle": "--sy",
+        "--font-size-tiny": "--sz",
+        "--muted-text": "--s10",
+        "--nav-scale": "--s11",
+        "--radius-full": "--s12",
+        "--radius-lg": "--s13",
+        "--radius-md": "--s14",
+        "--radius-sm": "--s15",
+        "--shadow-dark": "--s16",
+        "--shadow-lg": "--s17",
+        "--shadow-md": "--s18",
+        "--shadow-raised-hover": "--s19",
+        "--shadow-sidebar": "--s1a",
+        "--shadow-sm": "--s1b",
+        "--shadow-xl": "--s1c",
+        "--space-2xl": "--s1d",
+        "--space-2xs": "--s1e",
+        "--space-3xl": "--s1f",
+        "--space-lg": "--s1g",
+        "--space-md": "--s1h",
+        "--space-sm": "--s1i",
+        "--space-xl": "--s1j",
+        "--space-xs": "--s1k",
+        "--stalux-accent-color": "--s1l",
+        "--stalux-accent-rgb": "--s1m",
+        "--stalux-bg-color": "--s1n",
+        "--stalux-bg-filter": "--s1o",
+        "--stalux-text-shadow": "--s1p",
+        "--surface-glass": "--s1q",
+        "--surface-glass-shadow": "--s1r",
+        "--tag-bg": "--s1s",
+        "--tag-bg-hover": "--s1t",
+        "--tl-line": "--s1u",
+        "--tl-pad": "--s1v",
+        "--transition-fast": "--s1w",
+        "--transition-medium": "--s1x",
+        "--transition-normal": "--s1y",
+        "--transition-slow": "--s1z",
+        "--transition-slower": "--s20",
+        "--transition-slowest": "--s21",
+        "--un-rotate": "--s22",
+        "--un-rotate-x": "--s23",
+        "--un-rotate-y": "--s24",
+        "--un-rotate-z": "--s25",
+        "--un-scale-x": "--s26",
+        "--un-scale-y": "--s27",
+        "--un-scale-z": "--s28",
+        "--un-skew-x": "--s29",
+        "--un-skew-y": "--s2a",
+        "--un-translate-x": "--s2b",
+        "--un-translate-y": "--s2c",
+        "--un-translate-z": "--s2d",
+        "--updated-bg": "--s2e",
+        "--updated-border": "--s2f",
+        "--white-05p": "--s2g",
+        "--white-10p": "--s2h",
+        "--white-15p": "--s2i",
+        "--white-20p": "--s2j",
+        "--white-30p": "--s2k",
+        "--white-50p": "--s2l",
+        "--white-60p": "--s2m",
+        "--white-70p": "--s2n",
+        "--white-75p": "--s2o",
+        "--white-78p": "--s2p",
+        "--white-80p": "--s2q",
+        "--white-85p": "--s2r",
+        "--white-90p": "--s2s",
+        "--white-95p": "--s2t",
+        "--white-full": "--s2u"
+    },
+    "animations": {
+        "fadeInUpComment": "k0",
+        "spin": "k1",
+        "stalux-article-enter": "k2",
+        "stalux-article-enter-back": "k3",
+        "stalux-cursor-blink": "k4",
+        "stalux-link-avatar-spin": "k5",
+        "stalux-page-enter": "k6",
+        "stalux-page-enter-back": "k7",
+        "stalux-page-exit": "k8",
+        "stalux-post-content-reveal": "k9",
+        "stalux-random-spin": "ka",
+        "stalux-sidebar-left-back-in": "kb",
+        "stalux-sidebar-left-back-out": "kc",
+        "stalux-sidebar-left-in": "kd",
+        "stalux-sidebar-left-out": "ke",
+        "stalux-sidebar-right-back-in": "kf",
+        "stalux-sidebar-right-back-out": "kg",
+        "stalux-sidebar-right-in": "kh",
+        "stalux-sidebar-right-out": "ki",
+        "stalux-social-stalux-social-arrive": "kj",
+        "stalux-taxonomy-enter": "kk",
+        "stalux-taxonomy-enter-back": "kl",
+        "stalux-word-word-glow": "km"
+    }
+};

package/src/layouts/Stalux.astro

@@ -89,11 +89,17 @@ const routeAnimation = getRouteAnimation(routeKind);
 )}
         <div
             class="bg-layer bg-a"
+            data-stalux-background="a"
             style="opacity: 1;"
             transition:persist="stalux-bg-a"
             aria-hidden="true"
         ></div>
-        <div class="bg-layer bg-b" transition:persist="stalux-bg-b" aria-hidden="true"></div>
+        <div
+            class="bg-layer bg-b"
+            data-stalux-background="b"
+            transition:persist="stalux-bg-b"
+            aria-hidden="true"
+        ></div>
         <main
             class="stalux-main"
             data-stalux-route={routeKind}

package/src/pages/index.astro

@@ -29,7 +29,7 @@ import { getSiteData } from "@utils/config-utils";
         <h1 class="stalux-home-title stalux-u-text-center">{siteTitle}</h1>
         <h2
             class="sr-only"
-            style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+            style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;"
         >
             {t("ai.about")}
         </h2>

package/src/scripts/background.ts

@@ -34,7 +34,7 @@ const backgroundImages: string[] = window.__STALUX_BG_URLS__?.length
     : BACKGROUND_URLS;
 
 function getLayerEl(layer: "a" | "b"): HTMLElement | null {
-    return document.querySelector(`.bg-layer.bg-${layer}`);
+    return document.querySelector(`[data-stalux-background="${layer}"]`);
 }
 
 function setLayerOpacity(layer: "a" | "b", opacity: number): void {

package/src/scripts/view-transitions.ts

@@ -1,4 +1,4 @@
-import { getRouteKind } from "@utils/view-transitions";
+import { getRouteKind } from "@utils/public-routes";
 import { createClientLogger } from "./logger";
 
 const logger = createClientLogger("view-transitions");

package/src/styles/base.css

@@ -14,8 +14,6 @@
         font-family:
             var(--font-body), "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system,
             sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
     }
 
@@ -48,7 +46,7 @@
     }
 
     /* 下划线动画 */
-    a:not(.a-none):not([class*="card"]):not(.stalux-nav-link)::after {
+    a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link)::after {
         content: "";
         position: absolute;
         left: 0;
@@ -61,12 +59,12 @@
         transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
         pointer-events: none;
     }
-    a:not(.a-none):not([class*="card"]):not(.stalux-nav-link):focus-visible::after,
-    a:not(.a-none):not([class*="card"]):not(.stalux-nav-link):active::after {
+    a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):focus-visible::after,
+    a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):active::after {
         transform: scaleX(1);
     }
     @media (hover: hover) and (pointer: fine) {
-        a:not(.a-none):not([class*="card"]):not(.stalux-nav-link):hover::after {
+        a:not(.a-none):not([data-stalux-card]):not(.stalux-nav-link):hover::after {
             transform: scaleX(1);
         }
     }
@@ -119,59 +117,59 @@
         --stalux-bg-filter: none;
         --stalux-text-shadow: var(--stalux-accent-color) 0.08rem 0.08rem 0.18rem;
         --stalux-accent-color: #eab308;
-        --stalux-accent-rgb: 234, 179, 8;
+        --stalux-accent-rgb: 234 179 8;
         --surface-glass: var(--black-05p);
         --surface-glass-shadow: var(--shadow-sidebar);
 
         /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
         --card-bg: var(--surface-glass);
-        --card-border: rgba(255, 255, 255, 0.1);
-        --card-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
-        --card-box-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.12);
+        --card-border: rgb(255 255 255 / 0.1);
+        --card-box-shadow: 0 10px 24px rgb(0 0 0 / 0.08);
+        --card-box-shadow-hover: 0 14px 28px rgb(0 0 0 / 0.12);
 
-        --tag-bg: rgba(255, 255, 255, 0.12);
-        --tag-bg-hover: rgba(255, 255, 255, 0.18);
-        --category-bg: rgba(255, 255, 255, 0.08);
-        --category-bg-hover: rgba(255, 255, 255, 0.14);
+        --tag-bg: rgb(255 255 255 / 0.12);
+        --tag-bg-hover: rgb(255 255 255 / 0.18);
+        --category-bg: rgb(255 255 255 / 0.08);
+        --category-bg-hover: rgb(255 255 255 / 0.14);
 
-        --date-bg: rgba(66, 160, 255, 0.18);
-        --date-border: rgba(66, 160, 255, 0.25);
-        --updated-bg: rgba(255, 201, 71, 0.2);
-        --updated-border: rgba(255, 201, 71, 0.3);
+        --date-bg: rgb(66 160 255 / 0.18);
+        --date-border: rgb(66 160 255 / 0.25);
+        --updated-bg: rgb(255 201 71 / 0.2);
+        --updated-border: rgb(255 201 71 / 0.3);
 
         /* 常用颜色值 */
         --white-full: #ffffff;
-        --white-95p: rgba(255, 255, 255, 0.95);
-        --white-90p: rgba(255, 255, 255, 0.9);
-        --white-85p: rgba(255, 255, 255, 0.85);
-        --white-80p: rgba(255, 255, 255, 0.9);
-        --white-78p: rgba(255, 255, 255, 0.78);
-        --white-75p: rgba(255, 255, 255, 0.75);
-        --white-70p: rgba(255, 255, 255, 0.86);
-        --white-60p: rgba(255, 255, 255, 0.6);
-        --white-50p: rgba(255, 255, 255, 0.5);
-        --white-30p: rgba(255, 255, 255, 0.3);
-        --white-20p: rgba(255, 255, 255, 0.2);
-        --white-15p: rgba(255, 255, 255, 0.15);
-        --white-10p: rgba(255, 255, 255, 0.1);
-        --white-05p: rgba(255, 255, 255, 0.05);
+        --white-95p: rgb(255 255 255 / 0.95);
+        --white-90p: rgb(255 255 255 / 0.9);
+        --white-85p: rgb(255 255 255 / 0.85);
+        --white-80p: rgb(255 255 255 / 0.9);
+        --white-78p: rgb(255 255 255 / 0.78);
+        --white-75p: rgb(255 255 255 / 0.75);
+        --white-70p: rgb(255 255 255 / 0.86);
+        --white-60p: rgb(255 255 255 / 0.6);
+        --white-50p: rgb(255 255 255 / 0.5);
+        --white-30p: rgb(255 255 255 / 0.3);
+        --white-20p: rgb(255 255 255 / 0.2);
+        --white-15p: rgb(255 255 255 / 0.15);
+        --white-10p: rgb(255 255 255 / 0.1);
+        --white-05p: rgb(255 255 255 / 0.05);
 
-        --black-30p: rgba(0, 0, 0, 0.3);
-        --black-20p: rgba(0, 0, 0, 0.2);
-        --black-15p: rgba(0, 0, 0, 0.15);
-        --black-10p: rgba(0, 0, 0, 0.1);
-        --black-05p: rgba(0, 0, 0, 0.05);
+        --black-30p: rgb(0 0 0 / 0.3);
+        --black-20p: rgb(0 0 0 / 0.2);
+        --black-15p: rgb(0 0 0 / 0.15);
+        --black-10p: rgb(0 0 0 / 0.1);
+        --black-05p: rgb(0 0 0 / 0.05);
 
         /* 强调色变体 */
-        --accent-90p: rgba(var(--stalux-accent-rgb), 0.9);
-        --accent-85p: rgba(var(--stalux-accent-rgb), 0.85);
-        --accent-80p: rgba(var(--stalux-accent-rgb), 0.8);
-        --accent-70p: rgba(var(--stalux-accent-rgb), 0.7);
-        --accent-60p: rgba(var(--stalux-accent-rgb), 0.6);
-        --accent-50p: rgba(var(--stalux-accent-rgb), 0.5);
-        --accent-40p: rgba(var(--stalux-accent-rgb), 0.4);
-        --accent-30p: rgba(var(--stalux-accent-rgb), 0.3);
-        --accent-20p: rgba(var(--stalux-accent-rgb), 0.2);
+        --accent-90p: rgb(var(--stalux-accent-rgb) / 0.9);
+        --accent-85p: rgb(var(--stalux-accent-rgb) / 0.85);
+        --accent-80p: rgb(var(--stalux-accent-rgb) / 0.8);
+        --accent-70p: rgb(var(--stalux-accent-rgb) / 0.7);
+        --accent-60p: rgb(var(--stalux-accent-rgb) / 0.6);
+        --accent-50p: rgb(var(--stalux-accent-rgb) / 0.5);
+        --accent-40p: rgb(var(--stalux-accent-rgb) / 0.4);
+        --accent-30p: rgb(var(--stalux-accent-rgb) / 0.3);
+        --accent-20p: rgb(var(--stalux-accent-rgb) / 0.2);
 
         /* 常用过渡和动画 */
         --transition-fast: 0.18s ease;
@@ -200,19 +198,17 @@
         --radius-full: 9999px;
 
         /* 常用阴影 */
-        --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
-        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
-        --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
-        --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
+        --shadow-sm: 0 2px 5px rgb(0 0 0 / 0.1);
+        --shadow-md: 0 6px 16px rgb(0 0 0 / 0.2);
+        --shadow-lg: 0 8px 20px rgb(0 0 0 / 0.3);
+        --shadow-xl: 0 12px 26px rgb(0 0 0 / 0.28);
         --shadow-sidebar:
-            0 16px 20px -12px rgba(0, 0, 0, 0.84),
-            10px 4px 16px -12px rgba(0, 0, 0, 0.58),
-            -10px 4px 16px -12px rgba(0, 0, 0, 0.58);
+            0 16px 20px -12px rgb(0 0 0 / 0.84), 10px 4px 16px -12px rgb(0 0 0 / 0.58),
+            -10px 4px 16px -12px rgb(0 0 0 / 0.58);
         --shadow-raised-hover:
-            0 20px 24px -13px rgba(0, 0, 0, 0.9),
-            12px 5px 18px -13px rgba(0, 0, 0, 0.68),
-            -12px 5px 18px -13px rgba(0, 0, 0, 0.68);
-        --shadow-dark: rgba(0, 0, 0, 0.753);
+            0 20px 24px -13px rgb(0 0 0 / 0.9), 12px 5px 18px -13px rgb(0 0 0 / 0.68),
+            -12px 5px 18px -13px rgb(0 0 0 / 0.68);
+        --shadow-dark: rgb(0 0 0 / 0.753);
 
         /* 语义化颜色 */
         --muted-text: #bbb;
@@ -288,10 +284,9 @@
         padding: var(--space-lg) var(--space-md);
         text-align: center;
         color: var(--muted-text);
-        background: linear-gradient(180deg, rgba(12, 14, 18, 0.18), rgba(12, 14, 18, 0.72));
+        background: linear-gradient(180deg, rgb(12 14 18 / 0.18), rgb(12 14 18 / 0.72));
         border-top: 1px solid var(--white-10p);
         backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(16px);
     }
 }
 

package/src/styles/content.css

@@ -6,8 +6,6 @@
         font-size: var(--font-size-base);
         line-height: 1.75;
         color: var(--white-85p);
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
     }
 
@@ -99,7 +97,7 @@
 
     .stalux-prose mark {
         color: inherit;
-        background-color: rgba(255, 217, 102, 0.25);
+        background-color: rgb(255 217 102 / 0.25);
         padding: 0.1em 0.2em;
         border-radius: 2px;
     }
@@ -127,9 +125,7 @@
         transition:
             color var(--transition-fast),
             border-bottom-color var(--transition-fast);
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-word;
+        overflow-wrap: anywhere;
     }
     .stalux-prose a:focus-visible {
         color: var(--accent-90p);
@@ -147,10 +143,10 @@
             var(--font-code), "JetBrains Mono", "Fira Code", "Consolas", "Courier New", monospace;
         font-size: 0.88em;
         color: #ff92d0;
-        background-color: rgba(255, 121, 198, 0.15);
+        background-color: rgb(255 121 198 / 0.15);
         padding: 0.2em 0.4em;
         border-radius: 4px;
-        border: 1px solid rgba(255, 121, 198, 0.25);
+        border: 1px solid rgb(255 121 198 / 0.25);
     }
 
     .stalux-prose pre {
@@ -258,7 +254,6 @@
         margin: var(--space-xl) 0;
         box-shadow: var(--shadow-md);
         border-radius: 8px;
-        -webkit-overflow-scrolling: touch;
     }
 
     .stalux-prose th,