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

package/source/css/_appearances/glass.styl

@@ -0,0 +1,138 @@
+$glass-leftbar-background-type = hexo-config('appearance.backgrounds.leftbar.type')
+$glass-leftbar-background-image = hexo-config('appearance.backgrounds.leftbar.image')
+$glass-leftbar-has-extra-background = $glass-leftbar-background-type != 'none'
+$glass-leftbar-uses-image = $glass-leftbar-background-type == 'image' && $glass-leftbar-background-image
+$glass-leftbar-decoration-inset = 16px
+$glass-leftbar-decoration-blur = convert(hexo-config('appearance.backgrounds.leftbar.backdrop.radius'))
+$glass-leftbar-decoration-saturation = 350%
+$glass-leftbar-gradient-light = hexo-config('appearance.backgrounds.leftbar.gradient.light')
+$glass-leftbar-gradient-dark = hexo-config('appearance.backgrounds.leftbar.gradient.dark')
+$glass-leftbar-gradient-light-base = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.light.0'))
+$glass-leftbar-gradient-light-top = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.light.1'))
+$glass-leftbar-gradient-light-right = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.light.2'))
+$glass-leftbar-gradient-light-bottom = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.light.3'))
+$glass-leftbar-gradient-dark-base = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.dark.0'))
+$glass-leftbar-gradient-dark-top = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.dark.1'))
+$glass-leftbar-gradient-dark-right = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.dark.2'))
+$glass-leftbar-gradient-dark-bottom = unquote(hexo-config('appearance.backgrounds.leftbar.gradient.dark.3'))
+
+glass-leftbar-background-filter($opacity)
+  --background-opacity: $opacity
+  filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
+
+glass-leftbar-background-image($opacity)
+  glass-leftbar-background-filter($opacity)
+  background-color: transparent
+  background-image: url($glass-leftbar-background-image)
+  background-position: center
+  background-size: cover
+  background-repeat: no-repeat
+
+glass-leftbar-background-gradient($base, $top, $right, $bottom, $opacity)
+  --background-opacity: $opacity
+  filter: blur(var(--blur-px)) opacity(var(--background-opacity))
+  background-color: $base
+  background-image: radial-gradient(ellipse at 28% 24%, $top 0%, $top 65%, transparent 100%), radial-gradient(ellipse at 60% 50%, $right 0%, $right 60%, transparent 100%), conic-gradient(from 210deg at 32% 72%, $bottom 0deg, $bottom 110deg, transparent 190deg, $top 270deg, transparent 360deg)
+  background-position: left top, right 42%, left bottom
+  background-size: 56% 34%, 52% 30%, 60% 38%
+  background-repeat: no-repeat
+
+.site-shell
+  --shell-gap: var(--gap-page)
+  --shell-edge-inset: 16px
+  --hoverable-card-hover-shadow: $boxshadow-card
+  --hoverable-card-hover-transform: none
+
+.ui-surface
+  appearance-glass-surface()
+
+appearance-glass-interactions-light()
+appearance-standard-prose()
+appearance-card-listing-nav()
+
+// Rightbar TOC 的当前位置仅由文字与左侧标记表达；指针、键盘与按压反馈仍复用 Glass 交互材质。
+.site-region--rightbar .widget-wrapper.toc .toc-link.active:not(:hover):not(:focus-visible):not(:active)
+  background: transparent
+  box-shadow: none
+
+.widget-wrapper.markdown .ui-interactive
+  background: var(--bg-a10)
+
+.site-region--topbar.ui-surface,
+.site-region--leftbar .ui-surface
+  border: 0
+  border-radius: $border-card-l
+  background: transparent
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+
+.site-region--leftbar .site-region__surface.ui-surface
+  box-shadow: none
+
+@media screen and (max-width: $device-laptop)
+  .site-region--rightbar .site-region__surface.ui-drawer-surface
+    appearance-glass-surface()
+    background: var(--bg-a50)
+    box-shadow: none
+
+@media screen and (max-width: $device-tablet)
+  .site-region--leftbar .site-region__surface.ui-surface
+    background: var(--bg-a50)
+
+.site-region--topbar > .site-region__viewport
+  border-radius: inherit
+  corner-shape: inherit
+
+.site-region--leftbar
+  appearance-translucent-leftbar-light()
+  .site-region__decoration
+    display: none
+    if $glass-leftbar-has-extra-background
+      display: block
+      pointer-events: none
+      position: absolute
+      --inset: $glass-leftbar-decoration-inset
+      top: var(--inset)
+      bottom: var(--inset)
+      left: var(--inset)
+      right: var(--inset)
+      border-radius: inherit
+      --saturate: $glass-leftbar-decoration-saturation
+      --blur-px: $glass-leftbar-decoration-blur
+      --background-opacity: 1
+      if $glass-leftbar-uses-image
+        glass-leftbar-background-image(hexo-config('appearance.backgrounds.leftbar.opacity'))
+      else if length($glass-leftbar-gradient-light) == 4
+        glass-leftbar-background-gradient($glass-leftbar-gradient-light-base, $glass-leftbar-gradient-light-top, $glass-leftbar-gradient-light-right, $glass-leftbar-gradient-light-bottom, hexo-config('appearance.backgrounds.leftbar.opacity'))
+      :root[data-theme='dark'] &
+        if $glass-leftbar-uses-image
+          glass-leftbar-background-image(hexo-config('appearance.backgrounds.leftbar.opacity') * 0.75)
+        else if length($glass-leftbar-gradient-dark) == 4
+          glass-leftbar-background-gradient($glass-leftbar-gradient-dark-base, $glass-leftbar-gradient-dark-top, $glass-leftbar-gradient-dark-right, $glass-leftbar-gradient-dark-bottom, hexo-config('appearance.backgrounds.leftbar.opacity'))
+      :root:not([data-theme]) &
+        @media screen and (prefers-color-scheme: dark)
+          if $glass-leftbar-uses-image
+            glass-leftbar-background-image(hexo-config('appearance.backgrounds.leftbar.opacity') * 0.75)
+          else if length($glass-leftbar-gradient-dark) == 4
+            glass-leftbar-background-gradient($glass-leftbar-gradient-dark-base, $glass-leftbar-gradient-dark-top, $glass-leftbar-gradient-dark-right, $glass-leftbar-gradient-dark-bottom, hexo-config('appearance.backgrounds.leftbar.opacity'))
+
+if $glass-leftbar-has-extra-background
+  @media screen and (min-width: ($device-tablet + 1px))
+    html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar .site-region__decoration
+      --inset: 0px
+      --blur-px: ($glass-leftbar-decoration-blur / 2)
+
+:root[data-theme='dark']
+  appearance-glass-interactions-dark()
+  .site-region--leftbar
+    appearance-translucent-leftbar-dark()
+
+:root:not([data-theme])
+  @media screen and (prefers-color-scheme: dark)
+    appearance-glass-interactions-dark()
+    .site-region--leftbar
+      appearance-translucent-leftbar-dark()
+
+.listing-nav__surface.is-pinned
+  bar-glass()
+  background: transparent

