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

package/source/css/_common/highlight.styl

@@ -5,7 +5,6 @@ code
 
 p>code:not([class]),li>code:not([class])
   font-size: $fs-code
-  background: var(--block)
   padding: .2em
   border-radius: 4px
   color: var(--text-code)
@@ -15,7 +14,6 @@ p>code:not([class]),li>code:not([class])
   margin: var(--gap-p) 0
   border-radius: $border-card
   overflow: hidden
-  background: var(--block)
   font-family: $ff-codeblock
   box-sizing: border-box
   @media screen and (min-width: $device-mobile)
@@ -36,7 +34,6 @@ p>code:not([class]),li>code:not([class])
       display: block
       border-bottom-left-radius: $border-button
       border-bottom-right-radius: $border-button
-      background: var(--block)
   >table
     overflow: auto
     display: block
@@ -47,7 +44,7 @@ p>code:not([class]),li>code:not([class])
     margin: 0 !important
     background: transparent
     border: none
-    scrollbar-codeblock(convert(hexo-config('style.codeblock.scrollbar')))
+    scrollbar-codeblock(convert(hexo-config('appearance.code_block.scrollbar_width')))
     tr
       background: transparent
       border: none
@@ -77,17 +74,17 @@ p>code:not([class]),li>code:not([class])
 
 .md-text .gist 
   .gist-file 
-    border: 1px solid var(--block-border)
+    border-style: solid
+    border-width: 1px
     border-radius: $border-card
     overflow: hidden
   .gist-data
-    --bgColor-default: var(--block)
-    border-bottom: 1px solid var(--block-border)
+    border-bottom-style: solid
+    border-bottom-width: 1px
   .highlight
     display: inherit
     border: none
     border-radius: 0
-    background: var(--block)
     margin: 0
     padding: 1em 0
     pre
@@ -95,10 +92,6 @@ p>code:not([class]),li>code:not([class])
   .blob-code-inner
     color: var(--text-p1)
     font-family: $ff-codeblock
-  .gist-meta
-    background: var(--block)
-
-
 table:not([class])
   border-collapse: collapse
 

package/source/css/_common/icon.styl

@@ -0,0 +1,38 @@
+.ui-icon
+  --ui-icon-opacity: .5
+  width: var(--ui-icon-size, 1.5rem)
+  height: var(--ui-icon-size, 1.5rem)
+  flex: 0 0 var(--ui-icon-size, 1.5rem)
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  color: var(--ui-icon-color, inherit)
+  > img, > svg
+    width: 100%
+    height: 100%
+    max-width: 100%
+    max-height: 100%
+    object-fit: contain
+    opacity: var(--ui-icon-opacity)
+
+a:hover .ui-icon,
+button:hover .ui-icon,
+summary:hover .ui-icon,
+a:focus-visible .ui-icon,
+button:focus-visible .ui-icon,
+summary:focus-visible .ui-icon,
+a:active .ui-icon,
+button:active .ui-icon,
+summary:active .ui-icon,
+a.active .ui-icon,
+button.active .ui-icon,
+summary.active .ui-icon,
+a.is-active .ui-icon,
+button.is-active .ui-icon,
+summary.is-active .ui-icon,
+a[aria-current] .ui-icon,
+button[aria-current] .ui-icon,
+summary[aria-current] .ui-icon,
+details[open] > summary .ui-icon
+  --ui-icon-color: var(--item-theme, var(--theme))
+  --ui-icon-opacity: 1

package/source/css/_common/input.styl

@@ -8,3 +8,36 @@ input.copy-area
   font-size: $fs-13
   font-weight: 700
   color: var(--text-p3)
+
+input.ui-radio
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  box-sizing: border-box
+  display: inline-block
+  flex: 0 0 auto
+  width: 16px
+  height: 16px
+  margin: 0
+  border: 2px solid var(--text-p3)
+  border-radius: 50%
+  corner-shape: round
+  background: none
+  cursor: pointer
+  &:before
+    content: ""
+    display: block
+    width: 8px
+    height: 8px
+    margin: 2px
+    border-radius: 50%
+    background: var(--theme)
+    transform: scale(0)
+  &:checked
+    border-color: var(--theme)
+  &:checked:before
+    background: var(--theme)
+    transform: scale(1)
+  &:focus-visible
+    outline: 2px solid var(--theme)
+    outline-offset: 2px

package/source/css/_common/loading.styl

@@ -28,13 +28,13 @@ svg.loading
   .lazy-icon
     display: inline-block
   &:after 
-    content: hexo-config('style.loading.loading')
+    content: var(--text-loading)
     color: var(--text-p1)
     display: block
     font-size: 14px
   &.error
     &:after
-      content: hexo-config('style.loading.error')
+      content: var(--text-loading-error)
 
 .article-footer
   .loading-wrap

package/source/css/_common/svg.styl

@@ -7,11 +7,3 @@ svg.icon
 
 svg.active-icon
   color: var(--theme)
