hexo-theme-stellar 1.44.0 → 2.0.0-rc.2

package/source/css/_components/widgets/toc.styl

@@ -16,8 +16,7 @@
     @media screen and (min-width: $device-laptop)
       background: var(--background)
 
-[data-ui-surface='glass'] .widget-wrapper.toc,
-[data-ui-surface='card'] .widget-wrapper.toc
+.site-region__surface .widget-wrapper.toc
   @media screen and (min-width: $device-laptop)
     background: none
 
@@ -51,28 +50,18 @@
       background: var(--theme)
       border-radius: 4px
     &:hover
-      background: var(--ui-adapter-bg-hover)
-      box-shadow: var(--ui-adapter-shadow-hover)
       color: var(--ui-item-title)
     
-// 固定位置
-[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc
+// Region Surface 统一负责固定高度与滚动，TOC 不再创建独立 Sticky/Scroll 容器。
+:is([data-region='leftbar'], [data-region='rightbar']) .widgets .widget-wrapper.toc
   margin-top: 1rem
-  position: sticky
-  position: -webkit-sticky
-  top: 0
+  position: static
   padding: 1rem 0
   &:first-child
-    top: var(--gap-page)
     padding-top: 1rem
   .widget-body .toc
-    max-height: 70vh
-    @media screen and (max-width: $device-desktop)
-      max-height: 60vh
-    @media screen and (max-width: $device-laptop)
-      max-height: unset
-    overflow: auto
-    scrollbar(0, 0)
+    max-height: none
+    overflow: visible
 
 
 
@@ -135,11 +124,10 @@
     grid-template-rows: 1fr
     trans1 all
     overflow hidden
-[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc .widget-header .cap-action:hover
-  sidebar-light(var(--bg-a50))
-[data-ui-surface='sidebar'] .widgets .widget-wrapper.toc.collapse
+:is([data-region='leftbar'], [data-region='rightbar']) .widgets .widget-wrapper.toc.collapse
   .widget-header .cap-action
-    sidebar-light(var(--bg-a50))
+    color: var(--accent)
+    opacity: 1
   .widget-body
     grid-template-rows: 0fr
 
@@ -165,26 +153,17 @@
     padding: 8px var(--gap-base)
     border-radius: $border-bar
     trans1 all
-    svg
-      width: 16px
-      height: 16px
-      flex-shrink: 0
-      margin-right: 8px
-    img
-      height: 16px
-      width: auto
-      flex-shrink: 0
+    .ui-icon
+      --ui-icon-size: 16px
       margin-right: 8px
   a:hover
-    background: var(--block-border)
     color: var(--text)
 
 .widget-wrapper.toc+.widget-wrapper
   padding-top: 32px
 
 @media screen and (max-width: $device-laptop)
-  [data-ui-surface='sidebar']
-    blur-effect()
+  :is([data-region='leftbar'], [data-region='rightbar'])
     .widgets
       .widget-wrapper.toc
         position: static

package/source/css/_components/widgets/widgets.styl

@@ -34,21 +34,22 @@
         color: inherit
         opacity 0.3
         trans1 opacity
-        border-radius: 8px
+        border-radius: $border-button
         padding: 6px
         margin-right: -6px
-        svg
-          height: 1em
-          width: auto
+        .ui-icon
+          --ui-icon-size: 1em
           transform: scale(1.2)
-          fill: var(--text-p2)
-        &:hover
+        &:hover,
+        &:focus-visible
+          color: var(--accent)
+          opacity 1
+        &:focus-visible
+          outline: 2px solid var(--theme)
+          outline-offset: 2px
+        &:active
           color: var(--accent)
-          background: var(--ui-item-bg-hover)
-          box-shadow: var(--ui-item-shadow-hover)
           opacity 1
-          svg
-            fill: var(--accent)
 
     .widget-body
       color: var(--text-p1)
@@ -67,20 +68,14 @@
   .widget-section+.widget-section
     margin-top: 24px
 
-.widget-wrapper.markdown
-  --ui-item-bg: var(--block)
-
-[data-ui-surface='glass'] .widget-wrapper.markdown
-  --ui-item-bg: var(--bg-a10)
-
-.l_left .widgets
-  padding-bottom: 64px
-.l_right .widgets
+.site-region--rightbar .widgets
   padding: 0
   &:empty 
     display: none
   .widget-wrapper:first-child
     margin-top: 0
+  .widget-instance + .widget-instance > .widget-wrapper
+    margin-top: var(--gap-base)
   .widget-wrapper
     .widget-header
       padding-left: var(--gap-base)

package/source/css/_components/wiki-card.styl

@@ -136,6 +136,7 @@
     font-weight: 700
     line-height: 1.2
     color: inherit
+    font-size: var(--fsh3)
   @media screen and (max-width: $device-mobile)
     .headline
       margin: .375rem 0
@@ -182,8 +183,7 @@
     justify-content: center
     width: 2.5rem
     height: 2.5rem
-    overflow: hidden
-    border-radius: 30%
+    app-icon()
     background: var(--block)
     color: var(--text-p2)
     img

package/source/css/_custom.styl

@@ -2,19 +2,19 @@
 
 
 // font family
-$ff-body = convert(hexo-config('style.font-family.body'))
-$ff-code = convert(hexo-config('style.font-family.code'))
-$ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
+$ff-body = convert(hexo-config('appearance.typography.font_family.body'))
+$ff-code = convert(hexo-config('appearance.typography.font_family.code'))
+$ff-codeblock = $ff-code
 
 // font size
-$fs-root = convert(hexo-config('style.font-size.root'))
+$fs-root = convert(hexo-config('appearance.typography.font_size.root'))
 $fs-15 = 'calc(%s - 1px)' % var(--fs-content-base)
 $fs-14 = 'calc(%s - 2px)' % var(--fs-content-base)
 $fs-13 = 'calc(%s - 3px)' % var(--fs-content-base)
 $fs-12 = 'calc(%s - 4px)' % var(--fs-content-base)
 
-$fs-code = convert(hexo-config('style.font-size.code'))
-$fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
+$fs-code = convert(hexo-config('appearance.typography.font_size.inline_code'))
+$fs-codeblock = convert(hexo-config('appearance.typography.font_size.code_block'))
 
 $fsh1 = 'calc(%s + 9px)' % var(--fs-content-base)
 $fsh2 = 'calc(%s + 11px)' % var(--fs-content-base)
@@ -28,60 +28,51 @@ $fs-content-2 = 'calc(%s - 2px)' % var(--fs-content-base)
 $fs-content-3 = 'calc(%s - 3px)' % var(--fs-content-base)
 
 // site main
-$site-background-image = hexo-config('style.site.background-image')
-$leftbar-background-image = hexo-config('style.leftbar.background-image')
-$leftbar-background-color-light = hexo-config('style.leftbar.background-color-light')
-$leftbar-background-color-dark = hexo-config('style.leftbar.background-color-dark')
+$site-background-image = hexo-config('appearance.backgrounds.page.image')
 
 
 // colors
-$c-theme = convert(hexo-config('style.color.theme'))
-$c-accent = convert(hexo-config('style.color.accent'))
-$c-link = convert(hexo-config('style.color.link'))
+$c-theme = convert(hexo-config('appearance.colors.primary'))
+$c-accent = convert(hexo-config('appearance.colors.accent'))
+$c-link = convert(hexo-config('appearance.colors.link'))
 
 $c-base-hue = 210deg // 背景/文本颜色的主基调（一般看不出来不需要修改）
 
-$border-card-l = convert(hexo-config('style.border-radius.card-l'))
-$border-card = convert(hexo-config('style.border-radius.card'))
-$border-card-s = convert(hexo-config('style.border-radius.card-s'))
-$border-bar = convert(hexo-config('style.border-radius.bar'))
+$border-card-l = convert(hexo-config('appearance.shape.radius.card_large'))
+$border-card = convert(hexo-config('appearance.shape.radius.card'))
+$border-card-s = convert(hexo-config('appearance.shape.radius.card_small'))
+$border-bar = convert(hexo-config('appearance.shape.radius.bar'))
 $bar-item-gap = 4px // bar 容器内按钮/标签之间的间距与距边距离（gap + padding 共用）
 $border-bar-container = 'calc(%s + %s)' % ($border-bar $bar-item-gap) // bar 容器圆角 = 按钮圆角（$border-bar）+ 间距，保持同心
-$border-image-l = convert(hexo-config('style.border-radius.image-l'))
-$border-image = convert(hexo-config('style.border-radius.image'))
-$border-image-s = convert(hexo-config('style.border-radius.image-s'))
+$border-image-l = convert(hexo-config('appearance.shape.radius.image_large'))
+$border-image = convert(hexo-config('appearance.shape.radius.image'))
+$border-image-s = convert(hexo-config('appearance.shape.radius.image_small'))
 $border-button = 8px
-$corner-shape = convert(hexo-config('style.corner-shape'))
+$corner-shape = convert(hexo-config('appearance.shape.corner'))
 
 // 可以动态变化的属性
 :root
   --fs-root: $fs-root
   --fs-content-base: var(--fs-root)
   --fs-content: var(--fs-content-base)
-  --width-main: 720px
+  --width-main-article: 800px
+  --width-main-wiki-list: 1000px
+  --width-main: var(--width-main-article)
   --fsh2: 'calc(%s + 11px)' % var(--fs-content)
   --fsh3: 'calc(%s + 7px)' % var(--fs-content)
   --fsh4: 'calc(%s + 4px)' % var(--fs-content)
   
   // 侧边栏文字内容宽度
-  --side-content-width: 224px
+  --side-content-width: 200px
   // 组件内部基础间距（margin/padding 统一）
   --gap-base: 16px
-  // 页面级留白（侧边栏/内容区/列间距），笔记本及以上放宽
+  // 页面级留白（侧边栏/内容区/列间距）
   --gap-page: 16px
-  @media screen and (min-width: $device-laptop)
-    --gap-page: 32px
   // 右栏宽度增量（在 --width-sidebar 基础上加宽）
   --rightbar-width-extra: calc(var(--gap-base) * 2)
   
   --gap-p: 'calc(%s + 4px)' % var(--fs-content-base) // gap for paragraph
   --gap-p-compact: 'calc(%s * 0.75)' % var(--fs-content-base)
-  // desktop 2k or larger
-  @media screen and (min-width: $device-2k)
-    --width-main: 780px
-  // desktop 4k or larger
-  @media screen and (min-width: $device-4k)
-    --width-main: 860px
   // iPad 竖屏
   @media screen and (max-width: $device-tablet)
     --side-content-width: 188px
@@ -89,6 +80,9 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
     --fs-root: 'calc(%s + 2px)' % $fs-root
     --side-content-width: 224px
 
+body[data-page-layout='index_wiki']
+  --width-main: var(--width-main-wiki-list)
+
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.05)

package/source/css/_defines/func.styl

@@ -53,6 +53,14 @@ txt-ellipsis()
   overflow: hidden
   text-overflow: ellipsis
 
+// App icon 圆角剪裁：支持 superellipse 时使用系统风格曲率，否则回退到普通圆角。
+app-icon()
+  overflow: hidden
+  border-radius: 25%
+  @supports (corner-shape: superellipse(2))
+    border-radius: 50%
+    corner-shape: superellipse(2)
+
 placeholder(rules)
   &::-webkit-input-placeholder
     rules()
@@ -137,8 +145,8 @@ tag-chip()
 floatable-trans()
   trans2 transform box-shadow
 floatable-float()
-  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
-  transform: translate3d(0, -2px, 0)
+  box-shadow: var(--hoverable-card-hover-shadow, 0 12px 20px -4px rgba(0, 0, 0, 0.15))
+  transform: var(--hoverable-card-hover-transform, translate3d(0, -2px, 0))
 
 hoverable-card()
   trans1 all
@@ -148,7 +156,7 @@ hoverable-card()
       floatable-float()
   ondark()
     &:hover
-      box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme)
+      box-shadow: var(--hoverable-card-hover-shadow, 0 0 4px -2px var(--theme)\, 0 0 24px -8px var(--theme))
   :root[data-theme="light"] &
     onlight()
   :root[data-theme="dark"] &