package/source/css/_appearances/minimal.styl

@@ -0,0 +1,325 @@
+$editorial-paper-light = x-hsla(44, 50%, 96%, 1)
+$editorial-paper-dark = x-hsla(44, 10%, 10%, 1)
+$editorial-card-light = x-hsla(44, 50%, 98%, 1)
+$editorial-card-dark = x-hsla(44, 10%, 14%, 1)
+
+// Minimal 使用同一暖纸色系承载背景与卡片，并覆盖全局冷白、冷灰与移动端纯黑背景。
+:root
+  --background: $editorial-paper-light
+  --card: $editorial-card-light
+
+:root:not([data-theme])
+  @media (prefers-color-scheme: dark)
+    --background: $editorial-paper-dark
+    --card: $editorial-card-dark
+
+:root[data-theme='light']
+  --background: $editorial-paper-light
+  --card: $editorial-card-light
+
+:root[data-theme='dark']
+  --background: $editorial-paper-dark
+  --card: $editorial-card-dark
+
+.site-shell
+  --leftbar-gap: 0px
+
+// Topbar 与 Listing Nav 参与自然文档流，不占用滚动中的固定视口空间。
+.site-shell[data-regions~='topbar']
+  --shell-sticky-offset: var(--shell-edge-inset)
+  --shell-topbar-bottom: 0px
+
+.site-region--topbar,
+.listing-nav
+  position: static
+  top: auto
+
+.site-shell[data-regions~='topbar'] .listing-nav .listing-nav__surface.is-pinned
+  transform: none
+
+// Editorial Minimal 让布局与排版承担层级，普通 Surface 不再制造卡片边界。
+.ui-surface,
+.site-region--topbar.ui-surface,
+.site-region--leftbar .site-region__surface.ui-surface
+  border: 0
+  background: transparent
+  box-shadow: none
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+
+appearance-transparent-leftbar()
+appearance-editorial-interactions()
+appearance-standard-prose()
+
+// Wiki Brand Search 静止态保留轻量虚线边界，交互态与其它复合控件统一。
+.brand-search .search-trigger
+  border: 1px dashed var(--block-border)
+  box-shadow: none
+
+// Region 内的普通 Widget 去掉填充表面；代码、状态和浮层仍由各自组件负责。
+.widget-wrapper.markdown .widget-body,
+.widget-wrapper.tagcloud .widget-body,
+.widget-wrapper.timeline .tag-plugin.timeline .timenode .body,
+.site-region--leftbar .widget-wrapper.timeline .body,
+.site-region--rightbar .widgets .widget-wrapper.toc
+  border: 0
+  background: transparent
+  box-shadow: none
+
+.widget-wrapper.toc .toc-link.active
+  background: transparent
+  box-shadow: none
+
+// Drawer 覆盖正文时必须提供不透明遮挡面，桌面常驻侧栏继续保持透明。
+.site-shell[data-drawer='leftbar'] .site-region--leftbar .site-region__surface,
+.site-shell[data-drawer='rightbar'] .site-region--rightbar .site-region__surface
+  background: var(--card)
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+  &::before
+    display: none
+
+.site-shell[data-drawer='leftbar'] .site-region--leftbar .site-region__surface
+  border-radius: $border-card-l
+  corner-shape: $corner-shape
+
+// Listing Nav 只保留文字导航；当前项持续显示下划线，但不保留旧按钮背景。
+.listing-nav
+  margin: 1rem
+.listing-nav__surface,
+.listing-nav__surface.is-pinned
+  margin: 0
+  border: 0
+  border-radius: 0
+  border-bottom: 1px dashed var(--block-border)
+  padding: 1rem 0
+  background: transparent
+  box-shadow: none
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+.listing-nav__viewport
+  border-radius: 0
+.listing-nav nav
+  padding: 0
+.listing-nav nav a
+  appearance-editorial-underline()
+  width: fit-content
+  font-size: var(--fsh4)
+  line-height: 1.2
+  margin: .25rem .0
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+  &+a
+    margin-left: 1rem
+  &:hover,
+  &:focus-visible
+    appearance-editorial-underline-active()
+  &.active
+    appearance-editorial-underline()
+    appearance-editorial-underline-active()
+    background: transparent
+    backdrop-filter: none
+    -webkit-backdrop-filter: none
+
+// bar-item-active() 的暗色分支特异性更高，Minimal 在相同主题范围内收口。
+:root[data-theme='dark'] .listing-nav nav a.active
+  appearance-editorial-underline()
+  appearance-editorial-underline-active()
+  background: transparent
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+
+:root:not([data-theme])
+  @media screen and (prefers-color-scheme: dark)
+    .listing-nav nav a.active
+      appearance-editorial-underline()
+      appearance-editorial-underline-active()
+      background: transparent
+      backdrop-filter: none
+      -webkit-backdrop-filter: none
+
+// 分页以排版表示位置，不再包裹成一条卡片。
+.paginator-wrap
+  border: 0
+  background: transparent
+  box-shadow: none
+  overflow: visible
+  .page-number
+    background: transparent
+  a.page-number,
+  .current
+    appearance-editorial-underline()
+    margin: 4px 8px
+  a.page-number:hover,
+  a.page-number:focus-visible,
+  .current
+    appearance-editorial-underline-active()
+  .extend
+    border: 0
+    appearance-editorial-outline()
+  a.extend:hover,
+  a.extend:focus-visible
+    appearance-editorial-outline-active()
+
+// 文本列表使用文章标题式下划线；Tag 等复合短控件使用同色内描边。
+.post-list .archive-list a.post,
+.post-list #cats a.cat,
+.page-footer .sitemap .sitemap-group > a,
+  appearance-editorial-underline()
+  border: 0
+  background-color: transparent
+
+.post-list #cats a.cat
+  margin: .5em 1rem
+
+.page-footer .sitemap .sitemap-group > a
+  margin: 4px
+
+.post-list .archive-list a.post:hover,
+.post-list .archive-list a.post:focus-visible,
+.post-list #cats a.cat:hover,
+.post-list #cats a.cat:focus-visible,
+.page-footer .sitemap .sitemap-group > a:hover,
+.page-footer .sitemap .sitemap-group > a:focus-visible,
+.page-footer.footnote .text a:hover,
+.page-footer.footnote .text a:focus-visible
+  appearance-editorial-underline-active()
+  border: 0
+  background-color: transparent
+
+.post-list #tags a.tag,
+.article-tags a.tag
+  appearance-editorial-outline()
+  // box-shadow: inset 0 0 0 1px var(--block)
+
+.post-list #tags a.tag:hover,
+.post-list #tags a.tag:focus-visible,
+.article-tags a.tag:hover,
+.article-tags a.tag:focus-visible
+  appearance-editorial-outline-active()
+
+// 普通文章卡片与包装器透明；封面仍作为内容媒体存在。
+.site-main .post-list .post-title
+  font-size: var(--fsh3)
+.post-list .post-card-wrap,
+.post-list:not(.topic) .post-card.card-hover
+  box-shadow: none
+
+.post-list.wiki .wiki-card.card-hover
+  box-shadow: none
+
+.post-list.post .post-card.post.photo
+  border-radius: $border-card-l
+.post-list.post .post-card
+  border-radius: 0
+
+.post-list.post .post-card-wrap
+  margin: 1rem 0
+  padding-bottom: 1rem
+  border-radius: 0
+  border-bottom: 1px dashed var(--block-border)
+
+.post-list .post-card .excerpt
+  margin: .5rem 0
+  > p
+    margin: 0
+
+.post-list:not(.topic) .post-card:not(.photo)
+  border: 0
+  background-color: transparent
+  background-image: none
+  box-shadow: none
+
+.post-list:not(.topic) .post-card:not(.photo) .md-text
+  padding: 0
+  margin: 0
+
+// 图片卡与复合卡保留内容裁切，只以同色内描边响应，不产生上浮阴影。
+.post-list .post-card.photo,
+.post-list .post-card.wiki,
+.pin-slider,
+.post-list.topic .post-card.topic .cover
+  appearance-editorial-outline()
+
+.post-list .post-card.photo:hover,
+.post-list .post-card.photo:focus-visible,
+.post-list .post-card.wiki:hover,
+.post-list .post-card.wiki:focus-visible,
+.pin-slider:hover,
+.pin-slider:focus-within,
+.post-list.topic .post-card.topic .cover:hover,
+.post-list.topic .post-card.topic .cover:focus-visible
+  appearance-editorial-outline-active()
+
+.post-list.wiki .wiki-card.no-cover,
+.wiki-card-cover.no-cover,
+.md-text .link-card,
+.widget-wrapper.ghrepo .repo
+  background: transparent
+  box-shadow: none
+
+// hoverable-card() 按明暗模式生成高优先级阴影；Minimal 在相同状态层级接管为内描边。
+:root[data-theme='light'],
+:root[data-theme='dark'],
+:root:not([data-theme])
+  .md-text .link-card,
+  .widget-wrapper.ghrepo .repo,
+  .tag-plugin.grid[bg='card'] > .cell
+    appearance-editorial-outline()
+    transform: none
+    box-shadow: inset 0 0 0 1px var(--block-border)
+
+  .md-text .link-card:hover,
+  .md-text .link-card:focus-visible,
+  .widget-wrapper.ghrepo .repo:hover,
+  .widget-wrapper.ghrepo .repo:focus-visible,
+  .tag-plugin.grid[bg='card'] > .cell:hover,
+  .tag-plugin.grid[bg='card'] > .cell:focus-within
+    appearance-editorial-outline-active()
+    transform: none
+
+// 搜索结果是复合导航条目；Dialog 与输入区域继续保留语义容器。
+.search-wrapper .search-result li a
+  background: transparent
+  box-shadow: none
+
+// 页脚是文章元信息而不是独立卡片，内部语义分隔线继续保留。
+.article-footer
+  background: transparent
+  box-shadow: none
+
+.article-footer #contributors .header a.edit,
+.article-footer #contributors .body .users-wrap .user-card .card-link
+  appearance-editorial-outline()
+  background: transparent
+
+.article-footer #contributors .header a.edit:hover,
+.article-footer #contributors .header a.edit:focus-visible,
+.article-footer #contributors .body .users-wrap .user-card .card-link:hover,
+.article-footer #contributors .body .users-wrap .user-card .card-link:focus-visible
+  appearance-editorial-outline-active()
+
+.paginator-wrap .extend
+  border-radius: $border-button
+
+.paginator-wrap .extend.prev
+  border-right: 0
+.paginator-wrap .extend.next
+  border-left: 0
+
+@media (prefers-reduced-motion: reduce)
+  .listing-nav nav a,
+  .paginator-wrap a,
+  .paginator-wrap .current,
+  .post-list .archive-list a.post,
+  .post-list #cats a.cat,
+  .post-list #tags a.tag,
+  .article-tags a.tag,
+  .page-footer a,
+  .md-text .link-card,
+  .widget-wrapper.ghrepo .repo,
+  .tag-plugin.grid[bg='card'] > .cell
+    transition: none
+
+.page-footer .sitemap .sitemap-group > a
+  padding: 0

