chore: auto merge branches (#44995)

chore: feature merge master

.dumi/hooks/useThemeAnimation.ts

@@ -76,7 +76,7 @@ const useThemeAnimation = () => {
     [data-prefers-color='dark'] {
       color-scheme: light !important;
     }
-    
+
     [data-prefers-color='light'] {
       color-scheme: dark !important;
     }

.dumi/theme/builtins/ColorChunk/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 interface ColorChunkProps {
   children?: React.ReactNode;
-  color?: ColorInput;
+  value?: ColorInput;
 }
 
 const useStyle = createStyles(({ token, css }) => ({
@@ -27,12 +27,12 @@ const useStyle = createStyles(({ token, css }) => ({
 
 const ColorChunk: React.FC<ColorChunkProps> = (props) => {
   const { styles } = useStyle();
-  const { color, children } = props;
+  const { value, children } = props;
 
   const dotColor = React.useMemo(() => {
-    const _color = new TinyColor(color).toHex8String();
+    const _color = new TinyColor(value).toHex8String();
     return _color.endsWith('ff') ? _color.slice(0, -2) : _color;
-  }, [color]);
+  }, [value]);
 
   return (
     <span className={styles.codeSpan}>

.dumi/theme/builtins/TokenTable/index.tsx

@@ -78,7 +78,7 @@ export function useColumns(): Exclude<TableProps<TokenData>['columns'], undefine
           typeof record.value === 'string' &&
           (record.value.startsWith('#') || record.value.startsWith('rgb'));
         if (isColor) {
-          return <ColorChunk color={record.value}>{record.value}</ColorChunk>;
+          return <ColorChunk value={record.value}>{record.value}</ColorChunk>;
         }
         return typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value;
       },

.dumi/theme/common/styles/Common.tsx

@@ -63,6 +63,14 @@ export default () => {
       html {
         scroll-padding-top: ${headerHeight + margin}px;
       }
+
+      [data-prefers-color='dark'] {
+        color-scheme: dark;
+      }
+
+      [data-prefers-color='light'] {
+        color-scheme: light;
+      }
     `}
     />
   );

.dumi/theme/layouts/GlobalLayout.tsx

@@ -80,6 +80,10 @@ const GlobalLayout: React.FC = () => {
             ...nextSearchParams,
             theme: value.filter((t) => t !== 'light'),
           });
+
+          document
+            .querySelector('html')
+            ?.setAttribute('data-prefers-color', value.includes('dark') ? 'dark' : 'light');
         }
       });
 

.dumi/theme/slots/Header/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
-import { Alert, Col, Popover, Row, Select } from 'antd';
+import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
@@ -120,9 +120,9 @@ const useStyle = createStyles(({ token, css }) => {
     },
     banner: css`
       width: 100%;
-      background: #daf5eb;
       text-align: center;
       word-break: keep-all;
+      user-select: none;
     `,
     link: css`
       margin-left: 10px;
@@ -136,9 +136,6 @@ const useStyle = createStyles(({ token, css }) => {
       width: 22px;
       height: 22px;
     `,
-    message: css`
-      color: rgba(0, 0, 0, 0.88);
-    `,
   };
 });
 
@@ -364,40 +361,40 @@ const Header: React.FC = () => {
         </Popover>
       )}
       {isZhCN && bannerVisible && (
-        <Alert
+        <ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
-          className={styles.banner}
+          <Alert
-          message={
+            className={styles.banner}
-            <>
+            message={
-              <img
+              <>
-                className={styles.icon}
+                <img
-                src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+                  className={styles.icon}
-                alt="yuque"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-              />
+                  alt="yuque"
-              <span className={styles.message}>
+                />
-                {isMobile ? locale.shortMessage : locale.message}
+                <span>{isMobile ? locale.shortMessage : locale.message}</span>
-              </span>
+                <a
-              <a
+                  className={styles.link}
-                className={styles.link}
+                  href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
-                href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
+                  target="_blank"
-                target="_blank"
+                  rel="noreferrer"
-                rel="noreferrer"
+                  onClick={() => {
-                onClick={() => {
+                    window.gtag?.('event', '点击', {
-                  window.gtag?.('event', '点击', {
+                      event_category: 'top_banner',
-                    event_category: 'top_banner',
+                      event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
-                    event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
+                    });
-                  });
+                  }}
-                }}
+                >
-              >
+                  {locale.more}
-                {locale.more}
+                </a>
-              </a>
+              </>
-            </>
+            }
-          }
+            type="info"
-          type="info"
+            banner
-          banner
+            closable
-          closable
+            showIcon={false}
-          showIcon={false}
+            onClose={onBannerClose}
-          onClose={onBannerClose}
+          />
-        />
+        </ConfigProvider>
       )}
       <Row style={{ flexFlow: 'nowrap', height: 64 }}>
         <Col {...colProps[0]}>

.dumirc.ts

@@ -6,6 +6,7 @@ import { version } from './package.json';
 import * as fs from 'fs-extra';
 
 export default defineConfig({
+  plugins: ['dumi-plugin-color-chunk'],
   conventionRoutes: {
     // to avoid generate routes for .dumi/pages/index/components/xx
     exclude: [new RegExp('index/components/')],

components/_util/placements.ts

@@ -1,5 +1,6 @@
 /* eslint-disable default-case */
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+
 import { getArrowOffset } from '../style/placementArrow';
 
 export interface AdjustOverflow {
@@ -155,6 +156,7 @@ export default function getPlacements(config: PlacementsConfig) {
     const placementInfo = {
       ...template,
       offset: [0, 0],
+      dynamicInset: true,
     };
     placementMap[key] = placementInfo;
 

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -42316,6 +42316,7 @@ exports[`ConfigProvider components Upload configProvider componentDisabled 1`] =
     >
       <input
         accept=""
+        disabled=""
         style="display: none;"
         type="file"
       />

components/dropdown/__tests__/index.test.tsx

@@ -1,11 +1,12 @@
-import type { TriggerProps } from '@rc-component/trigger';
 import React from 'react';
+import type { TriggerProps } from '@rc-component/trigger';
+
 import type { DropDownProps } from '..';
 import Dropdown from '..';
+import { resetWarned } from '../../_util/warning';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
-import { resetWarned } from '../../_util/warning';
 
 let triggerProps: TriggerProps;
 
@@ -252,4 +253,15 @@ describe('Dropdown', () => {
 
     errorSpy.mockRestore();
   });
+
+  it('not block ref', () => {
+    const divRef = React.createRef<HTMLDivElement>();
+    render(
+      <Dropdown open dropdownRender={() => <div ref={divRef} />}>
+        <a />
+      </Dropdown>,
+    );
+
+    expect(divRef.current).toBeTruthy();
+  });
 });

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5464,6 +5464,7 @@ Array [
                     >
                       <input
                         accept=""
+                        disabled=""
                         style="display: none;"
                         type="file"
                       />

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2899,6 +2899,7 @@ Array [
                     >
                       <input
                         accept=""
+                        disabled=""
                         style="display:none"
                         type="file"
                       />

components/form/__tests__/__snapshots__/index.test.tsx.snap

@@ -940,6 +940,7 @@ exports[`Form form should support disabled 1`] = `
                 >
                   <input
                     accept=""
+                    disabled=""
                     style="display: none;"
                     type="file"
                   />

components/form/__tests__/index.test.tsx

@@ -1715,20 +1715,21 @@ describe('Form', () => {
     const App2 = () => <Form disabled>{renderComps()}</Form>;
 
     const wrapper2 = render(<App2 />);
-    // 时间范围组件中会有两个 input 框，因此虽然上述只有 18 个组件，但，实际有 19 个 带有 disabled 属性的表单组件
+    // 时间范围组件中会有两个 input 框，Upload 为叠加
-    expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(19);
+    // 因此虽然上述只有 18 个组件，但实际有 20 个 带有 disabled 属性的表单组件
+    expect(wrapper2.container.querySelectorAll('[disabled]').length).toBe(20);
 
     const App3 = () => <Form disabled>{renderComps(true)}</Form>;
 
     const wrapper3 = render(<App3 />);
 
-    expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(19);
+    expect(wrapper3.container.querySelectorAll('[disabled]').length).toBe(20);
 
     const App4 = () => <Form>{renderComps(true)}</Form>;
 
     const wrapper4 = render(<App4 />);
 
-    expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(19);
+    expect(wrapper4.container.querySelectorAll('[disabled]').length).toBe(20);
 
     const App5 = () => <Form>{renderComps()}</Form>;
 

components/menu/OverrideContext.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { supportNodeRef, useComposeRef } from 'rc-util';
+
 import { NoCompactStyle } from '../space/Compact';
 import type { MenuProps } from './menu';
-import { supportNodeRef } from 'rc-util';
 
 // Used for Dropdown only
 export interface OverrideContextProps {
@@ -35,12 +36,13 @@ export const OverrideProvider = React.forwardRef<
     ],
   );
 
+  const canRef = supportNodeRef(children);
+  const mergedRef = useComposeRef(ref, canRef ? (children as any).ref : null);
+
   return (
     <OverrideContext.Provider value={context}>
       <NoCompactStyle>
-        {supportNodeRef(children)
+        {canRef ? React.cloneElement(children as React.ReactElement, { ref: mergedRef }) : children}
-          ? React.cloneElement(children as React.ReactElement, { ref })
-          : children}
       </NoCompactStyle>
     </OverrideContext.Provider>
   );

components/popconfirm/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Popconfirm rtl render component should be rendered correctly in RTL dir
 exports[`Popconfirm should show overlay when trigger is clicked 1`] = `
 <div
   class="ant-popover ant-popconfirm ant-popover-placement-top"
-  style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -12px; box-sizing: border-box;"
+  style="--arrow-x: 0px; --arrow-y: 6px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 12px;"
 >
   <div
     class="ant-popover-arrow"

components/select/index.en-US.md

@@ -56,11 +56,10 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Show clear button | boolean | false |  |
+| allowClear | Customize clear icon | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type |
 | autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true |  |
 | autoFocus | Get focus by default | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
-| clearIcon | The custom clear icon | ReactNode | - |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string \| string\[] \| <br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - |  |

components/select/index.zh-CN.md

@@ -56,12 +56,11 @@ demo:
 ### Select props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- | --- |
-| allowClear | 支持清除 | boolean | false |  |
+| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
 | autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效 | boolean | true |  |
 | autoFocus | 默认获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |
+| bordered | 是否有边框 | boolean | true |  |  |
-| clearIcon | 自定义的多选框清空图标 | ReactNode | - |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[] \|<br />number \| number\[] \| <br />LabeledValue \| LabeledValue\[] | - |  |

components/select/useBuiltinPlacements.tsx

@@ -1,4 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
+
 import type { PopupOverflow } from '../config-provider/context';
 
 const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, AlignType> => {
@@ -11,9 +12,7 @@ const getBuiltInPlacements = (popupOverflow?: PopupOverflow): Record<string, Ali
       shiftY: true,
     },
     htmlRegion,
-    _experimental: {
+    dynamicInset: true,
-      dynamicInset: true,
-    },
   };
 
   return {

components/slider/__tests__/__snapshots__/index.test.tsx.snap

@@ -102,7 +102,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div
   class="ant-tooltip ant-zoom-big-fast-leave ant-zoom-big-fast-leave-start ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
-  style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: 0px; box-sizing: border-box; pointer-events: none;"
+  style="--arrow-x: 0px; --arrow-y: 0px; left: 0px; top: -1000vh; box-sizing: border-box; bottom: 0px; pointer-events: none;"
 >
   <div
     class="ant-tooltip-arrow"

components/theme/__tests__/token.test.tsx

@@ -148,7 +148,7 @@ describe('Theme', () => {
         borderRadiusOuter: 6,
       },
       20: {
-        borderRadius: 16,
+        borderRadius: 20,
         borderRadiusLG: 16,
         borderRadiusSM: 8,
         borderRadiusXS: 2,

components/theme/themes/shared/genRadius.ts

@@ -48,7 +48,7 @@ const genRadius = (
   }
 
   return {
-    borderRadius: radiusBase > 16 ? 16 : radiusBase,
+    borderRadius: radiusBase,
     borderRadiusXS: radiusXS,
     borderRadiusSM: radiusSM,
     borderRadiusLG: radiusLG,

components/time-picker/index.en-US.md

@@ -55,7 +55,6 @@ dayjs.extend(customParseFormat)
 | cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | className | The className of picker | string | - |  |
-| clearIcon | The custom clear icon | ReactNode | - |  |
 | defaultValue | To set default time | [dayjs](http://day.js.org/) | - |  |
 | disabled | Determine whether the TimePicker is disabled | boolean | false |  |
 | disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 4.19.0 |

components/time-picker/index.zh-CN.md

@@ -55,7 +55,6 @@ dayjs.extend(customParseFormat)
 | cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | className | 选择器类名 | string | - |  |
-| clearIcon | 自定义的清除图标 | ReactNode | - |  |
 | defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
 | disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 4.19.0 |

components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </span>
   </div>
   <div
-    style="margin-left: 70px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
+    style="margin-left: 78px; display: flex; flex-wrap: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -100,7 +100,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -130,7 +130,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -160,7 +160,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="width: 70px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
+    style="width: 78px; float: left; display: flex; flex-direction: column; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -251,7 +251,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="width: 70px; margin-left: 304px; display: flex; flex-direction: column; row-gap: 8px;"
+    style="width: 78px; margin-left: 336px; display: flex; flex-direction: column; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -342,11 +342,11 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
   </div>
   <div
-    style="margin-left: 70px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
+    style="margin-left: 78px; clear: both; display: flex; flex-wrap: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -376,7 +376,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -406,7 +406,7 @@ exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`]
     </div>
     <button
       class="ant-btn ant-btn-default"
-      style="width: 70px;"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1640,10 +1640,11 @@ exports[`renders components/tooltip/demo/disabled.tsx extend context correctly 2
 exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
 <div>
   <div
-    style="margin-left: 70px; white-space: nowrap;"
+    style="display: flex; margin-left: 78px; white-space: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1673,6 +1674,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1702,6 +1704,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1731,10 +1734,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="width: 70px; float: left;"
+    style="display: flex; flex-direction: column; width: 78px; float: left; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1764,6 +1768,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1793,6 +1798,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1822,10 +1828,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="width: 70px; margin-left: 304px;"
+    style="display: flex; flex-direction: column; width: 78px; margin-left: 336px; row-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1855,6 +1862,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1884,6 +1892,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1913,10 +1922,11 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
   </div>
   <div
-    style="margin-left: 70px; clear: both; white-space: nowrap;"
+    style="display: flex; margin-left: 78px; clear: both; white-space: nowrap; column-gap: 8px;"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1946,6 +1956,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>
@@ -1975,6 +1986,7 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
     </div>
     <button
       class="ant-btn ant-btn-default"
+      style="width: 78px;"
       type="button"
     >
       <span>

components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap

@@ -66,11 +66,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </span>
   </div>
   <div
-    style="margin-left:70px;display:flex;flex-wrap:nowrap;column-gap:8px"
+    style="margin-left:78px;display:flex;flex-wrap:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -79,7 +79,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -88,7 +88,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -97,7 +97,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;float:left;display:flex;flex-direction:column;row-gap:8px"
+    style="width:78px;float:left;display:flex;flex-direction:column;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -125,7 +125,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;margin-left:304px;display:flex;flex-direction:column;row-gap:8px"
+    style="width:78px;margin-left:336px;display:flex;flex-direction:column;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
@@ -153,11 +153,11 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="margin-left:70px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
+    style="margin-left:78px;clear:both;display:flex;flex-wrap:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -166,7 +166,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -175,7 +175,7 @@ exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
-      style="width:70px"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -733,10 +733,11 @@ exports[`renders components/tooltip/demo/disabled.tsx correctly 1`] = `
 exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
 <div>
   <div
-    style="margin-left:70px;white-space:nowrap"
+    style="display:flex;margin-left:78px;white-space:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -745,6 +746,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -753,6 +755,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -761,10 +764,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;float:left"
+    style="display:flex;flex-direction:column;width:78px;float:left;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -773,6 +777,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -781,6 +786,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -789,10 +795,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="width:70px;margin-left:304px"
+    style="display:flex;flex-direction:column;width:78px;margin-left:336px;row-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -801,6 +808,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -809,6 +817,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -817,10 +826,11 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
   </div>
   <div
-    style="margin-left:70px;clear:both;white-space:nowrap"
+    style="display:flex;margin-left:78px;clear:both;white-space:nowrap;column-gap:8px"
   >
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -829,6 +839,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>
@@ -837,6 +848,7 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
     </button>
     <button
       class="ant-btn ant-btn-default"
+      style="width:78px"
       type="button"
     >
       <span>

components/tooltip/demo/arrow.tsx

@@ -3,7 +3,7 @@ import { Button, Divider, Segmented, Tooltip } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 70;
+const buttonWidth = 78;
 const gap = 8;
 
 const btnProps = {

components/tooltip/demo/placement.tsx

@@ -3,52 +3,83 @@ import { Button, Tooltip } from 'antd';
 
 const text = <span>prompt text</span>;
 
-const buttonWidth = 70;
+const buttonWidth = 78;
+const gap = 8;
+
+const btnProps = {
+  style: {
+    width: buttonWidth,
+  },
+};
 
 const App: React.FC = () => (
   <div>
-    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
+    <div style={{ display: 'flex', marginLeft: buttonWidth, whiteSpace: 'nowrap', columnGap: gap }}>
       <Tooltip placement="topLeft" title={text}>
-        <Button>TL</Button>
+        <Button {...btnProps}>TL</Button>
       </Tooltip>
       <Tooltip placement="top" title={text}>
-        <Button>Top</Button>
+        <Button {...btnProps}>Top</Button>
       </Tooltip>
       <Tooltip placement="topRight" title={text}>
-        <Button>TR</Button>
+        <Button {...btnProps}>TR</Button>
       </Tooltip>
     </div>
-    <div style={{ width: buttonWidth, float: 'left' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: buttonWidth,
+        float: 'left',
+        rowGap: gap,
+      }}
+    >
       <Tooltip placement="leftTop" title={text}>
-        <Button>LT</Button>
+        <Button {...btnProps}>LT</Button>
       </Tooltip>
       <Tooltip placement="left" title={text}>
-        <Button>Left</Button>
+        <Button {...btnProps}>Left</Button>
       </Tooltip>
       <Tooltip placement="leftBottom" title={text}>
-        <Button>LB</Button>
+        <Button {...btnProps}>LB</Button>
       </Tooltip>
     </div>
-    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: buttonWidth,
+        marginLeft: buttonWidth * 4 + 24,
+        rowGap: gap,
+      }}
+    >
       <Tooltip placement="rightTop" title={text}>
-        <Button>RT</Button>
+        <Button {...btnProps}>RT</Button>
       </Tooltip>
       <Tooltip placement="right" title={text}>
-        <Button>Right</Button>
+        <Button {...btnProps}>Right</Button>
       </Tooltip>
       <Tooltip placement="rightBottom" title={text}>
-        <Button>RB</Button>
+        <Button {...btnProps}>RB</Button>
       </Tooltip>
     </div>
-    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
+    <div
+      style={{
+        display: 'flex',
+        marginLeft: buttonWidth,
+        clear: 'both',
+        whiteSpace: 'nowrap',
+        columnGap: gap,
+      }}
+    >
       <Tooltip placement="bottomLeft" title={text}>
-        <Button>BL</Button>
+        <Button {...btnProps}>BL</Button>
       </Tooltip>
       <Tooltip placement="bottom" title={text}>
-        <Button>Bottom</Button>
+        <Button {...btnProps}>Bottom</Button>
       </Tooltip>
       <Tooltip placement="bottomRight" title={text}>
-        <Button>BR</Button>
+        <Button {...btnProps}>BR</Button>
       </Tooltip>
     </div>
   </div>

docs/blog/color-picker.en-US.md

@@ -12,19 +12,19 @@ Before we start implementing, we need to understand a concept: color models. A c
 
 ### RGB Color Model
 
-The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/266228482-f1ff94b1-e7ca-40c5-8512-1bc5ab79c388.jpg)
+The `RGB` color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256<sup>3</sup> colors. These colors can form a cube, as shown in the following figure: ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png)
 
-In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `(255, 0, 0)`, green can be represented as `(0, 255, 0)`, and blue can be represented as `(0, 0, 255)`.
+In the `RGB` color model, each color can be represented by a triplet `(R, G, B)`, where `R` represents the value of red, `G` represents the value of green, and `B` represents the value of blue. For example, red can be represented as `rgb(255, 0, 0)`, green can be represented as `rgb(0, 255, 0)`, and blue can be represented as `rgb(0, 0, 255)`.
 
 ### HSV/HSB Color Model
 
-The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/266231236-d68ad9d7-9654-4bc5-8489-7cc52f2aabb1.png)
+The `HSV` color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The `HSV` color model can be represented by a cone, as shown in the following figure: ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png)
 
-In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `(0, 100, 100)`, green can be represented as `(120, 100, 100)`, and blue can be represented as `(240, 100, 100)`.
+In the `HSV` color model, each color can be represented by a triplet `(H, S, V)`, where `H` represents the value of hue, `S` represents the value of saturation, and `V` represents the value of value. For example, red can be represented as `hsv(0, 100, 100)`, green can be represented as `hsv(120, 100, 100)`, and blue can be represented as `hsv(240, 100, 100)`.
 
 ### HEX Color Model
 
-The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png)
+The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/268841812-1b8310f5-322b-45ec-b768-d4115cf7091d.png)
 
 This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers.
 
@@ -111,3 +111,9 @@ So far, we have obtained a color picker with complete hue, saturation, and brigh
 ## Summary
 
 Through this development journey, I have gained a deeper understanding of color models and the development process of Ant Design. Thanks to the Ant Design team for giving me this opportunity, and thank you all for reading. If you are interested in the implementation details, you can check out the source code implementation at [@rc-component/color-picker](https://github.com/react-component/color-picker).
+
+## References
+
+- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
+- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
+- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg

docs/blog/color-picker.zh-CN.md

@@ -14,13 +14,13 @@ author: Redjue
 
 `RGB` 色彩模型是通过三原色（红、绿、蓝）的不同组合来表示色彩的，每个原色的取值范围是 0-255，三原色的组合可以表示 256<sup>3</sup> 种颜色，这些颜色可以组成一个立方体，如下图所示： ![RGB](https://user-images.githubusercontent.com/21119589/268834307-79fca808-d3a3-4fe8-b370-ea1ec472023c.png)
 
-在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `(255, 0, 0)`，绿色可以表示为 `(0, 255, 0)`，蓝色可以表示为 `(0, 0, 255)`。
+在 `RGB` 色彩模型中，每个颜色都可以用一个三元组 `(R, G, B)` 来表示，其中 `R` 表示红色的取值，`G` 表示绿色的取值，`B` 表示蓝色的取值。例如，红色可以表示为 `rgb(255, 0, 0)`，绿色可以表示为 `rgb(0, 255, 0)`，蓝色可以表示为 `rgb(0, 0, 255)`。
 
 ### HSV/HSB 色彩模型
 
 `HSV` 色彩模型是通过色相（Hue）、饱和度（Saturation）、明度（Value）来表示色彩的，其中色相的取值范围是 0-360，饱和度和明度的取值范围是 0-100。HSV 色彩模型可以用一个圆锥体来表示，如下图所示： ![HSV](https://user-images.githubusercontent.com/21119589/268834741-83940b90-c709-492b-8a7e-f59d317411e9.png)
 
-在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `(0, 100, 100)`，绿色可以表示为 `(120, 100, 100)`，蓝色可以表示为 `(240, 100, 100)`。
+在 `HSV` 色彩模型中，每个颜色都可以用一个三元组 `(H, S, V)` 来表示，其中 `H` 表示色相的取值，`S` 表示饱和度的取值，`V` 表示明度的取值。例如，红色可以表示为 `hsv(0, 100, 100)`，绿色可以表示为 `hsv(120, 100, 100)`，蓝色可以表示为 `hsv(240, 100, 100)`。
 
 ### HEX 色彩模型
 
@@ -114,8 +114,6 @@ const alpha = (offset.x + centerOffsetX) / width;
 
 ## 图片来源
 
-https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
+- https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png
-
+- https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
-https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png
+- https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg
-
-https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg

docs/react/migration-v5.en-US.md

@@ -17,7 +17,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 <ColorChunk color="#1890ff" /></ColorChunk> to <ColorChunk color="#1677ff" /></ColorChunk>.
+- Primary color adjustment, changed from `#1890ff` to `#1677ff`.
 - 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.
 

docs/react/migration-v5.zh-CN.md

@@ -18,7 +18,7 @@ tag: Updated
 ### 设计规范调整
 
 - 基础圆角调整，由统一的 `2px` 改为四级圆角，分别为 `2px` `4px` `6px` `8px`，分别应用于不同场景，比如默认尺寸的 Button 的圆角调整为了 `6px`。
-- 主色调整，由 <ColorChunk color="#1890ff" /></ColorChunk> 改为 <ColorChunk color="#1677ff" /></ColorChunk>。
+- 主色调整，由 `#1890ff` 改为 `#1677ff`。
 - 整体阴影调整，由原本的三级阴影调整为两级，分别用于常驻页面的组件（如 Card）和交互反馈（如 Dropdown）。
 - 部分组件内间距调整。
 - 整体去线框化。

docs/spec/colors.en-US.md

@@ -46,19 +46,18 @@ If the above palettes do not meet your needs, you can choose a main color below,
 
 We provide JavaScript usage for developers.
 
-- **JavaScript**
+```bash
+npm install @ant-design/colors
+```
 
-  ```
+```js
-  npm install @ant-design/colors
+import { blue } from '@ant-design/colors';
-  ```
 
-  ```js
+console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
-  import { blue } from '@ant-design/colors';
+console.log(blue.primary); // '#1677FF'
-  console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
+```
-  console.log(blue.primary); // '#1890FF'
-  ```
 
-  More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
+More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
 
 ---
 
@@ -70,7 +69,7 @@ We provide JavaScript usage for developers.
 <img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
 </ImagePreview>
 
-The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is <ColorChunk color="#1890ff" /></ColorChunk>, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
+The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is `#1677ff`, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.
 
 ### Functional Color
 

docs/spec/colors.zh-CN.md

@@ -54,19 +54,18 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
 
 我们为程序员提供了色板的 JavaScript 的使用方式。
 
-- **JavaScript**
+```
+npm install @ant-design/colors
+```
 
-  ```
+```js
-  npm install @ant-design/colors
+import { blue } from '@ant-design/colors';
-  ```
 
-  ```js
+console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
-  import { blue } from '@ant-design/colors';
+console.log(blue.primary); // '#1677FF'
-  console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
+```
-  console.log(blue.primary); // '#1890FF'
-  ```
 
-  更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
+更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
 
 ---
 
@@ -78,7 +77,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
 <img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
 </ImagePreview>
 
-品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 <ColorChunk color="#1890ff" /></ColorChunk>，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
+品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1677ff`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
 
 ### 功能色
 

package.json

@@ -118,12 +118,12 @@
     "@rc-component/color-picker": "~1.4.1",
     "@rc-component/mutate-observer": "^1.1.0",
     "@rc-component/tour": "~1.10.0",
-    "@rc-component/trigger": "^1.15.6",
+    "@rc-component/trigger": "^1.16.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
     "qrcode.react": "^3.1.0",
-    "rc-cascader": "~3.16.0",
+    "rc-cascader": "~3.17.0",
     "rc-checkbox": "~3.1.0",
     "rc-collapse": "~3.7.1",
     "rc-dialog": "~9.2.0",
@@ -143,7 +143,7 @@
     "rc-rate": "~2.12.0",
     "rc-resize-observer": "^1.3.1",
     "rc-segmented": "~2.2.2",
-    "rc-select": "~14.8.1",
+    "rc-select": "~14.9.0",
     "rc-slider": "~10.2.1",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
@@ -152,7 +152,7 @@
     "rc-textarea": "~1.4.0",
     "rc-tooltip": "~6.0.1",
     "rc-tree": "~5.7.12",
-    "rc-tree-select": "~5.12.1",
+    "rc-tree-select": "~5.13.0",
     "rc-upload": "~4.3.4",
     "rc-util": "^5.37.0",
     "scroll-into-view-if-needed": "^3.0.3",
@@ -218,6 +218,7 @@
     "crypto": "^1.0.1",
     "dekko": "^0.2.1",
     "dumi": "^2.2.10",
+    "dumi-plugin-color-chunk": "^1.0.2",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "esbuild-loader": "^4.0.0",
     "eslint": "^8.40.0",