@@ -158,37 +166,23 @@ hoverable-card()
     @media (prefers-color-scheme: dark)
       ondark()
 
-// 侧栏高亮项的顶部光照效果（无过渡动画）：
-// 在 hover/active 背景上叠加顶部白色光照渐变与高光边，深浅色模式分别调优透明度
-sidebar-light($bg = unquote('var(--bg-a50)'), $light = 0.38, $edge = 0.45, $dark-light = 0.08, $dark-edge = 0.08)
-  // 左栏风格通过容器级变量定制：--leftbar-item-bg / --leftbar-item-shadow
-  // （如 card 风格设为 var(--block) / none），未定义时回退到玻璃质感默认值
-  background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $light), rgba(white, 0) 50%), $bg)
-  box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $edge))
-  :root[data-theme="dark"] &
-    background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
-    box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
+// 与整站 Appearance 无关的半透明浮层能力；Dropdown、上下文菜单等组件按需调用。
+frosted-surface($background-light = rgba(white, .3), $background-dark = rgba(white, .2), $saturation = 300%, $blur = 16px, $border = 1px solid var(--block-border), $shadow = 0 0 2px rgba(black, .04)\, 0 2px 8px rgba(black, .04)\, 0 4px 16px rgba(black, .04))
+  border: $border
+  background: $background-light
+  box-shadow: $shadow
+  backdrop-filter: saturate($saturation) blur($blur)
+  -webkit-backdrop-filter: saturate($saturation) blur($blur)
+  :root[data-theme='dark'] &
+    background: $background-dark
   :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
