token.d.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. import type { CSSProperties } from 'react';
  2. import type { FullToken, GenStyleFn, GetDefaultToken, PresetColorKey } from '../../theme/internal';
  3. /** Component only token. Which will handle additional calculation of alias token */
  4. export interface ComponentToken {
  5. /**
  6. * @desc 文字字重
  7. * @descEN Font weight of text
  8. */
  9. fontWeight: CSSProperties['fontWeight'];
  10. /**
  11. * @desc 图标文字间距
  12. * @descEN Gap between icon and text
  13. */
  14. iconGap: CSSProperties['gap'];
  15. /**
  16. * @desc 默认按钮阴影
  17. * @descEN Shadow of default button
  18. */
  19. defaultShadow: string;
  20. /**
  21. * @desc 主要按钮阴影
  22. * @descEN Shadow of primary button
  23. */
  24. primaryShadow: string;
  25. /**
  26. * @desc 危险按钮阴影
  27. * @descEN Shadow of danger button
  28. */
  29. dangerShadow: string;
  30. /**
  31. * @desc 主要按钮文本颜色
  32. * @descEN Text color of primary button
  33. */
  34. primaryColor: string;
  35. /**
  36. * @desc 默认按钮文本颜色
  37. * @descEN Text color of default button
  38. */
  39. defaultColor: string;
  40. /**
  41. * @desc 默认按钮背景色
  42. * @descEN Background color of default button
  43. */
  44. defaultBg: string;
  45. /**
  46. * @desc 默认按钮边框颜色
  47. * @descEN Border color of default button
  48. */
  49. defaultBorderColor: string;
  50. /**
  51. * @desc 危险按钮文本颜色
  52. * @descEN Text color of danger button
  53. */
  54. dangerColor: string;
  55. /**
  56. * @desc 默认按钮悬浮态背景色
  57. * @descEN Background color of default button when hover
  58. */
  59. defaultHoverBg: string;
  60. /**
  61. * @desc 默认按钮悬浮态文本颜色
  62. * @descEN Text color of default button when hover
  63. */
  64. defaultHoverColor: string;
  65. /**
  66. * @desc 默认按钮悬浮态边框颜色
  67. * @descEN Border color of default button
  68. */
  69. defaultHoverBorderColor: string;
  70. /**
  71. * @desc 默认按钮激活态背景色
  72. * @descEN Background color of default button when active
  73. */
  74. defaultActiveBg: string;
  75. /**
  76. * @desc 默认按钮激活态文字颜色
  77. * @descEN Text color of default button when active
  78. */
  79. defaultActiveColor: string;
  80. /**
  81. * @desc 默认按钮激活态边框颜色
  82. * @descEN Border color of default button when active
  83. */
  84. defaultActiveBorderColor: string;
  85. /**
  86. * @desc 禁用状态边框颜色
  87. * @descEN Border color of disabled button
  88. */
  89. borderColorDisabled: string;
  90. /**
  91. * @desc 默认幽灵按钮文本颜色
  92. * @descEN Text color of default ghost button
  93. */
  94. defaultGhostColor: string;
  95. /**
  96. * @desc 幽灵按钮背景色
  97. * @descEN Background color of ghost button
  98. */
  99. ghostBg: string;
  100. /**
  101. * @desc 默认幽灵按钮边框颜色
  102. * @descEN Border color of default ghost button
  103. */
  104. defaultGhostBorderColor: string;
  105. /**
  106. * @desc 主要填充按钮的浅色背景颜色
  107. * @descEN Background color of primary filled button
  108. */
  109. /**
  110. * @desc 默认实心按钮的文本色
  111. * @descEN Default text color for solid buttons.
  112. */
  113. solidTextColor: string;
  114. /**
  115. * @desc 默认文本按钮的文本色
  116. * @descEN Default text color for text buttons
  117. */
  118. textTextColor: string;
  119. /**
  120. * @desc 默认文本按钮悬浮态文本颜色
  121. * @descEN Default text color for text buttons on hover
  122. */
  123. textTextHoverColor: string;
  124. /**
  125. * @desc 默认文本按钮激活态文字颜色
  126. * @descEN Default text color for text buttons on active
  127. */
  128. textTextActiveColor: string;
  129. /**
  130. * @desc 按钮横向内间距
  131. * @descEN Horizontal padding of button
  132. */
  133. paddingInline: CSSProperties['paddingInline'];
  134. /**
  135. * @desc 大号按钮横向内间距
  136. * @descEN Horizontal padding of large button
  137. */
  138. paddingInlineLG: CSSProperties['paddingInline'];
  139. /**
  140. * @desc 小号按钮横向内间距
  141. * @descEN Horizontal padding of small button
  142. */
  143. paddingInlineSM: CSSProperties['paddingInline'];
  144. /**
  145. * @desc 按钮纵向内间距
  146. * @descEN Vertical padding of button
  147. */
  148. paddingBlock: CSSProperties['paddingBlock'];
  149. /**
  150. * @desc 大号按钮纵向内间距
  151. * @descEN Vertical padding of large button
  152. */
  153. paddingBlockLG: CSSProperties['paddingBlock'];
  154. /**
  155. * @desc 小号按钮纵向内间距
  156. * @descEN Vertical padding of small button
  157. */
  158. paddingBlockSM: CSSProperties['paddingBlock'];
  159. /**
  160. * @desc 只有图标的按钮图标尺寸
  161. * @descEN Icon size of button which only contains icon
  162. */
  163. onlyIconSize: number | string;
  164. /**
  165. * @desc 大号只有图标的按钮图标尺寸
  166. * @descEN Icon size of large button which only contains icon
  167. */
  168. onlyIconSizeLG: number | string;
  169. /**
  170. * @desc 小号只有图标的按钮图标尺寸
  171. * @descEN Icon size of small button which only contains icon
  172. */
  173. onlyIconSizeSM: number | string;
  174. /**
  175. * @desc 按钮组边框颜色
  176. * @descEN Border color of button group
  177. */
  178. groupBorderColor: string;
  179. /**
  180. * @desc 链接按钮悬浮态背景色
  181. * @descEN Background color of link button when hover
  182. */
  183. linkHoverBg: string;
  184. /**
  185. * @desc 文本按钮悬浮态背景色
  186. * @descEN Background color of text button when hover
  187. */
  188. textHoverBg: string;
  189. /**
  190. * @desc 按钮内容字体大小
  191. * @descEN Font size of button content
  192. */
  193. contentFontSize: number;
  194. /**
  195. * @desc 大号按钮内容字体大小
  196. * @descEN Font size of large button content
  197. */
  198. contentFontSizeLG: number;
  199. /**
  200. * @desc 小号按钮内容字体大小
  201. * @descEN Font size of small button content
  202. */
  203. contentFontSizeSM: number;
  204. /**
  205. * @desc 按钮内容字体行高
  206. * @descEN Line height of button content
  207. */
  208. contentLineHeight: number;
  209. /**
  210. * @desc 大号按钮内容字体行高
  211. * @descEN Line height of large button content
  212. */
  213. contentLineHeightLG: number;
  214. /**
  215. * @desc 小号按钮内容字体行高
  216. * @descEN Line height of small button content
  217. */
  218. contentLineHeightSM: number;
  219. }
  220. type ShadowColorMap = {
  221. [Key in `${PresetColorKey}ShadowColor`]: string;
  222. };
  223. export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap {
  224. /**
  225. * @desc 按钮横向内边距
  226. * @descEN Horizontal padding of button
  227. */
  228. buttonPaddingHorizontal: CSSProperties['paddingInline'];
  229. /**
  230. * @desc 按钮纵向内边距
  231. * @descEN Vertical padding of button
  232. */
  233. buttonPaddingVertical: CSSProperties['paddingBlock'];
  234. /**
  235. * @desc 只有图标的按钮图标尺寸
  236. * @descEN Icon size of button which only contains icon
  237. */
  238. buttonIconOnlyFontSize: number | string;
  239. }
  240. export declare const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken;
  241. export declare const prepareComponentToken: GetDefaultToken<'Button'>;
  242. export {};