diff --git a/components/theme/interface.ts b/components/theme/interface.ts index 1a6907aa22..46506b92ab 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -202,18 +202,13 @@ export interface SeedToken extends PresetColorType { opacityImage: number; } -// ====================================================================== -// == Map Token == -// ====================================================================== -// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 -export interface MapToken extends SeedToken, ColorPalettes { +export interface ColorMapToken { // Color /** Used for DefaultButton, Switch which has default outline */ colorDefaultOutline: string; colorPrimaryHover: string; colorPrimaryActive: string; - colorPrimaryOutline: string; colorPrimaryBorder: string; // primary[2] colorPrimaryBorderHover: string; @@ -222,13 +217,11 @@ export interface MapToken extends SeedToken, ColorPalettes { colorWarningHover: string; colorWarningActive: string; - colorWarningOutline: string; colorWarningBorder: string; colorWarningBg: string; colorErrorHover: string; colorErrorActive: string; - colorErrorOutline: string; colorErrorBorder: string; colorErrorBg: string; @@ -245,7 +238,32 @@ export interface MapToken extends SeedToken, ColorPalettes { colorBgElevated: string; /** Color of component background */ colorBgContainer: string; + colorBgContainerSecondary: string; + colorBgContainerDisabled: string; + colorBorder: string; + colorBorderSecondary: string; + colorSplit: string; + + // Color + colorText: string; + colorTextSecondary: string; + colorTextDisabled: string; + /** Placeholder text color */ + colorTextPlaceholder: string; + colorTextHeading: string; + + /** Weak action. Such as `allowClear` or Alert close button */ + colorAction: string; + /** Weak action hover color. Such as `allowClear` or Alert close button */ + colorActionHover: string; + + colorLink: string; + colorLinkHover: string; + colorLinkActive: string; +} + +export interface CommonMapToken { // Font fontSizes: number[]; lineHeights: number[]; @@ -281,6 +299,16 @@ export interface MapToken extends SeedToken, ColorPalettes { controlHeightXS: number; controlHeightSM: number; controlHeightLG: number; +} + +// ====================================================================== +// == Map Token == +// ====================================================================== +// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 +export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, CommonMapToken { + colorPrimaryOutline: string; + colorWarningOutline: string; + colorErrorOutline: string; // Map Token bgColors: BgPalettes; @@ -332,27 +360,6 @@ export interface AliasToken extends MapToken { controlInteractiveSize: number; controlItemBgActiveDisabled: string; // Note. It also is a color - // Color - colorBorder: string; - colorSplit: string; - colorTextSecondary: string; - colorTextDisabled: string; - /** Placeholder text color */ - colorTextPlaceholder: string; - colorTextHeading: string; - - /** Weak action. Such as `allowClear` or Alert close button */ - colorAction: string; - /** Weak action hover color. Such as `allowClear` or Alert close button */ - colorActionHover: string; - - colorLink: string; - colorLinkHover: string; - colorLinkActive: string; - - colorBgContainerSecondary: string; - colorBgContainerDisabled: string; - // =============== Legacy: should be remove =============== opacityLoading: number; @@ -401,7 +408,6 @@ export interface AliasToken extends MapToken { screenXXLMax: number; controlMaskBg: string; - colorBorderSecondary: string; // FIXME: component box-shadow, should be removed boxShadowPopoverArrow: string; diff --git a/components/theme/themes/IPalettes.ts b/components/theme/themes/IPalettes.ts index 1ba5ed3498..e7317dea93 100644 --- a/components/theme/themes/IPalettes.ts +++ b/components/theme/themes/IPalettes.ts @@ -1,3 +1,42 @@ +export interface PrimaryPalettes { + 0: string; + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + 6: string; + 7: string; +} + +export interface SuccessPalettes { + 1: string; + 3: string; + 6: string; +} + +export interface WarningPalettes { + 1: string; + 3: string; + 5: string; + 6: string; + 7: string; +} + +export interface ErrorPalettes { + 1: string; + 3: string; + 5: string; + 6: string; + 7: string; +} + +export interface InfoPalettes { + 1: string; + 3: string; + 6: string; +} + export interface TextAlphaPalettes { 85: string; 65: string; @@ -16,6 +55,7 @@ export interface TextAlphaPalettes { // 文本 hover 色 3: string; } + export interface BgPalettes { // 作为比较重的描边或者填充内容 26: string; diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts index f1f58850a9..184a2a62a1 100644 --- a/components/theme/themes/dark/index.ts +++ b/components/theme/themes/dark/index.ts @@ -2,27 +2,20 @@ import { generate } from '@ant-design/colors'; import { TinyColor } from '@ctrl/tinycolor'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; import { defaultPresetColors } from '../seed'; -import { getFontSizes } from '../shared'; -import { generateBgPalettes, generateTextAlphaPalettes } from './palettes'; +import genColorMapToken from '../shared/genColorMapToken'; +import genCommonMapToken from '../shared/genCommonMapToken'; +import { + generateBgPalettes, + generateErrorPalettes, + generateInfoPalettes, + generatePrimaryPalettes, + generateSuccessPalettes, + generateTextAlphaPalettes, + generateWarningPalettes, +} from './palettes'; export default function derivative(token: SeedToken): MapToken { - const { - colorPrimary, - colorSuccess, - colorWarning, - colorError, - colorInfo, - motionUnit, - motionBase, - fontSizeBase, - sizeUnit, - sizeBaseStep, - gridUnit, - gridBaseStep, - radiusBase, - controlHeight, - lineWidth, - } = token; + const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo } = token; const colorPalettes = Object.keys(defaultPresetColors) .map((colorKey: keyof PresetColorType) => { @@ -41,88 +34,34 @@ export default function derivative(token: SeedToken): MapToken { return prev; }, {} as ColorPalettes); - const primaryColors = generate(colorPrimary, { theme: 'dark' }); - const successColors = generate(colorSuccess, { theme: 'dark' }); - const warningColors = generate(colorWarning, { theme: 'dark' }); - const errorColors = generate(colorError, { theme: 'dark' }); - const infoColors = generate(colorInfo, { theme: 'dark' }); + const primaryColors = generatePrimaryPalettes(colorPrimary); + const successColors = generateSuccessPalettes(colorSuccess); + const warningColors = generateWarningPalettes(colorWarning); + const errorColors = generateErrorPalettes(colorError); + const infoColors = generateInfoPalettes(colorInfo); const bgColors = generateBgPalettes('#000'); const textColors = generateTextAlphaPalettes('#fff'); - const fontSizes = getFontSizes(fontSizeBase); - return { ...token, ...colorPalettes, - // motion - motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`, - motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`, - motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`, + // Colors + ...genColorMapToken({ + primaryPalettes: primaryColors, + successPalettes: successColors, + warningPalettes: warningColors, + errorPalettes: errorColors, + infoPalettes: infoColors, + bgPalettes: bgColors, + textAlphaPalettes: textColors, + }), - // font - fontSizes: fontSizes.map(fs => fs.size), - lineHeights: fontSizes.map(fs => fs.lineHeight), - - // size - sizeSpaceSM: sizeUnit * (sizeBaseStep - 1), - sizeSpace: sizeUnit * sizeBaseStep, - sizeSpaceXS: sizeUnit * (sizeBaseStep - 2), - sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3), - - // grid - gridSpaceSM: gridUnit * (gridBaseStep - 1), - gridSpaceBase: gridUnit * gridBaseStep, - gridSpaceLG: gridUnit * (gridBaseStep + 1), - gridSpaceXL: gridUnit * (gridBaseStep + 2), - gridSpaceXXL: gridUnit * (gridBaseStep + 5), - - // line - lineWidthBold: lineWidth + 1, - - // radius - radiusSM: radiusBase / 2, - radiusLG: radiusBase * 2, - radiusXL: radiusBase * 4, - - colorDefaultOutline: textColors['4'], - - colorPrimaryActive: primaryColors[6], - colorPrimaryHover: primaryColors[4], colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), - colorPrimaryBorder: primaryColors[2], - colorPrimaryBorderHover: primaryColors[3], - - colorSuccessBorder: successColors[2], - colorSuccessBg: successColors[0], - - colorErrorActive: errorColors[6], - colorErrorHover: errorColors[4], colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), - colorErrorBorder: errorColors[2], - colorErrorBg: errorColors[0], - - colorWarningActive: warningColors[6], - colorWarningHover: warningColors[4], colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), - colorWarningBorder: warningColors[2], - colorWarningBg: warningColors[0], - colorInfoBorder: infoColors[2], - colorInfoBg: infoColors[0], - - colorHighlight: errorColors[4], - - colorBgLayout: bgColors['0'], - colorBgContentHover: bgColors['26'], - colorBgContainer: bgColors['8'], - colorBgElevated: bgColors['12'], - colorBgContent: bgColors['15'], - - // control - controlHeightSM: controlHeight * 0.75, - controlHeightXS: controlHeight * 0.5, - controlHeightLG: controlHeight * 1.25, + ...genCommonMapToken(token), // map token bgColors, diff --git a/components/theme/themes/dark/palettes.ts b/components/theme/themes/dark/palettes.ts index a0eb5fc270..3bd4a3238f 100644 --- a/components/theme/themes/dark/palettes.ts +++ b/components/theme/themes/dark/palettes.ts @@ -1,6 +1,69 @@ -import type { BgPalettes, TextAlphaPalettes } from '../IPalettes'; +import { generate } from '@ant-design/colors'; +import type { + BgPalettes, + ErrorPalettes, + InfoPalettes, + PrimaryPalettes, + SuccessPalettes, + TextAlphaPalettes, + WarningPalettes, +} from '../IPalettes'; import { getAlphaColor, getSolidColor } from './colorAlgorithm'; +export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes { + const primaryColors = generate(primaryBaseColor, { theme: 'dark' }); + return { + 0: '#0e161f', + 1: primaryColors[0], + 2: primaryColors[1], + 3: primaryColors[2], + 4: primaryColors[3], + 5: primaryColors[4], + 6: primaryColors[5], + 7: primaryColors[6], + }; +} + +export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes { + const successColors = generate(successBaseColor, { theme: 'dark' }); + return { + 1: successColors[0], + 3: successColors[2], + 6: successColors[5], + }; +} + +export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes { + const errorColors = generate(errorBaseColor, { theme: 'dark' }); + return { + 1: errorColors[0], + 3: errorColors[2], + 5: errorColors[4], + 6: errorColors[5], + 7: errorColors[6], + }; +} + +export function generateWarningPalettes(warningBaseColor: string): WarningPalettes { + const warningColors = generate(warningBaseColor, { theme: 'dark' }); + return { + 1: warningColors[0], + 3: warningColors[2], + 5: warningColors[4], + 6: warningColors[5], + 7: warningColors[6], + }; +} + +export function generateInfoPalettes(infoBaseColor: string): InfoPalettes { + const infoColors = generate(infoBaseColor, { theme: 'dark' }); + return { + 1: infoColors[0], + 3: infoColors[2], + 6: infoColors[5], + }; +} + export function generateBgPalettes(bgBaseColor: string): BgPalettes { return { 'light-2': getSolidColor(bgBaseColor, 2), diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts index ab0298ef95..d2fe1200d7 100644 --- a/components/theme/themes/default/index.ts +++ b/components/theme/themes/default/index.ts @@ -2,28 +2,20 @@ import { generate } from '@ant-design/colors'; import { TinyColor } from '@ctrl/tinycolor'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; import { defaultPresetColors } from '../seed'; -import { getFontSizes } from '../shared'; -import { generateBgPalettes, generateTextAlphaPalettes } from './palettes'; +import genColorMapToken from '../shared/genColorMapToken'; +import genCommonMapToken from '../shared/genCommonMapToken'; +import { + generateBgPalettes, + generateErrorPalettes, + generateInfoPalettes, + generatePrimaryPalettes, + generateSuccessPalettes, + generateTextAlphaPalettes, + generateWarningPalettes, +} from './palettes'; export default function derivative(token: SeedToken): MapToken { - const { - colorPrimary, - colorSuccess, - colorWarning, - colorError, - colorInfo, - colorBg, - motionUnit, - motionBase, - fontSizeBase, - sizeUnit, - sizeBaseStep, - gridUnit, - gridBaseStep, - radiusBase, - controlHeight, - lineWidth, - } = token; + const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo, colorBg } = token; const colorPalettes = Object.keys(defaultPresetColors) .map((colorKey: keyof PresetColorType) => { @@ -42,91 +34,35 @@ export default function derivative(token: SeedToken): MapToken { return prev; }, {} as ColorPalettes); - const primaryColors = generate(colorPrimary); - const successColors = generate(colorSuccess); - const warningColors = generate(colorWarning); - const errorColors = generate(colorError); - const infoColors = generate(colorInfo); + const primaryColors = generatePrimaryPalettes(colorPrimary); + const successColors = generateSuccessPalettes(colorSuccess); + const warningColors = generateWarningPalettes(colorWarning); + const errorColors = generateErrorPalettes(colorError); + const infoColors = generateInfoPalettes(colorInfo); const bgColors = generateBgPalettes(colorBg); - // FIXME: need seedToken '#000' const textColors = generateTextAlphaPalettes('#000'); - const fontSizes = getFontSizes(fontSizeBase); - return { ...token, ...colorPalettes, - // motion - motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`, - motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`, - motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`, - - // font - fontSizes: fontSizes.map(fs => fs.size), - lineHeights: fontSizes.map(fs => fs.lineHeight), - - // size - sizeSpaceSM: sizeUnit * (sizeBaseStep - 1), - sizeSpace: sizeUnit * sizeBaseStep, - sizeSpaceXS: sizeUnit * (sizeBaseStep - 2), - sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3), - - // grid - gridSpaceSM: gridUnit * (gridBaseStep - 1), - gridSpaceBase: gridUnit * gridBaseStep, - gridSpaceLG: gridUnit * (gridBaseStep + 1), - gridSpaceXL: gridUnit * (gridBaseStep + 2), - gridSpaceXXL: gridUnit * (gridBaseStep + 5), - - // line - lineWidthBold: lineWidth + 1, - - // radius - radiusSM: radiusBase / 2, - radiusLG: radiusBase * 2, - radiusXL: radiusBase * 4, - - colorDefaultOutline: textColors['4'], - - colorPrimaryActive: primaryColors[6], - colorPrimaryHover: primaryColors[4], + // Colors + ...genColorMapToken({ + primaryPalettes: primaryColors, + successPalettes: successColors, + warningPalettes: warningColors, + errorPalettes: errorColors, + infoPalettes: infoColors, + bgPalettes: bgColors, + textAlphaPalettes: textColors, + }), colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), - colorPrimaryBorder: primaryColors[2], - colorPrimaryBorderHover: primaryColors[3], - - colorSuccessBorder: successColors[2], - colorSuccessBg: successColors[0], - - colorErrorActive: errorColors[6], - colorErrorHover: errorColors[4], colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), - colorErrorBorder: errorColors[2], - colorErrorBg: errorColors[0], - - colorWarningActive: warningColors[6], - colorWarningHover: warningColors[4], colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), - colorWarningBorder: warningColors[2], - colorWarningBg: warningColors[0], - colorInfoBorder: infoColors[2], - colorInfoBg: infoColors[0], + ...genCommonMapToken(token), - colorHighlight: errorColors[4], - - colorBgLayout: bgColors['0'], - colorBgContentHover: bgColors['26'], - colorBgContainer: bgColors['8'], - colorBgElevated: bgColors['12'], - colorBgContent: bgColors['15'], - - // control - controlHeightSM: controlHeight * 0.75, - controlHeightXS: controlHeight * 0.5, - controlHeightLG: controlHeight * 1.25, - - // map token + // FIXME: should be removed bgColors, textColors, }; diff --git a/components/theme/themes/default/palettes.ts b/components/theme/themes/default/palettes.ts index 74b99f9a3c..e061f60404 100644 --- a/components/theme/themes/default/palettes.ts +++ b/components/theme/themes/default/palettes.ts @@ -1,6 +1,69 @@ -import type { BgPalettes, TextAlphaPalettes } from '../IPalettes'; +import { generate } from '@ant-design/colors'; +import type { + BgPalettes, + ErrorPalettes, + InfoPalettes, + PrimaryPalettes, + SuccessPalettes, + TextAlphaPalettes, + WarningPalettes, +} from '../IPalettes'; import { getAlphaColor, getSolidColor } from './colorAlgorithm'; +export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes { + const primaryColors = generate(primaryBaseColor); + return { + 0: '#0e161f', + 1: primaryColors[0], + 2: primaryColors[1], + 3: primaryColors[2], + 4: primaryColors[3], + 5: primaryColors[4], + 6: primaryColors[5], + 7: primaryColors[6], + }; +} + +export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes { + const successColors = generate(successBaseColor); + return { + 1: successColors[0], + 3: successColors[2], + 6: successColors[5], + }; +} + +export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes { + const errorColors = generate(errorBaseColor); + return { + 1: errorColors[0], + 3: errorColors[2], + 5: errorColors[4], + 6: errorColors[5], + 7: errorColors[6], + }; +} + +export function generateWarningPalettes(warningBaseColor: string): WarningPalettes { + const warningColors = generate(warningBaseColor); + return { + 1: warningColors[0], + 3: warningColors[2], + 5: warningColors[4], + 6: warningColors[5], + 7: warningColors[6], + }; +} + +export function generateInfoPalettes(infoBaseColor: string): InfoPalettes { + const infoColors = generate(infoBaseColor); + return { + 1: infoColors[0], + 3: infoColors[2], + 6: infoColors[5], + }; +} + export function generateBgPalettes(bgBaseColor: string): BgPalettes { return { 26: getSolidColor(bgBaseColor, 15), diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts new file mode 100644 index 0000000000..78740cb303 --- /dev/null +++ b/components/theme/themes/shared/genColorMapToken.ts @@ -0,0 +1,86 @@ +import type { ColorMapToken } from '../../interface'; +import type { + BgPalettes, + ErrorPalettes, + InfoPalettes, + PrimaryPalettes, + SuccessPalettes, + TextAlphaPalettes, + WarningPalettes, +} from '../IPalettes'; + +interface PaletteSheets { + primaryPalettes: PrimaryPalettes; + successPalettes: SuccessPalettes; + errorPalettes: ErrorPalettes; + warningPalettes: WarningPalettes; + infoPalettes: InfoPalettes; + textAlphaPalettes: TextAlphaPalettes; + bgPalettes: BgPalettes; +} + +export default function genColorMapToken({ + primaryPalettes, + successPalettes, + errorPalettes, + warningPalettes, + infoPalettes, + textAlphaPalettes, + bgPalettes, +}: PaletteSheets): ColorMapToken { + return { + colorPrimaryHover: primaryPalettes['5'], + colorPrimaryActive: primaryPalettes['7'], + colorPrimaryBorder: primaryPalettes['3'], + colorPrimaryBorderHover: primaryPalettes['4'], + + colorSuccessBg: successPalettes['1'], + colorSuccessBorder: successPalettes['3'], + + colorErrorBg: errorPalettes['1'], + colorErrorBorder: errorPalettes['3'], + colorErrorHover: errorPalettes['5'], + colorErrorActive: errorPalettes['7'], + + colorWarningBg: warningPalettes['1'], + colorWarningBorder: warningPalettes['3'], + colorWarningHover: warningPalettes['5'], + colorWarningActive: warningPalettes['7'], + + colorInfoBg: infoPalettes['1'], + colorInfoBorder: infoPalettes['3'], + + colorLink: primaryPalettes['6'], + colorLinkHover: primaryPalettes['5'], + colorLinkActive: primaryPalettes['7'], + + colorDefaultOutline: textAlphaPalettes['4'], + + // ============== Background ============== // + colorBgLayout: bgPalettes['0'], + colorBgElevated: bgPalettes['12'], + colorBgContainer: bgPalettes['8'], + colorBgContainerSecondary: textAlphaPalettes['4'], + colorBgContainerDisabled: textAlphaPalettes['8'], + colorBgContent: bgPalettes['15'], + colorBgContentHover: bgPalettes['26'], + + // ============== Split ============== // + colorBorder: bgPalettes['26'], + colorBorderSecondary: bgPalettes['19'], + colorSplit: textAlphaPalettes['12'], + + // ============== Text ============== // + colorText: textAlphaPalettes['85'], + colorTextHeading: textAlphaPalettes['85'], + colorTextSecondary: textAlphaPalettes['45'], + // TODO: 这个 30 估计要改成 25 + colorTextDisabled: textAlphaPalettes['30'], + colorTextPlaceholder: textAlphaPalettes['25'], + + colorAction: textAlphaPalettes['45'], + colorActionHover: textAlphaPalettes['85'], + + colorHighlight: errorPalettes['5'], + }; +} diff --git a/components/theme/themes/shared/genCommonMapToken.ts b/components/theme/themes/shared/genCommonMapToken.ts new file mode 100644 index 0000000000..ad7fec4386 --- /dev/null +++ b/components/theme/themes/shared/genCommonMapToken.ts @@ -0,0 +1,56 @@ +import type { CommonMapToken, SeedToken } from '../../interface'; +import genFontSizes from './genFontSizes'; + +export default function genCommonMapToken(token: SeedToken): CommonMapToken { + const { + motionUnit, + motionBase, + fontSizeBase, + sizeUnit, + sizeBaseStep, + gridUnit, + gridBaseStep, + radiusBase, + controlHeight, + lineWidth, + } = token; + + const fontSizes = genFontSizes(fontSizeBase); + + return { + // motion + motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`, + motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`, + motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`, + + // font + fontSizes: fontSizes.map(fs => fs.size), + lineHeights: fontSizes.map(fs => fs.lineHeight), + + // size + sizeSpaceSM: sizeUnit * (sizeBaseStep - 1), + sizeSpace: sizeUnit * sizeBaseStep, + sizeSpaceXS: sizeUnit * (sizeBaseStep - 2), + sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3), + + // grid + gridSpaceSM: gridUnit * (gridBaseStep - 1), + gridSpaceBase: gridUnit * gridBaseStep, + gridSpaceLG: gridUnit * (gridBaseStep + 1), + gridSpaceXL: gridUnit * (gridBaseStep + 2), + gridSpaceXXL: gridUnit * (gridBaseStep + 5), + + // line + lineWidthBold: lineWidth + 1, + + // radius + radiusSM: radiusBase / 2, + radiusLG: radiusBase * 2, + radiusXL: radiusBase * 4, + + // control + controlHeightSM: controlHeight * 0.75, + controlHeightXS: controlHeight * 0.5, + controlHeightLG: controlHeight * 1.25, + }; +} diff --git a/components/theme/themes/shared.ts b/components/theme/themes/shared/genFontSizes.ts similarity index 83% rename from components/theme/themes/shared.ts rename to components/theme/themes/shared/genFontSizes.ts index 29ec09d2f0..e6fc1676ec 100644 --- a/components/theme/themes/shared.ts +++ b/components/theme/themes/shared/genFontSizes.ts @@ -1,7 +1,5 @@ -/* eslint-disable import/prefer-default-export */ - // https://zhuanlan.zhihu.com/p/32746810 -export function getFontSizes(base: number) { +export default function getFontSizes(base: number) { const fontSizes = new Array(10).fill(null).map((_, index) => { const i = index - 1; const baseSize = base * 2.71828 ** (i / 5); diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index ec38a6aa4b..fd0353b1ca 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -18,7 +18,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken ...derivative, }; - const { fontSizes, lineHeights, textColors, bgColors } = mergedToken; + const { fontSizes, lineHeights, textColors } = mergedToken; // FIXME: tmp const primaryColors = generate(mergedToken.colorPrimary); @@ -39,34 +39,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken const aliasToken: AliasToken = { ...mergedToken, - // Colors - colorText: textColors['85'], - // TODO: 只有 Slider 用了,感觉命名有问题 - colorTextSecondary: textColors['45'], - // TODO: 这个 30 估计要改成 25 - colorTextDisabled: textColors['30'], - colorTextPlaceholder: textColors['25'], - colorTextHeading: textColors['85'], - - // TODO:Menu 用了这个 感觉命名有问题 - // TODO:能不能用透明色?用透明色会造成重叠后变亮的问题,是不是得用实色? - colorBgContainerSecondary: textColors['4'], - colorBgContainerDisabled: textColors['8'], - - colorLink: mergedToken.colorPrimary, - colorLinkHover: primaryColors[4], - colorLinkActive: primaryColors[6], - - // TODO: 确认 Action 的色彩关系 - colorAction: textColors['45'], - colorActionHover: textColors['85'], - - // Split - colorBorder: bgColors['26'], - // TODO:Secondary 在纯实色背景下的颜色和 Split 是一样的 - colorBorderSecondary: bgColors['19'], - colorSplit: textColors['12'], - // Font fontSizeSM, fontSize: fontSizes[1], @@ -110,11 +82,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken fontWeightStrong: 600, // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 - // FIXME: Handle this when derivative is ready - // primaryColors, - // warningColors, - // errorColors, - opacityLoading: 0.65, colorSuccessBorder: successColors[2],