Merge pull request #726 from oceanbase/dengfuping-feature-dev

[Feature Branch] improve(design): Update fontFamily, fontFamilyCode and fontFamilyEn
oceanbase · Sep 13, 2024 · 1dc7d8d · 1dc7d8d
2 parents 5db0087 + 05df6cd
commit 1dc7d8d
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 112 deletions.
diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -4,9 +4,8 @@ import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
 import { FormattedMessage } from 'dumi';
 import React from 'react';
 import ThemeIcon from './ThemeIcon';
-import { FontColorsOutlined } from '@ant-design/icons';
 
-export type ThemeName = 'light' | 'dark' | 'compact' | 'aliyun' | 'motion-off' | 'custom-font';
+export type ThemeName = 'light' | 'dark' | 'compact' | 'aliyun' | 'motion-off';
 
 export type ThemeSwitchProps = {
   value?: ThemeName[];
@@ -16,7 +15,6 @@ export type ThemeSwitchProps = {
 const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
   const { value = ['light'], onChange } = props;
   const isMotionOff = value.includes('motion-off');
-  const isCustomFont = value.includes('custom-font');
 
   return (
     <FloatButton.Group trigger="click" icon={<ThemeIcon />}>
@@ -75,22 +73,6 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
           />
         }
       />
-      <FloatButton
-        icon={<FontColorsOutlined />}
-        type={isCustomFont ? 'primary' : 'default'}
-        onClick={() => {
-          if (isCustomFont) {
-            onChange(value.filter(theme => theme !== 'custom-font'));
-          } else {
-            onChange([...value, 'custom-font']);
-          }
-        }}
-        tooltip={
-          <FormattedMessage
-            id={isCustomFont ? 'app.theme.switch.font.custom' : 'app.theme.switch.font.default'}
-          />
-        }
-      />
     </FloatButton.Group>
   );
 };

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -125,7 +125,6 @@ const GlobalLayout: React.FC = () => {
             algorithm: getAlgorithm(theme),
             isDark: theme.includes('dark'),
             isAliyun: theme.includes('aliyun'),
-            customFont: theme.includes('custom-font'),
             token: {
               motion: !theme.includes('motion-off'),
             },

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -237,7 +237,7 @@ export default defineConfig({
               link: '/biz-components/content-with-icon',
             },
             { title: 'Ranger 日期快速选择', link: '/biz-components/ranger' },
-            { title: 'New Ranger 日期快速选择', link: '/biz-components/date-ranger' },
+            { title: 'DateRanger 日期快速选择', link: '/biz-components/date-ranger' },
             { title: 'TreeSearch 树搜索', link: '/biz-components/tree-search' },
             { title: 'Password 密码输入框', link: '/biz-components/password' },
             { title: 'Boundary 错误兜底', link: '/biz-components/boundary' },

diff --git a/docs/spec/typography.md b/docs/spec/typography.md
@@ -66,7 +66,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体
 
 替代字体（若主字体不支持时，按以下字体顺序进行替换）
 
-    -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;
+    -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;
 
 ### 英文字体家族
 
@@ -76,7 +76,7 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体
 
 替代字体（若主字体不支持时，按以下字体顺序进行替换）
 
-    Inter,Noto sans，sans-serif,Roboto,Open Sans,Segoe UI,Helvetica Neue,Helvetica,Arial,Apple Color Emoji;
+    Inter, Noto sans, sans-serif, Roboto,Open Sans, Segoe UI, Helvetica Neue, Helvetica, Arial, Apple Color Emoji;
 
 <div style="display: flex; justify-content: space-between">
   <div>
@@ -98,13 +98,13 @@ OBUI 字体家族中的中文主字体选用系统默认字体；英文主字体
 
 ### 代码字体家族
 
-主字体Consolas
+主字体 Consolas
 
 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/ug8JQL9l8s8AAAAAAAAAAAAADv3-AQBr/original)
 
 替代字体（若主字体不支持时，按以下字体顺序进行替换）
 
-    Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace；
+    Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
 ### 数字字体
 

diff --git a/packages/design/src/_util/genComponentStyleHook.ts b/packages/design/src/_util/genComponentStyleHook.ts
@@ -3,26 +3,10 @@ import type { ComponentTokenMap } from 'antd/es/theme/interface';
 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 { useContext } from 'react';
-import ConfigProvider from '../config-provider';
 import theme from '../theme';
 
 export type ComponentName = keyof ComponentTokenMap;
 
-export const genCustomFontStyle = (token: FullToken<any>): CSSObject[] => {
-  return [
-    {
-      ['@font-face']: {
-        fontFamily: 'Source Sans Pro',
-        // 定义三种字体格式，适配不同版本的浏览器，并且最多加载一种字体文件
-        src: `url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*H1MFR42M5PMAAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.woff2') format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*jbYLSpw_gfEAAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.woff') format('woff'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*28ClS5qHwQ8AAAAAAAAAAAAADmfOAQ/Source%20Sans%20Pro.ttf') format('truetype')`,
-        // 定义字体加载策略，外置字体加载前使用默认字体进行兜底
-        fontDisplay: 'swap',
-      },
-    },
-  ];
-};
-
 export function genComponentStyleHook(
   componentName: ComponentName,
   styleFn: GenerateStyle<FullToken<ComponentName>>,
@@ -31,11 +15,10 @@ export function genComponentStyleHook(
     | ((token: GlobalToken) => Partial<FullToken<ComponentName>>)
 ) {
   return (prefixCls: string) => {
-    const { theme: themeConfig } = useContext(ConfigProvider.ConfigContext);
     const useStyle = antGenComponentStyleHook(
       `OB-${componentName}` as ComponentName,
       token => {
-        return [themeConfig?.customFont ? genCustomFontStyle(token) : null, styleFn(token)];
+        return [styleFn(token)];
       },
       getDefaultToken,
       {

diff --git a/packages/design/src/config-provider/__tests__/theme.test.tsx b/packages/design/src/config-provider/__tests__/theme.test.tsx
@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import { render } from '@testing-library/react';
-import { ConfigProvider, useToken, theme } from '@oceanbase/design';
-import defaultTheme from '../../theme/default';
-
-const antToken = theme.getDesignToken();
+import { ConfigProvider, useToken } from '@oceanbase/design';
+import defaultTheme, { fontFamilyEn } from '../../theme/default';
+import enUS from '../../locale/en-US';
 
 describe('ConfigProvider theme', () => {
   it('token', () => {
@@ -41,11 +40,10 @@ describe('ConfigProvider theme', () => {
     );
   });
 
-  // test order should before customFont to avoid be affected
   it('token.fontFamily', () => {
     const Child1 = () => {
       const { token } = useToken();
-      expect(token.fontFamily).toBe(antToken.fontFamily);
+      expect(token.fontFamily).toBe(defaultTheme.token.fontFamily);
       return <div />;
     };
     const Child2 = () => {
@@ -58,59 +56,42 @@ describe('ConfigProvider theme', () => {
       expect(token.fontFamily).toBe(`'Custom Font'`);
       return <div />;
     };
-    render(
-      <ConfigProvider>
-        <Child1 />
-        <ConfigProvider
-          theme={{
-            token: {
-              fontFamily: `'Custom Font'`,
-            },
-          }}
-        >
-          <Child2 />
-          <ConfigProvider>
-            <Child3 />
-          </ConfigProvider>
-        </ConfigProvider>
-      </ConfigProvider>
-    );
-  });
-
-  it('customFont', () => {
-    const Child1 = () => {
-      const { token } = useToken();
-      expect(token.fontFamily).toBe(antToken.fontFamily);
-      return <div />;
-    };
-    const Child2 = () => {
+    const Child4 = () => {
       const { token } = useToken();
-      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      expect(token.fontFamily).toBe(fontFamilyEn);
       return <div />;
     };
-    const Child3 = () => {
+    const Child5 = () => {
       const { token } = useToken();
-      expect(token.fontFamily).toBe(`'Source Sans Pro', ${antToken.fontFamily}`);
+      expect(token.fontFamily).toBe(fontFamilyEn);
       return <div />;
     };
     render(
       <ConfigProvider>
         <Child1 />
         <ConfigProvider
           theme={{
-            customFont: true,
+            token: {
+              fontFamily: `'Custom Font'`,
+            },
           }}
         >
           <Child2 />
           <ConfigProvider>
             <Child3 />
           </ConfigProvider>
         </ConfigProvider>
+        <ConfigProvider locale={enUS}>
+          <Child4 />
+          <ConfigProvider>
+            <Child5 />
+          </ConfigProvider>
+        </ConfigProvider>
       </ConfigProvider>
     );
   });
 
-  it('isAliyun', () => {
+  it('theme.isAliyun', () => {
     const Child1 = () => {
       const { token } = useToken();
       expect(token.colorPrimary).toBe(defaultTheme.token.colorPrimary);

diff --git a/packages/design/src/config-provider/index.md b/packages/design/src/config-provider/index.md
@@ -9,7 +9,6 @@ nav:
 - 🌈 定制全局主题和空状态，以符合 OceanBase Design 设计规范。
 - 🆕 默认内嵌 [App 包裹组件](https://ant.design/components/app-cn)，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置。
 - 🆕 新增 `theme.isAliyun` 属性，用于开启阿里云主题。
-- 🆕 新增 `theme.customFont` 属性，用于开启 `Source Sans Pro` 定制字体以提升展示效果，仅支持线上应用和英文环境。
 - 🆕 新增 `locale.Input.placeholder` 属性，用于配置 Input 的默认 `placeholder`。
 - 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
 - 🆕 新增 `injectStaticFunction` 属性，用于配置 `message`, `notification` 和 `Modal` 静态方法是否可以消费全局配置，默认开启。
@@ -51,7 +50,6 @@ export default App;
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | :-- | :-- | :-- | :-- | :-- |
 | theme.isAliyun | 用于开启阿里云主题 | boolean | - | 0.3.5 |
-| theme.customFont | 用于开启 `Source Sans Pro` 定制字体以提升展示效果，仅支持线上应用和英文环境 | boolean | - | 0.3.1 |
 | locale.Input.placeholder | 用于配置 Input 的默认 `placeholder` | string | - | 0.3.2 |
 | spin | Spin 全局配置 | `{ indicator?: ReactNode; className?: string; style?: React.CSSProperties; }` | - | - |
 | table | Table 全局配置 | `{ selectionColumnWidth?: width; className?: string; style?: React.CSSProperties; }` | - | - |

diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -15,7 +15,7 @@ import type { StyleContextProps } from '@ant-design/cssinjs/es/StyleContext';
 import { merge } from 'lodash';
 import StaticFunction from '../static-function';
 import themeConfig from '../theme';
-import defaultTheme from '../theme/default';
+import defaultTheme, { fontFamilyEn } from '../theme/default';
 import darkTheme from '../theme/dark';
 import aliyunTheme from '@oceanbase/aliyun-theme';
 import DefaultRenderEmpty from './DefaultRenderEmpty';
@@ -31,8 +31,6 @@ export * from 'antd/es/config-provider';
 export interface ThemeConfig extends AntThemeConfig {
   isDark?: boolean;
   isAliyun?: boolean;
-  /* use custom font or not */
-  customFont?: boolean;
 }
 
 export type SpinConfig = ComponentStyleConfig & {
@@ -119,15 +117,15 @@ const ConfigProvider: ConfigProviderType = ({
 
   const { token } = themeConfig.useToken();
   const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;
-  const customFont = mergedTheme.customFont;
 
   // inherit from parent StyleProvider
   const parentStyleContext = React.useContext<StyleContextProps>(StyleContext);
   const mergedStyleProviderProps = merge({}, parentStyleContext, styleProviderProps);
+  const mergedLocale = merge({}, parentContext.locale, locale);
 
   return (
     <AntConfigProvider
-      locale={merge({}, parentContext.locale, locale)}
+      locale={mergedLocale}
       form={merge(
         {},
         {
@@ -147,12 +145,16 @@ const ConfigProvider: ConfigProviderType = ({
         tabs
       )}
       theme={merge({}, mergedTheme, {
-        token: {
-          fontFamily:
-            customFont && !fontFamily.startsWith(`'Source Sans Pro'`)
-              ? `'Source Sans Pro', ${fontFamily}`
-              : fontFamily,
-        },
+        token:
+          // custom fontFamily
+          fontFamily !== defaultTheme.token.fontFamily
+            ? { fontFamily }
+            : // use fontFamilyEn for en
+              ['en', 'en-gb'].includes(mergedLocale.locale)
+              ? {
+                  fontFamily: fontFamilyEn,
+                }
+              : {},
       })}
       renderEmpty={
         parentContext.renderEmpty ||

diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -4,8 +4,12 @@ import { formatTheme } from './util/format';
 // Calculated by colorBorder and getWeakenBorderColor()
 const tagColorBorder = '#cdd5e466';
 
+export const fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
+
 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`,
     colorPrimaryBg: '#EAF1FF',
     colorPrimary: '#006AFF',
     colorPrimaryBgHover: '#EAF1FF',

diff --git a/packages/design/src/theme/style/aliyun.less b/packages/design/src/theme/style/aliyun.less
@@ -19,10 +19,8 @@
 @colorLink: #0064C8;
 @colorTextBase: #000;
 @colorBgBase: #ffffff;
-@fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji';
-@fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+@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;
 @fontSize: 12;
 @lineWidth: 1;
 @lineType: solid;

diff --git a/packages/design/src/theme/style/compact.less b/packages/design/src/theme/style/compact.less
@@ -19,10 +19,8 @@
 @colorLink: #006aff;
 @colorTextBase: #000000;
 @colorBgBase: #ffffff;
-@fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji';
-@fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+@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;
 @fontSize: 12;
 @lineWidth: 1;
 @lineType: solid;

diff --git a/packages/design/src/theme/style/dark.less b/packages/design/src/theme/style/dark.less
@@ -19,10 +19,8 @@
 @colorLink: #035ddc;
 @colorTextBase: #fff;
 @colorBgBase: #000;
-@fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji';
-@fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+@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;
 @fontSize: 14;
 @lineWidth: 1;
 @lineType: solid;

diff --git a/packages/design/src/theme/style/default.less b/packages/design/src/theme/style/default.less
@@ -19,10 +19,8 @@
 @colorLink: #006aff;
 @colorTextBase: #000000;
 @colorBgBase: #ffffff;
-@fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-'Noto Color Emoji';
-@fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+@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;
 @fontSize: 14;
 @lineWidth: 1;
 @lineType: solid;

diff --git a/packages/design/src/theme/util/format.ts b/packages/design/src/theme/util/format.ts
@@ -1,11 +1,11 @@
 import type { ThemeConfig } from 'antd';
-import { isString, toLower } from 'lodash';
+import { isString, startsWith, toLower } from 'lodash';
 
 export function formatTheme(theme: ThemeConfig) {
   const token = (theme.token || {}) as Record<string, any>;
   // convert token color value to lower case
   Object.keys(token).forEach(key => {
-    if (isString(token[key])) {
+    if (isString(token[key]) && startsWith(token[key], '#')) {
       token[key] = toLower(token[key]);
     }
   });
@@ -14,7 +14,7 @@ export function formatTheme(theme: ThemeConfig) {
     const componentToken = components[componentName] || {};
     // convert token color value to lower case
     Object.keys(componentToken).forEach(key => {
-      if (isString(componentToken[key])) {
+      if (isString(componentToken[key]) && startsWith(componentToken[key], '#')) {
         componentToken[key] = toLower(componentToken[key]);
       }
     });