-      background: var(--leftbar-item-bg, linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 50%), $bg)
-      box-shadow: var(--leftbar-item-shadow, inset 0 1px 0 rgba(white, $dark-edge))
+      background: $background-dark
 
-newblur($radius = 64px)
+// Glass 容器材质：全表面保留轻度模糊，四周叠加更强的模糊层并向中心渐隐。
+// Listing Nav 与 Glass ui-surface 共享同一组阴影与饱和边缘。
+glass-material($radius = 64px)
   box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
-  trans1: all
-  text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
-  :root[data-theme="dark"] &
-    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
-  :root:not([data-theme]) &
-    @media (prefers-color-scheme: dark)
-      text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
-  nav a:not(.active,:hover)
-    filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
-    :root[data-theme="dark"] &
-      filter: none
-    :root:not([data-theme]) &
-      @media (prefers-color-scheme: dark)
-        filter: none
   &:before,&:after
     z-index -1
     position: absolute
@@ -204,12 +198,11 @@ newblur($radius = 64px)
     backdrop-filter: blur(8px)
     -webkit-backdrop-filter: blur(8px)
     background: rgba(white, 0.3)
-    margin: 1px
     :root[data-theme="dark"] &
-      background: rgba(white, 0.2)
+      background: rgba(white, 0.15)
     :root:not([data-theme]) &
       @media (prefers-color-scheme: dark)
