antd
Version:
An enterprise-class UI design language and React components implementation
163 lines (152 loc) • 6.99 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { TinyColor } from '@ctrl/tinycolor';
import getAlphaColor from './getAlphaColor';
import seedToken from '../themes/seed';
/**
* Seed (designer) > Derivative (designer) > Alias (developer).
*
* Merge seed & derivative & override token and generate alias token for developer.
*/
export default function formatToken(derivativeToken) {
var override = derivativeToken.override,
restToken = __rest(derivativeToken, ["override"]);
var overrideTokens = _extends({}, override);
Object.keys(seedToken).forEach(function (token) {
delete overrideTokens[token];
});
var mergedToken = _extends(_extends({}, restToken), overrideTokens);
var fontSizes = mergedToken.fontSizes,
lineHeights = mergedToken.lineHeights;
var screenXS = 480;
var screenSM = 576;
var screenMD = 768;
var screenLG = 992;
var screenXL = 1200;
var screenXXL = 1600;
var fontSizeSM = fontSizes[0]; // Generate alias token
var aliasToken = _extends(_extends(_extends({}, mergedToken), {
colorLink: mergedToken.colorInfoText,
colorLinkHover: mergedToken.colorInfoHover,
colorLinkActive: mergedToken.colorInfoActive,
// ============== Background ============== //
colorFillContent: mergedToken.colorFillSecondary,
colorFillContentHover: mergedToken.colorFill,
colorFillAlter: mergedToken.colorFillQuaternary,
colorBgContainerDisabled: mergedToken.colorFillTertiary,
// ============== Split ============== //
colorBorderBg: mergedToken.colorBgContainer,
colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
// ============== Text ============== //
colorTextPlaceholder: mergedToken.colorTextQuaternary,
colorTextDisabled: mergedToken.colorTextQuaternary,
colorTextHeading: mergedToken.colorText,
colorTextLabel: mergedToken.colorTextSecondary,
colorTextDescription: mergedToken.colorTextTertiary,
colorHighlight: mergedToken.colorError,
colorBgTextHover: mergedToken.colorFillSecondary,
colorBgTextActive: mergedToken.colorFill,
colorIcon: mergedToken.colorTextTertiary,
colorIconHover: mergedToken.colorText,
colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
// Font
fontSizeSM: fontSizeSM,
fontSize: fontSizes[1],
fontSizeLG: fontSizes[2],
fontSizeXL: fontSizes[3],
fontSizeHeading1: fontSizes[6],
fontSizeHeading2: fontSizes[5],
fontSizeHeading3: fontSizes[4],
fontSizeHeading4: fontSizes[3],
fontSizeHeading5: fontSizes[2],
fontSizeIcon: fontSizeSM,
lineHeight: lineHeights[1],
lineHeightLG: lineHeights[2],
lineHeightSM: lineHeights[0],
lineHeightHeading1: lineHeights[6],
lineHeightHeading2: lineHeights[5],
lineHeightHeading3: lineHeights[4],
lineHeightHeading4: lineHeights[3],
lineHeightHeading5: lineHeights[2],
// Control
controlLineWidth: mergedToken.lineWidth,
controlOutlineWidth: mergedToken.lineWidth * 2,
// Checkbox size and expand icon size
controlInteractiveSize: mergedToken.controlHeight / 2,
controlItemBgHover: mergedToken.colorFillTertiary,
controlItemBgActive: mergedToken.colorPrimaryBg,
controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
controlItemBgActiveDisabled: mergedToken.colorFill,
controlTmpOutline: mergedToken.colorFillQuaternary,
controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
controlLineType: mergedToken.lineType,
controlRadius: mergedToken.radiusBase,
controlRadiusXS: mergedToken.radiusXS,
controlRadiusSM: mergedToken.radiusSM,
controlRadiusLG: mergedToken.radiusLG,
fontWeightStrong: 600,
opacityLoading: 0.65,
linkDecoration: 'none',
linkHoverDecoration: 'none',
linkFocusDecoration: 'none',
controlPaddingHorizontal: 12,
controlPaddingHorizontalSM: 8,
padding: 16,
margin: 16,
paddingXXS: 4,
paddingXS: 8,
paddingSM: 12,
paddingLG: 24,
paddingXL: 32,
paddingTmp: 20,
marginXXS: 4,
marginXS: 8,
marginSM: 12,
marginLG: 24,
marginXL: 32,
marginXXL: 48,
marginTmp: 20,
boxShadow: "\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ",
boxShadowSecondary: "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
screenXS: screenXS,
screenXSMin: screenXS,
screenXSMax: screenXS - 1,
screenSM: screenSM,
screenSMMin: screenSM,
screenSMMax: screenSM - 1,
screenMD: screenMD,
screenMDMin: screenMD,
screenMDMax: screenMD - 1,
screenLG: screenLG,
screenLGMin: screenLG,
screenLGMax: screenLG - 1,
screenXL: screenXL,
screenXLMin: screenXL,
screenXLMax: screenXL - 1,
screenXXL: screenXXL,
screenXXLMin: screenXXL,
screenXXLMax: screenXXL - 1,
// FIXME: component box-shadow, should be removed
boxShadowPopoverArrow: "3px 3px 7px rgba(0, 0, 0, 0.1)",
boxShadowCard: "\n 0 1px 2px -2px ".concat(new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString(), ",\n 0 3px 6px 0 ").concat(new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString(), ",\n 0 5px 12px 4px ").concat(new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString(), "\n "),
boxShadowDrawerRight: "\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
boxShadowDrawerLeft: "\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
boxShadowDrawerUp: "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
boxShadowDrawerDown: "\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
boxShadowTabsOverflowLeft: "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",
boxShadowTabsOverflowRight: "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",
boxShadowTabsOverflowTop: "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",
boxShadowTabsOverflowBottom: "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)"
}), overrideTokens);
return aliasToken;
}