💄 Modify admonition bg color

nonebot · Sep 12, 2023 · b323ce7 · b323ce7
1 parent 5d7f864
commit b323ce7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/packages/theme-nonepress/src/theme/Admonition/index.tsx b/packages/theme-nonepress/src/theme/Admonition/index.tsx
@@ -101,6 +101,7 @@ type AdmonitionConfig = {
 
 const AdmonitionConfigs: Record<Props["type"], AdmonitionConfig> = {
   note: {
+    className: "note",
     iconComponent: NoteIcon,
     label: (
       <Translate
@@ -230,7 +231,7 @@ export default function Admonition(props: Props): JSX.Element {
   return (
     <div
       className={clsx(
-        "admonition",
+        "alert admonition",
         typeConfig.className && `admonition-${typeConfig.className}`,
         ThemeClassNames.common.admonition,
         ThemeClassNames.common.admonitionType(props.type),

diff --git a/packages/theme-nonepress/src/theme/Admonition/styles.css b/packages/theme-nonepress/src/theme/Admonition/styles.css
@@ -1,21 +1,40 @@
 .admonition {
-  @apply alert mb-4 gap-0;
-  @apply grid-flow-col grid-cols-[auto_minmax(auto,1fr)] justify-items-start text-left;
+  @apply mb-4 gap-0 justify-items-start text-left;
+  @apply grid-flow-col grid-cols-[auto_minmax(auto,1fr)];
+
+  &-note {
+    --alert-bg: hsl(var(--bc) / 10%);
+    --alert-bg-mix: hsl(var(--b1));
+
+    @apply text-base-content border-base-content/20;
+  }
 
   &-success {
-    @apply alert-success;
+    --alert-bg: hsl(var(--su) / 40%);
+    --alert-bg-mix: hsl(var(--b1));
+
+    @apply text-success-content border-success/20;
   }
 
   &-error {
-    @apply alert-error;
+    --alert-bg: hsl(var(--er) / 40%);
+    --alert-bg-mix: hsl(var(--b1));
+
+    @apply text-error-content border-error/20;
   }
 
   &-info {
-    @apply alert-info;
+    --alert-bg: hsl(var(--in) / 40%);
+    --alert-bg-mix: hsl(var(--b1));
+
+    @apply text-info-content border-info/20;
   }
 
   &-warning {
-    @apply alert-warning;
+    --alert-bg: hsl(var(--wa) / 40%);
+    --alert-bg-mix: hsl(var(--b1));
+
+    @apply text-warning-content border-warning/20;
   }
 
   &-title {

diff --git a/website/docs/components/Admonition.mdx b/website/docs/components/Admonition.mdx
@@ -6,13 +6,37 @@ import BrowserWindow from "@site/src/components/BrowserWindow";
 ```tsx
 import Admonition from "@theme/Admonition";
 
+<Admonition type="note" title="Title">
+  content
+</Admonition>;
 <Admonition type="info" title="Title">
   content
 </Admonition>;
+<Admonition type="tip" title="Title">
+  content
+</Admonition>;
+<Admonition type="caution" title="Title">
+  content
+</Admonition>;
+<Admonition type="danger" title="Title">
+  content
+</Admonition>;
 ```
 
 <BrowserWindow>
+  <Admonition type="note" title="Title">
+    content
+  </Admonition>
   <Admonition type="info" title="Title">
     content
   </Admonition>
+  <Admonition type="tip" title="Title">
+    content
+  </Admonition>
+  <Admonition type="caution" title="Title">
+    content
+  </Admonition>
+  <Admonition type="danger" title="Title">
+    content
+  </Admonition>
 </BrowserWindow>
diff --git a/website/src/components/BrowserWindow/index.tsx b/website/src/components/BrowserWindow/index.tsx
@@ -8,18 +8,18 @@ type Props = {
 export default function browserWindow(props: Props): JSX.Element {
   const { title, children } = props;
   return (
-    <div className="mockup-window border bg-base-300 pt-0 before:content-none">
-      <div className="flex gap-2 w-full px-4 py-2">
+    <div className="mockup-window border pt-0 before:content-none">
+      <div className="flex gap-2 w-full px-4 py-2 bg-base-content/10">
         <div>
           <div className="bg-red-600 inline-block h-3 w-3 rounded-full mr-1"></div>
           <div className="bg-yellow-500 inline-block h-3 w-3 rounded-full mr-1"></div>
           <div className="bg-green-500 inline-block h-3 w-3 rounded-full"></div>
         </div>
-        <div className="flex-grow text-left inline-block bg-white rounded-full px-2 truncate text-sm">
+        <div className="flex-grow text-left inline-block bg-base-200 rounded-full px-2 truncate text-sm">
           {title}
         </div>
       </div>
-      <div className="bg-white p-4">{children}</div>
+      <div className="p-4">{children}</div>
     </div>
   );
 }