feat(design): Built-in Inter, Consolas and Helvetica Neue font

oceanbase · Sep 18, 2024 · 867a8fb · 867a8fb
1 parent 7eaa36c
commit 867a8fb
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 21 deletions.
diff --git a/packages/design/index.d.ts b/packages/design/index.d.ts
@@ -0,0 +1 @@
+declare module '*.woff2';
diff --git a/packages/design/src/_util/fonts/Consolas.woff2 b/packages/design/src/_util/fonts/Consolas.woff2
diff --git a/packages/design/src/_util/fonts/HelveticaNeue.woff2 b/packages/design/src/_util/fonts/HelveticaNeue.woff2
diff --git a/packages/design/src/_util/fonts/Inter.woff2 b/packages/design/src/_util/fonts/Inter.woff2
diff --git a/packages/design/src/_util/genComponentStyleHook.ts b/packages/design/src/_util/genComponentStyleHook.ts
@@ -4,9 +4,43 @@ import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
 import { genComponentStyleHook as antGenComponentStyleHook } from 'antd/es/theme/internal';
 import type { GlobalToken } from 'antd/es/theme/interface';
 import theme from '../theme';
+import Inter from './fonts/Inter.woff2';
+import Consolas from './fonts/Consolas.woff2';
+import HelveticaNeue from './fonts/HelveticaNeue.woff2';
 
 export type ComponentName = keyof ComponentTokenMap;
 
