💄 style: Update Markdown style

lobehub · Mar 15, 2024 · e39802f · e39802f
1 parent 5b8dccf
commit e39802f
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 71 deletions.
diff --git a/example/src/ActionIcon/demos/CustomSize.tsx b/example/src/ActionIcon/demos/CustomSize.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionIconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { Settings } from 'lucide-react';
 
 export default () => {
@@ -34,8 +34,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ActionIcon active icon={Settings} size={size} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/example/src/ActionIcon/demos/index.tsx b/example/src/ActionIcon/demos/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, ActionIconProps, StroyBook, useControls, useCreateStore } from '@lobehub/ui';
+import { ActionIcon, ActionIconProps, StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { folder } from 'leva';
 import * as LucideIcon from 'lucide-react';
 
@@ -44,8 +44,8 @@ export default () => {
   );
 
   return (
-    <StroyBook levaStore={store}>
+    <StoryBook levaStore={store}>
       <ActionIcon {...control} />
-    </StroyBook>
+    </StoryBook>
   );
 };
diff --git a/src/components/NativeSelect/SelectItem/index.tsx b/src/components/NativeSelect/SelectItem/index.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, memo } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
 import { useStyles } from './style';
 
@@ -12,8 +12,8 @@ interface SelectItemProps {
   value: any;
 }
 
-const SelectItem = memo<SelectItemProps>(
-  forwardRef(({ value, label, prefixCls, isSelected, isActive, disabled, ...props }, reference) => {
+const SelectItem = forwardRef<any, SelectItemProps>(
+  ({ value, label, prefixCls, isSelected, isActive, disabled, ...props }, reference) => {
     const { styles, cx } = useStyles(prefixCls);
 
     return (
@@ -34,7 +34,7 @@ const SelectItem = memo<SelectItemProps>(
         {label}
       </button>
     );
-  }),
+  },
 );
 
 export default SelectItem;
diff --git a/src/layouts/DocLayout/index.tsx b/src/layouts/DocLayout/index.tsx
@@ -126,11 +126,7 @@ export default memo(() => {
     <>
       <Favicons />
       <StoreUpdater />
-      <ThemeProvider
-        cache={extractStaticStyle.cache}
-        customToken={customToken}
-        themeMode={themeMode}
-      >
+      <ThemeProvider customToken={customToken} themeMode={themeMode}>
         <GlobalStyle />
         <DocumentLayout />
       </ThemeProvider>

diff --git a/src/slots/Content/index.tsx b/src/slots/Content/index.tsx
@@ -1,4 +1,5 @@
-import { Skeleton, Typography } from 'antd';
+import { Typography } from '@lobehub/ui';
+import { Skeleton } from 'antd';
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -17,16 +18,15 @@ const Content = memo<DivProps>(({ children, ...props }) => {
 
   return (
     <Flexbox gap={mobile ? 0 : 24} width={'100%'} {...props}>
-      <Typography />
       <div className={cx('dumi-antd-style-content', styles.content)}>
         <Skeleton active loading={loading} paragraph />
-        <div
+        <Typography
           style={{
             display: loading ? 'none' : undefined,
           }}
         >
           {children}
-        </div>
+        </Typography>
       </div>
       <ContentFooter />
     </Flexbox>

diff --git a/src/slots/Content/style.ts b/src/slots/Content/style.ts
@@ -1,12 +1,13 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, responsive, css, stylish }) => ({
+export const useStyles = createStyles(({ token, responsive, css }) => ({
   content: css`
     flex: 1;
 
     box-sizing: border-box;
     width: 100%;
     min-height: 400px;
+    margin-top: 24px;
     padding: 24px 48px;
 
     background-color: ${token.colorBgContainer};
@@ -22,57 +23,18 @@ export const useStyles = createStyles(({ token, responsive, css, stylish }) => (
     }
 
     .markdown {
-      ${stylish.markdown};
-      h2,
-      h3 {
-        &[id^='version'] {
-          color: ${token.colorText};
-        }
-      }
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        transition: all 400ms ${token.motionEaseOut};
-
-        > a[aria-hidden]:first-child {
-          float: left;
-
-          width: 20px;
-          margin-inline-start: -24px;
-          padding-inline-end: 4px;
+      summary kbd {
+        transform: unset;
 
-          font-size: inherit;
-          line-height: inherit;
-          color: ${token.colorText};
-          text-align: right;
+        padding: unset;
 
-          &:hover {
-            border: 0;
-          }
-
-          > .icon-link::before {
-            content: '#';
-            font-size: inherit;
-            color: ${token.colorTextTertiary};
-          }
-        }
-
-        &:hover {
-          color: ${token.colorText};
-        }
-
-        &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
-          visibility: hidden;
-        }
-      }
+        font-size: inherit;
+        line-height: inherit;
+        color: inherit;
 
-      ol,
-      ul {
-        padding-inline-start: 18px;
+        background: unset;
+        border: unset;
+        box-shadow: unset;
       }
     }
   `,

diff --git a/src/slots/Features/index.tsx b/src/slots/Features/index.tsx
@@ -11,9 +11,7 @@ const Features = memo(() => {
 
   if (!features?.length) return;
 
-  return (
-    <F contentMaxWidth={theme.contentMaxWidth} items={features} style={{ margin: '0 16px' }} />
-  );
+  return <F items={features} maxWidth={theme.contentMaxWidth} style={{ margin: '0 16px' }} />;
 });
 
 export default Features;