package/source/css/_common/base.styl

@@ -9,11 +9,9 @@ pre
 a
   text-decoration: none
   color: var(--link)
-  &:hover
-    color: var(--accent)
 
 .md-text p:not([class]) 
-  text-align: convert(hexo-config('style.text-align'))
+  text-align: convert(hexo-config('appearance.typography.content_align'))
 
 hr
   color: var(--text-meta)
@@ -44,19 +42,17 @@ table:not([class])
   font-size: var(--fs-content)
   scrollbar(0,0)
   th
-    background: var(--block)
-    border-top: 1px solid var(--block-border)
-    border-bottom: 1px solid var(--block-border)
+    border-style: solid
+    border-width: 1px 0
   td,th
     padding: 4px 1em
     line-height: 1.5
   tr
     word-break: keep-all
     white-space: nowrap
-    border-bottom: 1px dashed var(--block-border)
+    border-bottom-style: dashed
+    border-bottom-width: 1px
     trans()
-    &:hover
-      background: var(--block)
 
   @media screen and (min-width: $device-mobile-max)
     width 100%

package/source/css/_common/blockquote.styl

@@ -16,6 +16,5 @@ blockquote
     border-radius: 1px
     left: 0
     opacity: 0.5
-    background: var(--text-meta)
   &:hover:before
     background: var(--theme)

