mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: refactor token types (#36242)

Browse Source 
* refactor: refactor token types

* chore: code clean
This commit is contained in:
MadCcc 2022-06-27 11:54:31 +08:00 committed by GitHub
parent 8266cb08bc
commit 8f5e0d12ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/_util/theme/index.tsx
View File

@ -5,8 +5,8 @@ import version from '../../version';
import type { DeepPartial } from '../type'; import type { DeepPartial } from '../type';
import type { import type {
AliasToken, AliasToken,
DerivativeToken,
GlobalToken, GlobalToken,
MapToken,
OverrideToken, OverrideToken,
PresetColorType, PresetColorType,
SeedToken, SeedToken,
@ -50,7 +50,7 @@ export type {
// ================================ Context ================================= // ================================ Context =================================
export const DesignTokenContext = React.createContext<{ export const DesignTokenContext = React.createContext<{
token: Partial<SeedToken>; token: Partial<SeedToken>;
derivative?: (token: SeedToken) => DerivativeToken; derivative?: (token: SeedToken) => MapToken;
override?: DeepPartial<OverrideToken>; override?: DeepPartial<OverrideToken>;
hashed?: string | boolean; hashed?: string | boolean;
}>({ }>({
@ -63,7 +63,7 @@ export const DesignTokenContext = React.createContext<{
const saltPrefix = const saltPrefix =
process.env.NODE_ENV === 'production' ? version : `${version}-${new Date().getHours()}`; process.env.NODE_ENV === 'production' ? version : `${version}-${new Date().getHours()}`;
export function useToken(): [Theme<SeedToken, DerivativeToken>, GlobalToken, string] { export function useToken(): [Theme<SeedToken, MapToken>, GlobalToken, string] {
const { const {
token: rootDesignToken, token: rootDesignToken,
override, override,

22
components/_util/theme/interface.ts
View File

@ -41,6 +41,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl
import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
import type { ComponentToken as UploadComponentToken } from '../../upload/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style';
import type { DeepPartial } from '../type';
import type { BgPalettes, TextAlphaPalettes } from './themes/IPalettes'; import type { BgPalettes, TextAlphaPalettes } from './themes/IPalettes';
export const PresetColors = [ export const PresetColors = [
@ -69,12 +70,7 @@ export type ColorPalettes = {
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string; [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
}; };
export interface OverrideToken { export interface ComponentTokenMap {
derivative?: Partial<DerivativeToken>;
/** @private Internal Usage */
alias?: Partial<AliasToken>;
// Customize component
Affix?: {}; Affix?: {};
Alert?: AlertComponentToken; Alert?: AlertComponentToken;
Anchor?: AnchorComponentToken; Anchor?: AnchorComponentToken;
@ -135,8 +131,14 @@ export interface OverrideToken {
Progress?: ProgressComponentToken; Progress?: ProgressComponentToken;
} }
export interface OverrideToken extends DeepPartial<ComponentTokenMap> {
derivative?: Partial<MapToken>;
/** @private Internal Usage */
alias?: Partial<AliasToken>;
}
/** Final token which contains the components level override */ /** Final token which contains the components level override */
export type GlobalToken = AliasToken & Omit<OverrideToken, 'derivative' | 'alias'>; export type GlobalToken = AliasToken & ComponentTokenMap;
// ====================================================================== // ======================================================================
// == Seed Token == // == Seed Token ==
@ -201,10 +203,10 @@ export interface SeedToken extends PresetColorType {
} }
// ====================================================================== // ======================================================================
// == Derivative Token == // == Map Token ==
// ====================================================================== // ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface DerivativeToken extends SeedToken, ColorPalettes { export interface MapToken extends SeedToken, ColorPalettes {
// Color // Color
/** Used for DefaultButton, Switch which has default outline */ /** Used for DefaultButton, Switch which has default outline */
colorDefaultOutline: string; colorDefaultOutline: string;
@ -281,7 +283,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
// ====================================================================== // ======================================================================
// FIXME: DerivativeToken should part pick // FIXME: DerivativeToken should part pick
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface AliasToken extends DerivativeToken { export interface AliasToken extends MapToken {
// Font // Font
fontSizeSM: number; fontSizeSM: number;
fontSize: number; fontSize: number;

4
components/_util/theme/themes/dark/index.ts
View File

@ -1,11 +1,11 @@
import { generate } from '@ant-design/colors'; import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor'; import { TinyColor } from '@ctrl/tinycolor';
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
import { defaultPresetColors } from '../seed'; import { defaultPresetColors } from '../seed';
import { getFontSizes } from '../shared'; import { getFontSizes } from '../shared';
import { generateBgPalettes, generateTextAlphaPalettes } from './palettes'; import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
export default function derivative(token: SeedToken): DerivativeToken { export default function derivative(token: SeedToken): MapToken {
const { const {
colorPrimary, colorPrimary,
colorSuccess, colorSuccess,

4
components/_util/theme/themes/default/index.ts
View File

@ -1,11 +1,11 @@
import { generate } from '@ant-design/colors'; import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor'; import { TinyColor } from '@ctrl/tinycolor';
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
import { defaultPresetColors } from '../seed'; import { defaultPresetColors } from '../seed';
import { getFontSizes } from '../shared'; import { getFontSizes } from '../shared';
import { generateBgPalettes, generateTextAlphaPalettes } from './palettes'; import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
export default function derivative(token: SeedToken): DerivativeToken { export default function derivative(token: SeedToken): MapToken {
const { const {
colorPrimary, colorPrimary,
colorSuccess, colorSuccess,

6
components/_util/theme/util/alias.ts
View File

@ -1,9 +1,9 @@
import { generate } from '@ant-design/colors'; import { generate } from '@ant-design/colors';
import { TinyColor } from '@ctrl/tinycolor'; import { TinyColor } from '@ctrl/tinycolor';
import type { AliasToken, DerivativeToken, OverrideToken } from '../interface'; import type { AliasToken, MapToken, OverrideToken } from '../interface';
/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */ /** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
type RawMergedToken = DerivativeToken & OverrideToken; type RawMergedToken = MapToken & OverrideToken;
/** /**
* Seed (designer) > Derivative (designer) > Alias (developer). * Seed (designer) > Derivative (designer) > Alias (developer).
@ -178,8 +178,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
screenXXLMin: screenXXL, screenXXLMin: screenXXL,
screenXXLMax: screenXXL - 1, screenXXLMax: screenXXL - 1,
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
// FIXME: component box-shadow, should be removed // FIXME: component box-shadow, should be removed
boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`, boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`, boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,

6
components/_util/theme/util/genComponentStyleHook.ts
View File

@ -5,12 +5,12 @@ import { useContext } from 'react';
import { ConfigContext } from '../../../config-provider/context'; import { ConfigContext } from '../../../config-provider/context';
import type { UseComponentStyleResult } from '../index'; import type { UseComponentStyleResult } from '../index';
import { mergeToken, statisticToken, useToken } from '../index'; import { mergeToken, statisticToken, useToken } from '../index';
import type { GlobalToken, OverrideToken } from '../interface'; import type { ComponentTokenMap, GlobalToken } from '../interface';
export type OverrideTokenWithoutDerivative = Omit<OverrideToken, 'derivative' | 'alias'>; export type OverrideTokenWithoutDerivative = ComponentTokenMap;
export type OverrideComponent = keyof OverrideTokenWithoutDerivative; export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken & export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
OverrideToken[ComponentName]; ComponentTokenMap[ComponentName];
export interface StyleInfo { export interface StyleInfo {
hashId: string; hashId: string;

7
components/config-provider/context.tsx
View File

@ -1,8 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import type { RequiredMark } from '../form/Form'; import type { RequiredMark } from '../form/Form';
import type { Locale } from '../locale-provider'; import type { Locale } from '../locale-provider';
import type { DerivativeToken, OverrideToken, SeedToken } from '../_util/theme/interface'; import type { MapToken, OverrideToken, SeedToken } from '../_util/theme/interface';
import type { DeepPartial } from '../_util/type';
import type { RenderEmptyHandler } from './defaultRenderEmpty'; import type { RenderEmptyHandler } from './defaultRenderEmpty';
import type { SizeType } from './SizeContext'; import type { SizeType } from './SizeContext';
@ -25,8 +24,8 @@ export type DirectionType = 'ltr' | 'rtl' | undefined;
export interface ThemeConfig { export interface ThemeConfig {
token?: Partial<SeedToken>; token?: Partial<SeedToken>;
override?: DeepPartial<OverrideToken>; override?: OverrideToken;
derivative?: (token: SeedToken) => DerivativeToken; derivative?: (token: SeedToken) => MapToken;
hashed?: boolean; hashed?: boolean;
} }