💄 style: Update badge and alert

lobehub · Nov 24, 2024 · 8c14fbf · 8c14fbf
1 parent 2176ebb
commit 8c14fbf
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 82 deletions.
diff --git a/example/src/Example/index.md b/example/src/Example/index.md
@@ -11,3 +11,31 @@ description: This is an doc example
 ## CustomSize
 
 <code src="./demos/CustomSize.tsx" nopadding></code>
+
+### Badge
+
+<Badge>info</Badge>
+
+<Badge type="warning">warning</Badge>
+
+<Badge type="error">error</Badge>
+
+<Badge type="success">success</Badge>
+
+## Markdown Highlighting
+
+:::info {title = 自定义标题}
+这是一条普通信息
+:::
+
+:::success
+这是一条成功信息
+:::
+
+:::warning
+这是一条警告信息
+:::
+
+:::error
+这是一条错误信息
+:::
diff --git a/src/builtins/Container/index.tsx b/src/builtins/Container/index.tsx
@@ -1,35 +1,21 @@
-import { Alert } from 'antd';
+import { Alert, Typography } from '@lobehub/ui';
 import { type FC, type ReactNode } from 'react';
 
-import { useStyles } from './style';
-
 const Container: FC<{
   children: ReactNode;
   title?: string;
   type: 'info' | 'warning' | 'success' | 'error';
 }> = ({ type, title, children }) => {
-  const { styles, cx } = useStyles();
-
   return (
-    <div className={styles.container} data-type={type}>
+    <Typography fontSize={14} headerMultiple={0.25} marginMultiple={0}>
       <Alert
-        className={styles.alert}
-        description={
-          <div
-            className={cx(
-              styles.desc,
-              // 为了让 markdown 的样式生效，需要在这里添加一个额外的 class
-              'markdown',
-            )}
-          >
-            {children}
-          </div>
-        }
+        description={children}
         message={title || type.toUpperCase()}
         showIcon
+        style={{ marginBlock: '1em' }}
         type={type}
       />
-    </div>
+    </Typography>
   );
 };
 

diff --git a/src/builtins/Container/style.ts b/src/builtins/Container/style.ts
diff --git a/src/builtins/Previewer/style.ts b/src/builtins/Previewer/style.ts
@@ -11,11 +11,6 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => {
       }
     `,
     container: css`
-      .dumi-default-table-content {
-        overflow: visible !important;
-        font-size: 14px;
-      }
-
       .dumi-default-previewer {
         position: relative;
 

diff --git a/src/slots/Content/style.ts b/src/slots/Content/style.ts
@@ -22,6 +22,37 @@ export const useStyles = createStyles(({ cx, token, responsive, css }, isPure: b
       &:has([data-page-tabs='true']) {
         padding-top: 8px;
       }
+
+      .dumi-default-table-content {
+        overflow: visible !important;
+        font-size: 14px;
+      }
+
+      .dumi-default-badge {
+        &:not([type]) {
+          color: ${token.colorInfoText};
+          background: ${token.colorInfoBg};
+          border: 1px solid ${token.colorInfoBorder};
+        }
+
+        &[type='warning'] {
+          color: ${token.colorWarningText};
+          background: ${token.colorWarningBg};
+          border: 1px solid ${token.colorWarningBorder};
+        }
+
+        &[type='error'] {
+          color: ${token.colorErrorText};
+          background: ${token.colorErrorBg};
+          border: 1px solid ${token.colorErrorBorder};
+        }
+
+        &[type='success'] {
+          color: ${token.colorSuccessText};
+          background: ${token.colorSuccessBg};
+          border: 1px solid ${token.colorSuccessBorder};
+        }
+      }
     `,
   ),
 }));