package/source/css/_common/button.styl

@@ -31,7 +31,7 @@ a.button.start.gradient
   ondark()
     transition: 0.38s ease-out
     z-index: 0
-    background: convert(hexo-config('style.gradient.start'))
+    background: convert(hexo-config('appearance.gradients.primary_action'))
     background-size: 1000%
     color: white
     text-shadow: 0 0 1px rgba(0,0,0,0.12)

package/source/css/_common/device.styl

@@ -7,32 +7,22 @@
   @media screen and (max-width: $device-mobile-max)
     display: none !important
 
-.float-panel
-  position: sticky
-  grid-column-end: span 3
-  --inset: 2rem
-  right: 0
-  bottom: calc(var(--inset) * 1)
-  margin-left: auto
-  margin-right: var(--inset)
-  float: right
-  z-index: 999999
-  display: flex
+.site-dock
+  position: fixed
+  inset-inline-end: 2rem
+  bottom: 2rem
+  z-index: 20
+  display: none
   align-items: center
   justify-content: center
   flex-direction: column
   gap: $bar-item-gap
   padding: $bar-item-gap
-  @media screen and (min-width: $device-mobile-max)
-    margin-right: 3rem
   overflow: hidden
   trans1: all
-
   bar-glass()
 
-
-// 侧边栏弹出按钮
-.float-panel button
+.site-dock__button
   bar-item()
   cursor: pointer
   color: var(--text)
