@well-insight/ui 0.1.9 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (321) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +3 -3
  3. package/README.zh-CN.md +3 -3
  4. package/dist/{Button-BZzV1X-d.js → Button-B6-YxpOQ.js} +1 -1
  5. package/dist/{Checkbox-BtgWgkHI.js → Checkbox-BvlOYFGs.js} +5 -5
  6. package/dist/{Pagination-C-F_ZDXr.js → Pagination-BU-1IY0E.js} +2 -2
  7. package/dist/accordion/style.css +38 -23
  8. package/dist/auto-complete/style.css +180 -157
  9. package/dist/avatar/style.css +102 -74
  10. package/dist/badge/style.css +146 -110
  11. package/dist/block-ui/style.css +38 -23
  12. package/dist/breadcrumb/style.css +38 -23
  13. package/dist/button/index.js +1 -1
  14. package/dist/button/style.css +605 -447
  15. package/dist/card/style.css +38 -23
  16. package/dist/carousel/style.css +74 -58
  17. package/dist/cascade-select/style.css +123 -106
  18. package/dist/checkbox/index.js +1 -1
  19. package/dist/checkbox/style.css +38 -23
  20. package/dist/chip/style.css +117 -95
  21. package/dist/command-menu/style.css +97 -80
  22. package/dist/components/Accordion/Accordion.vue.d.ts.map +1 -1
  23. package/dist/components/AutoComplete/AutoComplete.vue.d.ts.map +1 -1
  24. package/dist/components/AutoComplete/styles.css +142 -134
  25. package/dist/components/Avatar/Avatar.vue.d.ts.map +1 -1
  26. package/dist/components/Avatar/AvatarGroup.vue.d.ts.map +1 -1
  27. package/dist/components/Avatar/styles.css +64 -51
  28. package/dist/components/Badge/Badge.vue.d.ts.map +1 -1
  29. package/dist/components/Badge/styles.css +108 -87
  30. package/dist/components/BlockUI/BlockUI.vue.d.ts.map +1 -1
  31. package/dist/components/Breadcrumb/Breadcrumb.vue.d.ts.map +1 -1
  32. package/dist/components/Button/Button.vue.d.ts +1 -1
  33. package/dist/components/Button/Button.vue.d.ts.map +1 -1
  34. package/dist/components/Button/ButtonGroup.vue.d.ts.map +1 -1
  35. package/dist/components/Button/styles.css +567 -424
  36. package/dist/components/Card/Card.vue.d.ts.map +1 -1
  37. package/dist/components/Carousel/Carousel.vue.d.ts.map +1 -1
  38. package/dist/components/Carousel/styles.css +36 -35
  39. package/dist/components/CascadeSelect/CascadeSelect.vue.d.ts.map +1 -1
  40. package/dist/components/CascadeSelect/styles.css +85 -83
  41. package/dist/components/Checkbox/Checkbox.vue.d.ts.map +1 -1
  42. package/dist/components/Checkbox/CheckboxGroup.vue.d.ts.map +1 -1
  43. package/dist/components/Chip/Chip.vue.d.ts.map +1 -1
  44. package/dist/components/Chip/styles.css +79 -72
  45. package/dist/components/CommandMenu/CommandMenu.vue.d.ts.map +1 -1
  46. package/dist/components/CommandMenu/styles.css +59 -57
  47. package/dist/components/ConfigProvider/ConfigProvider.vue.d.ts.map +1 -1
  48. package/dist/components/ConfirmDialog/ConfirmDialog.vue.d.ts.map +1 -1
  49. package/dist/components/ConfirmDialog/styles.css +17 -16
  50. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts.map +1 -1
  51. package/dist/components/ConfirmPopup/styles.css +27 -26
  52. package/dist/components/ContextMenu/ContextMenu.vue.d.ts.map +1 -1
  53. package/dist/components/ContextMenu/ContextMenuNodes.vue.d.ts.map +1 -1
  54. package/dist/components/ContextMenu/index.d.ts +1 -1
  55. package/dist/components/ContextMenu/index.d.ts.map +1 -1
  56. package/dist/components/ContextMenu/styles.css +43 -37
  57. package/dist/components/ContextMenu/useContextMenu.d.ts.map +1 -1
  58. package/dist/components/DataView/DataView.vue.d.ts.map +1 -1
  59. package/dist/components/DatePicker/DatePicker.vue.d.ts.map +1 -1
  60. package/dist/components/DatePicker/styles.css +163 -139
  61. package/dist/components/Dialog/Dialog.vue.d.ts.map +1 -1
  62. package/dist/components/Dialog/styles.css +155 -150
  63. package/dist/components/Divider/Divider.vue.d.ts.map +1 -1
  64. package/dist/components/Dock/Dock.vue.d.ts.map +1 -1
  65. package/dist/components/Dock/styles.css +37 -32
  66. package/dist/components/Drawer/Drawer.vue.d.ts.map +1 -1
  67. package/dist/components/Drawer/styles.css +82 -80
  68. package/dist/components/Dropdown/Dropdown.vue.d.ts.map +1 -1
  69. package/dist/components/Dropdown/DropdownNodes.vue.d.ts.map +1 -1
  70. package/dist/components/Dropdown/styles.css +58 -57
  71. package/dist/components/Fieldset/Fieldset.vue.d.ts.map +1 -1
  72. package/dist/components/FileUpload/FileUpload.vue.d.ts +2 -2
  73. package/dist/components/FileUpload/FileUpload.vue.d.ts.map +1 -1
  74. package/dist/components/FileUpload/styles.css +238 -221
  75. package/dist/components/Flex/Flex.vue.d.ts.map +1 -1
  76. package/dist/components/Form/Form.vue.d.ts.map +1 -1
  77. package/dist/components/Form/FormItem.vue.d.ts.map +1 -1
  78. package/dist/components/Form/index.d.ts +2 -2
  79. package/dist/components/Form/index.d.ts.map +1 -1
  80. package/dist/components/Form/styles.css +46 -44
  81. package/dist/components/Gallery/Gallery.vue.d.ts.map +1 -1
  82. package/dist/components/Gallery/styles.css +42 -39
  83. package/dist/components/Grid/Grid.vue.d.ts.map +1 -1
  84. package/dist/components/Grid/GridItem.vue.d.ts.map +1 -1
  85. package/dist/components/Icon/Icon.vue.d.ts.map +1 -1
  86. package/dist/components/IconField/IconField.vue.d.ts.map +1 -1
  87. package/dist/components/Inplace/Inplace.vue.d.ts.map +1 -1
  88. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  89. package/dist/components/Input/styles.css +198 -191
  90. package/dist/components/InputColor/InputColor.vue.d.ts.map +1 -1
  91. package/dist/components/InputColor/styles.css +50 -48
  92. package/dist/components/InputNumber/InputNumber.vue.d.ts.map +1 -1
  93. package/dist/components/InputNumber/styles.css +90 -80
  94. package/dist/components/InputOtp/InputOtp.vue.d.ts.map +1 -1
  95. package/dist/components/InputPassword/InputPassword.vue.d.ts.map +1 -1
  96. package/dist/components/InputPassword/styles.css +130 -117
  97. package/dist/components/InputTags/InputTags.vue.d.ts.map +1 -1
  98. package/dist/components/InputTags/styles.css +51 -43
  99. package/dist/components/Knob/Knob.vue.d.ts.map +1 -1
  100. package/dist/components/Label/Label.vue.d.ts.map +1 -1
  101. package/dist/components/Layout/Layout.vue.d.ts.map +1 -1
  102. package/dist/components/Layout/LayoutContent.vue.d.ts.map +1 -1
  103. package/dist/components/Layout/LayoutFooter.vue.d.ts.map +1 -1
  104. package/dist/components/Layout/LayoutHeader.vue.d.ts.map +1 -1
  105. package/dist/components/Layout/LayoutSider.vue.d.ts +1 -1
  106. package/dist/components/Layout/LayoutSider.vue.d.ts.map +1 -1
  107. package/dist/components/Layout/index.d.ts +2 -2
  108. package/dist/components/Layout/index.d.ts.map +1 -1
  109. package/dist/components/Layout/styles.css +310 -258
  110. package/dist/components/Layout/types.d.ts +30 -12
  111. package/dist/components/Layout/types.d.ts.map +1 -1
  112. package/dist/components/Listbox/Listbox.vue.d.ts.map +1 -1
  113. package/dist/components/Listbox/styles.css +61 -51
  114. package/dist/components/MegaMenu/MegaMenu.vue.d.ts.map +1 -1
  115. package/dist/components/MegaMenu/styles.css +60 -58
  116. package/dist/components/Menu/Menu.vue.d.ts.map +1 -1
  117. package/dist/components/Menu/MenuNodes.vue.d.ts.map +1 -1
  118. package/dist/components/Menu/styles.css +53 -47
  119. package/dist/components/Menubar/Menubar.vue.d.ts.map +1 -1
  120. package/dist/components/Menubar/styles.css +80 -70
  121. package/dist/components/Message/Message.vue.d.ts.map +1 -1
  122. package/dist/components/Message/index.d.ts +1 -1
  123. package/dist/components/Message/index.d.ts.map +1 -1
  124. package/dist/components/Message/message.d.ts +2 -2
  125. package/dist/components/Message/message.d.ts.map +1 -1
  126. package/dist/components/Message/messageState.d.ts.map +1 -1
  127. package/dist/components/Message/styles.css +193 -143
  128. package/dist/components/Message/types.d.ts +1 -1
  129. package/dist/components/Message/types.d.ts.map +1 -1
  130. package/dist/components/MeterGroup/MeterGroup.vue.d.ts.map +1 -1
  131. package/dist/components/MeterGroup/styles.css +36 -34
  132. package/dist/components/OrderList/OrderList.vue.d.ts.map +1 -1
  133. package/dist/components/Pagination/Pagination.vue.d.ts.map +1 -1
  134. package/dist/components/Pagination/styles.css +59 -57
  135. package/dist/components/Panel/Panel.vue.d.ts.map +1 -1
  136. package/dist/components/PickList/PickList.vue.d.ts.map +1 -1
  137. package/dist/components/Popover/Popover.vue.d.ts.map +1 -1
  138. package/dist/components/Popover/styles.css +46 -45
  139. package/dist/components/ProgressBar/ProgressBar.vue.d.ts.map +1 -1
  140. package/dist/components/ProgressSpinner/ProgressSpinner.vue.d.ts.map +1 -1
  141. package/dist/components/Radio/Radio.vue.d.ts.map +1 -1
  142. package/dist/components/Radio/RadioGroup.vue.d.ts.map +1 -1
  143. package/dist/components/Rating/Rating.vue.d.ts.map +1 -1
  144. package/dist/components/ScrollTop/ScrollTop.vue.d.ts.map +1 -1
  145. package/dist/components/Scrollbar/Scrollbar.vue.d.ts.map +1 -1
  146. package/dist/components/Scrollbar/Thumb.vue.d.ts.map +1 -1
  147. package/dist/components/Scrollbar/constants.d.ts +2 -2
  148. package/dist/components/Scrollbar/constants.d.ts.map +1 -1
  149. package/dist/components/Scrollbar/styles.css +68 -59
  150. package/dist/components/Select/Select.vue.d.ts +1 -1
  151. package/dist/components/Select/Select.vue.d.ts.map +1 -1
  152. package/dist/components/Select/styles.css +293 -280
  153. package/dist/components/SelectButton/SelectButton.vue.d.ts.map +1 -1
  154. package/dist/components/SelectButton/styles.css +64 -51
  155. package/dist/components/Sidebar/Sidebar.vue.d.ts.map +1 -1
  156. package/dist/components/Sidebar/styles.css +40 -38
  157. package/dist/components/Skeleton/Skeleton.vue.d.ts.map +1 -1
  158. package/dist/components/Slider/Slider.vue.d.ts.map +1 -1
  159. package/dist/components/Slider/styles.css +111 -95
  160. package/dist/components/Space/Space.vue.d.ts.map +1 -1
  161. package/dist/components/SpeedDial/SpeedDial.vue.d.ts.map +1 -1
  162. package/dist/components/SplitButton/SplitButton.vue.d.ts.map +1 -1
  163. package/dist/components/SplitButton/styles.css +105 -89
  164. package/dist/components/Splitter/Splitter.vue.d.ts.map +1 -1
  165. package/dist/components/Stepper/Stepper.vue.d.ts.map +1 -1
  166. package/dist/components/Stepper/styles.css +63 -58
  167. package/dist/components/Switch/Switch.vue.d.ts.map +1 -1
  168. package/dist/components/Switch/styles.css +82 -53
  169. package/dist/components/Table/Table.vue.d.ts.map +1 -1
  170. package/dist/components/Tabs/Tabs.vue.d.ts.map +1 -1
  171. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  172. package/dist/components/Terminal/Terminal.vue.d.ts.map +1 -1
  173. package/dist/components/Terminal/styles.css +46 -34
  174. package/dist/components/Textarea/Textarea.vue.d.ts.map +1 -1
  175. package/dist/components/Textarea/styles.css +69 -62
  176. package/dist/components/Textarea/types.d.ts +1 -1
  177. package/dist/components/Textarea/types.d.ts.map +1 -1
  178. package/dist/components/TieredMenu/TieredMenu.vue.d.ts.map +1 -1
  179. package/dist/components/TieredMenu/styles.css +69 -62
  180. package/dist/components/Timeline/Timeline.vue.d.ts.map +1 -1
  181. package/dist/components/Timeline/types.d.ts +1 -1
  182. package/dist/components/Timeline/types.d.ts.map +1 -1
  183. package/dist/components/Toast/Toast.vue.d.ts.map +1 -1
  184. package/dist/components/Toast/index.d.ts +1 -1
  185. package/dist/components/Toast/index.d.ts.map +1 -1
  186. package/dist/components/Toast/toast.d.ts +2 -2
  187. package/dist/components/Toast/toast.d.ts.map +1 -1
  188. package/dist/components/Toast/toastState.d.ts.map +1 -1
  189. package/dist/components/Toast/types.d.ts +1 -1
  190. package/dist/components/Toast/types.d.ts.map +1 -1
  191. package/dist/components/ToggleButton/ToggleButton.vue.d.ts.map +1 -1
  192. package/dist/components/Tooltip/Tooltip.vue.d.ts.map +1 -1
  193. package/dist/components/Tree/Tree.vue.d.ts.map +1 -1
  194. package/dist/components/Tree/TreeNodeItem.vue.d.ts.map +1 -1
  195. package/dist/components/Tree/context.d.ts +2 -2
  196. package/dist/components/Tree/context.d.ts.map +1 -1
  197. package/dist/components/Tree/index.d.ts +1 -1
  198. package/dist/components/Tree/index.d.ts.map +1 -1
  199. package/dist/components/TreeSelect/TreeSelect.vue.d.ts.map +1 -1
  200. package/dist/components/TreeSelect/styles.css +140 -138
  201. package/dist/components/TreeTable/TreeTable.vue.d.ts.map +1 -1
  202. package/dist/components/TreeTable/TreeTableRow.vue.d.ts.map +1 -1
  203. package/dist/components/VirtualScroller/VirtualScroller.vue.d.ts.map +1 -1
  204. package/dist/components/VirtualScroller/index.d.ts +1 -1
  205. package/dist/components/VirtualScroller/index.d.ts.map +1 -1
  206. package/dist/config-provider/style.css +765 -600
  207. package/dist/confirm-dialog/index.js +1 -1
  208. package/dist/confirm-dialog/style.css +777 -613
  209. package/dist/confirm-popup/index.js +1 -1
  210. package/dist/confirm-popup/style.css +632 -473
  211. package/dist/context-menu/style.css +81 -60
  212. package/dist/data-view/index.js +1 -1
  213. package/dist/data-view/style.css +97 -80
  214. package/dist/date-picker/index.js +2 -2
  215. package/dist/date-picker/style.css +200 -161
  216. package/dist/dialog/index.js +1 -1
  217. package/dist/dialog/style.css +760 -597
  218. package/dist/divider/style.css +38 -23
  219. package/dist/dock/style.css +75 -55
  220. package/dist/drawer/style.css +120 -103
  221. package/dist/dropdown/index.js +3 -3
  222. package/dist/dropdown/style.css +96 -80
  223. package/dist/fieldset/style.css +38 -23
  224. package/dist/file-upload/style.css +270 -238
  225. package/dist/flex/style.css +38 -23
  226. package/dist/float-label/style.css +38 -23
  227. package/dist/fluid/style.css +38 -23
  228. package/dist/form/style.css +84 -67
  229. package/dist/gallery/style.css +80 -62
  230. package/dist/grid/index.js +39 -39
  231. package/dist/grid/style.css +38 -23
  232. package/dist/icon/style.css +38 -23
  233. package/dist/icon-field/style.css +38 -23
  234. package/dist/index.d.ts +174 -174
  235. package/dist/index.d.ts.map +1 -1
  236. package/dist/index.js +1028 -976
  237. package/dist/inplace/style.css +38 -23
  238. package/dist/input/index.js +6 -7
  239. package/dist/input/style.css +236 -214
  240. package/dist/input-color/index.js +2 -2
  241. package/dist/input-color/style.css +88 -71
  242. package/dist/input-group/style.css +38 -23
  243. package/dist/input-number/index.js +15 -15
  244. package/dist/input-number/style.css +128 -103
  245. package/dist/input-otp/index.js +1 -1
  246. package/dist/input-otp/style.css +38 -23
  247. package/dist/input-password/index.js +16 -17
  248. package/dist/input-password/style.css +168 -140
  249. package/dist/input-tags/style.css +89 -66
  250. package/dist/knob/style.css +38 -23
  251. package/dist/label/style.css +38 -23
  252. package/dist/layout/index.js +135 -93
  253. package/dist/layout/style.css +408 -332
  254. package/dist/listbox/style.css +99 -74
  255. package/dist/locale/index.d.ts +1 -1
  256. package/dist/locale/index.d.ts.map +1 -1
  257. package/dist/mega-menu/style.css +98 -81
  258. package/dist/menu/style.css +91 -70
  259. package/dist/menubar/style.css +118 -93
  260. package/dist/message/style.css +231 -166
  261. package/dist/meter-group/style.css +74 -57
  262. package/dist/order-list/style.css +38 -23
  263. package/dist/pagination/index.js +1 -1
  264. package/dist/pagination/style.css +97 -80
  265. package/dist/panel/style.css +38 -23
  266. package/dist/pick-list/style.css +38 -23
  267. package/dist/popover/index.js +5 -5
  268. package/dist/popover/style.css +84 -68
  269. package/dist/progress-bar/style.css +38 -23
  270. package/dist/progress-spinner/style.css +38 -23
  271. package/dist/radio/index.js +4 -4
  272. package/dist/radio/style.css +38 -23
  273. package/dist/rating/style.css +38 -23
  274. package/dist/scroll-top/style.css +38 -23
  275. package/dist/scrollbar/style.css +106 -82
  276. package/dist/select/style.css +285 -257
  277. package/dist/select-button/style.css +102 -74
  278. package/dist/shared/Renderable.d.ts.map +1 -1
  279. package/dist/shared/config.d.ts.map +1 -1
  280. package/dist/shared/content.d.ts.map +1 -1
  281. package/dist/shared/overlayHost.d.ts.map +1 -1
  282. package/dist/shared/useModalOverlay.d.ts.map +1 -1
  283. package/dist/shared/vnode.d.ts.map +1 -1
  284. package/dist/sidebar/style.css +78 -61
  285. package/dist/skeleton/style.css +38 -23
  286. package/dist/slider/style.css +149 -118
  287. package/dist/space/style.css +38 -23
  288. package/dist/speed-dial/index.js +1 -1
  289. package/dist/speed-dial/style.css +38 -23
  290. package/dist/split-button/style.css +738 -564
  291. package/dist/splitter/style.css +38 -23
  292. package/dist/stepper/style.css +101 -81
  293. package/dist/styles.css +1 -1
  294. package/dist/switch/index.js +5 -5
  295. package/dist/switch/style.css +120 -76
  296. package/dist/table/index.js +3 -3
  297. package/dist/table/style.css +97 -80
  298. package/dist/tabs/style.css +38 -23
  299. package/dist/tag/style.css +38 -23
  300. package/dist/terminal/style.css +84 -57
  301. package/dist/textarea/index.js +11 -12
  302. package/dist/textarea/style.css +107 -85
  303. package/dist/theme/index.d.ts +5 -5
  304. package/dist/theme/index.d.ts.map +1 -1
  305. package/dist/theme/styles.css +38 -23
  306. package/dist/theme/tokens.d.ts +11 -0
  307. package/dist/theme/tokens.d.ts.map +1 -1
  308. package/dist/theme/useTheme.d.ts.map +1 -1
  309. package/dist/tiered-menu/style.css +107 -85
  310. package/dist/timeline/style.css +38 -23
  311. package/dist/toast/style.css +38 -23
  312. package/dist/toggle-button/style.css +38 -23
  313. package/dist/toolbar/style.css +38 -23
  314. package/dist/tooltip/style.css +38 -23
  315. package/dist/tree/index.js +11 -11
  316. package/dist/tree/style.css +38 -23
  317. package/dist/tree-select/index.js +1 -1
  318. package/dist/tree-select/style.css +171 -154
  319. package/dist/tree-table/style.css +38 -23
  320. package/dist/virtual-scroller/style.css +38 -23
  321. package/package.json +15 -11