-        background: rgba(white, 0.2)
+        background: rgba(white, 0.15)
   &:after
     --blur-px: 16px
     --blur-sat: 300%
@@ -217,15 +210,32 @@ newblur($radius = 64px)
     -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
     mask: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
     -webkit-mask-image: linear-gradient(white, 20%, transparent, 80%, white), linear-gradient(90deg, white, 20%, transparent, 80%, white)
-    box-shadow: inset 0 0 4px 1px rgba(white, 0.5)
+    box-shadow: inset 0 0 32px 4px rgba(white, 0.5)
     trans1 all
     :root[data-theme="dark"] &
-      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
+      box-shadow: inset 0 0 16px 4px rgba(white, 0.1)
     :root:not([data-theme]) &
       @media (prefers-color-scheme: dark)
-        box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
+        box-shadow: inset 0 0 16px 4px rgba(white, 0.1)
+
+newblur($radius = 64px)
+  glass-material($radius)
+  trans1: all
+  text-shadow: 0 0 4px rgba(white, 1), 0 0 8px rgba(white, 0.8), 0 0 16px rgba(white, 0.6)
+  :root[data-theme="dark"] &
+    text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      text-shadow: 0 0 2px rgba(black, 0.2), 0 0 4px rgba(black, 0.4)
+  nav a:not(.active,:hover)
+    filter: drop-shadow(0 0 0 white) drop-shadow(0 0 4px white)
+    :root[data-theme="dark"] &
+      filter: none
+    :root:not([data-theme]) &
+      @media (prefers-color-scheme: dark)
+        filter: none
 
