From 607ad0dfdd92d2a2318b257a2d0c229210770767 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 16 Sep 2022 14:58:05 +0800 Subject: [PATCH] feat: alpha color (#37574) * feat: alpha color * chore: update --- components/table/style/index.tsx | 10 +++++++--- components/theme/interface.ts | 2 +- components/theme/themes/dark/colors.ts | 1 - components/theme/themes/default/colors.ts | 1 - components/theme/util/alias.ts | 8 +++++--- components/theme/util/getAlphaColor.ts | 24 +++++++++++++++++++++++ 6 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 components/theme/util/getAlphaColor.ts diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 7d45125c75..62c3896cfa 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -293,6 +293,10 @@ export default genComponentStyleHook('Table', token => { const tableSelectedRowBg = controlItemBgActive; const zIndexTableFixed: number = 2; + const colorFillAlterSolid = new TinyColor(colorFillAlter) + .onBackground(colorBgContainer) + .toHexString(); + const tableToken = mergeToken(token, { tableFontSize: fontSize, tableBg: colorBgContainer, @@ -306,9 +310,9 @@ export default genComponentStyleHook('Table', token => { tablePaddingHorizontalSmall: paddingXS, tableBorderColor: colorSplit, tableHeaderTextColor: colorTextHeading, - tableHeaderBg: colorFillAlter, + tableHeaderBg: colorFillAlterSolid, tableFooterTextColor: colorTextHeading, - tableFooterBg: colorFillAlter, + tableFooterBg: colorFillAlterSolid, tableHeaderCellSplitColor: colorSplit, tableHeaderSortBg: colorFillSecondary, tableHeaderSortHoverBg: colorFillContent, @@ -324,7 +328,7 @@ export default genComponentStyleHook('Table', token => { tableFixedHeaderSortActiveBg: colorFillSecondary, tableHeaderFilterActiveBg: colorFillContent, tableFilterDropdownBg: colorBgContainer, - tableRowHoverBg: colorFillAlter, + tableRowHoverBg: colorFillAlterSolid, tableSelectedRowBg, tableSelectedRowHoverBg: controlItemBgActiveHover, zIndexTableFixed, diff --git a/components/theme/interface.ts b/components/theme/interface.ts index e89a1a3bc9..6cbdefa3cc 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -228,7 +228,6 @@ export interface NeutralColorMapToken { // Border colorBorder: string; colorBorderSecondary: string; - colorSplit: string; } export interface ColorMapToken extends NeutralColorMapToken { @@ -354,6 +353,7 @@ export interface AliasToken extends MapToken { // Border colorBorderBg: string; + colorSplit: string; // Text colorTextPlaceholder: string; diff --git a/components/theme/themes/dark/colors.ts b/components/theme/themes/dark/colors.ts index 80f1859162..96e73e3f9e 100644 --- a/components/theme/themes/dark/colors.ts +++ b/components/theme/themes/dark/colors.ts @@ -49,6 +49,5 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = ( colorBorder: getSolidColor(colorBgBase, 26), colorBorderSecondary: getSolidColor(colorBgBase, 19), - colorSplit: getAlphaColor(colorTextBase, 0.12), }; }; diff --git a/components/theme/themes/default/colors.ts b/components/theme/themes/default/colors.ts index 4f3f4dbbfb..b1f5c9ff4a 100644 --- a/components/theme/themes/default/colors.ts +++ b/components/theme/themes/default/colors.ts @@ -49,6 +49,5 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = ( colorBorder: getSolidColor(colorBgBase, 15), colorBorderSecondary: getSolidColor(colorBgBase, 6), - colorSplit: getAlphaColor(colorTextBase, 0.06), }; }; diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 93c27f827c..5798bd0134 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -1,5 +1,6 @@ import { TinyColor } from '@ctrl/tinycolor'; import type { AliasToken, MapToken, OverrideToken } from '../interface'; +import getAlphaColor from './getAlphaColor'; /** Raw merge of `@ant-design/cssinjs` token. Which need additional process */ type RawMergedToken = MapToken & OverrideToken & { override: Partial }; @@ -43,6 +44,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // ============== Split ============== // colorBorderBg: mergedToken.colorBgContainer, + colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer), // ============== Text ============== // colorTextPlaceholder: mergedToken.colorTextQuaternary, @@ -57,8 +59,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken colorIcon: mergedToken.colorTextTertiary, colorIconHover: mergedToken.colorText, - colorErrorOutline: mergedToken.colorErrorBg, - colorWarningOutline: mergedToken.colorWarningBg, + colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer), + colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer), // Font fontSizeSM, @@ -93,7 +95,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken controlItemBgActiveHover: mergedToken.colorPrimaryBgHover, controlItemBgActiveDisabled: mergedToken.colorTextQuaternary, controlTmpOutline: mergedToken.colorFillQuaternary, - controlOutline: mergedToken.colorPrimaryBg, + controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer), controlLineType: mergedToken.lineType, controlRadius: mergedToken.radiusBase, diff --git a/components/theme/util/getAlphaColor.ts b/components/theme/util/getAlphaColor.ts new file mode 100644 index 0000000000..13c5bad82f --- /dev/null +++ b/components/theme/util/getAlphaColor.ts @@ -0,0 +1,24 @@ +import { TinyColor } from '@ctrl/tinycolor'; + +function isStableColor(color: number): boolean { + return color >= 0 && color <= 255; +} + +function getAlphaColor(frontColor: string, backgroundColor: string): string { + const { r: fR, g: fG, b: fB } = new TinyColor(frontColor).toRgb(); + const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb(); + + for (let fA = 0.01; fA <= 1; fA += 0.01) { + const r = Math.round((fR - bR * (1 - fA)) / fA); + const g = Math.round((fG - bG * (1 - fA)) / fA); + const b = Math.round((fB - bB * (1 - fA)) / fA); + if (isStableColor(r) && isStableColor(g) && isStableColor(b)) + return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString(); + } + + // fallback + /* istanbul ignore next */ + return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString(); +} + +export default getAlphaColor;