mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

feat: alpha color (#37574)

Browse Source 
* feat: alpha color

* chore: update
This commit is contained in:
MadCcc 2022-09-16 14:58:05 +08:00 committed by GitHub
parent 6df3bbb4ed
commit 607ad0dfdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/table/style/index.tsx
View File

@ -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<TableToken>(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,

2
components/theme/interface.ts
View File

@ -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;

1
components/theme/themes/dark/colors.ts
View File

@ -49,6 +49,5 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
colorBorder: getSolidColor(colorBgBase, 26),
colorBorderSecondary: getSolidColor(colorBgBase, 19),
colorSplit: getAlphaColor(colorTextBase, 0.12),
};
};

1
components/theme/themes/default/colors.ts
View File

@ -49,6 +49,5 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
colorBorder: getSolidColor(colorBgBase, 15),
colorBorderSecondary: getSolidColor(colorBgBase, 6),
colorSplit: getAlphaColor(colorTextBase, 0.06),
};
};

8
components/theme/util/alias.ts
View File

@ -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<AliasToken> };
@ -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,

24
components/theme/util/getAlphaColor.ts Normal file
View File

@ -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;