theme.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  1. const defaultTheme = require('./default-theme.js');
  2. const darkThemeSingle = {
  3. "theme": "dark",
  4. "blue-1": "mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%)",
  5. "blue-2": "mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%)",
  6. "blue-3": "mix(@blue-base, @component-background, 30%)",
  7. "blue-4": "mix(@blue-base, @component-background, 45%)",
  8. "blue-5": "mix(@blue-base, @component-background, 65%)",
  9. "blue-6": "mix(@blue-base, @component-background, 85%)",
  10. "blue-7": "mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%)",
  11. "blue-8": "mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%)",
  12. "blue-9": "mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%)",
  13. "blue-10": "mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%)",
  14. "purple-1": "mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%)",
  15. "purple-2": "mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%)",
  16. "purple-3": "mix(@purple-base, @component-background, 30%)",
  17. "purple-4": "mix(@purple-base, @component-background, 45%)",
  18. "purple-5": "mix(@purple-base, @component-background, 65%)",
  19. "purple-6": "mix(@purple-base, @component-background, 85%)",
  20. "purple-7": "mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%)",
  21. "purple-8": "mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%)",
  22. "purple-9": "mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%)",
  23. "purple-10": "mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%)",
  24. "cyan-1": "mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%)",
  25. "cyan-2": "mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%)",
  26. "cyan-3": "mix(@cyan-base, @component-background, 30%)",
  27. "cyan-4": "mix(@cyan-base, @component-background, 45%)",
  28. "cyan-5": "mix(@cyan-base, @component-background, 65%)",
  29. "cyan-6": "mix(@cyan-base, @component-background, 85%)",
  30. "cyan-7": "mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%)",
  31. "cyan-8": "mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%)",
  32. "cyan-9": "mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%)",
  33. "cyan-10": "mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%)",
  34. "green-1": "mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%)",
  35. "green-2": "mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%)",
  36. "green-3": "mix(@green-base, @component-background, 30%)",
  37. "green-4": "mix(@green-base, @component-background, 45%)",
  38. "green-5": "mix(@green-base, @component-background, 65%)",
  39. "green-6": "mix(@green-base, @component-background, 85%)",
  40. "green-7": "mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%)",
  41. "green-8": "mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%)",
  42. "green-9": "mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%)",
  43. "green-10": "mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%)",
  44. "magenta-1": "mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%)",
  45. "magenta-2": "mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%)",
  46. "magenta-3": "mix(@magenta-base, @component-background, 30%)",
  47. "magenta-4": "mix(@magenta-base, @component-background, 45%)",
  48. "magenta-5": "mix(@magenta-base, @component-background, 65%)",
  49. "magenta-6": "mix(@magenta-base, @component-background, 85%)",
  50. "magenta-7": "mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%)",
  51. "magenta-8": "mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%)",
  52. "magenta-9": "mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%)",
  53. "magenta-10": "mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%)",
  54. "pink-1": "mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%)",
  55. "pink-2": "mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%)",
  56. "pink-3": "mix(@pink-base, @component-background, 30%)",
  57. "pink-4": "mix(@pink-base, @component-background, 45%)",
  58. "pink-5": "mix(@pink-base, @component-background, 65%)",
  59. "pink-6": "mix(@pink-base, @component-background, 85%)",
  60. "pink-7": "mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%)",
  61. "pink-8": "mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%)",
  62. "pink-9": "mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%)",
  63. "pink-10": "mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%)",
  64. "red-1": "mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%)",
  65. "red-2": "mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%)",
  66. "red-3": "mix(@red-base, @component-background, 30%)",
  67. "red-4": "mix(@red-base, @component-background, 45%)",
  68. "red-5": "mix(@red-base, @component-background, 65%)",
  69. "red-6": "mix(@red-base, @component-background, 85%)",
  70. "red-7": "mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%)",
  71. "red-8": "mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%)",
  72. "red-9": "mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%)",
  73. "red-10": "mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%)",
  74. "orange-1": "mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%)",
  75. "orange-2": "mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%)",
  76. "orange-3": "mix(@orange-base, @component-background, 30%)",
  77. "orange-4": "mix(@orange-base, @component-background, 45%)",
  78. "orange-5": "mix(@orange-base, @component-background, 65%)",
  79. "orange-6": "mix(@orange-base, @component-background, 85%)",
  80. "orange-7": "mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%)",
  81. "orange-8": "mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%)",
  82. "orange-9": "mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%)",
  83. "orange-10": "mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%)",
  84. "yellow-1": "mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%)",
  85. "yellow-2": "mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%)",
  86. "yellow-3": "mix(@yellow-base, @component-background, 30%)",
  87. "yellow-4": "mix(@yellow-base, @component-background, 45%)",
  88. "yellow-5": "mix(@yellow-base, @component-background, 65%)",
  89. "yellow-6": "mix(@yellow-base, @component-background, 85%)",
  90. "yellow-7": "mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%)",
  91. "yellow-8": "mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%)",
  92. "yellow-9": "mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%)",
  93. "yellow-10": "mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%)",
  94. "volcano-1": "mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%)",
  95. "volcano-2": "mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%)",
  96. "volcano-3": "mix(@volcano-base, @component-background, 30%)",
  97. "volcano-4": "mix(@volcano-base, @component-background, 45%)",
  98. "volcano-5": "mix(@volcano-base, @component-background, 65%)",
  99. "volcano-6": "mix(@volcano-base, @component-background, 85%)",
  100. "volcano-7": "mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%)",
  101. "volcano-8": "mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%)",
  102. "volcano-9": "mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%)",
  103. "volcano-10": "mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%)",
  104. "geekblue-1": "mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%)",
  105. "geekblue-2": "mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%)",
  106. "geekblue-3": "mix(@geekblue-base, @component-background, 30%)",
  107. "geekblue-4": "mix(@geekblue-base, @component-background, 45%)",
  108. "geekblue-5": "mix(@geekblue-base, @component-background, 65%)",
  109. "geekblue-6": "mix(@geekblue-base, @component-background, 85%)",
  110. "geekblue-7": "mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%)",
  111. "geekblue-8": "mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%)",
  112. "geekblue-9": "mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%)",
  113. "geekblue-10": "mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%)",
  114. "lime-1": "mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%)",
  115. "lime-2": "mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%)",
  116. "lime-3": "mix(@lime-base, @component-background, 30%)",
  117. "lime-4": "mix(@lime-base, @component-background, 45%)",
  118. "lime-5": "mix(@lime-base, @component-background, 65%)",
  119. "lime-6": "mix(@lime-base, @component-background, 85%)",
  120. "lime-7": "mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%)",
  121. "lime-8": "mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%)",
  122. "lime-9": "mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%)",
  123. "lime-10": "mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%)",
  124. "gold-1": "mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%)",
  125. "gold-2": "mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%)",
  126. "gold-3": "mix(@gold-base, @component-background, 30%)",
  127. "gold-4": "mix(@gold-base, @component-background, 45%)",
  128. "gold-5": "mix(@gold-base, @component-background, 65%)",
  129. "gold-6": "mix(@gold-base, @component-background, 85%)",
  130. "gold-7": "mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%)",
  131. "gold-8": "mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%)",
  132. "gold-9": "mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%)",
  133. "gold-10": "mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%)",
  134. "primary-1": "mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%)",
  135. "primary-2": "mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%)",
  136. "primary-3": "mix(@primary-color, @component-background, 30%)",
  137. "primary-4": "mix(@primary-color, @component-background, 45%)",
  138. "primary-5": "mix(@primary-color, @component-background, 65%)",
  139. "primary-6": "@primary-color",
  140. "primary-7": "mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%)",
  141. "primary-8": "mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%)",
  142. "primary-9": "mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%)",
  143. "primary-10": "mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%)",
  144. "popover-background": "#1f1f1f",
  145. "popover-customize-border-color": "#3a3a3a",
  146. "body-background": "@black",
  147. "component-background": "#141414",
  148. "text-color": "fade(@white, 85%)",
  149. "text-color-secondary": "fade(@white, 45%)",
  150. "text-color-inverse": "@white",
  151. "icon-color-hover": "fade(@white, 75%)",
  152. "heading-color": "fade(@white, 85%)",
  153. "item-active-bg": "@primary-1",
  154. "item-hover-bg": "fade(@white, 8%)",
  155. "border-color-base": "#434343",
  156. "border-color-split": "#303030",
  157. "background-color-light": "fade(@white, 4%)",
  158. "background-color-base": "fade(@white, 8%)",
  159. "disabled-color": "fade(@white, 30%)",
  160. "disabled-bg": "@background-color-base",
  161. "disabled-color-dark": "fade(@white, 30%)",
  162. "tree-bg": "transparent",
  163. "list-customize-card-bg": "transparent",
  164. "shadow-color": "rgba(0, 0, 0, 0.45)",
  165. "shadow-color-inverse": "@component-background",
  166. "box-shadow-base": "@shadow-2",
  167. "shadow-1-up": "0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),\n 0 -12px 48px 16px rgba(0, 0, 0, 0.12)",
  168. "shadow-1-down": "0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),\n 0 12px 48px 16px rgba(0, 0, 0, 0.12)",
  169. "shadow-1-right": "6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),\n 12px 0 48px 16px rgba(0, 0, 0, 0.12)",
  170. "shadow-2": "0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),\n 0 9px 28px 8px rgba(0, 0, 0, 0.2)",
  171. "btn-shadow": "0 2px 0 rgba(0, 0, 0, 0.015)",
  172. "btn-primary-shadow": "0 2px 0 rgba(0, 0, 0, 0.045)",
  173. "btn-text-shadow": "0 -1px 0 rgba(0, 0, 0, 0.12)",
  174. "btn-default-bg": "transparent",
  175. "btn-default-ghost-color": "@text-color",
  176. "btn-default-ghost-border": "fade(@white, 25%)",
  177. "btn-text-hover-bg": "rgba(255, 255, 255, 0.03)",
  178. "checkbox-check-bg": "transparent",
  179. "descriptions-bg": "@background-color-light",
  180. "divider-color": "rgba(255, 255, 255, 12%)",
  181. "modal-header-bg": "@popover-background",
  182. "modal-header-border-color-split": "@border-color-split",
  183. "modal-content-bg": "@popover-background",
  184. "modal-footer-border-color-split": "@border-color-split",
  185. "radio-solid-checked-color": "@white",
  186. "radio-dot-disabled-color": "fade(@white, 20%)",
  187. "radio-disabled-button-checked-bg": "fade(@white, 20%)",
  188. "radio-disabled-button-checked-color": "@disabled-color",
  189. "layout-body-background": "@body-background",
  190. "layout-header-background": "@popover-background",
  191. "layout-trigger-background": "#262626",
  192. "input-bg": "transparent",
  193. "input-placeholder-color": "fade(@white, 30%)",
  194. "input-icon-color": "fade(@white, 30%)",
  195. "input-number-handler-active-bg": "@item-hover-bg",
  196. "input-icon-hover-color": "fade(@white, 85%)",
  197. "select-background": "transparent",
  198. "select-dropdown-bg": "@popover-background",
  199. "select-clear-background": "@component-background",
  200. "select-selection-item-bg": "fade(@white, 8)",
  201. "select-selection-item-border-color": "@border-color-split",
  202. "select-multiple-disabled-background": "@component-background",
  203. "select-multiple-item-disabled-color": "#595959",
  204. "select-multiple-item-disabled-border-color": "@popover-background",
  205. "cascader-bg": "transparent",
  206. "cascader-menu-bg": "@popover-background",
  207. "cascader-menu-border-color-split": "@border-color-split",
  208. "tooltip-bg": "#434343",
  209. "menu-dark-inline-submenu-bg": "@component-background",
  210. "menu-dark-bg": "@popover-background",
  211. "menu-popup-bg": "@popover-background",
  212. "message-notice-content-bg": "@popover-background",
  213. "notification-bg": "@popover-background",
  214. "link-hover-color": "@primary-5",
  215. "link-active-color": "@primary-7",
  216. "table-header-bg": "#1d1d1d",
  217. "table-body-sort-bg": "fade(@white, 1%)",
  218. "table-row-hover-bg": "#262626",
  219. "table-header-cell-split-color": "fade(@white, 8%)",
  220. "table-header-sort-bg": "#262626",
  221. "table-header-filter-active-bg": "#434343",
  222. "table-header-sort-active-bg": "#303030",
  223. "table-fixed-header-sort-active-bg": "#222",
  224. "table-filter-btns-bg": "@popover-background",
  225. "table-expanded-row-bg": "@table-header-bg",
  226. "table-filter-dropdown-bg": "@popover-background",
  227. "table-expand-icon-bg": "transparent",
  228. "info-color-deprecated-bg": "@primary-1",
  229. "info-color-deprecated-border": "@primary-3",
  230. "success-color-deprecated-bg": "@green-1",
  231. "success-color-deprecated-border": "@green-3",
  232. "warning-color-deprecated-bg": "@orange-1",
  233. "warning-color-deprecated-border": "@orange-3",
  234. "error-color-deprecated-bg": "@red-1",
  235. "error-color-deprecated-border": "@red-3",
  236. "picker-basic-cell-hover-with-range-color": "darken(@primary-color, 35%)",
  237. "picker-basic-cell-disabled-bg": "#303030",
  238. "picker-border-color": "@border-color-split",
  239. "picker-bg": "transparent",
  240. "picker-date-hover-range-border-color": "darken(@primary-color, 20%)",
  241. "dropdown-menu-bg": "@popover-background",
  242. "dropdown-menu-submenu-disabled-bg": "transparent",
  243. "steps-nav-arrow-color": "fade(@white, 20%)",
  244. "steps-background": "transparent",
  245. "avatar-bg": "fade(@white, 30%)",
  246. "progress-steps-item-bg": "fade(@white, 8%)",
  247. "calendar-bg": "@popover-background",
  248. "calendar-input-bg": "@calendar-bg",
  249. "calendar-border-color": "transparent",
  250. "calendar-full-bg": "@component-background",
  251. "badge-text-color": "@white",
  252. "popover-bg": "@popover-background",
  253. "drawer-bg": "@popover-background",
  254. "card-actions-background": "@component-background",
  255. "card-skeleton-bg": "#303030",
  256. "card-shadow": "0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),\n 0 5px 12px 4px rgba(0, 0, 0, 0.36)",
  257. "transfer-item-hover-bg": "#262626",
  258. "comment-bg": "transparent",
  259. "comment-author-time-color": "fade(@white, 30%)",
  260. "comment-action-hover-color": "fade(@white, 65%)",
  261. "rate-star-bg": "fade(@white, 12%)",
  262. "switch-bg": "@white",
  263. "pagination-item-bg": "transparent",
  264. "pagination-item-bg-active": "transparent",
  265. "pagination-item-link-bg": "transparent",
  266. "pagination-item-disabled-bg-active": "fade(@white, 25%)",
  267. "pagination-item-disabled-color-active": "@black",
  268. "pagination-item-input-bg": "@pagination-item-bg",
  269. "page-header-back-color": "@icon-color",
  270. "page-header-ghost-bg": "transparent",
  271. "slider-rail-background-color": "#262626",
  272. "slider-rail-background-color-hover": "@border-color-base",
  273. "slider-dot-border-color": "@border-color-split",
  274. "slider-dot-border-color-active": "@primary-4",
  275. "skeleton-to-color": "fade(@white, 16%)",
  276. "alert-success-border-color": "@green-3",
  277. "alert-success-bg-color": "@green-1",
  278. "alert-success-icon-color": "@success-color",
  279. "alert-info-border-color": "@primary-3",
  280. "alert-info-bg-color": "@primary-1",
  281. "alert-info-icon-color": "@info-color",
  282. "alert-warning-border-color": "@gold-3",
  283. "alert-warning-bg-color": "@gold-1",
  284. "alert-warning-icon-color": "@warning-color",
  285. "alert-error-border-color": "@red-3",
  286. "alert-error-bg-color": "@red-1",
  287. "alert-error-icon-color": "@error-color",
  288. "timeline-color": "@border-color-split",
  289. "timeline-dot-color": "@primary-color",
  290. "mentions-dropdown-bg": "@popover-background"
  291. };
  292. const compactThemeSingle = {
  293. "line-height-base": "1.66667",
  294. "mode": "compact",
  295. "font-size-base": "12px",
  296. "font-size-lg": "@font-size-base + 2px",
  297. "default-padding-lg": "24px",
  298. "default-padding-md": "16px",
  299. "default-padding-sm": "12px",
  300. "default-padding-xs": "8px",
  301. "default-padding-xss": "4px",
  302. "padding-lg": "16px",
  303. "padding-md": "8px",
  304. "padding-sm": "8px",
  305. "padding-xs": "4px",
  306. "padding-xss": "0px",
  307. "control-padding-horizontal": "@padding-sm",
  308. "control-padding-horizontal-sm": "@default-padding-xs",
  309. "margin-lg": "16px",
  310. "margin-md": "8px",
  311. "margin-sm": "8px",
  312. "margin-xs": "4px",
  313. "margin-xss": "0px",
  314. "height-base": "28px",
  315. "height-lg": "32px",
  316. "height-sm": "22px",
  317. "btn-padding-horizontal-base": "@default-padding-sm - 1px",
  318. "btn-padding-horizontal-lg": "@btn-padding-horizontal-base",
  319. "btn-padding-horizontal-sm": "@default-padding-xs - 1px",
  320. "btn-square-only-icon-size-lg": "16px",
  321. "btn-square-only-icon-size": "14px",
  322. "btn-square-only-icon-size-sm": "12px",
  323. "breadcrumb-font-size": "@font-size-base",
  324. "breadcrumb-icon-font-size": "@font-size-base",
  325. "dropdown-line-height": "18px",
  326. "menu-item-padding": "0 12px",
  327. "menu-horizontal-line-height": "38px",
  328. "menu-inline-toplevel-item-height": "32px",
  329. "menu-item-height": "32px",
  330. "menu-item-vertical-margin": "0px",
  331. "menu-item-boundary-margin": "0px",
  332. "menu-icon-margin-right": "8px",
  333. "checkbox-size": "14px",
  334. "checkbox-group-item-margin-right": "6px",
  335. "picker-panel-cell-height": "22px",
  336. "picker-panel-cell-width": "32px",
  337. "picker-text-height": "32px",
  338. "picker-time-panel-cell-height": "24px",
  339. "picker-panel-without-time-cell-height": "48px",
  340. "form-item-margin-bottom": "16px",
  341. "form-vertical-label-padding": "0 0 4px",
  342. "rate-star-size": "16px",
  343. "radio-size": "14px",
  344. "radio-wrapper-margin-right": "6px",
  345. "switch-height": "20px",
  346. "switch-sm-height": "14px",
  347. "switch-min-width": "40px",
  348. "switch-sm-min-width": "24px",
  349. "switch-inner-margin-min": "4px",
  350. "switch-inner-margin-max": "22px",
  351. "slider-handle-size": "12px",
  352. "slider-handle-margin-top": "-4px",
  353. "input-padding-vertical-base": "round(\n max(\n (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -\n @border-width-base,\n 2px\n )\n)",
  354. "input-padding-horizontal-lg": "11px",
  355. "page-header-padding": "16px",
  356. "page-header-padding-vertical": "8px",
  357. "page-header-heading-title": "16px",
  358. "page-header-heading-sub-title": "12px",
  359. "page-header-tabs-tab-font-size": "14px",
  360. "pagination-mini-options-size-changer-top": "1px",
  361. "pagination-item-size-sm": "22px",
  362. "cascader-dropdown-line-height": "@dropdown-line-height",
  363. "select-dropdown-height": "@height-base",
  364. "select-single-item-height-lg": "32px",
  365. "select-multiple-item-height": "@input-height-base - max(@input-padding-vertical-base, 4) * 2",
  366. "select-multiple-item-height-lg": "24px",
  367. "select-multiple-item-spacing-half": "3px",
  368. "tree-title-height": "20px",
  369. "transfer-item-padding-vertical": "3px",
  370. "transfer-list-search-icon-top": "8px",
  371. "transfer-header-height": "36px",
  372. "comment-actions-margin-bottom": "0px",
  373. "comment-actions-margin-top": "@margin-xs",
  374. "comment-content-detail-p-margin-bottom": "0px",
  375. "steps-icon-size": "24px",
  376. "steps-icon-custom-size": "20px",
  377. "steps-icon-custom-font-size": "20px",
  378. "steps-icon-custom-top": "2px",
  379. "steps-icon-margin": "2px 8px 2px 0",
  380. "steps-icon-font-size": "@font-size-base",
  381. "steps-dot-top": "4px",
  382. "steps-icon-top": "0px",
  383. "steps-small-icon-size": "20px",
  384. "steps-vertical-icon-width": "12px",
  385. "steps-vertical-tail-width": "12px",
  386. "steps-vertical-tail-width-sm": "10px",
  387. "collapse-content-padding": "@padding-md @padding-lg",
  388. "list-item-meta-description-font-size": "@font-size-sm",
  389. "list-item-padding-sm": "4px 12px",
  390. "list-item-padding-lg": "12px 16px",
  391. "drawer-header-padding": "11px @padding-lg",
  392. "drawer-footer-padding-vertical": "@padding-sm",
  393. "drawer-footer-padding-horizontal": "@padding-sm",
  394. "drawer-header-close-size": "44px",
  395. "modal-header-padding": "11px @modal-header-padding-horizontal",
  396. "modal-footer-padding-vertical": "@padding-sm",
  397. "modal-header-close-size": "44px",
  398. "modal-confirm-body-padding": "24px 24px 16px",
  399. "message-notice-content-padding": "8px 16px",
  400. "popover-min-height": "28px",
  401. "popover-padding-horizontal": "@default-padding-sm",
  402. "card-padding-base": "12px",
  403. "card-head-height": "36px",
  404. "card-head-font-size": "@card-head-font-size-sm",
  405. "card-head-padding": "8.5px",
  406. "card-padding-base-sm": "@card-padding-base",
  407. "card-head-height-sm": "30px",
  408. "card-head-padding-sm": "6px",
  409. "card-actions-li-margin": "4px 0",
  410. "card-head-tabs-margin-bottom": "-9px",
  411. "table-padding-vertical": "12px",
  412. "table-padding-horizontal": "8px",
  413. "table-padding-vertical-md": "8px",
  414. "table-padding-horizontal-md": "8px",
  415. "table-padding-vertical-sm": "4px",
  416. "table-padding-horizontal-sm": "4px",
  417. "table-selection-column-width": "32px",
  418. "statistic-content-font-size": "20px",
  419. "alert-with-description-no-icon-padding-vertical": "7px",
  420. "alert-with-description-padding-vertical": "11px",
  421. "alert-icon-top": "7px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2)",
  422. "alert-with-description-icon-size": "20px",
  423. "skeleton-paragraph-margin-top": "20px",
  424. "skeleton-paragraph-li-margin-top": "12px",
  425. "skeleton-paragraph-li-height": "14px",
  426. "skeleton-title-height": "14px",
  427. "skeleton-title-paragraph-margin-top": "20px",
  428. "descriptions-title-margin-bottom": "8px",
  429. "descriptions-default-padding": "12px @padding-lg",
  430. "descriptions-item-padding-bottom": "@padding-xs",
  431. "avatar-size-base": "28px",
  432. "avatar-size-lg": "32px",
  433. "avatar-size-sm": "22px",
  434. "avatar-font-size-base": "16px",
  435. "avatar-font-size-lg": "20px",
  436. "avatar-font-size-sm": "12px",
  437. "badge-height": "18px",
  438. "tag-line-height": "18px",
  439. "notification-padding-vertical": "12px",
  440. "notification-padding-horizontal": "16px",
  441. "result-title-font-size": "20px",
  442. "result-icon-font-size": "64px",
  443. "result-extra-margin": "24px 0 0 0",
  444. "anchor-link-top": "4px",
  445. "anchor-link-left": "16px",
  446. "anchor-link-padding": "@anchor-link-top 0 @anchor-link-top @anchor-link-left",
  447. "tabs-card-horizontal-padding": "4px @padding-md",
  448. "progress-circle-text-font-size": "0.833333em",
  449. "image-size-base": "48px",
  450. "image-font-size-base": "24px"
  451. };
  452. const variableThemeSingle = {};
  453. function getThemeVariables(options = {}) {
  454. let themeVar = {
  455. 'hack': `true;@import "${require.resolve('ant-design-vue/lib/style/color/colorPalette.less')}";`,
  456. ...defaultTheme
  457. };
  458. if(options.dark) {
  459. themeVar = {
  460. ...themeVar,
  461. ...darkThemeSingle
  462. }
  463. }
  464. if(options.compact){
  465. themeVar = {
  466. ...themeVar,
  467. ...compactThemeSingle
  468. }
  469. }
  470. return themeVar;
  471. }
  472. module.exports = {
  473. darkThemeSingle,
  474. compactThemeSingle,
  475. getThemeVariables
  476. }