-
-// 隐藏的 SVG 渐变定义容器（配合 --item-grad 与 fill:var(--item-grad) 使用）
-svg.grad-def
-  position: absolute
-  width: 0 !important
-  height: 0 !important
-  overflow: hidden
-  pointer-events: none

package/source/css/_components/collection.styl

@@ -1,35 +1,11 @@
-// 可移植的紧凑列表/网格只读取 surface 语义变量，不感知所在页面区域。
-[data-ui-surface]
-  --ui-item-bg: transparent
-  --ui-item-bg-hover: var(--block)
-  --ui-item-bg-active: var(--block)
-  --ui-item-shadow-hover: none
-  --ui-item-shadow-active: none
+// 可移植的紧凑列表/网格只负责布局和状态；视觉反馈由当前 Appearance 实现。
+.ui-collection
   --ui-item-title: var(--text-p1)
   --ui-item-muted: var(--text-p3)
   --ui-item-padding-x: var(--gap-base)
   --ui-item-padding-y: 8px
   --ui-item-min-height: 32px
   --ui-collection-gap: 4px
-
-[data-ui-surface='glass']
-  --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
-  --ui-item-bg-active: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
-  --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .45)
-  --ui-item-shadow-active: inset 0 1px 0 rgba(white, .45)
-  :root[data-theme='dark'] &
-    --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
-    --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
-    --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
-    --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)
-  :root:not([data-theme]) &
-    @media screen and (prefers-color-scheme: dark)
-      --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
-      --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
-      --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
-      --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)
-
-.ui-collection
   --ui-columns: 1
   --ui-grid-min: 7rem
   --ui-item-depth: 0
@@ -43,13 +19,15 @@
 .ui-collection[data-layout='grid']
   grid-template-columns: unquote('repeat(auto-fit, minmax(min(100%, max(var(--ui-grid-min), calc((100% - (var(--ui-columns) - 1) * var(--ui-collection-gap)) / var(--ui-columns)))), 1fr))')
 
+.ui-collection[data-layout='inline']
+  display: flex
+
 .ui-collection[data-density='compact']
   --ui-item-padding-y: 4px
   --ui-item-min-height: 30px
   --ui-collection-gap: 2px
 
 .ui-collection__item
-  --item-theme-light: x-theme-light()
   box-sizing: border-box
   min-width: 0
   min-height: var(--ui-item-min-height)
@@ -57,8 +35,6 @@
   padding-left: calc(var(--ui-item-padding-x) + var(--ui-item-depth) * var(--gap-base))
   border-radius: $border-bar
   color: var(--text-p2)
-  background: var(--ui-item-bg)
-  box-shadow: none
   display: flex
   align-items: center
   gap: 12px
@@ -66,29 +42,27 @@
   position: relative
   &:hover
     color: var(--ui-item-title)
-    background: var(--ui-item-bg-hover)
-    box-shadow: var(--ui-item-shadow-hover)
-  &.is-active
-    color: var(--ui-item-title)
-    background: var(--ui-item-bg-active)
-    box-shadow: var(--ui-item-shadow-active)
   &:focus-visible
     outline: 2px solid var(--theme)
     outline-offset: 2px
 
-.ui-collection__leading
-  width: 1.5rem
-  height: 1.5rem
-  flex-shrink: 0
-  display: flex
-  align-items: center
+.ui-collection__item:active,
+.ui-collection__item.is-active,
+details[open] > .ui-collection__item
+  color: var(--ui-item-title)
+
+button.ui-collection__item
+  border: 0
+  appearance: none
+  font: inherit
+  text-align: start
+  cursor: pointer
+
+button.ui-collection__item:not(.is-icon-only)
+  width: 100%
+
+.ui-collection__item.is-icon-only
   justify-content: center
-  color: var(--text-p2)
-  img,svg
-    max-width: 100%
-    max-height: 100%
-    object-fit: contain
-    opacity: .5
 
 .ui-collection__content
   min-width: 0
@@ -147,17 +121,6 @@
   corner-shape: round
   background: x-theme-gradient()
 
-.ui-collection__item:hover,
-.ui-collection__item.is-active
-  .ui-collection__leading
-    color: var(--item-theme, var(--theme))
-    img,svg
-      opacity: 1
-    svg [fill='currentColor']
-      fill: var(--item-grad, currentColor)
-    svg [stroke='currentColor']
-      stroke: var(--item-grad, currentColor)
-
 .ui-collection[data-layout='grid']
   .ui-collection__indicator
     display: none
@@ -180,9 +143,3 @@
     font-weight: 700
   .ui-collection__content
     display: flex
-
-.ui-collection-adapter
-  --ui-adapter-bg-hover: var(--ui-item-bg-hover)
-  --ui-adapter-bg-active: var(--ui-item-bg-active)
-  --ui-adapter-shadow-hover: var(--ui-item-shadow-hover)
-  --ui-adapter-shadow-active: var(--ui-item-shadow-active)