convertLegacyToken.js 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = convertLegacyToken;
  7. var _alias = _interopRequireDefault(require("./util/alias"));
  8. function convertLegacyToken(mapToken) {
  9. const token = (0, _alias.default)(mapToken);
  10. const raw = {
  11. theme: 'default',
  12. 'ant-prefix': 'ant',
  13. 'html-selector': 'html',
  14. // -------- Colors -----------
  15. // >>> Primary
  16. 'primary-color': token.colorPrimary,
  17. 'primary-color-hover': token.colorPrimaryHover,
  18. 'primary-color-active': token.colorPrimaryActive,
  19. 'primary-color-outline': 'fade(@primary-color, @outline-fade)',
  20. 'processing-color': token.colorPrimary,
  21. // >>> Info
  22. 'info-color': token.colorInfo,
  23. 'info-color-deprecated-bg': token.colorInfoBg,
  24. 'info-color-deprecated-border': token.colorInfoBorder,
  25. // >>> Success
  26. 'success-color': token.colorSuccess,
  27. 'success-color-hover': token.colorSuccessBgHover,
  28. 'success-color-active': token.colorSuccessActive,
  29. 'success-color-outline': 'fade(@success-color, @outline-fade)',
  30. 'success-color-deprecated-bg': token.colorSuccessBg,
  31. 'success-color-deprecated-border': token.colorSuccessBorder,
  32. // >>> Warning
  33. 'warning-color': token.colorWarning,
  34. 'warning-color-hover': token.colorWarningHover,
  35. 'warning-color-active': token.colorWarningActive,
  36. 'warning-color-outline': 'fade(@warning-color, @outline-fade)',
  37. 'warning-color-deprecated-bg': token.colorWarningBg,
  38. 'warning-color-deprecated-border': token.colorWarningBorder,
  39. // >>> Error
  40. 'error-color': token.colorError,
  41. 'error-color-hover': token.colorErrorHover,
  42. 'error-color-active': token.colorErrorActive,
  43. 'error-color-outline': 'fade(@error-color, @outline-fade)',
  44. 'error-color-deprecated-bg': token.colorErrorBg,
  45. 'error-color-deprecated-border': token.colorErrorBorder,
  46. 'highlight-color': token.colorHighlight,
  47. 'normal-color': '#d9d9d9',
  48. white: token.colorWhite,
  49. black: '#000',
  50. // Color used by default to control hover and active backgrounds and for
  51. // alert info backgrounds.
  52. 'primary-1': token.colorPrimaryBg,
  53. 'primary-2': token.colorPrimaryBgHover,
  54. 'primary-3': token.colorPrimaryBorder,
  55. 'primary-4': token.colorPrimaryBorderHover,
  56. 'primary-5': token.colorPrimaryHover,
  57. 'primary-6': token.colorPrimary,
  58. 'primary-7': token.colorPrimaryActive,
  59. 'primary-8': token.colorPrimaryTextHover,
  60. 'primary-9': token.colorPrimaryText,
  61. 'primary-10': token.colorPrimaryTextActive,
  62. // Base Scaffolding Variables
  63. // ---
  64. // Background color for `<body>`
  65. 'body-background': token.colorBgBase,
  66. // Base background color for most components
  67. 'component-background': token.colorBgContainer,
  68. // Popover background color
  69. 'popover-background': token.colorBgElevated,
  70. 'popover-customize-border-color': token.colorSplit,
  71. 'font-family': token.fontFamily,
  72. 'code-family': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
  73. 'text-color': token.colorText,
  74. 'text-color-secondary': token.colorTextSecondary,
  75. 'text-color-inverse': token.colorWhite,
  76. 'icon-color': token.colorIcon,
  77. 'icon-color-hover': token.colorIconHover,
  78. 'heading-color': token.colorTextHeading,
  79. 'text-color-dark': 'fade(@white, 85%)',
  80. 'text-color-secondary-dark': 'fade(@white, 65%)',
  81. 'text-selection-bg': token.colorPrimary,
  82. 'font-variant-base': 'tabular-nums',
  83. 'font-feature-settings-base': 'tnum',
  84. 'font-size-base': token.fontSize,
  85. 'font-size-lg': token.fontSizeLG,
  86. 'font-size-sm': token.fontSizeSM,
  87. 'heading-1-size': token.fontSizeHeading1,
  88. 'heading-2-size': token.fontSizeHeading2,
  89. 'heading-3-size': token.fontSizeHeading3,
  90. 'heading-4-size': token.fontSizeHeading4,
  91. 'heading-5-size': token.fontSizeHeading5,
  92. // https://github.com/ant-design/ant-design/issues/20210
  93. 'line-height-base': token.lineHeight,
  94. 'border-radius-base': token.borderRadius,
  95. 'border-radius-sm': token.borderRadiusSM,
  96. // control border
  97. 'control-border-radius': token.borderRadius,
  98. // arrow border
  99. 'arrow-border-radius': token.borderRadiusSM,
  100. // vertical paddings
  101. 'padding-lg': token.paddingLG,
  102. 'padding-md': token.padding,
  103. 'padding-sm': token.paddingSM,
  104. 'padding-xs': token.paddingXS,
  105. 'padding-xss': token.paddingXXS,
  106. // vertical padding for all form controls
  107. 'control-padding-horizontal': token.paddingSM,
  108. 'control-padding-horizontal-sm': token.paddingXS,
  109. // vertical margins
  110. 'margin-lg': token.marginLG,
  111. 'margin-md': token.margin,
  112. 'margin-sm': token.marginSM,
  113. 'margin-xs': token.marginXS,
  114. 'margin-xss': token.marginXXS,
  115. // height rules
  116. 'height-base': token.controlHeight,
  117. 'height-lg': token.controlHeightLG,
  118. 'height-sm': token.controlHeightSM,
  119. // The background colors for active and hover states for things like
  120. // list items or table cells.
  121. 'item-active-bg': token.controlItemBgActive,
  122. 'item-hover-bg': token.controlItemBgHover,
  123. // ICONFONT
  124. 'iconfont-css-prefix': 'anticon',
  125. // LINK
  126. 'link-color': token.colorLink,
  127. 'link-hover-color': token.colorLinkHover,
  128. 'link-active-color': token.colorLinkActive,
  129. 'link-decoration': 'none',
  130. 'link-hover-decoration': 'none',
  131. 'link-focus-decoration': 'none',
  132. 'link-focus-outline': 0,
  133. // Animation
  134. 'ease-base-out': token.motionEaseOut,
  135. 'ease-base-in': 'cubic-bezier(0.9, 0, 0.3, 0.7)',
  136. 'ease-out': token.motionEaseOut,
  137. 'ease-in': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
  138. 'ease-in-out': token.motionEaseInOut,
  139. 'ease-out-back': token.motionEaseOutBack,
  140. 'ease-in-back': 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
  141. 'ease-in-out-back': 'cubic-bezier(0.71, -0.46, 0.29, 1.46)',
  142. 'ease-out-circ': token.motionEaseOutCirc,
  143. 'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',
  144. 'ease-in-out-circ': token.motionEaseInOutCirc,
  145. 'ease-out-quint': token.motionEaseOutQuint,
  146. 'ease-in-quint': token.motionEaseInQuint,
  147. 'ease-in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
  148. // Border color
  149. 'border-color-base': token.colorBorder,
  150. 'border-color-split': token.colorSplit,
  151. 'border-color-inverse': token.colorWhite,
  152. 'border-width-base': token.lineWidth,
  153. 'border-style-base': 'solid',
  154. // Outline
  155. 'outline-blur-size': 0,
  156. 'outline-width': token.controlOutlineWidth,
  157. 'outline-color': token.controlOutline,
  158. 'outline-fade': '20%',
  159. 'background-color-light': 'hsv(0, 0, 98%)',
  160. 'background-color-base': 'hsv(0, 0, 96%)',
  161. // Disabled states
  162. 'disabled-color': token.colorTextDisabled,
  163. 'disabled-bg': token.colorBgContainerDisabled,
  164. 'disabled-active-bg': token.colorBgContainerDisabled,
  165. 'disabled-color-dark': 'fade(#fff, 35%)',
  166. // Shadow
  167. 'shadow-color': 'rgba(0, 0, 0, 0.15)',
  168. 'shadow-color-inverse': token.colorBgContainer,
  169. 'box-shadow-base': token.boxShadow,
  170. 'shadow-1-up': token.boxShadowDrawerUp,
  171. 'shadow-1-down': token.boxShadowDrawerDown,
  172. 'shadow-1-left': token.boxShadowDrawerLeft,
  173. 'shadow-1-right': token.boxShadowDrawerRight,
  174. 'shadow-2': token.boxShadowSecondary,
  175. // ==========================================================================
  176. // == Components ==
  177. // ==========================================================================
  178. // Buttons
  179. 'btn-font-weight': '400',
  180. 'btn-border-radius-base': '@border-radius-base',
  181. 'btn-border-radius-sm': '@border-radius-base',
  182. 'btn-border-width': '@border-width-base',
  183. 'btn-border-style': '@border-style-base',
  184. 'btn-shadow': '0 2px 0 rgba(0, 0, 0, 0.015)',
  185. 'btn-primary-shadow': '0 2px 0 rgba(0, 0, 0, 0.045)',
  186. 'btn-text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.12)',
  187. 'btn-primary-color': '#fff',
  188. 'btn-primary-bg': '@primary-color',
  189. 'btn-default-color': '@text-color',
  190. 'btn-default-bg': '@component-background',
  191. 'btn-default-border': '@border-color-base',
  192. 'btn-danger-color': '#fff',
  193. 'btn-danger-bg': '@error-color',
  194. 'btn-danger-border': '@error-color',
  195. 'btn-disable-color': '@disabled-color',
  196. 'btn-disable-bg': '@disabled-bg',
  197. 'btn-disable-border': '@border-color-base',
  198. 'btn-default-ghost-color': '@component-background',
  199. 'btn-default-ghost-bg': 'transparent',
  200. 'btn-default-ghost-border': '@component-background',
  201. 'btn-font-size-lg': '@font-size-lg',
  202. 'btn-font-size-sm': '@font-size-base',
  203. 'btn-padding-horizontal-base': '@padding-md - 1px',
  204. 'btn-padding-horizontal-lg': '@btn-padding-horizontal-base',
  205. 'btn-padding-horizontal-sm': '@padding-xs - 1px',
  206. 'btn-height-base': '@height-base',
  207. 'btn-height-lg': '@height-lg',
  208. 'btn-height-sm': '@height-sm',
  209. 'btn-line-height': '@line-height-base',
  210. 'btn-circle-size': '@btn-height-base',
  211. 'btn-circle-size-lg': '@btn-height-lg',
  212. 'btn-circle-size-sm': '@btn-height-sm',
  213. 'btn-square-size': '@btn-height-base',
  214. 'btn-square-size-lg': '@btn-height-lg',
  215. 'btn-square-size-sm': '@btn-height-sm',
  216. 'btn-square-only-icon-size': '@font-size-base + 2px',
  217. 'btn-square-only-icon-size-sm': '@font-size-base',
  218. 'btn-square-only-icon-size-lg': '@btn-font-size-lg + 2px',
  219. 'btn-group-border': '@primary-5',
  220. 'btn-link-hover-bg': 'transparent',
  221. 'btn-text-hover-bg': 'rgba(0, 0, 0, 0.018)',
  222. // Checkbox
  223. 'checkbox-size': '16px',
  224. 'checkbox-color': '@primary-color',
  225. 'checkbox-check-color': '#fff',
  226. 'checkbox-check-bg': '@checkbox-check-color',
  227. 'checkbox-border-width': '@border-width-base',
  228. 'checkbox-border-radius': '@border-radius-base',
  229. 'checkbox-group-item-margin-right': '8px',
  230. // Descriptions
  231. 'descriptions-bg': '#fafafa',
  232. 'descriptions-title-margin-bottom': '20px',
  233. 'descriptions-default-padding': '@padding-md @padding-lg',
  234. 'descriptions-middle-padding': '@padding-sm @padding-lg',
  235. 'descriptions-small-padding': '@padding-xs @padding-md',
  236. 'descriptions-item-padding-bottom': '@padding-md',
  237. 'descriptions-item-trailing-colon': 'true',
  238. 'descriptions-item-label-colon-margin-right': '8px',
  239. 'descriptions-item-label-colon-margin-left': '2px',
  240. 'descriptions-extra-color': '@text-color',
  241. // Divider
  242. 'divider-text-padding': '1em',
  243. 'divider-orientation-margin': '5%',
  244. 'divider-color': 'rgba(0, 0, 0, 6%)',
  245. 'divider-vertical-gutter': '8px',
  246. // Dropdown
  247. 'dropdown-selected-color': '@primary-color',
  248. 'dropdown-menu-submenu-disabled-bg': '@component-background',
  249. 'dropdown-selected-bg': '@item-active-bg',
  250. // Empty
  251. 'empty-font-size': '@font-size-base',
  252. // Radio
  253. 'radio-size': '16px',
  254. 'radio-top': '0.2em',
  255. 'radio-border-width': '1px',
  256. 'radio-dot-size': '@radio-size - 8px',
  257. 'radio-dot-color': '@primary-color',
  258. 'radio-dot-disabled-color': 'fade(@black, 20%)',
  259. 'radio-solid-checked-color': '@component-background',
  260. // Radio buttons
  261. 'radio-button-bg': '@btn-default-bg',
  262. 'radio-button-checked-bg': '@btn-default-bg',
  263. 'radio-button-color': '@btn-default-color',
  264. 'radio-button-hover-color': '@primary-5',
  265. 'radio-button-active-color': '@primary-7',
  266. 'radio-button-padding-horizontal': '@padding-md - 1px',
  267. 'radio-disabled-button-checked-bg': '@disabled-active-bg',
  268. 'radio-disabled-button-checked-color': '@disabled-color',
  269. 'radio-wrapper-margin-right': '8px',
  270. // Media queries breakpoints
  271. // @screen-xs and @screen-xs-min is not used in Grid
  272. // smallest break point is @screen-md
  273. 'screen-xs': '480px',
  274. 'screen-xs-min': '@screen-xs',
  275. // 👆 Extra small screen / phone
  276. // 👇 Small screen / tablet
  277. 'screen-sm': '576px',
  278. 'screen-sm-min': '@screen-sm',
  279. // Medium screen / desktop
  280. 'screen-md': '768px',
  281. 'screen-md-min': '@screen-md',
  282. // Large screen / wide desktop
  283. 'screen-lg': '992px',
  284. 'screen-lg-min': '@screen-lg',
  285. // Extra large screen / full hd
  286. 'screen-xl': '1200px',
  287. 'screen-xl-min': '@screen-xl',
  288. // Extra extra large screen / large desktop
  289. 'screen-xxl': '1600px',
  290. 'screen-xxl-min': '@screen-xxl',
  291. // provide a maximum
  292. 'screen-xs-max': '(@screen-sm-min - 1px)',
  293. 'screen-sm-max': '(@screen-md-min - 1px)',
  294. 'screen-md-max': '(@screen-lg-min - 1px)',
  295. 'screen-lg-max': '(@screen-xl-min - 1px)',
  296. 'screen-xl-max': '(@screen-xxl-min - 1px)',
  297. // Grid system
  298. 'grid-columns': '24',
  299. // Layout
  300. 'layout-body-background': '#f0f2f5',
  301. 'layout-header-background': '#001529',
  302. 'layout-header-height': '64px',
  303. 'layout-header-padding': '0 50px',
  304. 'layout-header-color': '@text-color',
  305. 'layout-footer-padding': '24px 50px',
  306. 'layout-footer-background': '@layout-body-background',
  307. 'layout-sider-background': '@layout-header-background',
  308. 'layout-trigger-height': '48px',
  309. 'layout-trigger-background': '#002140',
  310. 'layout-trigger-color': '#fff',
  311. 'layout-zero-trigger-width': '36px',
  312. 'layout-zero-trigger-height': '42px',
  313. // Layout light theme
  314. 'layout-sider-background-light': '#fff',
  315. 'layout-trigger-background-light': '#fff',
  316. 'layout-trigger-color-light': '@text-color',
  317. // z-index list, order by `z-index`
  318. 'zindex-badge': 'auto',
  319. 'zindex-table-fixed': '2',
  320. 'zindex-affix': '10',
  321. 'zindex-back-top': '10',
  322. 'zindex-picker-panel': '10',
  323. 'zindex-popup-close': '10',
  324. 'zindex-modal': '1000',
  325. 'zindex-modal-mask': '1000',
  326. 'zindex-message': '1010',
  327. 'zindex-notification': '1010',
  328. 'zindex-popover': '1030',
  329. 'zindex-dropdown': '1050',
  330. 'zindex-picker': '1050',
  331. 'zindex-popoconfirm': '1060',
  332. 'zindex-tooltip': '1070',
  333. 'zindex-image': '1080',
  334. // Animation
  335. 'animation-duration-slow': '0.3s',
  336. 'animation-duration-base': '0.2s',
  337. 'animation-duration-fast': '0.1s',
  338. //CollapsePanel
  339. 'collapse-panel-border-radius': '@border-radius-base',
  340. //Dropdown
  341. 'dropdown-menu-bg': '@component-background',
  342. 'dropdown-vertical-padding': '5px',
  343. 'dropdown-edge-child-vertical-padding': '4px',
  344. 'dropdown-font-size': '@font-size-base',
  345. 'dropdown-line-height': '22px',
  346. // Form
  347. // ---
  348. 'label-required-color': '@highlight-color',
  349. 'label-color': '@heading-color',
  350. 'form-warning-input-bg': '@input-bg',
  351. 'form-item-margin-bottom': '24px',
  352. 'form-item-trailing-colon': 'true',
  353. 'form-vertical-label-padding': '0 0 8px',
  354. 'form-vertical-label-margin': '0',
  355. 'form-item-label-font-size': '@font-size-base',
  356. 'form-item-label-height': '@input-height-base',
  357. 'form-item-label-colon-margin-right': '8px',
  358. 'form-item-label-colon-margin-left': '2px',
  359. 'form-error-input-bg': '@input-bg',
  360. // Input
  361. // ---
  362. 'input-height-base': '@height-base',
  363. 'input-height-lg': '@height-lg',
  364. 'input-height-sm': '@height-sm',
  365. 'input-padding-horizontal': '@control-padding-horizontal - 1px',
  366. 'input-padding-horizontal-base': '@input-padding-horizontal',
  367. 'input-padding-horizontal-sm': '@control-padding-horizontal-sm - 1px',
  368. 'input-padding-horizontal-lg': '@input-padding-horizontal',
  369. 'input-padding-vertical-base': `max(
  370. (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
  371. @border-width-base,
  372. 3px
  373. )`,
  374. 'input-padding-vertical-sm': `max(
  375. (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
  376. @border-width-base,
  377. 0
  378. )`,
  379. 'input-padding-vertical-lg': `(
  380. ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
  381. ) - @border-width-base`,
  382. 'input-placeholder-color': 'hsv(0, 0, 75%)',
  383. 'input-color': '@text-color',
  384. 'input-icon-color': '@input-color',
  385. 'input-border-color': '@border-color-base',
  386. 'input-bg': '@component-background',
  387. 'input-number-hover-border-color': '@input-hover-border-color',
  388. 'input-number-handler-active-bg': '#f4f4f4',
  389. 'input-number-handler-hover-bg': '@primary-5',
  390. 'input-number-handler-bg': '@component-background',
  391. 'input-number-handler-border-color': '@border-color-base',
  392. 'input-addon-bg': '@background-color-light',
  393. 'input-hover-border-color': '@primary-5',
  394. 'input-disabled-bg': '@disabled-bg',
  395. 'input-outline-offset': '0 0',
  396. 'input-icon-hover-color': 'fade(@black, 85%)',
  397. 'input-disabled-color': '@disabled-color',
  398. // Mentions
  399. // ---
  400. 'mentions-dropdown-bg': '@component-background',
  401. 'mentions-dropdown-menu-item-hover-bg': '@mentions-dropdown-bg',
  402. // Select
  403. // ---
  404. 'select-border-color': '@border-color-base',
  405. 'select-item-selected-color': '@text-color',
  406. 'select-item-selected-font-weight': '600',
  407. 'select-dropdown-bg': '@component-background',
  408. 'select-item-selected-bg': '@primary-1',
  409. 'select-item-active-bg': '@item-hover-bg',
  410. 'select-dropdown-vertical-padding': '@dropdown-vertical-padding',
  411. 'select-dropdown-font-size': '@dropdown-font-size',
  412. 'select-dropdown-line-height': '@dropdown-line-height',
  413. 'select-dropdown-height': '32px',
  414. 'select-background': '@component-background',
  415. 'select-clear-background': '@select-background',
  416. 'select-selection-item-bg': '@background-color-base',
  417. 'select-selection-item-border-color': '@border-color-split',
  418. 'select-single-item-height-lg': '40px',
  419. 'select-multiple-item-height': '@input-height-base - @input-padding-vertical-base * 2',
  420. 'select-multiple-item-height-lg': '32px',
  421. 'select-multiple-item-spacing-half': 'ceil((@input-padding-vertical-base / 2))',
  422. 'select-multiple-disabled-background': '@input-disabled-bg',
  423. 'select-multiple-item-disabled-color': '#bfbfbf',
  424. 'select-multiple-item-disabled-border-color': '@select-border-color',
  425. // Cascader
  426. // ---
  427. 'cascader-bg': '@component-background',
  428. 'cascader-item-selected-bg': '@primary-1',
  429. 'cascader-menu-bg': '@component-background',
  430. 'cascader-menu-border-color-split': '@border-color-split',
  431. // Cascader
  432. // ----
  433. 'cascader-dropdown-vertical-padding': '@dropdown-vertical-padding',
  434. 'cascader-dropdown-edge-child-vertical-padding': '@dropdown-edge-child-vertical-padding',
  435. 'cascader-dropdown-font-size': '@dropdown-font-size',
  436. 'cascader-dropdown-line-height': '@dropdown-line-height',
  437. // Anchor
  438. // ---
  439. 'anchor-bg': 'transparent',
  440. 'anchor-border-color': '@border-color-split',
  441. 'anchor-link-top': '4px',
  442. 'anchor-link-left': '16px',
  443. 'anchor-link-padding': '@anchor-link-top 0 @anchor-link-top @anchor-link-left',
  444. // Tooltip
  445. // ---
  446. // Tooltip max width
  447. 'tooltip-max-width': '250px',
  448. // Tooltip text color
  449. 'tooltip-color': '#fff',
  450. // Tooltip background color
  451. 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
  452. // Tooltip arrow width
  453. 'tooltip-arrow-width': '8px * sqrt(2)',
  454. // Tooltip distance with trigger
  455. 'tooltip-distance': '@tooltip-arrow-width - 1px + 4px',
  456. // Tooltip arrow color
  457. 'tooltip-arrow-color': '@tooltip-bg',
  458. 'tooltip-border-radius': '@border-radius-base',
  459. // Popover
  460. // ---
  461. // Popover body background color
  462. 'popover-bg': '@component-background',
  463. // Popover text color
  464. 'popover-color': '@text-color',
  465. // Popover maximum width
  466. 'popover-min-width': '177px',
  467. 'popover-min-height': '32px',
  468. // Popover arrow width
  469. 'popover-arrow-width': '@tooltip-arrow-width',
  470. // Popover arrow color
  471. 'popover-arrow-color': '@popover-bg',
  472. // Popover outer arrow width
  473. // Popover outer arrow color
  474. 'popover-arrow-outer-color': '@popover-bg',
  475. // Popover distance with trigger
  476. 'popover-distance': '@popover-arrow-width + 4px',
  477. 'popover-padding-horizontal': '@padding-md',
  478. // Modal
  479. // --
  480. 'modal-header-padding-vertical': '@padding-md',
  481. 'modal-header-padding-horizontal': '@padding-lg',
  482. 'modal-body-padding': '@padding-lg',
  483. 'modal-header-bg': '@component-background',
  484. 'modal-header-padding': '@modal-header-padding-vertical @modal-header-padding-horizontal',
  485. 'modal-header-border-width': '@border-width-base',
  486. 'modal-header-border-style': '@border-style-base',
  487. 'modal-header-title-line-height': '22px',
  488. 'modal-header-title-font-size': '@font-size-lg',
  489. 'modal-header-border-color-split': '@border-color-split',
  490. 'modal-header-close-size': '@modal-header-title-line-height + 2 * @modal-header-padding-vertical',
  491. 'modal-content-bg': '@component-background',
  492. 'modal-heading-color': '@heading-color',
  493. 'modal-close-color': '@text-color-secondary',
  494. 'modal-footer-bg': 'transparent',
  495. 'modal-footer-border-color-split': '@border-color-split',
  496. 'modal-footer-border-style': '@border-style-base',
  497. 'modal-footer-padding-vertical': '10px',
  498. 'modal-footer-padding-horizontal': '16px',
  499. 'modal-footer-border-width': '@border-width-base',
  500. 'modal-mask-bg': 'fade(@black, 45%)',
  501. 'modal-confirm-body-padding': '32px 32px 24px',
  502. 'modal-confirm-title-font-size': '@font-size-lg',
  503. 'modal-border-radius': '@border-radius-base',
  504. // Progress
  505. // --
  506. 'progress-default-color': '@processing-color',
  507. 'progress-remaining-color': '@background-color-base',
  508. 'progress-info-text-color': '@progress-text-color',
  509. 'progress-radius': '100px',
  510. 'progress-steps-item-bg': '#f3f3f3',
  511. 'progress-text-font-size': '1em',
  512. 'progress-text-color': '@text-color',
  513. 'progress-circle-text-font-size': '1em',
  514. // Menu
  515. // ---
  516. 'menu-inline-toplevel-item-height': '40px',
  517. 'menu-item-height': '40px',
  518. 'menu-item-group-height': '@line-height-base',
  519. 'menu-collapsed-width': '80px',
  520. 'menu-bg': '@component-background',
  521. 'menu-popup-bg': '@component-background',
  522. 'menu-item-color': '@text-color',
  523. 'menu-inline-submenu-bg': '@background-color-light',
  524. 'menu-highlight-color': '@primary-color',
  525. 'menu-highlight-danger-color': '@error-color',
  526. 'menu-item-active-bg': '@primary-1',
  527. 'menu-item-active-danger-bg': '@red-1',
  528. 'menu-item-active-border-width': '3px',
  529. 'menu-item-group-title-color': '@text-color-secondary',
  530. 'menu-item-vertical-margin': '4px',
  531. 'menu-item-font-size': '@font-size-base',
  532. 'menu-item-boundary-margin': '8px',
  533. 'menu-item-padding-horizontal': '20px',
  534. 'menu-item-padding': '0 @menu-item-padding-horizontal',
  535. 'menu-horizontal-line-height': '46px',
  536. 'menu-icon-margin-right': '10px',
  537. 'menu-icon-size': '@menu-item-font-size',
  538. 'menu-icon-size-lg': '@font-size-lg',
  539. 'menu-item-group-title-font-size': '@menu-item-font-size',
  540. // dark theme
  541. 'menu-dark-color': '@text-color-secondary-dark',
  542. 'menu-dark-danger-color': '@error-color',
  543. 'menu-dark-bg': '@layout-header-background',
  544. 'menu-dark-arrow-color': '#fff',
  545. 'menu-dark-inline-submenu-bg': '#000c17',
  546. 'menu-dark-highlight-color': '#fff',
  547. 'menu-dark-item-active-bg': '@primary-color',
  548. 'menu-dark-item-active-danger-bg': '@error-color',
  549. 'menu-dark-selected-item-icon-color': '@white',
  550. 'menu-dark-selected-item-text-color': '@white',
  551. 'menu-dark-item-hover-bg': 'transparent',
  552. // Spin
  553. // ---
  554. 'spin-dot-size-sm': '14px',
  555. 'spin-dot-size': '20px',
  556. 'spin-dot-size-lg': '32px',
  557. // Table
  558. // --
  559. 'table-bg': '@component-background',
  560. 'table-header-bg': '@background-color-light',
  561. 'table-header-color': '@heading-color',
  562. 'table-header-sort-bg': '@background-color-base',
  563. 'table-body-sort-bg': '#fafafa',
  564. 'table-row-hover-bg': '@background-color-light',
  565. 'table-selected-row-color': 'inherit',
  566. 'table-selected-row-bg': '@primary-1',
  567. 'table-body-selected-sort-bg': '@table-selected-row-bg',
  568. 'table-selected-row-hover-bg': 'darken(@table-selected-row-bg, 2%)',
  569. 'table-expanded-row-bg': '#fbfbfb',
  570. 'table-padding-vertical': '16px',
  571. 'table-padding-horizontal': '16px',
  572. 'table-padding-vertical-md': '(@table-padding-vertical * 3 / 4)',
  573. 'table-padding-horizontal-md': '(@table-padding-horizontal / 2)',
  574. 'table-padding-vertical-sm': '(@table-padding-vertical / 2)',
  575. 'table-padding-horizontal-sm': '(@table-padding-horizontal / 2)',
  576. 'table-border-color': '@border-color-split',
  577. 'table-border-radius-base': '@border-radius-base',
  578. 'table-footer-bg': '@background-color-light',
  579. 'table-footer-color': '@heading-color',
  580. 'table-header-bg-sm': '@table-header-bg',
  581. 'table-font-size': '@font-size-base',
  582. 'table-font-size-md': '@table-font-size',
  583. 'table-font-size-sm': '@table-font-size',
  584. 'table-header-cell-split-color': 'rgba(0, 0, 0, 0.06)',
  585. // Sorter
  586. // Legacy: `table-header-sort-active-bg` is used for hover not real active
  587. 'table-header-sort-active-bg': 'rgba(0, 0, 0, 0.04)',
  588. 'table-fixed-header-sort-active-bg': 'hsv(0, 0, 96%)',
  589. // Filter
  590. 'table-header-filter-active-bg': 'rgba(0, 0, 0, 0.04)',
  591. 'table-filter-btns-bg': 'inherit',
  592. 'table-filter-dropdown-bg': '@component-background',
  593. 'table-expand-icon-bg': '@component-background',
  594. 'table-selection-column-width': '32px',
  595. // Sticky
  596. 'table-sticky-scroll-bar-bg': 'fade(#000, 35%)',
  597. 'table-sticky-scroll-bar-radius': '4px',
  598. // Tag
  599. // --
  600. 'tag-border-radius': '@border-radius-base',
  601. 'tag-default-bg': '@background-color-light',
  602. 'tag-default-color': '@text-color',
  603. 'tag-font-size': '@font-size-sm',
  604. 'tag-line-height': '20px',
  605. // TimePicker
  606. // ---
  607. 'picker-bg': '@component-background',
  608. 'picker-basic-cell-hover-color': '@item-hover-bg',
  609. 'picker-basic-cell-active-with-range-color': '@primary-1',
  610. 'picker-basic-cell-hover-with-range-color': 'lighten(@primary-color, 35%)',
  611. 'picker-basic-cell-disabled-bg': 'rgba(0, 0, 0, 0.04)',
  612. 'picker-border-color': '@border-color-split',
  613. 'picker-date-hover-range-border-color': 'lighten(@primary-color, 20%)',
  614. 'picker-date-hover-range-color': '@picker-basic-cell-hover-with-range-color',
  615. 'picker-time-panel-column-width': '56px',
  616. 'picker-time-panel-column-height': '224px',
  617. 'picker-time-panel-cell-height': '28px',
  618. 'picker-panel-cell-height': '24px',
  619. 'picker-panel-cell-width': '36px',
  620. 'picker-text-height': '40px',
  621. 'picker-panel-without-time-cell-height': '66px',
  622. // Calendar
  623. // ---
  624. 'calendar-bg': '@component-background',
  625. 'calendar-input-bg': '@input-bg',
  626. 'calendar-border-color': '@border-color-inverse',
  627. 'calendar-item-active-bg': '@item-active-bg',
  628. 'calendar-column-active-bg': 'fade(@calendar-item-active-bg, 20%)',
  629. 'calendar-full-bg': '@calendar-bg',
  630. 'calendar-full-panel-bg': '@calendar-full-bg',
  631. // Carousel
  632. // ---
  633. 'carousel-dot-width': '16px',
  634. 'carousel-dot-height': '3px',
  635. 'carousel-dot-active-width': '24px',
  636. // Badge
  637. // ---
  638. 'badge-height': '20px',
  639. 'badge-height-sm': '14px',
  640. 'badge-dot-size': '6px',
  641. 'badge-font-size': '@font-size-sm',
  642. 'badge-font-size-sm': '@font-size-sm',
  643. 'badge-font-weight': 'normal',
  644. 'badge-status-size': '6px',
  645. 'badge-text-color': '@component-background',
  646. 'badge-color': '@highlight-color',
  647. // Rate
  648. // ---
  649. 'rate-star-color': '@yellow-6',
  650. 'rate-star-bg': '@border-color-split',
  651. 'rate-star-size': '20px',
  652. 'rate-star-hover-scale': 'scale(1.1)',
  653. // Card
  654. // ---
  655. 'card-head-color': '@heading-color',
  656. 'card-head-background': 'transparent',
  657. 'card-head-font-size': '@font-size-lg',
  658. 'card-head-font-size-sm': '@font-size-base',
  659. 'card-head-padding': '16px',
  660. 'card-head-padding-sm': '(@card-head-padding / 2)',
  661. 'card-head-height': '48px',
  662. 'card-head-height-sm': '36px',
  663. 'card-inner-head-padding': '12px',
  664. 'card-padding-base': '24px',
  665. 'card-padding-base-sm': '(@card-padding-base / 2)',
  666. 'card-actions-background': '@component-background',
  667. 'card-actions-li-margin': '12px 0',
  668. 'card-skeleton-bg': '#cfd8dc',
  669. 'card-background': '@component-background',
  670. 'card-shadow': `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
  671. 0 5px 12px 4px rgba(0, 0, 0, 0.09)`,
  672. 'card-radius': '@border-radius-base',
  673. 'card-head-tabs-margin-bottom': '-17px',
  674. 'card-head-extra-color': '@text-color',
  675. // Comment
  676. // ---
  677. 'comment-bg': 'inherit',
  678. 'comment-padding-base': '@padding-md 0',
  679. 'comment-nest-indent': '44px',
  680. 'comment-font-size-base': '@font-size-base',
  681. 'comment-font-size-sm': '@font-size-sm',
  682. 'comment-author-name-color': '@text-color-secondary',
  683. 'comment-author-time-color': '#ccc',
  684. 'comment-action-color': '@text-color-secondary',
  685. 'comment-action-hover-color': '#595959',
  686. 'comment-actions-margin-bottom': 'inherit',
  687. 'comment-actions-margin-top': '@margin-sm',
  688. 'comment-content-detail-p-margin-bottom': 'inherit',
  689. // Tabs
  690. // ---
  691. 'tabs-card-head-background': '@background-color-light',
  692. 'tabs-card-height': '40px',
  693. 'tabs-card-active-color': '@primary-color',
  694. 'tabs-card-horizontal-padding': `(
  695. (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2
  696. ) - @border-width-base @padding-md`,
  697. 'tabs-card-horizontal-padding-sm': '6px @padding-md',
  698. 'tabs-card-horizontal-padding-lg': '7px @padding-md 6px',
  699. 'tabs-title-font-size': '@font-size-base',
  700. 'tabs-title-font-size-lg': '@font-size-lg',
  701. 'tabs-title-font-size-sm': '@font-size-base',
  702. 'tabs-ink-bar-color': '@primary-color',
  703. 'tabs-bar-margin': '0 0 @margin-md 0',
  704. 'tabs-horizontal-gutter': '32px',
  705. 'tabs-horizontal-margin': '0 0 0 @tabs-horizontal-gutter',
  706. 'tabs-horizontal-margin-rtl': '0 0 0 32px',
  707. 'tabs-horizontal-padding': '@padding-sm 0',
  708. 'tabs-horizontal-padding-lg': '@padding-md 0',
  709. 'tabs-horizontal-padding-sm': '@padding-xs 0',
  710. 'tabs-vertical-padding': '@padding-xs @padding-lg',
  711. 'tabs-vertical-margin': '@margin-md 0 0 0',
  712. 'tabs-scrolling-size': '32px',
  713. 'tabs-highlight-color': '@primary-color',
  714. 'tabs-hover-color': '@primary-5',
  715. 'tabs-active-color': '@primary-7',
  716. 'tabs-card-gutter': '2px',
  717. 'tabs-card-tab-active-border-top': '2px solid transparent',
  718. // BackTop
  719. // ---
  720. 'back-top-color': '#fff',
  721. 'back-top-bg': '@text-color-secondary',
  722. 'back-top-hover-bg': '@text-color',
  723. // Avatar
  724. // ---
  725. 'avatar-size-base': '32px',
  726. 'avatar-size-lg': '40px',
  727. 'avatar-size-sm': '24px',
  728. 'avatar-font-size-base': '18px',
  729. 'avatar-font-size-lg': '24px',
  730. 'avatar-font-size-sm': '14px',
  731. 'avatar-bg': '#ccc',
  732. 'avatar-color': '#fff',
  733. 'avatar-border-radius': '@border-radius-base',
  734. 'avatar-group-overlapping': '-8px',
  735. 'avatar-group-space': '3px',
  736. 'avatar-group-border-color': '#fff',
  737. // Switch
  738. // ---
  739. 'switch-height': '22px',
  740. 'switch-sm-height': '16px',
  741. 'switch-min-width': '44px',
  742. 'switch-sm-min-width': '28px',
  743. 'switch-disabled-opacity': '0.4',
  744. 'switch-color': '@primary-color',
  745. 'switch-bg': '@component-background',
  746. 'switch-shadow-color': 'fade(#00230b, 20%)',
  747. 'switch-padding': '2px',
  748. 'switch-inner-margin-min': 'ceil(@switch-height * 0.3)',
  749. 'switch-inner-margin-max': 'ceil(@switch-height * 1.1)',
  750. 'switch-sm-inner-margin-min': 'ceil(@switch-sm-height * 0.3)',
  751. 'switch-sm-inner-margin-max': 'ceil(@switch-sm-height * 1.1)',
  752. // Pagination
  753. // ---
  754. 'pagination-item-bg': '@component-background',
  755. 'pagination-item-size': '@height-base',
  756. 'pagination-item-size-sm': '24px',
  757. 'pagination-font-family': '@font-family',
  758. 'pagination-font-weight-active': '500',
  759. 'pagination-item-bg-active': '@component-background',
  760. 'pagination-item-link-bg': '@component-background',
  761. 'pagination-item-disabled-color-active': '@disabled-color',
  762. 'pagination-item-disabled-bg-active': '@disabled-active-bg',
  763. 'pagination-item-input-bg': '@component-background',
  764. 'pagination-mini-options-size-changer-top': '0px',
  765. // PageHeader
  766. // ---
  767. 'page-header-padding': '@padding-lg',
  768. 'page-header-padding-vertical': '@padding-md',
  769. 'page-header-padding-breadcrumb': '@padding-sm',
  770. 'page-header-content-padding-vertical': '@padding-sm',
  771. 'page-header-back-color': '#000',
  772. 'page-header-ghost-bg': 'inherit',
  773. 'page-header-heading-title': '@heading-4-size',
  774. 'page-header-heading-sub-title': '14px',
  775. 'page-header-tabs-tab-font-size': '16px',
  776. // Breadcrumb
  777. // ---
  778. 'breadcrumb-base-color': '@text-color-secondary',
  779. 'breadcrumb-last-item-color': '@text-color',
  780. 'breadcrumb-font-size': '@font-size-base',
  781. 'breadcrumb-icon-font-size': '@font-size-base',
  782. 'breadcrumb-link-color': '@text-color-secondary',
  783. 'breadcrumb-link-color-hover': '@text-color',
  784. 'breadcrumb-separator-color': '@text-color-secondary',
  785. 'breadcrumb-separator-margin': '0 @padding-xs',
  786. // Slider
  787. // ---
  788. 'slider-margin': '10px 6px 10px',
  789. 'slider-rail-background-color': '@background-color-base',
  790. 'slider-rail-background-color-hover': '#e1e1e1',
  791. 'slider-track-background-color': '@primary-3',
  792. 'slider-track-background-color-hover': '@primary-4',
  793. 'slider-handle-border-width': '2px',
  794. 'slider-handle-background-color': '@component-background',
  795. 'slider-handle-color': '@primary-3',
  796. 'slider-handle-color-hover': '@primary-4',
  797. 'slider-handle-color-focus': 'tint(@primary-color, 20%)',
  798. 'slider-handle-color-focus-shadow': 'fade(@primary-color, 12%)',
  799. 'slider-handle-color-tooltip-open': '@primary-color',
  800. 'slider-handle-size': '14px',
  801. 'slider-handle-margin-top': '-5px',
  802. 'slider-handle-margin-left': '-5px',
  803. 'slider-handle-shadow': '0',
  804. 'slider-dot-border-color': '@border-color-split',
  805. 'slider-dot-border-color-active': 'tint(@primary-color, 50%)',
  806. 'slider-disabled-color': '@disabled-color',
  807. 'slider-disabled-background-color': '@component-background',
  808. // Tree
  809. // ---
  810. 'tree-bg': '@component-background',
  811. 'tree-title-height': '24px',
  812. 'tree-child-padding': '18px',
  813. 'tree-directory-selected-color': '#fff',
  814. 'tree-directory-selected-bg': '@primary-color',
  815. 'tree-node-hover-bg': '@item-hover-bg',
  816. 'tree-node-selected-bg': '@primary-2',
  817. // Collapse
  818. // ---
  819. 'collapse-header-padding': '@padding-sm @padding-md',
  820. 'collapse-header-padding-extra': '40px',
  821. 'collapse-header-bg': '@background-color-light',
  822. 'collapse-content-padding': '@padding-md',
  823. 'collapse-content-bg': '@component-background',
  824. 'collapse-header-arrow-left': '16px',
  825. // Skeleton
  826. // ---
  827. 'skeleton-color': 'rgba(190, 190, 190, 0.2)',
  828. 'skeleton-to-color': 'shade(@skeleton-color, 5%)',
  829. 'skeleton-paragraph-margin-top': '28px',
  830. 'skeleton-paragraph-li-margin-top': '@margin-md',
  831. 'skeleton-paragraph-li-height': '16px',
  832. 'skeleton-title-height': '16px',
  833. 'skeleton-title-paragraph-margin-top': '@margin-lg',
  834. // Transfer
  835. // ---
  836. 'transfer-header-height': '40px',
  837. 'transfer-item-height': '@height-base',
  838. 'transfer-disabled-bg': '@disabled-bg',
  839. 'transfer-list-height': '200px',
  840. 'transfer-item-hover-bg': '@item-hover-bg',
  841. 'transfer-item-selected-hover-bg': 'darken(@item-active-bg, 2%)',
  842. 'transfer-item-padding-vertical': '6px',
  843. 'transfer-list-search-icon-top': '12px',
  844. // Message
  845. // ---
  846. 'message-notice-content-padding': '10px 16px',
  847. 'message-notice-content-bg': '@component-background',
  848. // Motion
  849. // ---
  850. 'wave-animation-width': '6px',
  851. // Alert
  852. // ---
  853. 'alert-success-border-color': token.colorSuccessBorder,
  854. 'alert-success-bg-color': token.colorSuccessBg,
  855. 'alert-success-icon-color': token.colorSuccess,
  856. 'alert-info-border-color': token.colorInfoBorder,
  857. 'alert-info-bg-color': token.colorInfoBg,
  858. 'alert-info-icon-color': token.colorInfo,
  859. 'alert-warning-border-color': token.colorWarningBorder,
  860. 'alert-warning-bg-color': token.colorWarningBg,
  861. 'alert-warning-icon-color': token.colorWarning,
  862. 'alert-error-border-color': token.colorErrorBorder,
  863. 'alert-error-bg-color': token.colorErrorBg,
  864. 'alert-error-icon-color': '@error-color',
  865. 'alert-message-color': '@heading-color',
  866. 'alert-text-color': '@text-color',
  867. 'alert-close-color': '@text-color-secondary',
  868. 'alert-close-hover-color': '@icon-color-hover',
  869. 'alert-padding-vertical': '@padding-xs',
  870. 'alert-padding-horizontal': '@padding-md - 1px',
  871. 'alert-no-icon-padding-vertical': '@padding-xs',
  872. 'alert-with-description-no-icon-padding-vertical': '@padding-md - 1px',
  873. 'alert-with-description-padding-vertical': '@padding-md - 1px',
  874. 'alert-with-description-padding': `@alert-with-description-padding-vertical 15px
  875. @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size`,
  876. 'alert-icon-top': '8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2)',
  877. 'alert-with-description-icon-size': '24px',
  878. // List
  879. // ---
  880. 'list-header-background': 'transparent',
  881. 'list-footer-background': 'transparent',
  882. 'list-empty-text-padding': '@padding-md',
  883. 'list-item-padding': '@padding-sm 0',
  884. 'list-item-padding-sm': '@padding-xs @padding-md',
  885. 'list-item-padding-lg': '16px 24px',
  886. 'list-item-meta-margin-bottom': '@padding-md',
  887. 'list-item-meta-avatar-margin-right': '@padding-md',
  888. 'list-item-meta-title-margin-bottom': '@padding-sm',
  889. 'list-customize-card-bg': '@component-background',
  890. 'list-item-meta-description-font-size': '@font-size-base',
  891. // Statistic
  892. // ---
  893. 'statistic-title-font-size': '@font-size-base',
  894. 'statistic-content-font-size': '24px',
  895. 'statistic-unit-font-size': '24px',
  896. 'statistic-font-family': '@font-family',
  897. // Drawer
  898. // ---
  899. 'drawer-header-padding': '@padding-md @padding-lg',
  900. 'drawer-body-padding': '@padding-lg',
  901. 'drawer-bg': '@component-background',
  902. 'drawer-footer-padding-vertical': '@modal-footer-padding-vertical',
  903. 'drawer-footer-padding-horizontal': '@modal-footer-padding-horizontal',
  904. 'drawer-header-close-size': '56px',
  905. 'drawer-title-font-size': '@font-size-lg',
  906. 'drawer-title-line-height': '22px',
  907. // Timeline
  908. // ---
  909. 'timeline-width': '2px',
  910. 'timeline-color': '@border-color-split',
  911. 'timeline-dot-border-width': '2px',
  912. 'timeline-dot-color': '@primary-color',
  913. 'timeline-dot-bg': '@component-background',
  914. 'timeline-item-padding-bottom': '20px',
  915. // Typography
  916. // ---
  917. 'typography-title-font-weight': '600',
  918. 'typography-title-margin-top': '1.2em',
  919. 'typography-title-margin-bottom': '0.5em',
  920. // Upload
  921. // ---
  922. 'upload-actions-color': '@text-color-secondary',
  923. // Steps
  924. // ---
  925. 'process-tail-color': '@border-color-split',
  926. 'steps-nav-arrow-color': 'fade(@black, 25%)',
  927. 'steps-background': '@component-background',
  928. 'steps-icon-size': '32px',
  929. 'steps-icon-custom-size': '@steps-icon-size',
  930. 'steps-icon-custom-top': '0px',
  931. 'steps-icon-custom-font-size': '24px',
  932. 'steps-icon-top': '-0.5px',
  933. 'steps-icon-font-size': '@font-size-lg',
  934. 'steps-icon-margin': '0 8px 0 0',
  935. 'steps-title-line-height': '@height-base',
  936. 'steps-small-icon-size': '24px',
  937. 'steps-small-icon-margin': '0 8px 0 0',
  938. 'steps-dot-size': '8px',
  939. 'steps-dot-top': '2px',
  940. 'steps-current-dot-size': '10px',
  941. 'steps-description-max-width': '140px',
  942. 'steps-nav-content-max-width': 'auto',
  943. 'steps-vertical-icon-width': '16px',
  944. 'steps-vertical-tail-width': '16px',
  945. 'steps-vertical-tail-width-sm': '12px',
  946. // Notification
  947. // ---
  948. 'notification-bg': '@component-background',
  949. 'notification-padding-vertical': '16px',
  950. 'notification-padding-horizontal': '24px',
  951. // Result
  952. // ---
  953. 'result-title-font-size': '24px',
  954. 'result-subtitle-font-size': '@font-size-base',
  955. 'result-icon-font-size': '72px',
  956. 'result-extra-margin': '24px 0 0 0',
  957. // Image
  958. // ---
  959. 'image-size-base': '48px',
  960. 'image-font-size-base': '24px',
  961. 'image-bg': '#f5f5f5',
  962. 'image-color': '#fff',
  963. 'image-mask-font-size': '16px',
  964. 'image-preview-operation-size': '18px',
  965. 'image-preview-operation-color': '@text-color-dark',
  966. 'image-preview-operation-disabled-color': 'fade(@image-preview-operation-color, 25%)',
  967. // Segmented
  968. // ---
  969. 'segmented-bg': 'fade(@black, 4%)',
  970. 'segmented-hover-bg': 'fade(@black, 6%)',
  971. 'segmented-selected-bg': '@white',
  972. 'segmented-label-color': 'fade(@black, 65%)',
  973. 'segmented-label-hover-color': '#262626'
  974. };
  975. // Fill colors. e.g. '@red-1', '@yellow-6'
  976. Object.keys(token).forEach(key => {
  977. if (key !== key.toLowerCase()) {
  978. return;
  979. }
  980. const value = token[key];
  981. if (typeof value === 'string') {
  982. raw[key] = value;
  983. }
  984. });
  985. // Convert to string
  986. const returnData = {};
  987. Object.keys(raw).forEach(key => {
  988. const value = raw[key];
  989. if (typeof value === 'function') {
  990. returnData[key] = value(raw);
  991. } else if (typeof value === 'number' && !key.includes('line-height')) {
  992. returnData[key] = `${value}px`;
  993. } else {
  994. returnData[key] = `${value}`;
  995. }
  996. });
  997. return returnData;
  998. }