site: update docs styles (#39348)

* site: update docs styles * site(theme): add ColorChunk component * chore: update * docs: update docs
ant-design · Dec 7, 2022 · 4a80396 · 4a80396
1 parent 3eaf72e
commit 4a80396
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { TinyColor, type ColorInput } from '@ctrl/tinycolor';
+import { css } from '@emotion/react';
+import useSiteToken from '../../../hooks/useSiteToken';
+
+interface ColorChunkProps {
+  children?: React.ReactNode;
+  color?: ColorInput;
+}
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    codeSpan: css`
+      padding: 0.2em 0.4em;
+      font-size: 0.9em;
+      background: ${token.siteMarkdownCodeBg};
+      border-radius: ${token.borderRadius}px;
+      font-family: monospace;
+    `,
+    dot: css`
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: ${token.borderRadiusSM}px;
+      margin-right: 4px;
+      border: 1px solid ${token.colorSplit};
+    `,
+  };
+};
+
+const ColorChunk: React.FC<ColorChunkProps> = (props) => {
+  const styles = useStyle();
+  const { color, children } = props;
+
+  const dotColor = React.useMemo(() => {
+    const _color = new TinyColor(color).toHex8String();
+    return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
+  }, [color]);
+
+  return (
+    <span css={styles.codeSpan}>
+      <span css={styles.dot} style={{ backgroundColor: dotColor }} />
+      {children ?? dotColor}
+    </span>
+  );
+};
+
+export default ColorChunk;
diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx
@@ -9,6 +9,7 @@ import type { TableProps } from 'antd';
 import { css } from '@emotion/react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
+import ColorChunk from '../ColorChunk';
 
 type TokenTableProps = {
   type: 'seed' | 'map' | 'alias';
@@ -78,25 +79,15 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
     {
       title: locale.value,
       key: 'value',
-      render: (_, record) => (
-        <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-          {typeof record.value === 'string' &&
-            (record.value.startsWith('#') || record.value.startsWith('rgb')) && (
-              <span
-                style={{
-                  background: record.value,
-                  display: 'inline-block',
-                  width: 6,
-                  height: 6,
-                  borderRadius: '50%',
-                  boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)',
-                  marginRight: 4,
-                }}
-              />
-            )}
-          {typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
-        </span>
-      ),
+      render: (_, record) => {
+        const isColor =
+          typeof record.value === 'string' &&
+          (record.value.startsWith('#') || record.value.startsWith('rgb'));
+        if (isColor) {
+          return <ColorChunk color={record.value}>{record.value}</ColorChunk>;
+        }
+        return typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value;
+      },
     },
   ];
 

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
@@ -39,7 +39,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-You will get a theme with primary color <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #00b96b; vertical-align: text-bottom;"></div> `#00b96b`. And we can see the change in Button:
+You will get a theme with primary color <ColorChunk color="#00b96b" /></ColorChunk>. And we can see the change in Button:
 
 ![themed button](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CbF_RJfKEiwAAAAAAAAAAAAAARQnAQ)
 
@@ -90,7 +90,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-In this way, we changed the primary color of Radio to <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #00b96b; vertical-align: text-bottom;"></div> `#00b96b`, and Checkbox is not affected.
+In this way, we changed the primary color of Radio to <ColorChunk color="#00b96b" /></ColorChunk>, and Checkbox is not affected.
 
 ![component token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EMY0QrHFDjsAAAAAAAAAAAAAARQnAQ)
 

diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
@@ -39,7 +39,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-这将会得到一个以 <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #00b96b; vertical-align: text-bottom;"></div> `#00b96b` 为主色的主题，以 Button 组件为例可以看到相应的变化：
+这将会得到一个以 <ColorChunk color="#00b96b" /></ColorChunk> 为主色的主题，以 Button 组件为例可以看到相应的变化：
 
 ![themed button](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CbF_RJfKEiwAAAAAAAAAAAAAARQnAQ)
 
@@ -90,7 +90,7 @@ const App: React.FC = () => (
 export default App;
 ```
 
-通过这种方式，我们可以仅将 Radio 组件的主色改为 <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #00b96b; vertical-align: text-bottom;"></div> `#00b96b`，而不会影响其他组件。
+通过这种方式，我们可以仅将 Radio 组件的主色改为 <ColorChunk color="#00b96b" /></ColorChunk> 而不会影响其他组件。
 
 ![component token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EMY0QrHFDjsAAAAAAAAAAAAAARQnAQ)
 

diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md
@@ -14,7 +14,7 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio
 ### Design specification
 
 - Basic rounded corner adjustment, changed from `2px` to four layers of radius, which are `2px` `4px` `6px` and `8px`. For example, radius of default Button is modified from `2px` to `6px`.
-- Primary color adjustment, changed from <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #1890ff; vertical-align: text-bottom;"></div> `#1890ff` to <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #1677ff; vertical-align: text-bottom;"></div> `#1677ff`.
+- Primary color adjustment, changed from <ColorChunk color="#1890ff" /></ColorChunk> to <ColorChunk color="#1677ff" /></ColorChunk>.
 - Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g).
 - Overall reduction in wireframe usage.
 

diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md
@@ -14,7 +14,7 @@ title: 从 v4 到 v5
 ### 设计规范调整
 
 - 基础圆角调整，由统一的 `2px` 改为四级圆角，分别为 `2px` `4px` `6px` `8px`，分别应用于不同场景，比如默认尺寸的 Button 的圆角调整为了 `6px`。
-- 主色调整，由 <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #1890ff; vertical-align: text-bottom;"></div> `#1890ff` 改为 <div style="display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: #1677ff; vertical-align: text-bottom;"></div> `#1677ff`。
+- 主色调整，由 <ColorChunk color="#1890ff" /></ColorChunk> 改为 <ColorChunk color="#1677ff" /></ColorChunk>。
 - 整体阴影调整，由原本的三级阴影调整为两级，分别用于常驻页面的组件（如 Card）和交互反馈（如 Dropdown）。
 - 部分组件内间距调整。
 - 整体去线框化。