@@ -45,36 +35,28 @@
   padding: 4px
   line-height: 0
   font-size: 28px
-  display: flex
+  display: none
   justify-content: center
   align-items: center
-  >*
-    path#sep
-      trans1 transform
+  > *
     width: auto
     height: 28px
+    path#sep
+      trans1 transform
 
-// 侧边栏弹出后
-.l_body[leftbar] .float-panel button.leftbar-toggle, .l_body[rightbar] .float-panel button.rightbar-toggle
+.site-shell[data-drawer='leftbar'] .site-dock__button--leftbar,
+.site-shell[data-drawer='rightbar'] .site-dock__button--rightbar
   bar-item-active()
-
-.l_body[leftbar] .float-panel button.leftbar-toggle
   color: var(--theme)
-  svg g
-    fill: currentColor
-    fill-opacity: 0.3
-    path#sep
-      transform: translateX(2px)
-
 
-// 侧边栏有内容时才显示弹出按钮
-.l_body .l_right:empty+.float-panel button.rightbar-toggle
-  display: none !important
-
-.l_body[rightbar] .float-panel button.rightbar-toggle
-  color: var(--theme)
-  svg g
-    fill: currentColor
-    fill-opacity: 0.3
-    path#sep
-      transform: translateX(2px)
+@media screen and (max-width: $device-laptop)
+  .site-shell[data-regions~='rightbar'] .site-dock
+    display: flex
+  .site-shell[data-regions~='rightbar'] .site-dock__button--rightbar
+    display: flex
+
+@media screen and (max-width: $device-tablet)
+  .site-shell[data-regions~='leftbar'] .site-dock
+    display: flex
+  .site-shell[data-regions~='leftbar'] .site-dock__button--leftbar
+    display: flex