-// 长条圆角玻璃 UI（navbar top 与 float-panel 共用）
+// 长条圆角玻璃 UI（Listing Nav 与 float-panel 共用）
 bar-glass($radius = $border-bar-container)
   border-radius: $radius
   corner-shape: $corner-shape

package/source/css/_defines/theme_base.styl

@@ -42,7 +42,8 @@ x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
   $sat = 0%
   $light = $scheme == 'dark' ? 100% : 0%
   
-  --text: x-hsla($hue, $sat, $light, $p0)
+  --text-p0: x-hsla($hue, $sat, $light, $p0)
+  --text: var(--text-p0)
   --text-reverse: x-hsla($hue, $sat, $scheme == 'dark' ? 0% : 100%, $p0)
   --text-p1: x-hsla($hue, $sat, $light, $p1)
   --text-p2: x-hsla($hue, $sat, $light, $p2)
@@ -64,20 +65,16 @@ x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
 
 // ========== 通用主题色渐变 ==========
 // 约定：渐变颜色通过 --item-theme 提供，未设置时回退到站点主题色 var(--theme)；
-// 淡色变体为 --item-theme-light（默认与白色混合 50%）；角度默认取 style.gradient.angle。
-// 注意：局部覆盖 --item-theme 的元素需同时设置 --item-theme-light（如 x-theme-light()），
-// 否则淡色变体仍沿用 :root 上的主题色。
+// 淡色变体默认与白色混合 50%，角度由主题固定为 210deg。
 // 用法示例：
 //   .foo
 //     --item-theme: #1BCDFC                            // 可选，默认使用站点主题色
 //     background: x-theme-gradient()                   // 右上角淡色 → 左下角主色，停止点 20% / 60%
 //     background: x-theme-gradient(30%, 70%, 25%)      // 自定义停止点与淡色比例
-// 图标渐变（SVG）：元素内放置 <svg class="grad-def">…<linearGradient …/></svg>，
-// 并设置 --item-grad:url(#渐变id)，然后对子元素使用 fill:var(--item-grad)。
 x-theme-light($color = unquote('var(--item-theme)'), $ratio = 50%)
   return unquote('color-mix(in srgb, %s %s, #fff)' % ($color $ratio))
 
-x-theme-gradient($color = unquote('var(--item-theme)'), $start = 20%, $end = 60%, $light-ratio = 50%, $angle = convert(hexo-config('style.gradient.angle')) or 225deg)
+x-theme-gradient($color = unquote('var(--item-theme)'), $start = 20%, $end = 60%, $light-ratio = 50%, $angle = 210deg)
   $light = x-theme-light($color, $light-ratio)
   return unquote('linear-gradient(%s, %s %s, %s %s)' % ($angle $light $start $color $end))
 
