feat(Custom Containers): redesign the custom container style and defa…

…ult to "left shadow mode" (#110)
Theo-Messi · Oct 30, 2024 · 2ab8cbc · 2ab8cbc
1 parent 09e5379
commit 2ab8cbc
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 39 deletions.
diff --git a/packages/Lumen/package.json b/packages/Lumen/package.json
@@ -66,6 +66,7 @@
     "./home-blocks": "./theme/home-links.scss",
     "./pic": "./theme/picture.scss",
     "./badge": "./theme/badge.scss",
+    "./doc-blocks-border": "./theme/doc-blocks-border.scss",
     "./package.json": "./package.json"
   },
   "packageManager": "pnpm@9.12.3"

diff --git a/packages/Lumen/theme/doc-blocks-border.scss b/packages/Lumen/theme/doc-blocks-border.scss
@@ -0,0 +1,96 @@
+/**
+ * Component: doc-blocks
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  border: 1px solid;
+
+  p:first-child {
+    margin: 0 0 0 1.25rem;
+  }
+
+  &:before {
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    position: absolute;
+  }
+
+  &.info,
+  &.note,
+  &.tip,
+  &.important {
+    &:before {
+      content: '\f06a';
+    }
+  }
+
+  &.warning,
+  &.caution,
+  &.danger {
+    &:before {
+      content: '\f071';
+    }
+  }
+
+  &.details {
+    border-color: var(--vp-c-text-2);
+    p {
+      color: var(--vp-c-text-2);
+    }
+  }
+
+  &.info,
+  &.note {
+    border-color: var(--vp-c-text-2);
+    color: var(--vp-c-text-2);
+    .custom-block-title,
+    &:before {
+      color: var(--vp-c-text-1);
+    }
+  }
+
+  &.tip {
+    border-color: var(--vp-c-green-1);
+    color: var(--vp-c-green-2);
+    background-color: var(--vp-c-green-soft);
+    .custom-block-title,
+    &:before {
+      color: var(--vp-c-green-1);
+    }
+    code {
+      color: var(--vp-c-green-1);
+      background-color: var(--vp-c-green-soft);
+    }
+    a {
+      color: var(--vp-c-green-1);
+    }
+  }
+
+  &.warning {
+    border-color: var(--vp-c-warning-1);
+    color: var(--vp-c-warning-2);
+    .custom-block-title,
+    &:before {
+      color: var(--vp-c-warning-1);
+    }
+  }
+
+  &.danger,
+  &.caution {
+    border-color: var(--vp-c-danger-1);
+    color: var(--vp-c-danger-2);
+    .custom-block-title,
+    &:before {
+      color: var(--vp-c-danger-1);
+    }
+  }
+
+  &.important {
+    border-color: var(--vp-c-important-1);
+    color: var(--vp-c-important-2);
+    .custom-block-title,
+    &:before {
+      color: var(--vp-c-important-1);
+    }
+  }
+}
diff --git a/packages/Lumen/theme/doc-blocks.scss b/packages/Lumen/theme/doc-blocks.scss
@@ -2,22 +2,17 @@
  * Component: doc-blocks
  * -------------------------------------------------------------------------- */
 