package/source/css/_common/dropdown.styl

@@ -17,7 +17,6 @@
     outline: none
     border-radius: $border-bar
     color: var(--text-p2)
-    background: var(--block)
     text-decoration: none
     white-space: nowrap
     &::-webkit-details-marker
@@ -26,8 +25,7 @@
       display: none
     &:hover, &:focus-visible
       color: var(--text-p1)
-      background: var(--block-border)
-    >svg, >img, >.icon
+    >.ui-icon, >.dropdown-arrow
       flex: 0 0 1.25rem
       width: 1.25rem
       height: 1.25rem
@@ -40,9 +38,17 @@
     z-index: 10
     >.dropdown-trigger
       color: var(--text-p1)
-      background: var(--block-border)
       >.dropdown-arrow
         transform: rotate(180deg)
+
+.tag-plugin > .dropdown-trigger
+  background: var(--block)
+  &:hover
+    background: var(--block-border)
+
+.tag-plugin[open] > .dropdown-trigger
+  background: var(--block-border)
+
 .dropdown-menu
   display: flex
   flex-direction: column
@@ -54,18 +60,9 @@
   overflow-x: hidden
   overflow-y: auto
   font-size: $fs-14
-  border: 1px solid var(--block-border)
   border-radius: $border-card
   corner-shape: $corner-shape
-  background: rgba(white, 0.3)
-  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
-  backdrop-filter: saturate(300%) blur(16px)
-  -webkit-backdrop-filter: saturate(300%) blur(16px)
-  :root[data-theme="dark"] &
-    background: rgba(white, 0.2)
-  :root:not([data-theme]) &
-    @media (prefers-color-scheme: dark)
-      background: rgba(white, 0.2)
+  frosted-surface()
   text-align: left
   line-height: 1
 
@@ -73,6 +70,15 @@
   min-width: 150px
   --ui-item-min-height: calc(1.5rem + 2 * var(--ui-item-padding-y))
 
+.dropdown-menu button.dropdown-item
+  width: 100%
+  border: 0
+  color: inherit
+  font: inherit
+  text-align: left
+  cursor: pointer
+  appearance: none
+
 .dropdown > .dropdown-menu
   position: absolute
   z-index: 10