@@ -86,7 +83,8 @@ x-theme-gradient($color = unquote('var(--item-theme)'), $start = 20%, $end = 60%
 dynamic-theme-light()
   $hue = $c-base-hue
   --background: x-hsla($hue, 20%, 98%, 1)
-  --card: $site-background-image ? hsla(white, 0.5) : white
+  --card: white
+  // --card: $site-background-image ? hsla(white, 0.5) : white
 
   x-set-bg-colors('light')
   x-set-text-colors('light')
@@ -94,10 +92,11 @@ dynamic-theme-light()
 // 设置深色模式
 dynamic-theme-dark()
   $hue = $c-base-hue
+  --card: x-hsla($hue, 10%, 24%, 1)
   --background: x-hsla($hue, 8%, 12%, 1)
   @media screen and (max-width: $device-mobile-max)
     --background: black
-  --card: $site-background-image ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
+  // --card: $site-background-image ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
 
   x-set-bg-colors('dark')
   x-set-text-colors('dark')
@@ -113,7 +112,6 @@ dynamic-theme-dark()
   x-set-link-with-color($c-link)
   // 通用渐变颜色（局部可用 --item-theme 覆盖）
   --item-theme: var(--theme)
-  --item-theme-light: x-theme-light()
 
   // dynamic colors
   dynamic-theme-light()

package/source/css/_plugins/card-hover.styl

@@ -33,7 +33,7 @@
     > .card-hover__spotlight
       opacity: .6
 
-// ScrollReveal 使用外层 .post-card-wrap 的 transform；倾斜只作用于内层卡片。
+// Reveal 使用外层 .post-card-wrap 的 transform；倾斜只作用于内层卡片。
 // 启用插件时把同尺寸包装器的阴影移到卡片本体，使阴影随 3D transform 移动。
 .post-list:not(.topic) .post-card-wrap
   box-shadow: none

package/source/css/_plugins/copycode.styl

@@ -5,36 +5,33 @@
   position: absolute
   top: 0
   right: 0
-  padding: 0px 0.5rem
-  font-weight: 700
+  width: 2rem
+  height: 2rem
+  padding: .375rem
+  box-sizing: border-box
+  border: 0
   visibility: hidden
-  border-bottom-left-radius: $border-bar
-  border-bottom-right-radius: $border-bar
-  background: var(--card)
-  display: block
+  background: none
+  color: var(--text-p3)
+  display: flex
+  align-items: center
+  justify-content: center
   cursor: pointer
   margin-right: 4px
   margin-top: 4px
-  border-radius: 'calc(%s - 4px)' % $border-card
+  .icon
+    width: 100%
+    height: 100%
+  &:hover
+    color: x-theme-alpha(1)
 
-.highlight:hover
+.highlight:hover, .highlight:focus-within
   .code:before
     visibility: hidden
   .copy-btn 
     visibility: visible
 
-.highlight .code .copy-btn.success
-  background: $c-green
-  color: white
-  visibility: visible
-
-.highlight .code .copy-btn.warning
-  background: $c-orange
-  color: white
-  visibility: visible
-
 .md-text .folding[child=codeblock]
   .code .copy-btn
     z-index 1
     margin-right: 1rem
-    border-radius: $border-bar

package/source/css/_plugins/index.styl

@@ -2,14 +2,9 @@
 @import 'aplayer'
 
 // 根据主题配置加载
-if hexo-config('plugins.scrollreveal.enable')
-  @import 'scrollreveal'
-if hexo-config('plugins.copycode.enable')
-  @import 'copycode'
-if hexo-config('plugins.tianli_gpt.enable')
-  @import 'tianli_gpt'
-if hexo-config('plugins.katex.enable')
+@import 'copycode'
+if hexo-config('features.math.provider') == 'katex'
   @import 'katex'
-if hexo-config('plugins.card_hover.enable')
+if hexo-config('features.card_hover.enabled')
   // 最后加载，组合并覆盖 link/grid 既有 hover transform
   @import 'card-hover'

package/source/css/_plugins/lazyload.styl

@@ -1,4 +1,4 @@
-$lazyTransitionType = hexo-config('dependencies.lazyload.transition')
+$lazyTransitionType = hexo-config('features.lazy_loading.transition')
 $loadingImageSize = 2rem
 
 img:not([src])

package/source/css/main.styl

@@ -16,3 +16,15 @@
 
 // 可选插件
 @import '_plugins/index'
+
+// 每次构建只编译当前整站 Appearance，作为最终视觉实现层。
+@require '_appearances/_mixins'
+$appearance-preset = hexo-config('appearance.preset')
+if $appearance-preset == 'card'
+  @import '_appearances/card'
+else if $appearance-preset == 'glass'
+  @import '_appearances/glass'
+else if $appearance-preset == 'minimal'
+  @import '_appearances/minimal'
+else if $appearance-preset == 'flat'
+  @import '_appearances/flat'