-.custom-block {
-  padding: 1.25rem 1.5rem 0.5rem 2.625rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  position: relative;
+.vp-doc .custom-block {
+  border-left: 6px solid;
+
+  p:first-child {
+    margin: 0 0 0 1.25rem;
+  }
 
   &:before {
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
-    font-size: 1rem;
     position: absolute;
-    left: 1rem;
-    color: var(--vp-c-text-1);
   }
 
   &.info,
@@ -38,20 +33,15 @@
   }
 
   &.details {
-    border: 1px solid rgba(144, 164, 183, 1);
+    border-left-color: var(--vp-c-text-2);
     p {
       color: var(--vp-c-text-2);
     }
-    .custom-block-title,
-    &:before {
-      content: '\f059';
-      color: var(--vp-c-text-1);
-    }
   }
 
   &.info,
   &.note {
-    border: 1px solid rgba(144, 164, 183, 1);
+    border-left-color: var(--vp-c-text-2);
     color: var(--vp-c-text-2);
     .custom-block-title,
     &:before {
@@ -60,40 +50,47 @@
   }
 
   &.tip {
-    border: 1px solid var(--vp-c-green-1);
+    border-left-color: var(--vp-c-green-1);
     color: var(--vp-c-green-2);
     background-color: var(--vp-c-green-soft);
     .custom-block-title,
     &:before {
       color: var(--vp-c-green-1);
     }
+    code {
+      color: var(--vp-c-green-1);
+      background-color: var(--vp-c-green-soft);
+    }
+    a {
+      color: var(--vp-c-green-1);
+    }
   }
 
   &.warning {
-    border: 1px solid var(--vp-c-yellow-1);
-    color: var(--vp-c-yellow-2);
+    border-left-color: var(--vp-c-warning-1);
+    color: var(--vp-c-warning-2);
     .custom-block-title,
     &:before {
-      color: var(--vp-c-yellow-1);
+      color: var(--vp-c-warning-1);
     }
   }
 
   &.danger,
   &.caution {
-    border: 1px solid var(--vp-c-red-1);
-    color: var(--vp-c-red-2);
+    border-left-color: var(--vp-c-danger-1);
+    color: var(--vp-c-danger-2);
     .custom-block-title,
     &:before {
-      color: var(--vp-c-red-1);
+      color: var(--vp-c-danger-1);
     }
   }
 
   &.important {
-    border: 1px solid var(--vp-c-purple-1);
-    color: var(--vp-c-purple-2);
+    border-left-color: var(--vp-c-important-1);
+    color: var(--vp-c-important-2);
     .custom-block-title,
     &:before {
-      color: var(--vp-c-purple-1);
+      color: var(--vp-c-important-1);
     }
   }
 }
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
@@ -17,6 +17,7 @@ import {
 import { Aside_Data, Footer_Data, Twikoo_Data } from '../data'
 import 'virtual:group-icons.css'
 import '@theojs/lumen/theme'
+// import '@theojs/lumen/doc-blocks-border'
 
 export default {
   extends: DefaultTheme,

diff --git a/packages/docs/guide/theme.md b/packages/docs/guide/theme.md
@@ -17,7 +17,8 @@ import '@theojs/lumen/icon' /* 图标 */
 import '@theojs/lumen/button' /* 按钮 */
 import '@theojs/lumen/colors' /* 配色 */
 import '@theojs/lumen/doc' /* 文档样式 */
-import '@theojs/lumen/doc-blocks' /* 容器样式 */
+import '@theojs/lumen/doc-blocks' /* 容器样式 默认左侧阴影模式 */
+import '@theojs/lumen/doc-blocks-border' /* 容器样式 边框 */
 import '@theojs/lumen/home' /* 首页样式 */
 import '@theojs/lumen/home-blocks' /* 首页按钮 */
 import '@theojs/lumen/pic' /* 图片样式 */
@@ -34,49 +35,75 @@ import '@theojs/lumen/badge' /* 徽章样式 */
 
 ### 容器
 
+::: tip
+容器有两种样式 左侧阴影模式(默认) 和 边框模式
+
+如果需要边框模式 可以在 `theme/index.ts` 中引入 `@theojs/lumen/doc-blocks-border`
+
+:::
 **输入**
 
 ```md
 ::: info
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: tip
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: warning
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: danger
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: details
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 ```
 
 **输出**
 ::: info
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: tip
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: warning
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: danger
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ::: details
 [这是一个链接](https://doc.theojs.cn/)
+
+这是一段文字
 :::
 
 ### 自定义容器
@@ -130,37 +157,67 @@ console.log('Hello, VitePress!')
 
 ```md
 > [!NOTE]
-> Highlights information that users should take into account, even when skimming.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!TIP]
-> Optional information to help a user be more successful.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!IMPORTANT]
-> Crucial information necessary for users to succeed.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!WARNING]
-> Critical content demanding immediate user attention due to potential risks.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!CAUTION]
-> Negative potential consequences of an action.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 ```
 
 **输出**
 
 > [!NOTE]
-> Highlights information that users should take into account, even when skimming.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!TIP]
-> Optional information to help a user be more successful.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!IMPORTANT]
-> Crucial information necessary for users to succeed.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!WARNING]
-> Critical content demanding immediate user attention due to potential risks.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 > [!CAUTION]
-> Negative potential consequences of an action.
+>
+> [这是一个链接](https://doc.theojs.cn/)
+>
+> 这是一段文字
 
 ### 图片浅色与深色模式