chore: adjust color trans (#42355)

components/color-picker/style/color-block.ts

@@ -1,6 +1,16 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { ColorPickerToken } from './index';
 
+const TRANSPARENT_DOT_COLOR = '#EEE';
+
+/**
+ * @private Internal usage only
+ */
+export const getTransBg = (size: number): CSSObject => ({
+  backgroundImage: `conic-gradient(${TRANSPARENT_DOT_COLOR} 0 25%, transparent 0 50%, ${TRANSPARENT_DOT_COLOR} 0 75%, transparent 0)`,
+  backgroundSize: `${size}px ${size}px`,
+});
+
 const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject => {
   const { componentCls, borderRadiusSM, colorPickerInsetShadow, lineWidth, colorFillSecondary } =
     token;
@@ -11,9 +21,7 @@ const genColorBlockStyle = (token: ColorPickerToken, size: number): CSSObject =>
       width: size,
       height: size,
       boxShadow: colorPickerInsetShadow,
-      backgroundSize: '100%',
-      backgroundImage:
-        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==")',
+      ...getTransBg(size / 2),
       [`${componentCls}-color-block-inner`]: {
         width: '100%',
         height: '100%',

components/color-picker/style/picker.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme/internal';
-import genColorBlockStyle from './color-block';
+import genColorBlockStyle, { getTransBg } from './color-block';
 import type { ColorPickerToken } from './index';
 
 const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
@@ -58,11 +58,7 @@ const genPickerStyle: GenerateStyle<ColorPickerToken, CSSObject> = (token) => {
         borderRadius: colorPickerSliderHeight / 2,
         boxShadow: colorPickerInsetShadow,
       },
-      '&-alpha': {
-        backgroundSize: colorPickerSliderHeight * 2,
-        backgroundImage:
-          'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==")',
-      },
+      '&-alpha': getTransBg(8),
       marginBottom: marginSM,
     },