From 76dc87f1c384dbe63aad2cbe83e3fcbd6f0b0569 Mon Sep 17 00:00:00 2001
From: Jungzl <35426360+Jungzl@users.noreply.github.com>
Date: Sun, 19 Feb 2023 16:24:20 +0800
Subject: [PATCH] fix: adjust onBackground outputs to support semi-transparent
 colors (#40729)

* chore(deps): bump @ctrl/tinycolor from 3.4.0 to 3.6.0

* fix: adjust onBackground outputs to support semi-transparent colors
---
 components/empty/simple.tsx       | 12 ++++++++----
 components/slider/style/index.tsx |  6 +++---
 components/table/style/index.ts   |  8 ++++----
 package.json                      |  2 +-
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx
index 00ce81b536..375a9da2d4 100644
--- a/components/empty/simple.tsx
+++ b/components/empty/simple.tsx
@@ -1,6 +1,6 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
 import { useToken } from '../theme/internal';
 
 const Simple = () => {
@@ -10,9 +10,13 @@ const Simple = () => {
 
   const { borderColor, shadowColor, contentColor } = useMemo(
     () => ({
-      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexString(),
-      shadowColor: new TinyColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
-      contentColor: new TinyColor(colorFillQuaternary).onBackground(colorBgContainer).toHexString(),
+      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexShortString(),
+      shadowColor: new TinyColor(colorFillTertiary)
+        .onBackground(colorBgContainer)
+        .toHexShortString(),
+      contentColor: new TinyColor(colorFillQuaternary)
+        .onBackground(colorBgContainer)
+        .toHexShortString(),
     }),
     [colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer],
   );
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 0fe821760c..a2aeffa015 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -1,9 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type * as React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
+import type * as React from 'react';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 // Direction naming standard:
 // Horizontal base:
@@ -214,7 +214,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
           height: token.handleSize,
           boxShadow: `0 0 0 ${token.handleLineWidth}px ${new TinyColor(token.colorTextDisabled)
             .onBackground(token.colorBgContainer)
-            .toHexString()}`,
+            .toHexShortString()}`,
           insetInlineStart: 0,
           insetBlockStart: 0,
         },
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index 0a00afdd8e..fed833761a 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import { clearFix, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genBorderedStyle from './bordered';
@@ -16,7 +17,6 @@ import genSizeStyle from './size';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
-import { clearFix, resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
@@ -257,14 +257,14 @@ export default genComponentStyleHook('Table', (token) => {
 
   const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
   const colorFillContentSolid = new TinyColor(colorFillContent)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
 
   const colorFillAlterSolid = new TinyColor(colorFillAlter)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
 
   const tableToken = mergeToken<TableToken>(token, {
     tableFontSize: fontSize,
diff --git a/package.json b/package.json
index 8d146c8c68..90518c53a1 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
     "@ant-design/icons": "^5.0.0",
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
-    "@ctrl/tinycolor": "^3.4.0",
+    "@ctrl/tinycolor": "^3.6.0",
     "@rc-component/mutate-observer": "^1.0.0",
     "@rc-component/tour": "~1.6.0",
     "classnames": "^2.2.6",