+export const genCustomFontStyle = (token: GlobalToken): CSSObject[] => {
+  return [
+    {
+      // English font: work by default
+      ['@font-face']: {
+        fontFamily: 'Inter',
+        // load priority: remote font > local font
+        src: `url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2') format('woff2'), url(${Inter}) format('woff2')`,
+        // 定义字体加载策略，外置字体加载前使用默认字体进行兜底
+        fontDisplay: 'swap',
+      },
+    },
+    {
+      // Code font: work by default
+      ['@font-face']: {
+        fontFamily: 'Consolas',
+        src: `url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2'), url(${Consolas}) format('woff2')`,
+        fontDisplay: 'swap',
+      },
+    },
+    {
+      // Number code: work manully by configuring font-family
+      ['@font-face']: {
+        fontFamily: 'Helvetica Neue',
+        src: `url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2'), url(${HelveticaNeue}) format('woff2')`,
+        fontDisplay: 'swap',
+      },
+    },
+  ];
+};
+
 export function genComponentStyleHook(
   componentName: ComponentName,
   styleFn: GenerateStyle<FullToken<ComponentName>>,
@@ -18,7 +52,7 @@ export function genComponentStyleHook(
     const useStyle = antGenComponentStyleHook(
       `OB-${componentName}` as ComponentName,
       token => {
-        return [styleFn(token)];
+        return [genCustomFontStyle(token), styleFn(token)];
       },
       getDefaultToken,
       {

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
@@ -1,6 +1,4 @@
-// 引入 antd/dist/reset.css，以重置基本样式，保证原生元素遵从 antd 规范样式
-// ref: https://ant.design/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4
-import 'antd/dist/reset.css';
+import './reset.css';
 
 export * from 'antd';
 export { version } from '../package.json';

diff --git a/packages/design/src/reset.css b/packages/design/src/reset.css
@@ -0,0 +1,10 @@
+/* 引入 antd/dist/reset.css，以重置基本样式，保证原生元素遵从 antd 规范样式 */
+/* ref: https://ant.design/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4 */
+@import '~antd/dist/reset.css';
+
+pre,
+code,
+kbd,
+samp {
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
diff --git a/packages/design/src/theme/style/compact.less b/packages/design/src/theme/style/compact.less
@@ -373,7 +373,7 @@
 @fontSizeLG: 14;
 @fontSizeXL: 16;
 @fontSizeHeading1: 32;
-@fontSizeHeading2: 26;
+@fontSizeHeading2: 24;
 @fontSizeHeading3: 20;
 @fontSizeHeading4: 16;
 @fontSizeHeading5: 14;
@@ -384,7 +384,7 @@
 @fontHeightLG: 22;
 @fontHeightSM: 18;
 @lineHeightHeading1: 1.25;
-@lineHeightHeading2: 1.3076923076923077;
+@lineHeightHeading2: 1.3333333333333333;
 @lineHeightHeading3: 1.4;
 @lineHeightHeading4: 1.5;
 @lineHeightHeading5: 1.5714285714285714;

diff --git a/packages/design/src/theme/style/default.less b/packages/design/src/theme/style/default.less
@@ -372,22 +372,22 @@
 @fontSizeSM: 12;
 @fontSizeLG: 16;
 @fontSizeXL: 20;
-@fontSizeHeading1: 38;
-@fontSizeHeading2: 30;
-@fontSizeHeading3: 24;
-@fontSizeHeading4: 20;
-@fontSizeHeading5: 16;
+@fontSizeHeading1: 32;
+@fontSizeHeading2: 24;
+@fontSizeHeading3: 20;
+@fontSizeHeading4: 16;
+@fontSizeHeading5: 14;
 @lineHeight: 1.5714285714285714;
 @lineHeightLG: 1.5;
 @lineHeightSM: 1.6666666666666667;
 @fontHeight: 22;
 @fontHeightLG: 24;
 @fontHeightSM: 20;
-@lineHeightHeading1: 1.2105263157894737;
-@lineHeightHeading2: 1.2666666666666666;
-@lineHeightHeading3: 1.3333333333333333;
-@lineHeightHeading4: 1.4;
-@lineHeightHeading5: 1.5;
+@lineHeightHeading1: 1.25;
+@lineHeightHeading2: 1.3333333333333333;
+@lineHeightHeading3: 1.4;
+@lineHeightHeading4: 1.5;
+@lineHeightHeading5: 1.5714285714285714;
 @sizeXXL: 48;
 @sizeXL: 32;
 @sizeLG: 24;

diff --git a/packages/design/src/typography/demo/font-family.tsx b/packages/design/src/typography/demo/font-family.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { ConfigProvider, Divider, Form, Radio, Space, theme, Typography } from '@oceanbase/design';
+
+const { Text } = Typography;
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  const [fontWeight, setFontWeight] = useState('normal');
+  return (
+    <>
+      <Form layout="inline" style={{ marginBottom: 24 }}>
+        <Form.Item label="font weight" required={true}>
+          <Radio.Group
+            value={fontWeight}
+            onChange={e => {
+              setFontWeight(e.target.value);
+            }}
+          >
+            <Radio.Button value="normal">normal</Radio.Button>
+            <Radio.Button value="bold">bold</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+      <Space
+        direction="vertical"
+        size={24}
+        style={{
+          width: '100%',
+          backgroundColor: token.colorBgLayout,
+          textAlign: 'center',
+          padding: '24px 24px 48px 24px',
+          fontWeight,
+          fontSize: 32,
+        }}
+      >
+        <Divider>默认字体</Divider>
+        <div>
+          <Text style={{ display: 'block' }}>奥星贝斯设计系统</Text>
+          <Text>OceanBase Design System</Text>
+        </div>
+        <Divider>英文站字体（根据 en 语言设置自动生效）</Divider>
+        <div>
+          <ConfigProvider
+            locale={{
+              locale: 'en',
+            }}
+          >
+            <Text>OceanBase Design System</Text>
+          </ConfigProvider>
+        </div>
+        <Divider>代码字体（在 code 标签下自动生效）</Divider>
+        <Text code>OceanBase Design System</Text>
+        <Divider>数字字体（需要手动设置）</Divider>
+        <div
+          style={{
+            fontFamily: 'Helvetica Neue',
+          }}
+        >
+          <div>9876543210</div>
+          <div>0123456789</div>
+        </div>
+      </Space>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/typography/demo/title.tsx b/packages/design/src/typography/demo/title.tsx
@@ -5,11 +5,11 @@ 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>
+    <Title>h1. OceanBase Design</Title>
+    <Title level={2}>h2. OceanBase Design</Title>
+    <Title level={3}>h3. OceanBase Design</Title>
+    <Title level={4}>h4. OceanBase Design</Title>
+    <Title level={5}>h5. OceanBase Design</Title>
   </>
 );
 

diff --git a/packages/design/src/typography/index.md b/packages/design/src/typography/index.md
@@ -15,6 +15,8 @@ nav:
 
 <code src="./demo/text.tsx" title="文本与超链接"></code>
 
+<code src="./demo/font-family.tsx" title="字体" description="详见 [字体设计规范](/docs/spec/typography)。"></code>
+
 <code src="./demo/inner.tsx" title="和其他组件组合使用" debug></code>
 
 ## API

diff --git a/packages/design/src/typography/style/index.ts b/packages/design/src/typography/style/index.ts
@@ -14,10 +14,12 @@ export const genTypographyStyle: GenerateStyle<TypographyToken> = (
     [`span${componentCls}`]: {
       lineHeight: 'inherit',
       color: 'inherit',
+      fontSize: 'inherit',
     },
     [`div${componentCls}`]: {
       lineHeight: 'inherit',
       color: 'inherit',
+      fontSize: 'inherit',
     },
   };
 };