improve(design): Update fontSizeHeading and lineHeightHeading token

oceanbase · Sep 14, 2024 · 7eaa36c · 7eaa36c
1 parent 05df6cd
commit 7eaa36c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -10,6 +10,16 @@ const defaultTheme: ThemeConfig = {
   token: {
     fontFamily: `-apple-system, 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
     fontFamilyCode: `Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
+    fontSizeHeading1: 32,
+    fontSizeHeading2: 24,
+    fontSizeHeading3: 20,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 14,
+    lineHeightHeading1: 40 / 32,
+    lineHeightHeading2: 32 / 24,
+    lineHeightHeading3: 28 / 20,
+    lineHeightHeading4: 24 / 16,
+    lineHeightHeading5: 22 / 14,
     colorPrimaryBg: '#EAF1FF',
     colorPrimary: '#006AFF',
     colorPrimaryBgHover: '#EAF1FF',

diff --git a/packages/design/src/typography/demo/inner.tsx b/packages/design/src/typography/demo/inner.tsx
@@ -2,34 +2,17 @@ import React from 'react';
 import { Button, Space, Tooltip, Typography } from '@oceanbase/design';
 
 const App: React.FC = () => (
-  <Space direction="vertical" size={48}>
-    <Space size={16}>
-      Typography Text
-      <Button type="primary">
-        <Typography.Text>Typography Text</Typography.Text>
-      </Button>
-      <Button danger={true}>
-        <Typography.Text>Typography Text</Typography.Text>
-      </Button>
-      <Tooltip open={true} title={<Typography.Text>This is Typography Text</Typography.Text>}>
-        <span>Tooltip</span>
-      </Tooltip>
-    </Space>
-    <Space size={16}>
-      Typography Paragraph
-      <Button type="primary">
-        <Typography.Paragraph>Typography Paragraph</Typography.Paragraph>
-      </Button>
-      <Button danger={true}>
-        <Typography.Paragraph>Typography Paragraph</Typography.Paragraph>
-      </Button>
-      <Tooltip
-        open={true}
-        title={<Typography.Paragraph>This is Typography Paragraph</Typography.Paragraph>}
-      >
-        <span>Tooltip</span>
-      </Tooltip>
-    </Space>
+  <Space size={16}>
+    Typography Text
+    <Button type="primary">
+      <Typography.Text>Typography Text</Typography.Text>
+    </Button>
+    <Button danger={true}>
+      <Typography.Text>Typography Text</Typography.Text>
+    </Button>
+    <Tooltip open={true} title={<Typography.Text>This is Typography Text</Typography.Text>}>
+      <span>Tooltip</span>
+    </Tooltip>
   </Space>
 );
 

diff --git a/packages/design/src/typography/demo/title.tsx b/packages/design/src/typography/demo/title.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Typography } from '@oceanbase/design';
+
+const { Title } = Typography;
+
+const App: React.FC = () => (
+  <>
+    <Title>h1. Ant Design</Title>
+    <Title level={2}>h2. Ant Design</Title>
+    <Title level={3}>h3. Ant Design</Title>
+    <Title level={4}>h4. Ant Design</Title>
+    <Title level={5}>h5. Ant Design</Title>
+  </>
+);
+
+export default App;
diff --git a/packages/design/src/typography/index.md b/packages/design/src/typography/index.md
@@ -11,9 +11,11 @@ nav:
 
 ## 代码演示
 
+<code src="./demo/title.tsx" title="标题"></code>
+
 <code src="./demo/text.tsx" title="文本与超链接"></code>
 
-<code src="./demo/inner.tsx" title="和其他组件组合使用"></code>
+<code src="./demo/inner.tsx" title="和其他组件组合使用" debug></code>
 
 ## API