@sugarat/theme 0.5.12-beta.0 → 0.5.12-beta.1

package/node.js

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_99255ebfe5ccbf71b0568b407a8fdeff/node_modules/vitepress-plugin-tabs/dist/node/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_f00dcfd3cc5e72074cf41a606f1d799c/node_modules/vitepress-plugin-tabs/dist/node/index.js
 function container_plugin(md, name, options) {
   function validateDefault(params) {
     return params.trim().split(" ", 2)[0] === name;

package/node.mjs

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/utils/node/mdPlugins.ts
 import { createRequire } from "module";
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_99255ebfe5ccbf71b0568b407a8fdeff/node_modules/vitepress-plugin-tabs/dist/node/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.7.3_vitepress@2.0.0-alpha.15_@types+node@24.5.2_async-validator_f00dcfd3cc5e72074cf41a606f1d799c/node_modules/vitepress-plugin-tabs/dist/node/index.js
 function container_plugin(md, name, options) {
   function validateDefault(params) {
     return params.trim().split(" ", 2)[0] === name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.5.12-beta.0",
+  "version": "0.5.12-beta.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -60,7 +60,6 @@
     "artalk": "^2.8.5",
     "markdown-it-mathjax3": "^4.3.2",
     "pagefind": "^1.3.0",
-    "sass": "^1.80.6",
     "typescript": "^5.4.5",
     "vite": "^5.4.9",
     "vitepress": "2.0.0-alpha.15",

package/src/components/Alert.vue

@@ -119,7 +119,7 @@ const isBoldTitle = computed(() => props.description || !!props.title)
   </transition>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 html.dark .sugar-alert {
   background-color: transparent;
 }
@@ -134,122 +134,96 @@ html.dark .sugar-alert {
   background-color: #fff;
   overflow: hidden;
   opacity: 1;
-
   display: flex;
   align-items: center;
-  transition: opacity .2s;
-
-  &.is-center {
-    justify-content: center;
-
-    .sugar-alert__content {
-      text-align: center;
-    }
-  }
-
-  &--success {
-    background-color: #f0f9eb;
-    color: #67c23a;
-
-    .sugar-alert__description {
-      color: #67c23a;
-    }
-
-  }
-
-  &--info {
-    background-color: #f4f4f5;
-    color: #909399;
-
-    .sugar-alert__description {
-      color: #909399;
-    }
-
-  }
-
-  &--warning {
-    background-color: #fdf6ec;
-    color: #e6a23c;
-
-    .sugar-alert__description {
-      color: #e6a23c;
-    }
-
-  }
-
-  &--error {
-    background-color: #fef0f0;
-    color: #f56c6c;
-
-    .sugar-alert__description {
-      color: #f56c6c;
-    }
-
-  }
-
-  &--primary {
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    .sugar-alert__description {
-      color: var(--vp-c-brand-1);
-    }
-  }
-
-  &__content {
-    display: table-cell;
-    padding: 0 8px;
-    width: 100%; // Ensure content takes available space
-  }
-
-  &__icon {
-    font-size: 16px;
-    width: 16px;
-    display: table-cell;
-    color: inherit;
-    vertical-align: middle;
-
-    &.is-big {
-      font-size: 28px;
-      width: 28px;
-    }
-  }
-
-  &__title {
-    font-size: 13px;
-    line-height: 18px;
-    vertical-align: text-top;
-
-    &.is-bold {
-      font-weight: 700;
-    }
-  }
-
-  &__description {
-    font-size: 12px;
-    margin: 5px 0 0 0;
-    line-height: 1.5;
-  }
-
-  &__close-btn {
-    font-size: 12px;
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 15px;
-    cursor: pointer;
-    color: var(--vp-c-text-2); // Use element colors if light
-
-    &.is-customed {
-      font-style: normal;
-      font-size: 11px;
-      line-height: 18px;
-    }
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
+  transition: opacity 0.2s;
+}
+.sugar-alert.is-center {
+  justify-content: center;
+}
+.sugar-alert.is-center .sugar-alert__content {
+  text-align: center;
+}
+.sugar-alert--success {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+.sugar-alert--success .sugar-alert__description {
+  color: #67c23a;
+}
+.sugar-alert--info {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+.sugar-alert--info .sugar-alert__description {
+  color: #909399;
+}
+.sugar-alert--warning {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+.sugar-alert--warning .sugar-alert__description {
+  color: #e6a23c;
+}
+.sugar-alert--error {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+.sugar-alert--error .sugar-alert__description {
+  color: #f56c6c;
+}
+.sugar-alert--primary {
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.sugar-alert--primary .sugar-alert__description {
+  color: var(--vp-c-brand-1);
+}
+.sugar-alert__content {
+  display: table-cell;
+  padding: 0 8px;
+  width: 100%;
+}
+.sugar-alert__icon {
+  font-size: 16px;
+  width: 16px;
+  display: table-cell;
+  color: inherit;
+  vertical-align: middle;
+}
+.sugar-alert__icon.is-big {
+  font-size: 28px;
+  width: 28px;
+}
+.sugar-alert__title {
+  font-size: 13px;
+  line-height: 18px;
+  vertical-align: text-top;
+}
+.sugar-alert__title.is-bold {
+  font-weight: 700;
+}
+.sugar-alert__description {
+  font-size: 12px;
+  margin: 5px 0 0 0;
+  line-height: 1.5;
+}
+.sugar-alert__close-btn {
+  font-size: 12px;
+  opacity: 1;
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  cursor: pointer;
+  color: var(--vp-c-text-2);
+}
+.sugar-alert__close-btn.is-customed {
+  font-style: normal;
+  font-size: 11px;
+  line-height: 18px;
+}
+.sugar-alert__close-btn:hover {
+  opacity: 0.7;
 }
 
 .sugar-alert-fade-enter-from,
@@ -257,52 +231,39 @@ html.dark .sugar-alert {
   opacity: 0;
 }
 
-html.dark {
-  .sugar-alert {
-    &--success {
-      background-color: #1c2518;
-      color: #67c23a;
-
-      .sugar-alert__description {
-        color: #67c23a;
-      }
-    }
-
-    &--info {
-      background-color: #202121;
-      color: #909399;
-
-      .sugar-alert__description {
-        color: #909399;
-      }
-    }
-
-    &--warning {
-      background-color: #292218;
-      color: #e6a23c;
-
-      .sugar-alert__description {
-        color: #e6a23c;
-      }
-    }
-
-    &--error {
-      background-color: #2b1d1d;
-      color: #f56c6c;
-
-      .sugar-alert__description {
-        color: #f56c6c;
-      }
-    }
-
-    &--primary {
-      background-color: var(--vp-c-brand-soft);
-      color: var(--vp-c-brand-1);
-
-      .sugar-alert__description {
-        color: var(--vp-c-brand-1);
-      }
-    }
-  }
+html.dark .sugar-alert--success {
+  background-color: #1c2518;
+  color: #67c23a;
+}
+html.dark .sugar-alert--success .sugar-alert__description {
+  color: #67c23a;
+}
+html.dark .sugar-alert--info {
+  background-color: #202121;
+  color: #909399;
+}
+html.dark .sugar-alert--info .sugar-alert__description {
+  color: #909399;
+}
+html.dark .sugar-alert--warning {
+  background-color: #292218;
+  color: #e6a23c;
+}
+html.dark .sugar-alert--warning .sugar-alert__description {
+  color: #e6a23c;
+}
+html.dark .sugar-alert--error {
+  background-color: #2b1d1d;
+  color: #f56c6c;
+}
+html.dark .sugar-alert--error .sugar-alert__description {
+  color: #f56c6c;
+}
+html.dark .sugar-alert--primary {
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+html.dark .sugar-alert--primary .sugar-alert__description {
+  color: var(--vp-c-brand-1);
 }
 </style>

package/src/components/Avatar.vue

@@ -38,7 +38,7 @@ const sizeStyle = computed(() => {
   </span>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-avatar {
   display: inline-flex;
   justify-content: center;
@@ -51,13 +51,12 @@ const sizeStyle = computed(() => {
   font-size: 14px;
   vertical-align: middle;
   min-width: 50px;
-
-  > img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
+}
+.blog-avatar > img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .blog-avatar--circle {

package/src/components/BlogAlert.vue

@@ -63,7 +63,7 @@ function handleClose() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .global-alert {
   position: fixed;
   z-index: 999;
@@ -73,16 +73,16 @@ function handleClose() {
   left: 50%;
   transform: translateX(-50%);
   width: auto;
-  :deep(.sugar-alert__content) {
-    padding-right: 20px;
-  }
 }
+.global-alert :deep(.sugar-alert__content) {
+  padding-right: 20px;
+}
+
 @media screen and (max-width: 1100px) {
   .global-alert {
     width: 50%;
   }
 }
-
 @media screen and (max-width: 600px) {
   .global-alert {
     width: 90%;

package/src/components/BlogApp.vue

@@ -188,7 +188,7 @@ const openTransition = useDarkTransitionConfig()
   </Layout>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .home {
   margin: 0 auto;
   padding: 20px;
@@ -200,7 +200,6 @@ const openTransition = useDarkTransitionConfig()
     padding-top: var(--vp-nav-height);
   }
 }
-
 .header-banner {
   width: 100%;
   padding: 60px 0;
@@ -229,31 +228,25 @@ const openTransition = useDarkTransitionConfig()
     top: 40px;
   }
 }
-
 @media screen and (max-width: 767px) {
   .content-wrapper {
     flex-wrap: wrap;
   }
-
   .blog-info-wrapper {
     margin: 20px 0;
     width: 100%;
   }
-
   .normal-mode {
     display: none;
   }
-
   .minify-mode {
     display: block;
   }
 }
-
 @media screen and (min-width: 768px) {
   .minify-mode {
     display: none;
   }
-
   .normal-mode {
     display: block;
   }

package/src/components/BlogArticleAnalyze.vue

@@ -237,19 +237,18 @@ const timeTitle = computed(() =>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .doc-analyze {
   color: var(--vp-c-text-2);
   font-size: 14px;
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
-
-  span {
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-  }
+}
+.doc-analyze span {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
 }
 
 .meta-des,
@@ -260,46 +259,42 @@ const timeTitle = computed(() =>
   margin-top: 6px;
   display: flex;
   flex-wrap: wrap;
-
-  >span {
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .icon {
-      margin-right: 4px;
-      --color: inherit;
-      align-items: center;
-      display: inline-flex;
-      height: 1em;
-      justify-content: center;
-      line-height: 1em;
-      position: relative;
-      width: 1em;
-      fill: currentColor;
-      color: var(--color) inherit;
-      font-size: inherit;
-    }
-  }
-
-  .link {
-    color: var(--vp-c-text-2);
-
-    &:hover {
-      color: var(--vp-c-brand-1);
-      cursor: pointer;
-    }
-  }
+}
+.meta-des > span,
+.new-line-meta-des > span {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.meta-des > span .icon,
+.new-line-meta-des > span .icon {
+  margin-right: 4px;
+  --color: inherit;
+  align-items: center;
+  display: inline-flex;
+  height: 1em;
+  justify-content: center;
+  line-height: 1em;
+  position: relative;
+  width: 1em;
+  fill: currentColor;
+  color: var(--color) inherit;
+  font-size: inherit;
+}
+.meta-des .link,
+.new-line-meta-des .link {
+  color: var(--vp-c-text-2);
+}
+.meta-des .link:hover,
+.new-line-meta-des .link:hover {
+  color: var(--vp-c-brand-1);
+  cursor: pointer;
 }
 
-.tags {
-  a.link:not(:last-child) {
-    &::after {
-      content: '·';
-      display: inline-block;
-      padding: 0 4px;
-    }
-  }
+.tags a.link:not(:last-child)::after {
+  content: "·";
+  display: inline-block;
+  padding: 0 4px;
 }
 </style>

package/src/components/BlogAuthor.vue

@@ -36,22 +36,20 @@ useHoverSpin(imgRef, home?.value?.hoverSpin)
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .blog-author {
   margin-bottom: 20px;
-
-  img {
-    display: block;
-    margin: 10px auto;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    background-color: rgba(var(--bg-gradient-home));
-    cursor: pointer;
-  }
-
-  p {
-    text-align: center;
-  }
+}
+.blog-author img {
+  display: block;
+  margin: 10px auto;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(var(--bg-gradient-home));
+  cursor: pointer;
+}
+.blog-author p {
+  text-align: center;
 }
 </style>

package/src/components/BlogBackToTop.vue

@@ -40,7 +40,7 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .back-to-top {
   position: fixed;
   width: v-bind(docWidth);
@@ -52,29 +52,26 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   display: flex;
   justify-content: right;
   z-index: 200;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  .icon-wrapper {
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    right: -80px;
-    background-color: var(--vp-c-bg);
-    box-shadow: var(--box-shadow);
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    &:hover {
-      box-shadow: var(--box-shadow-hover);
-    }
-  }
+}
+.back-to-top:hover {
+  opacity: 1;
+}
+.back-to-top .icon-wrapper {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.back-to-top .icon-wrapper:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 @media screen and (max-width: 1200px) {