package/dist/components/Button/styles.css CHANGED
@@ -1,492 +1,635 @@
1
- .wi-button {
2
- --wi-button-bg: var(--wi-color-primary);
3
- --wi-button-fg: var(--wi-color-on-emphasis);
4
- --wi-button-border: var(--wi-color-primary);
5
- --wi-button-hover-bg: var(--wi-color-primary-hover);
6
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
7
- --wi-button-hover-border: var(--wi-color-primary-hover);
8
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
9
- align-items: center;
10
- background: var(--wi-button-bg);
11
- border: 1px solid var(--wi-button-border);
12
- border-radius: var(--wi-radius-control);
13
- color: var(--wi-button-fg);
14
- cursor: pointer;
15
- display: inline-flex;
16
- flex-direction: row;
17
- font-size: var(--wi-control-font-medium);
18
- font-weight: 600;
19
- gap: var(--wi-space-2);
20
- justify-content: center;
21
- line-height: 1;
22
- min-height: var(--wi-control-height-medium);
23
- padding: 0 var(--wi-button-padding-x-medium);
24
- position: relative;
25
- transition:
26
- background-color var(--wi-motion-fast) var(--wi-motion-ease),
27
- border-color var(--wi-motion-fast) var(--wi-motion-ease),
28
- color var(--wi-motion-fast) var(--wi-motion-ease),
29
- box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
30
- vertical-align: middle;
31
- white-space: nowrap;
32
- }
33
-
34
- .wi-button:hover:not(:disabled) {
35
- background: var(--wi-button-hover-bg);
36
- border-color: var(--wi-button-hover-border);
37
- color: var(--wi-button-hover-fg);
38
- }
39
-
40
- .wi-button:active:not(:disabled) {
41
- background: var(--wi-button-active-bg);
42
- }
43
-
44
- /* Naive-style focus: soft glow, not outline-offset ring */
45
- .wi-button:focus {
46
- outline: none;
47
- }
48
-
49
- .wi-button:focus-visible {
50
- box-shadow: var(--wi-focus-shadow);
51
- outline: none;
52
- }
53
-
54
- .wi-button--primary {
55
- --wi-button-bg: var(--wi-color-primary);
56
- --wi-button-fg: var(--wi-color-on-emphasis);
57
- --wi-button-border: var(--wi-color-primary);
58
- --wi-button-hover-bg: var(--wi-color-primary-hover);
59
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
60
- --wi-button-hover-border: var(--wi-color-primary-hover);
61
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
62
- }
63
-
64
- .wi-button--secondary {
65
- --wi-button-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, var(--wi-color-surface));
66
- --wi-button-fg: var(--wi-color-text);
67
- --wi-button-border: transparent;
68
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 24%, var(--wi-color-surface));
69
- --wi-button-hover-fg: var(--wi-color-text);
70
- --wi-button-hover-border: transparent;
71
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 32%, var(--wi-color-surface));
72
- }
73
-
74
- .wi-button--success {
75
- --wi-button-bg: var(--wi-color-success);
76
- --wi-button-fg: var(--wi-color-on-emphasis);
77
- --wi-button-border: var(--wi-color-success);
78
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 85%, black);
79
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
80
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-success) 85%, black);
81
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-success) 75%, black);
82
- }
83
-
84
- .wi-button--info {
85
- --wi-button-bg: var(--wi-color-info);
86
- --wi-button-fg: var(--wi-color-on-emphasis);
87
- --wi-button-border: var(--wi-color-info);
88
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
89
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
90
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-info) 85%, black);
91
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
92
- }
93
-
94
- .wi-button--warn {
95
- --wi-button-bg: var(--wi-color-warn);
96
- --wi-button-fg: var(--wi-color-on-emphasis);
97
- --wi-button-border: var(--wi-color-warn);
98
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
99
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
100
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-warn) 85%, black);
101
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
102
- }
103
-
104
- .wi-button--help {
105
- --wi-button-bg: var(--wi-color-help);
106
- --wi-button-fg: var(--wi-color-on-emphasis);
107
- --wi-button-border: var(--wi-color-help);
108
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
109
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
110
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-help) 85%, black);
111
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
112
- }
113
-
114
- .wi-button--danger {
115
- --wi-button-bg: var(--wi-color-danger);
116
- --wi-button-fg: var(--wi-color-on-emphasis);
117
- --wi-button-border: var(--wi-color-danger);
118
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
119
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
120
- --wi-button-hover-border: color-mix(in srgb, var(--wi-color-danger) 85%, black);
121
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-danger) 75%, black);
122
- }
123
-
124
- .wi-button--contrast {
125
- --wi-button-bg: var(--wi-color-contrast);
126
- --wi-button-fg: var(--wi-color-contrast-fg);
127
- --wi-button-border: var(--wi-color-contrast);
128
- --wi-button-hover-bg: var(--wi-color-contrast-hover);
129
- --wi-button-hover-fg: var(--wi-color-contrast-fg);
130
- --wi-button-hover-border: var(--wi-color-contrast-hover);
131
- --wi-button-active-bg: var(--wi-color-contrast-active);
132
- }
133
-
134
- .wi-button--outlined {
135
- --wi-button-bg: transparent;
136
- --wi-button-fg: var(--wi-button-border);
137
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 10%, transparent);
138
- --wi-button-hover-fg: var(--wi-button-border);
139
- --wi-button-hover-border: var(--wi-button-border);
140
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 16%, transparent);
141
- }
142
-
143
- .wi-button--secondary.wi-button--outlined {
144
- --wi-button-border: var(--wi-color-border);
145
- --wi-button-fg: var(--wi-color-text);
146
- --wi-button-hover-fg: var(--wi-color-text);
147
- }
148
-
149
- .wi-button--text,
150
- .wi-button--link {
151
- --wi-button-bg: transparent;
152
- --wi-button-border: transparent;
153
- --wi-button-fg: var(--wi-color-primary);
154
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
155
- --wi-button-hover-fg: var(--wi-color-primary);
156
- --wi-button-hover-border: transparent;
157
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 16%, transparent);
158
- }
159
-
160
- .wi-button--secondary.wi-button--text,
161
- .wi-button--secondary.wi-button--link {
162
- --wi-button-fg: var(--wi-color-text-muted);
163
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
164
- --wi-button-hover-fg: var(--wi-color-text);
165
- }
166
-
167
- .wi-button--success.wi-button--text,
168
- .wi-button--success.wi-button--link,
169
- .wi-button--success.wi-button--outlined {
170
- --wi-button-fg: var(--wi-color-success);
171
- --wi-button-border: var(--wi-color-success);
172
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 10%, transparent);
173
- --wi-button-hover-fg: var(--wi-color-success);
174
- --wi-button-hover-border: var(--wi-color-success);
175
- }
176
-
177
- .wi-button--info.wi-button--text,
178
- .wi-button--info.wi-button--link,
179
- .wi-button--info.wi-button--outlined {
180
- --wi-button-fg: var(--wi-color-info);
181
- --wi-button-border: var(--wi-color-info);
182
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 10%, transparent);
183
- --wi-button-hover-fg: var(--wi-color-info);
184
- --wi-button-hover-border: var(--wi-color-info);
185
- }
186
-
187
- .wi-button--warn.wi-button--text,
188
- .wi-button--warn.wi-button--link,
189
- .wi-button--warn.wi-button--outlined {
190
- --wi-button-fg: var(--wi-color-warn);
191
- --wi-button-border: var(--wi-color-warn);
192
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 10%, transparent);
193
- --wi-button-hover-fg: var(--wi-color-warn);
194
- --wi-button-hover-border: var(--wi-color-warn);
195
- }
196
-
197
- .wi-button--help.wi-button--text,
198
- .wi-button--help.wi-button--link,
199
- .wi-button--help.wi-button--outlined {
200
- --wi-button-fg: var(--wi-color-help);
201
- --wi-button-border: var(--wi-color-help);
202
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 10%, transparent);
203
- --wi-button-hover-fg: var(--wi-color-help);
204
- --wi-button-hover-border: var(--wi-color-help);
205
- }
206
-
207
- .wi-button--danger.wi-button--text,
208
- .wi-button--danger.wi-button--link,
209
- .wi-button--danger.wi-button--outlined {
210
- --wi-button-fg: var(--wi-color-danger);
211
- --wi-button-border: var(--wi-color-danger);
212
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 10%, transparent);
213
- --wi-button-hover-fg: var(--wi-color-danger);
214
- --wi-button-hover-border: var(--wi-color-danger);
215
- }
216
-
217
- .wi-button--contrast.wi-button--text,
218
- .wi-button--contrast.wi-button--link,
219
- .wi-button--contrast.wi-button--outlined {
220
- --wi-button-fg: var(--wi-color-contrast);
221
- --wi-button-border: var(--wi-color-contrast);
222
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-contrast) 10%, transparent);
223
- --wi-button-hover-fg: var(--wi-color-contrast);
224
- --wi-button-hover-border: var(--wi-color-contrast);
225
- }
226
-
227
- .wi-button--plain.wi-button--text,
228
- .wi-button--plain.wi-button--outlined,
229
- .wi-button--plain.wi-button--link {
230
- --wi-button-fg: var(--wi-color-text-muted);
231
- --wi-button-border: var(--wi-color-border);
232
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
233
- --wi-button-hover-fg: var(--wi-color-text);
234
- --wi-button-hover-border: var(--wi-color-border);
235
- }
236
-
237
- .wi-button--link {
238
- height: auto;
239
- min-height: 0;
240
- padding: 0;
241
- }
242
-
243
- .wi-button--link:hover:not(:disabled) {
244
- text-decoration: underline;
245
- }
246
-
247
- .wi-button--ghost {
248
- --wi-button-bg: transparent;
249
- --wi-button-fg: var(--wi-button-border);
250
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 12%, transparent);
251
- --wi-button-hover-fg: var(--wi-button-border);
252
- --wi-button-hover-border: var(--wi-button-border);
253
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 18%, transparent);
254
- }
255
-
256
- .wi-button--secondary.wi-button--ghost {
257
- --wi-button-border: var(--wi-color-border);
258
- --wi-button-fg: var(--wi-color-text);
259
- --wi-button-hover-fg: var(--wi-color-text);
260
- }
261
-
262
- .wi-button--success.wi-button--ghost {
263
- --wi-button-fg: var(--wi-color-success);
264
- --wi-button-border: var(--wi-color-success);
265
- }
266
-
267
- .wi-button--info.wi-button--ghost {
268
- --wi-button-fg: var(--wi-color-info);
269
- --wi-button-border: var(--wi-color-info);
1
+ .wi-button {
2
+ --wi-button-padding-x-small: var(--wi-control-padding-x-small);
3
+ --wi-button-padding-x-medium: calc(
4
+ var(--wi-control-padding-x-medium) + var(--wi-space-1)
5
+ );
6
+ --wi-button-padding-x-large: calc(
7
+ var(--wi-control-padding-x-large) + var(--wi-space-1)
8
+ );
9
+ --wi-button-icon-stack-min-height: 3.25rem;
10
+ --wi-button-badge-min-width: 1.15rem;
11
+ --wi-button-spinner-size: 0.875rem;
12
+ --wi-button-bg: var(--wi-color-primary);
13
+ --wi-button-fg: var(--wi-color-on-emphasis);
14
+ --wi-button-border: var(--wi-color-primary);
15
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
16
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
17
+ --wi-button-hover-border: var(--wi-color-primary-hover);
18
+ --wi-button-active-bg: color-mix(
19
+ in srgb,
20
+ var(--wi-color-primary) 82%,
21
+ black
22
+ );
23
+ align-items: center;
24
+ background: var(--wi-button-bg);
25
+ border: 1px solid var(--wi-button-border);
26
+ border-radius: var(--wi-radius-control);
27
+ color: var(--wi-button-fg);
28
+ cursor: pointer;
29
+ display: inline-flex;
30
+ flex-direction: row;
31
+ font-size: var(--wi-control-font-medium);
32
+ font-weight: 600;
33
+ gap: var(--wi-space-2);
34
+ justify-content: center;
35
+ line-height: 1;
36
+ min-height: var(--wi-control-height-medium);
37
+ padding: 0 var(--wi-button-padding-x-medium);
38
+ position: relative;
39
+ transition:
40
+ background-color var(--wi-motion-fast) var(--wi-motion-ease),
41
+ border-color var(--wi-motion-fast) var(--wi-motion-ease),
42
+ color var(--wi-motion-fast) var(--wi-motion-ease),
43
+ box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
44
+ vertical-align: middle;
45
+ white-space: nowrap;
46
+ }
47
+
48
+ .wi-button:hover:not(:disabled) {
49
+ background: var(--wi-button-hover-bg);
50
+ border-color: var(--wi-button-hover-border);
51
+ color: var(--wi-button-hover-fg);
52
+ }
53
+
54
+ .wi-button:active:not(:disabled) {
55
+ background: var(--wi-button-active-bg);
56
+ }
57
+
58
+ /* Naive-style focus: soft glow, not outline-offset ring */
59
+ .wi-button:focus {
60
+ outline: none;
61
+ }
62
+
63
+ .wi-button:focus-visible {
64
+ box-shadow: var(--wi-focus-shadow);
65
+ outline: none;
66
+ }
67
+
68
+ .wi-button--primary {
69
+ --wi-button-bg: var(--wi-color-primary);
70
+ --wi-button-fg: var(--wi-color-on-emphasis);
71
+ --wi-button-border: var(--wi-color-primary);
72
+ --wi-button-hover-bg: var(--wi-color-primary-hover);
73
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
74
+ --wi-button-hover-border: var(--wi-color-primary-hover);
75
+ --wi-button-active-bg: color-mix(
76
+ in srgb,
77
+ var(--wi-color-primary) 82%,
78
+ black
79
+ );
80
+ }
81
+
82
+ .wi-button--secondary {
83
+ --wi-button-bg: color-mix(
84
+ in srgb,
85
+ var(--wi-color-text-muted) 16%,
86
+ var(--wi-color-surface)
87
+ );
88
+ --wi-button-fg: var(--wi-color-text);
89
+ --wi-button-border: transparent;
90
+ --wi-button-hover-bg: color-mix(
91
+ in srgb,
92
+ var(--wi-color-text-muted) 24%,
93
+ var(--wi-color-surface)
94
+ );
95
+ --wi-button-hover-fg: var(--wi-color-text);
96
+ --wi-button-hover-border: transparent;
97
+ --wi-button-active-bg: color-mix(
98
+ in srgb,
99
+ var(--wi-color-text-muted) 32%,
100
+ var(--wi-color-surface)
101
+ );
102
+ }
103
+
104
+ .wi-button--success {
105
+ --wi-button-bg: var(--wi-color-success);
106
+ --wi-button-fg: var(--wi-color-on-emphasis);
107
+ --wi-button-border: var(--wi-color-success);
108
+ --wi-button-hover-bg: color-mix(
109
+ in srgb,
110
+ var(--wi-color-success) 85%,
111
+ black
112
+ );
113
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
114
+ --wi-button-hover-border: color-mix(
115
+ in srgb,
116
+ var(--wi-color-success) 85%,
117
+ black
118
+ );
119
+ --wi-button-active-bg: color-mix(
120
+ in srgb,
121
+ var(--wi-color-success) 75%,
122
+ black
123
+ );
124
+ }
125
+
126
+ .wi-button--info {
127
+ --wi-button-bg: var(--wi-color-info);
128
+ --wi-button-fg: var(--wi-color-on-emphasis);
129
+ --wi-button-border: var(--wi-color-info);
130
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
131
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
132
+ --wi-button-hover-border: color-mix(
133
+ in srgb,
134
+ var(--wi-color-info) 85%,
135
+ black
136
+ );
137
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
138
+ }
139
+
140
+ .wi-button--warn {
141
+ --wi-button-bg: var(--wi-color-warn);
142
+ --wi-button-fg: var(--wi-color-on-emphasis);
143
+ --wi-button-border: var(--wi-color-warn);
144
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
145
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
146
+ --wi-button-hover-border: color-mix(
147
+ in srgb,
148
+ var(--wi-color-warn) 85%,
149
+ black
150
+ );
151
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
152
+ }
153
+
154
+ .wi-button--help {
155
+ --wi-button-bg: var(--wi-color-help);
156
+ --wi-button-fg: var(--wi-color-on-emphasis);
157
+ --wi-button-border: var(--wi-color-help);
158
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
159
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
160
+ --wi-button-hover-border: color-mix(
161
+ in srgb,
162
+ var(--wi-color-help) 85%,
163
+ black
164
+ );
165
+ --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
166
+ }
167
+
168
+ .wi-button--danger {
169
+ --wi-button-bg: var(--wi-color-danger);
170
+ --wi-button-fg: var(--wi-color-on-emphasis);
171
+ --wi-button-border: var(--wi-color-danger);
172
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
173
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
174
+ --wi-button-hover-border: color-mix(
175
+ in srgb,
176
+ var(--wi-color-danger) 85%,
177
+ black
178
+ );
179
+ --wi-button-active-bg: color-mix(
180
+ in srgb,
181
+ var(--wi-color-danger) 75%,
182
+ black
183
+ );
184
+ }
185
+
186
+ .wi-button--contrast {
187
+ --wi-button-bg: var(--wi-color-contrast);
188
+ --wi-button-fg: var(--wi-color-contrast-fg);
189
+ --wi-button-border: var(--wi-color-contrast);
190
+ --wi-button-hover-bg: var(--wi-color-contrast-hover);
191
+ --wi-button-hover-fg: var(--wi-color-contrast-fg);
192
+ --wi-button-hover-border: var(--wi-color-contrast-hover);
193
+ --wi-button-active-bg: var(--wi-color-contrast-active);
194
+ }
195
+
196
+ .wi-button--outlined {
197
+ --wi-button-bg: transparent;
198
+ --wi-button-fg: var(--wi-button-border);
199
+ --wi-button-hover-bg: color-mix(
200
+ in srgb,
201
+ var(--wi-button-border) 10%,
202
+ transparent
203
+ );
204
+ --wi-button-hover-fg: var(--wi-button-border);
205
+ --wi-button-hover-border: var(--wi-button-border);
206
+ --wi-button-active-bg: color-mix(
207
+ in srgb,
208
+ var(--wi-button-border) 16%,
209
+ transparent
210
+ );
211
+ }
212
+
213
+ .wi-button--secondary.wi-button--outlined {
214
+ --wi-button-border: var(--wi-color-border);
215
+ --wi-button-fg: var(--wi-color-text);
216
+ --wi-button-hover-fg: var(--wi-color-text);
217
+ }
218
+
219
+ .wi-button--text,
220
+ .wi-button--link {
221
+ --wi-button-bg: transparent;
222
+ --wi-button-border: transparent;
223
+ --wi-button-fg: var(--wi-color-primary);
224
+ --wi-button-hover-bg: color-mix(
225
+ in srgb,
226
+ var(--wi-color-primary) 10%,
227
+ transparent
228
+ );
229
+ --wi-button-hover-fg: var(--wi-color-primary);
230
+ --wi-button-hover-border: transparent;
231
+ --wi-button-active-bg: color-mix(
232
+ in srgb,
233
+ var(--wi-color-primary) 16%,
234
+ transparent
235
+ );
236
+ }
237
+
238
+ .wi-button--secondary.wi-button--text,
239
+ .wi-button--secondary.wi-button--link {
240
+ --wi-button-fg: var(--wi-color-text-muted);
241
+ --wi-button-hover-bg: color-mix(
242
+ in srgb,
243
+ var(--wi-color-text-muted) 12%,
244
+ transparent
245
+ );
246
+ --wi-button-hover-fg: var(--wi-color-text);
247
+ }
248
+
249
+ .wi-button--success.wi-button--text,
250
+ .wi-button--success.wi-button--link,
251
+ .wi-button--success.wi-button--outlined {
252
+ --wi-button-fg: var(--wi-color-success);
253
+ --wi-button-border: var(--wi-color-success);
254
+ --wi-button-hover-bg: color-mix(
255
+ in srgb,
256
+ var(--wi-color-success) 10%,
257
+ transparent
258
+ );
259
+ --wi-button-hover-fg: var(--wi-color-success);
260
+ --wi-button-hover-border: var(--wi-color-success);
261
+ }
262
+
263
+ .wi-button--info.wi-button--text,
264
+ .wi-button--info.wi-button--link,
265
+ .wi-button--info.wi-button--outlined {
266
+ --wi-button-fg: var(--wi-color-info);
267
+ --wi-button-border: var(--wi-color-info);
268
+ --wi-button-hover-bg: color-mix(
269
+ in srgb,
270
+ var(--wi-color-info) 10%,
271
+ transparent
272
+ );
273
+ --wi-button-hover-fg: var(--wi-color-info);
274
+ --wi-button-hover-border: var(--wi-color-info);
275
+ }
276
+
277
+ .wi-button--warn.wi-button--text,
278
+ .wi-button--warn.wi-button--link,
279
+ .wi-button--warn.wi-button--outlined {
280
+ --wi-button-fg: var(--wi-color-warn);
281
+ --wi-button-border: var(--wi-color-warn);
282
+ --wi-button-hover-bg: color-mix(
283
+ in srgb,
284
+ var(--wi-color-warn) 10%,
285
+ transparent
286
+ );
287
+ --wi-button-hover-fg: var(--wi-color-warn);
288
+ --wi-button-hover-border: var(--wi-color-warn);
289
+ }
290
+
291
+ .wi-button--help.wi-button--text,
292
+ .wi-button--help.wi-button--link,
293
+ .wi-button--help.wi-button--outlined {
294
+ --wi-button-fg: var(--wi-color-help);
295
+ --wi-button-border: var(--wi-color-help);
296
+ --wi-button-hover-bg: color-mix(
297
+ in srgb,
298
+ var(--wi-color-help) 10%,
299
+ transparent
300
+ );
301
+ --wi-button-hover-fg: var(--wi-color-help);
302
+ --wi-button-hover-border: var(--wi-color-help);
303
+ }
304
+
305
+ .wi-button--danger.wi-button--text,
306
+ .wi-button--danger.wi-button--link,
307
+ .wi-button--danger.wi-button--outlined {
308
+ --wi-button-fg: var(--wi-color-danger);
309
+ --wi-button-border: var(--wi-color-danger);
310
+ --wi-button-hover-bg: color-mix(
311
+ in srgb,
312
+ var(--wi-color-danger) 10%,
313
+ transparent
314
+ );
315
+ --wi-button-hover-fg: var(--wi-color-danger);
316
+ --wi-button-hover-border: var(--wi-color-danger);
317
+ }
318
+
319
+ .wi-button--contrast.wi-button--text,
320
+ .wi-button--contrast.wi-button--link,
321
+ .wi-button--contrast.wi-button--outlined {
322
+ --wi-button-fg: var(--wi-color-contrast);
323
+ --wi-button-border: var(--wi-color-contrast);
324
+ --wi-button-hover-bg: color-mix(
325
+ in srgb,
326
+ var(--wi-color-contrast) 10%,
327
+ transparent
328
+ );
329
+ --wi-button-hover-fg: var(--wi-color-contrast);
330
+ --wi-button-hover-border: var(--wi-color-contrast);
331
+ }
332
+
333
+ .wi-button--plain.wi-button--text,
334
+ .wi-button--plain.wi-button--outlined,
335
+ .wi-button--plain.wi-button--link {
336
+ --wi-button-fg: var(--wi-color-text-muted);
337
+ --wi-button-border: var(--wi-color-border);
338
+ --wi-button-hover-bg: color-mix(
339
+ in srgb,
340
+ var(--wi-color-text-muted) 12%,
341
+ transparent
342
+ );
343
+ --wi-button-hover-fg: var(--wi-color-text);
344
+ --wi-button-hover-border: var(--wi-color-border);
345
+ }
346
+
347
+ .wi-button--link {
348
+ height: auto;
349
+ min-height: 0;
350
+ padding: 0;
351
+ }
352
+
353
+ .wi-button--link:hover:not(:disabled) {
354
+ text-decoration: underline;
355
+ }
356
+
357
+ .wi-button--ghost {
358
+ --wi-button-bg: transparent;
359
+ --wi-button-fg: var(--wi-button-border);
360
+ --wi-button-hover-bg: color-mix(
361
+ in srgb,
362
+ var(--wi-button-border) 12%,
363
+ transparent
364
+ );
365
+ --wi-button-hover-fg: var(--wi-button-border);
366
+ --wi-button-hover-border: var(--wi-button-border);
367
+ --wi-button-active-bg: color-mix(
368
+ in srgb,
369
+ var(--wi-button-border) 18%,
370
+ transparent
371
+ );
372
+ }
373
+
374
+ .wi-button--secondary.wi-button--ghost {
375
+ --wi-button-border: var(--wi-color-border);
376
+ --wi-button-fg: var(--wi-color-text);
377
+ --wi-button-hover-fg: var(--wi-color-text);
378
+ }
379
+
380
+ .wi-button--success.wi-button--ghost {
381
+ --wi-button-fg: var(--wi-color-success);
382
+ --wi-button-border: var(--wi-color-success);
383
+ }
384
+
385
+ .wi-button--info.wi-button--ghost {
386
+ --wi-button-fg: var(--wi-color-info);
387
+ --wi-button-border: var(--wi-color-info);
388
+ }
389
+
390
+ .wi-button--warn.wi-button--ghost {
391
+ --wi-button-fg: var(--wi-color-warn);
392
+ --wi-button-border: var(--wi-color-warn);
393
+ }
394
+
395
+ .wi-button--help.wi-button--ghost {
396
+ --wi-button-fg: var(--wi-color-help);
397
+ --wi-button-border: var(--wi-color-help);
398
+ }
399
+
400
+ .wi-button--danger.wi-button--ghost {
401
+ --wi-button-fg: var(--wi-color-danger);
402
+ --wi-button-border: var(--wi-color-danger);
270
403
  }
271
-
272
- .wi-button--warn.wi-button--ghost {
273
- --wi-button-fg: var(--wi-color-warn);
274
- --wi-button-border: var(--wi-color-warn);
275
- }
276
-
277
- .wi-button--help.wi-button--ghost {
278
- --wi-button-fg: var(--wi-color-help);
279
- --wi-button-border: var(--wi-color-help);
280
- }
281
-
282
- .wi-button--danger.wi-button--ghost {
283
- --wi-button-fg: var(--wi-color-danger);
284
- --wi-button-border: var(--wi-color-danger);
285
- }
286
-
287
- .wi-button--contrast.wi-button--ghost {
288
- --wi-button-fg: var(--wi-color-contrast);
289
- --wi-button-border: var(--wi-color-contrast);
404
+
405
+ .wi-button--contrast.wi-button--ghost {
406
+ --wi-button-fg: var(--wi-color-contrast);
407
+ --wi-button-border: var(--wi-color-contrast);
290
408
  }
291
409
 
292
- .wi-button--quaternary {
293
- --wi-button-bg: transparent;
294
- --wi-button-border: transparent;
295
- --wi-button-fg: var(--wi-color-text);
296
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 10%, transparent);
297
- --wi-button-hover-fg: var(--wi-color-text);
298
- --wi-button-hover-border: transparent;
299
- --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, transparent);
410
+ .wi-button--quaternary {
411
+ --wi-button-bg: transparent;
412
+ --wi-button-border: transparent;
413
+ --wi-button-fg: var(--wi-color-text);
414
+ --wi-button-hover-bg: color-mix(
415
+ in srgb,
416
+ var(--wi-color-text-muted) 10%,
417
+ transparent
418
+ );
419
+ --wi-button-hover-fg: var(--wi-color-text);
420
+ --wi-button-hover-border: transparent;
421
+ --wi-button-active-bg: color-mix(
422
+ in srgb,
423
+ var(--wi-color-text-muted) 16%,
424
+ transparent
425
+ );
300
426
  }
301
427
 
302
- .wi-button--custom {
303
- --wi-button-bg: var(--wi-button-color);
304
- --wi-button-fg: var(--wi-color-on-emphasis);
305
- --wi-button-border: var(--wi-button-color);
306
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
307
- --wi-button-hover-fg: var(--wi-color-on-emphasis);
308
- --wi-button-hover-border: color-mix(in srgb, var(--wi-button-color) 85%, black);
309
- --wi-button-active-bg: color-mix(in srgb, var(--wi-button-color) 75%, black);
428
+ .wi-button--custom {
429
+ --wi-button-bg: var(--wi-button-color);
430
+ --wi-button-fg: var(--wi-color-on-emphasis);
431
+ --wi-button-border: var(--wi-button-color);
432
+ --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
433
+ --wi-button-hover-fg: var(--wi-color-on-emphasis);
434
+ --wi-button-hover-border: color-mix(
435
+ in srgb,
436
+ var(--wi-button-color) 85%,
437
+ black
438
+ );
439
+ --wi-button-active-bg: color-mix(
440
+ in srgb,
441
+ var(--wi-button-color) 75%,
442
+ black
443
+ );
310
444
  }
311
445
 
312
- .wi-button--custom.wi-button--outlined,
313
- .wi-button--custom.wi-button--ghost,
314
- .wi-button--custom.wi-button--text,
315
- .wi-button--custom.wi-button--quaternary,
316
- .wi-button--custom.wi-button--link {
317
- --wi-button-bg: transparent;
318
- --wi-button-fg: var(--wi-button-color);
319
- --wi-button-border: var(--wi-button-color);
320
- --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 12%, transparent);
321
- --wi-button-hover-fg: var(--wi-button-color);
322
- --wi-button-hover-border: var(--wi-button-color);
446
+ .wi-button--custom.wi-button--outlined,
447
+ .wi-button--custom.wi-button--ghost,
448
+ .wi-button--custom.wi-button--text,
449
+ .wi-button--custom.wi-button--quaternary,
450
+ .wi-button--custom.wi-button--link {
451
+ --wi-button-bg: transparent;
452
+ --wi-button-fg: var(--wi-button-color);
453
+ --wi-button-border: var(--wi-button-color);
454
+ --wi-button-hover-bg: color-mix(
455
+ in srgb,
456
+ var(--wi-button-color) 12%,
457
+ transparent
458
+ );
459
+ --wi-button-hover-fg: var(--wi-button-color);
460
+ --wi-button-hover-border: var(--wi-button-color);
323
461
  }
324
462
 
325
- .wi-button--custom.wi-button--text,
326
- .wi-button--custom.wi-button--quaternary,
327
- .wi-button--custom.wi-button--link {
328
- --wi-button-border: transparent;
329
- --wi-button-hover-border: transparent;
463
+ .wi-button--custom.wi-button--text,
464
+ .wi-button--custom.wi-button--quaternary,
465
+ .wi-button--custom.wi-button--link {
466
+ --wi-button-border: transparent;
467
+ --wi-button-hover-border: transparent;
330
468
  }
331
469
 
332
- .wi-button-group {
333
- display: inline-flex;
334
- vertical-align: middle;
470
+ .wi-button-group {
471
+ display: inline-flex;
472
+ vertical-align: middle;
335
473
  }
336
474
 
337
- .wi-button-group--fluid {
338
- display: flex;
339
- width: 100%;
475
+ .wi-button-group--fluid {
476
+ display: flex;
477
+ width: 100%;
340
478
  }
341
479
 
342
- .wi-button-group--fluid > .wi-button {
343
- flex: 1;
480
+ .wi-button-group--fluid > .wi-button {
481
+ flex: 1;
344
482
  }
345
483
 
346
- .wi-button-group > .wi-button {
347
- border-radius: 0;
348
- margin: 0;
484
+ .wi-button-group > .wi-button {
485
+ border-radius: 0;
486
+ margin: 0;
349
487
  }
350
488
 
351
- .wi-button-group > .wi-button + .wi-button {
352
- margin-left: -1px;
489
+ .wi-button-group > .wi-button + .wi-button {
490
+ margin-left: -1px;
353
491
  }
354
492
 
355
- .wi-button-group > .wi-button:first-child {
356
- border-top-left-radius: var(--wi-radius-md);
357
- border-bottom-left-radius: var(--wi-radius-md);
493
+ .wi-button-group > .wi-button:first-child {
494
+ border-top-left-radius: var(--wi-radius-md);
495
+ border-bottom-left-radius: var(--wi-radius-md);
358
496
  }
359
497
 
360
- .wi-button-group > .wi-button:last-child {
361
- border-top-right-radius: var(--wi-radius-md);
362
- border-bottom-right-radius: var(--wi-radius-md);
498
+ .wi-button-group > .wi-button:last-child {
499
+ border-top-right-radius: var(--wi-radius-md);
500
+ border-bottom-right-radius: var(--wi-radius-md);
363
501
  }
364
502
 
365
- .wi-button--raised {
366
- box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--wi-color-text) 14%, transparent);
503
+ .wi-button--raised {
504
+ box-shadow: 0 0.25rem 0.75rem
505
+ color-mix(in srgb, var(--wi-color-text) 14%, transparent);
367
506
  }
368
507
 
369
- .wi-button--rounded {
370
- border-radius: var(--wi-radius-full);
508
+ .wi-button--rounded {
509
+ border-radius: var(--wi-radius-full);
371
510
  }
372
511
 
373
- .wi-button--icon-only {
374
- gap: 0;
375
- min-width: var(--wi-control-height-medium);
376
- padding: 0;
377
- width: var(--wi-control-height-medium);
512
+ .wi-button--icon-only {
513
+ gap: 0;
514
+ min-width: var(--wi-control-height-medium);
515
+ padding: 0;
516
+ width: var(--wi-control-height-medium);
378
517
  }
379
518
 
380
- .wi-button--icon-only.wi-button--small {
381
- min-width: var(--wi-control-height-small);
382
- width: var(--wi-control-height-small);
519
+ .wi-button--icon-only.wi-button--small {
520
+ min-width: var(--wi-control-height-small);
521
+ width: var(--wi-control-height-small);
383
522
  }
384
523
 
385
- .wi-button--icon-only.wi-button--large {
386
- min-width: var(--wi-control-height-large);
387
- width: var(--wi-control-height-large);
524
+ .wi-button--icon-only.wi-button--large {
525
+ min-width: var(--wi-control-height-large);
526
+ width: var(--wi-control-height-large);
388
527
  }
389
528
 
390
- .wi-button--icon-right {
391
- flex-direction: row-reverse;
529
+ .wi-button--icon-right {
530
+ flex-direction: row-reverse;
392
531
  }
393
532
 
394
- .wi-button--icon-top {
395
- flex-direction: column;
396
- min-height: 3.25rem;
397
- padding-block: var(--wi-space-2);
533
+ .wi-button--icon-top {
534
+ flex-direction: column;
535
+ min-height: var(--wi-button-icon-stack-min-height);
536
+ padding-block: var(--wi-space-2);
398
537
  }
399
538
 
400
- .wi-button--icon-bottom {
401
- flex-direction: column-reverse;
402
- min-height: 3.25rem;
403
- padding-block: var(--wi-space-2);
539
+ .wi-button--icon-bottom {
540
+ flex-direction: column-reverse;
541
+ min-height: var(--wi-button-icon-stack-min-height);
542
+ padding-block: var(--wi-space-2);
404
543
  }
405
544
 
406
- .wi-button--fluid {
407
- display: flex;
408
- width: 100%;
545
+ .wi-button--fluid {
546
+ display: flex;
547
+ width: 100%;
409
548
  }
410
549
 
411
- .wi-button--small {
412
- font-size: var(--wi-control-font-small);
413
- min-height: var(--wi-control-height-small);
414
- padding: 0 var(--wi-button-padding-x-small);
550
+ .wi-button--small {
551
+ font-size: var(--wi-control-font-small);
552
+ min-height: var(--wi-control-height-small);
553
+ padding: 0 var(--wi-button-padding-x-small);
415
554
  }
416
555
 
417
- .wi-button--large {
418
- font-size: var(--wi-control-font-large);
419
- min-height: var(--wi-control-height-large);
420
- padding: 0 var(--wi-button-padding-x-large);
556
+ .wi-button--large {
557
+ font-size: var(--wi-control-font-large);
558
+ min-height: var(--wi-control-height-large);
559
+ padding: 0 var(--wi-button-padding-x-large);
421
560
  }
422
561
 
423
- .wi-button__icon,
424
- .wi-button__label {
425
- align-items: center;
426
- display: inline-flex;
427
- justify-content: center;
562
+ .wi-button__icon,
563
+ .wi-button__label {
564
+ align-items: center;
565
+ display: inline-flex;
566
+ justify-content: center;
428
567
  }
429
568
 
430
- .wi-button__icon {
431
- flex: 0 0 auto;
569
+ .wi-button__icon {
570
+ flex: 0 0 auto;
432
571
  }
433
572
 
434
- .wi-button__badge {
435
- align-items: center;
436
- background: var(--wi-color-contrast);
437
- border-radius: var(--wi-radius-full);
438
- color: var(--wi-color-contrast-fg);
439
- display: inline-flex;
440
- font-size: 0.65rem;
441
- font-weight: 700;
442
- justify-content: center;
443
- line-height: 1;
444
- margin-inline-start: var(--wi-space-1);
445
- min-width: 1.15rem;
446
- padding: 0.2rem 0.35rem;
573
+ .wi-button__badge {
574
+ align-items: center;
575
+ background: var(--wi-color-contrast);
576
+ border-radius: var(--wi-radius-full);
577
+ color: var(--wi-color-contrast-fg);
578
+ display: inline-flex;
579
+ font-size: var(--wi-font-size-xs);
580
+ font-weight: 700;
581
+ justify-content: center;
582
+ line-height: 1;
583
+ margin-inline-start: var(--wi-space-1);
584
+ min-width: var(--wi-button-badge-min-width);
585
+ padding: var(--wi-space-1) var(--wi-space-2);
447
586
  }
448
587
 
449
- .wi-button__badge--secondary {
450
- background: color-mix(in srgb, var(--wi-color-text-muted) 25%, var(--wi-color-surface));
451
- color: var(--wi-color-text);
588
+ .wi-button__badge--secondary {
589
+ background: color-mix(
590
+ in srgb,
591
+ var(--wi-color-text-muted) 25%,
592
+ var(--wi-color-surface)
593
+ );
594
+ color: var(--wi-color-text);
452
595
  }
453
596
 
454
- .wi-button__badge--success {
455
- background: var(--wi-color-success);
456
- color: var(--wi-color-on-emphasis);
597
+ .wi-button__badge--success {
598
+ background: var(--wi-color-success);
599
+ color: var(--wi-color-on-emphasis);
457
600
  }
458
601
 
459
- .wi-button__badge--info {
460
- background: var(--wi-color-info);
461
- color: var(--wi-color-on-emphasis);
602
+ .wi-button__badge--info {
603
+ background: var(--wi-color-info);
604
+ color: var(--wi-color-on-emphasis);
462
605
  }
463
606
 
464
- .wi-button__badge--warn {
465
- background: var(--wi-color-warn);
466
- color: var(--wi-color-on-emphasis);
607
+ .wi-button__badge--warn {
608
+ background: var(--wi-color-warn);
609
+ color: var(--wi-color-on-emphasis);
467
610
  }
468
611
 
469
- .wi-button__badge--danger {
470
- background: var(--wi-color-danger);
471
- color: var(--wi-color-on-emphasis);
612
+ .wi-button__badge--danger {
613
+ background: var(--wi-color-danger);
614
+ color: var(--wi-color-on-emphasis);
472
615
  }
473
616
 
474
- .wi-button__badge--contrast {
475
- background: var(--wi-color-contrast);
476
- color: var(--wi-color-contrast-fg);
617
+ .wi-button__badge--contrast {
618
+ background: var(--wi-color-contrast);
619
+ color: var(--wi-color-contrast-fg);
477
620
  }
478
621
 
479
- .wi-button__spinner {
480
- animation: wi-button-spin 700ms linear infinite;
481
- border: 2px solid currentColor;
482
- border-right-color: transparent;
483
- border-radius: var(--wi-radius-full);
484
- height: 0.875rem;
485
- width: 0.875rem;
622
+ .wi-button__spinner {
623
+ animation: wi-button-spin 700ms linear infinite;
624
+ border: 2px solid currentColor;
625
+ border-right-color: transparent;
626
+ border-radius: var(--wi-radius-full);
627
+ height: var(--wi-button-spinner-size);
628
+ width: var(--wi-button-spinner-size);
486
629
  }
487
630
 
488
- @keyframes wi-button-spin {
489
- to {
490
- transform: rotate(360deg);
491
- }
631
+ @keyframes wi-button-spin {
632
+ to {
633
+ transform: rotate(360deg);
634
+ }
492
635
  }