@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

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 (397) hide show
  1. package/cjs/foundation-css.cjs +5811 -5462
  2. package/cjs/src_tokens_mobile_components_accordion_accordion_json.foundation-css.cjs +4 -4
  3. package/cjs/src_tokens_mobile_components_anchor_anchor_json.foundation-css.cjs +4 -4
  4. package/cjs/src_tokens_mobile_components_audio_audio_json.foundation-css.cjs +4 -4
  5. package/cjs/src_tokens_mobile_components_badge_badge_json.foundation-css.cjs +3 -3
  6. package/cjs/src_tokens_mobile_components_barcodescanner_barcodescanner_json.foundation-css.cjs +4 -4
  7. package/cjs/src_tokens_mobile_components_bottomsheet_bottomsheet_json.foundation-css.cjs +4 -4
  8. package/cjs/src_tokens_mobile_components_breadcrumb_breadcrumb_json.foundation-css.cjs +3 -3
  9. package/cjs/src_tokens_mobile_components_button-group_button-group_json.foundation-css.cjs +4 -4
  10. package/cjs/src_tokens_mobile_components_button_button_json.foundation-css.cjs +4 -4
  11. package/cjs/src_tokens_mobile_components_calendar_calendar_json.foundation-css.cjs +4 -4
  12. package/cjs/src_tokens_mobile_components_camera_camera_json.foundation-css.cjs +4 -4
  13. package/cjs/src_tokens_mobile_components_cards_cards_json.foundation-css.cjs +4 -4
  14. package/cjs/src_tokens_mobile_components_carousel_carousel_json.foundation-css.cjs +4 -4
  15. package/cjs/src_tokens_mobile_components_checkbox_checkbox_json.foundation-css.cjs +4 -4
  16. package/cjs/src_tokens_mobile_components_checkboxset_checkboxset_json.foundation-css.cjs +4 -4
  17. package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs +4 -4
  18. package/cjs/src_tokens_mobile_components_container_container_json.foundation-css.cjs +4 -4
  19. package/cjs/src_tokens_mobile_components_currency_currency_json.foundation-css.cjs +3 -3
  20. package/cjs/src_tokens_mobile_components_datetime_datetime_json.foundation-css.cjs +4 -4
  21. package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +4 -4
  22. package/cjs/src_tokens_mobile_components_fileupload_fileupload_json.foundation-css.cjs +4 -4
  23. package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +14 -0
  24. package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs +14 -0
  25. package/cjs/src_tokens_mobile_components_grid-layout_grid-layout_json.foundation-css.cjs +3 -3
  26. package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs +4 -4
  27. package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs +4 -4
  28. package/cjs/src_tokens_mobile_components_left-nav_left-nav_json.foundation-css.cjs +4 -4
  29. package/cjs/src_tokens_mobile_components_list_list_json.foundation-css.cjs +4 -4
  30. package/cjs/src_tokens_mobile_components_login_login_json.foundation-css.cjs +4 -4
  31. package/cjs/src_tokens_mobile_components_lottie_lottie_json.foundation-css.cjs +4 -4
  32. package/cjs/src_tokens_mobile_components_message_message_json.foundation-css.cjs +4 -4
  33. package/cjs/src_tokens_mobile_components_modal-dialog_modal-dialog_json.foundation-css.cjs +4 -4
  34. package/cjs/src_tokens_mobile_components_nav_nav_json.foundation-css.cjs +4 -4
  35. package/cjs/src_tokens_mobile_components_navbar_navbar_json.foundation-css.cjs +14 -0
  36. package/cjs/src_tokens_mobile_components_page-content_page-content_json.foundation-css.cjs +4 -4
  37. package/cjs/src_tokens_mobile_components_page-layout_page-layout_json.foundation-css.cjs +3 -3
  38. package/cjs/src_tokens_mobile_components_pagination_pagination_json.foundation-css.cjs +3 -3
  39. package/cjs/src_tokens_mobile_components_panel_panel_json.foundation-css.cjs +4 -4
  40. package/cjs/src_tokens_mobile_components_picture_picture_json.foundation-css.cjs +4 -4
  41. package/cjs/src_tokens_mobile_components_popover_popover_json.foundation-css.cjs +4 -4
  42. package/cjs/src_tokens_mobile_components_progress-bar_progress-bar_json.foundation-css.cjs +4 -4
  43. package/cjs/src_tokens_mobile_components_progress-circle_progress-circle_json.foundation-css.cjs +4 -4
  44. package/cjs/src_tokens_mobile_components_radioset_radioset_json.foundation-css.cjs +4 -4
  45. package/cjs/src_tokens_mobile_components_rating_rating_json.foundation-css.cjs +4 -4
  46. package/cjs/src_tokens_mobile_components_richtext-editor_richtext-editor_json.foundation-css.cjs +3 -3
  47. package/cjs/src_tokens_mobile_components_scrollbar_scrollbar_json.foundation-css.cjs +3 -3
  48. package/cjs/src_tokens_mobile_components_search_search_json.foundation-css.cjs +4 -4
  49. package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs +4 -4
  50. package/cjs/src_tokens_mobile_components_slider_slider_json.foundation-css.cjs +4 -4
  51. package/cjs/src_tokens_mobile_components_spinner_spinner_json.foundation-css.cjs +4 -4
  52. package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs +4 -4
  53. package/cjs/src_tokens_mobile_components_tabbar_tabbar_json.foundation-css.cjs +4 -4
  54. package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs +4 -4
  55. package/cjs/src_tokens_mobile_components_textarea_textarea_json.foundation-css.cjs +4 -4
  56. package/cjs/src_tokens_mobile_components_tile_tile_json.foundation-css.cjs +4 -4
  57. package/cjs/src_tokens_mobile_components_toast_toast_json.foundation-css.cjs +3 -3
  58. package/cjs/src_tokens_mobile_components_toggle_toggle_json.foundation-css.cjs +4 -4
  59. package/cjs/src_tokens_mobile_components_video_video_json.foundation-css.cjs +4 -4
  60. package/cjs/src_tokens_mobile_components_webview_webview_json.foundation-css.cjs +4 -4
  61. package/cjs/src_tokens_mobile_components_wizard_wizard_json.foundation-css.cjs +4 -4
  62. package/cjs/src_tokens_web_components_accordion_accordion_json.foundation-css.cjs +4 -4
  63. package/cjs/src_tokens_web_components_anchor_anchor_json.foundation-css.cjs +4 -4
  64. package/cjs/src_tokens_web_components_audio_audio_json.foundation-css.cjs +4 -4
  65. package/cjs/src_tokens_web_components_badge_badge_json.foundation-css.cjs +4 -4
  66. package/cjs/src_tokens_web_components_breadcrumb_breadcrumb_json.foundation-css.cjs +4 -4
  67. package/cjs/src_tokens_web_components_button-group_button-group_json.foundation-css.cjs +4 -4
  68. package/cjs/src_tokens_web_components_button_button_json.foundation-css.cjs +4 -4
  69. package/cjs/src_tokens_web_components_calendar_calendar_json.foundation-css.cjs +4 -4
  70. package/cjs/src_tokens_web_components_cards_cards_json.foundation-css.cjs +4 -4
  71. package/cjs/src_tokens_web_components_carousel_carousel_json.foundation-css.cjs +4 -4
  72. package/cjs/src_tokens_web_components_checkbox_checkbox_json.foundation-css.cjs +4 -4
  73. package/cjs/src_tokens_web_components_checkboxset_checkboxset_json.foundation-css.cjs +4 -4
  74. package/cjs/src_tokens_web_components_chips_chips_json.foundation-css.cjs +4 -4
  75. package/cjs/src_tokens_web_components_color-picker_color-picker_json.foundation-css.cjs +4 -4
  76. package/cjs/src_tokens_web_components_container_container_json.foundation-css.cjs +4 -4
  77. package/cjs/src_tokens_web_components_currency_currency_json.foundation-css.cjs +4 -4
  78. package/cjs/src_tokens_web_components_data-table_data-table_json.foundation-css.cjs +4 -4
  79. package/cjs/src_tokens_web_components_date_date_json.foundation-css.cjs +4 -4
  80. package/cjs/src_tokens_web_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +4 -4
  81. package/cjs/src_tokens_web_components_fileupload_fileupload_json.foundation-css.cjs +4 -4
  82. package/cjs/src_tokens_web_components_form-controls_form-controls_json.foundation-css.cjs +4 -4
  83. package/cjs/src_tokens_web_components_grid-layout_grid-layout_json.foundation-css.cjs +4 -4
  84. package/cjs/src_tokens_web_components_icon_icon_json.foundation-css.cjs +4 -4
  85. package/cjs/src_tokens_web_components_iframe_iframe_json.foundation-css.cjs +4 -4
  86. package/cjs/src_tokens_web_components_label_label_json.foundation-css.cjs +4 -4
  87. package/cjs/src_tokens_web_components_list_list_json.foundation-css.cjs +4 -4
  88. package/cjs/src_tokens_web_components_message_message_json.foundation-css.cjs +4 -4
  89. package/cjs/src_tokens_web_components_modal-dialog_modal-dialog_json.foundation-css.cjs +4 -4
  90. package/cjs/src_tokens_web_components_nav_nav_json.foundation-css.cjs +4 -4
  91. package/cjs/src_tokens_web_components_page-content_page-content_json.foundation-css.cjs +4 -4
  92. package/cjs/src_tokens_web_components_page-footer_page-footer_json.foundation-css.cjs +4 -4
  93. package/cjs/src_tokens_web_components_page-header_page-header_json.foundation-css.cjs +4 -4
  94. package/cjs/src_tokens_web_components_page-left-nav_page-left-nav_json.foundation-css.cjs +4 -4
  95. package/cjs/src_tokens_web_components_page-right-nav_page-right-nav_json.foundation-css.cjs +4 -4
  96. package/cjs/src_tokens_web_components_page-top-nav_page-top-nav_json.foundation-css.cjs +4 -4
  97. package/cjs/src_tokens_web_components_pagination_pagination_json.foundation-css.cjs +4 -4
  98. package/cjs/src_tokens_web_components_panel_panel_json.foundation-css.cjs +4 -4
  99. package/cjs/src_tokens_web_components_picture_picture_json.foundation-css.cjs +4 -4
  100. package/cjs/src_tokens_web_components_popover_popover_json.foundation-css.cjs +4 -4
  101. package/cjs/src_tokens_web_components_progress-bar_progress-bar_json.foundation-css.cjs +4 -4
  102. package/cjs/src_tokens_web_components_progress-circle_progress-circle_json.foundation-css.cjs +4 -4
  103. package/cjs/src_tokens_web_components_radioset_radioset_json.foundation-css.cjs +4 -4
  104. package/cjs/src_tokens_web_components_rating_rating_json.foundation-css.cjs +4 -4
  105. package/cjs/src_tokens_web_components_richtext-editor_richtext-editor_json.foundation-css.cjs +4 -4
  106. package/cjs/src_tokens_web_components_scrollbar_scrollbar_json.foundation-css.cjs +4 -4
  107. package/cjs/src_tokens_web_components_search_search_json.foundation-css.cjs +4 -4
  108. package/cjs/src_tokens_web_components_spinner_spinner_json.foundation-css.cjs +4 -4
  109. package/cjs/src_tokens_web_components_switch_switch_json.foundation-css.cjs +4 -4
  110. package/cjs/src_tokens_web_components_tabs_tabs_json.foundation-css.cjs +4 -4
  111. package/cjs/src_tokens_web_components_tile_tile_json.foundation-css.cjs +4 -4
  112. package/cjs/src_tokens_web_components_time_time_json.foundation-css.cjs +4 -4
  113. package/cjs/src_tokens_web_components_toast_toast_json.foundation-css.cjs +4 -4
  114. package/cjs/src_tokens_web_components_toggle_toggle_json.foundation-css.cjs +4 -4
  115. package/cjs/src_tokens_web_components_video_video_json.foundation-css.cjs +4 -4
  116. package/cjs/src_tokens_web_components_wizard_wizard_json.foundation-css.cjs +4 -4
  117. package/foundation/foundation.css +2 -2
  118. package/foundation/foundation.min.css +1 -1
  119. package/native_mobile.index.d.ts +27 -2
  120. package/native_mobile.index.js +39 -5
  121. package/native_mobile.index.js.map +1 -1
  122. package/npm-shrinkwrap.json +409 -111
  123. package/package-lock.json +409 -111
  124. package/package.json +1 -1
  125. package/src/styles/mobile/components/basic/icon.less +4 -4
  126. package/src/styles/mobile/components/basic/progress-bar.less +2 -2
  127. package/src/styles/mobile/components/basic/progress-circle.less +3 -0
  128. package/src/styles/mobile/components/basic/search.less +3 -3
  129. package/src/styles/mobile/components/container/accordion.less +41 -17
  130. package/src/styles/mobile/components/container/panel.less +4 -1
  131. package/src/styles/mobile/components/container/tabs/tab-header.less +3 -6
  132. package/src/styles/mobile/components/container/tile.less +1 -1
  133. package/src/styles/mobile/components/container/wizard.less +2 -2
  134. package/src/styles/mobile/components/container.less +45 -6
  135. package/src/styles/mobile/components/data/card.less +1 -6
  136. package/src/styles/mobile/components/data/form.less +160 -104
  137. package/src/styles/mobile/components/data/list.less +10 -44
  138. package/src/styles/mobile/components/input/checkbox.less +3 -10
  139. package/src/styles/mobile/components/input/checkboxset.less +1 -9
  140. package/src/styles/mobile/components/input/chips.less +4 -4
  141. package/src/styles/mobile/components/input/radioset.less +2 -6
  142. package/src/styles/mobile/components/input/toggle.less +5 -5
  143. package/src/styles/mobile/components/navigation/appnavbar.less +53 -17
  144. package/src/styles/mobile/components/navigation/menu.less +5 -1
  145. package/src/styles/mobile/components/navigation/popover.less +26 -0
  146. package/src/styles/mobile/components/page/page-content.less +1 -1
  147. package/src/styles/mobile/components/tokens.light.css +135 -102
  148. package/src/styles/mobile/components/variables/accordion.variant.less +7 -1
  149. package/src/styles/mobile/components/variables/button.variant.less +1 -1
  150. package/src/styles/mobile/components/variables/checkbox.variant.less +3 -2
  151. package/src/styles/mobile/components/variables/checkboxset.variant.less +4 -1
  152. package/src/styles/mobile/components/variables/chips.variant.less +2 -1
  153. package/src/styles/mobile/components/variables/container.variant.less +6 -6
  154. package/src/styles/mobile/components/variables/form-controls.variant.less +14 -0
  155. package/src/styles/mobile/components/variables/radioset.variant.less +2 -1
  156. package/src/styles/mobile/components/variables/tabbar.variant.less +3 -1
  157. package/src/styles/mobile/components/variables/tabs.variant.less +7 -2
  158. package/src/styles/mobile/components/variables/toggle.variant.less +2 -1
  159. package/src/styles/mobile/components/variables/wizard.variant.less +4 -1
  160. package/src/styles/mobile/studio/advanced/login.less +8 -5
  161. package/src/styles/mobile/studio/advanced/styles.less +2 -0
  162. package/src/styles/mobile/studio/basic/anchor.less +15 -4
  163. package/src/styles/mobile/studio/basic/{buttongroup.less → button-group.less} +18 -19
  164. package/src/styles/mobile/studio/basic/button.less +20 -2
  165. package/src/styles/mobile/studio/basic/icon.less +21 -0
  166. package/src/styles/mobile/studio/basic/label.less +28 -0
  167. package/src/styles/mobile/studio/basic/message.less +34 -5
  168. package/src/styles/mobile/studio/basic/progress-bar.less +6 -0
  169. package/src/styles/mobile/studio/basic/progress-circle.less +9 -0
  170. package/src/styles/mobile/studio/basic/search.less +30 -6
  171. package/src/styles/mobile/studio/basic/spinner.less +6 -0
  172. package/src/styles/mobile/studio/basic/styles.less +11 -0
  173. package/src/styles/mobile/studio/container/accordion.less +26 -0
  174. package/src/styles/mobile/studio/container/container.less +18 -0
  175. package/src/styles/mobile/studio/container/grid.less +8 -0
  176. package/src/styles/mobile/studio/container/panel.less +46 -0
  177. package/src/styles/mobile/studio/container/styles.less +6 -0
  178. package/src/styles/mobile/studio/container/tabs.less +113 -0
  179. package/src/styles/mobile/studio/container/tile.less +7 -0
  180. package/src/styles/mobile/studio/container/wizard.less +3 -1
  181. package/src/styles/mobile/studio/data/card.less +25 -0
  182. package/src/styles/mobile/studio/data/form.less +22 -0
  183. package/src/styles/mobile/studio/data/list.less +3 -0
  184. package/src/styles/mobile/studio/data/styles.less +3 -0
  185. package/src/styles/mobile/studio/device/barcode.less +23 -0
  186. package/src/styles/mobile/studio/device/camera.less +4 -0
  187. package/src/styles/mobile/studio/device/styles.less +2 -0
  188. package/src/styles/mobile/studio/dialogs/alert-dialog.less +10 -0
  189. package/src/styles/mobile/studio/dialogs/base-dialog.less +31 -0
  190. package/src/styles/mobile/studio/dialogs/confirm-dialog.less +26 -0
  191. package/src/styles/mobile/studio/dialogs/styles.less +3 -0
  192. package/src/styles/mobile/studio/input/calendar.less +8 -0
  193. package/src/styles/mobile/studio/input/checkbox.less +64 -89
  194. package/src/styles/mobile/studio/input/checkboxset.less +61 -98
  195. package/src/styles/mobile/studio/input/chips.less +11 -0
  196. package/src/styles/mobile/studio/input/currency.less +16 -0
  197. package/src/styles/mobile/studio/input/date.less +7 -0
  198. package/src/styles/mobile/studio/input/epoch/datetime-picker-modal.less +7 -7
  199. package/src/styles/mobile/studio/input/form.less +143 -74
  200. package/src/styles/mobile/studio/input/number.less +6 -0
  201. package/src/styles/mobile/studio/input/radioset.less +1 -6
  202. package/src/styles/mobile/studio/input/rating.less +19 -12
  203. package/src/styles/mobile/studio/input/select.less +6 -0
  204. package/src/styles/mobile/studio/input/slider.less +49 -0
  205. package/src/styles/mobile/studio/input/styles.less +17 -0
  206. package/src/styles/mobile/studio/input/switch.less +12 -3
  207. package/src/styles/mobile/studio/input/text.less +6 -0
  208. package/src/styles/mobile/studio/input/textarea.less +5 -0
  209. package/src/styles/mobile/studio/input/toggle.less +10 -7
  210. package/src/styles/mobile/studio/layouts/appnavbar.less +71 -0
  211. package/src/styles/mobile/studio/layouts/content.less +5 -0
  212. package/src/styles/mobile/studio/layouts/page-content.less +11 -0
  213. package/src/styles/mobile/studio/layouts/page.less +5 -0
  214. package/src/styles/mobile/studio/layouts/styles.less +5 -0
  215. package/src/styles/mobile/studio/layouts/tabbar.less +36 -0
  216. package/src/styles/mobile/studio/navigation/menu.less +19 -17
  217. package/src/styles/mobile/studio/navigation/nav.less +3 -0
  218. package/src/styles/mobile/studio/navigation/popover.less +3 -0
  219. package/src/styles/mobile/studio/navigation/styles.less +3 -0
  220. package/src/styles/mobile/studio/styles.less +17 -24
  221. package/src/tokens/mobile/components/accordion/accordion.json +216 -36
  222. package/src/tokens/mobile/components/anchor/anchor.json +60 -12
  223. package/src/tokens/mobile/components/audio/audio.json +5 -1
  224. package/src/tokens/mobile/components/barcodescanner/barcodescanner.json +85 -17
  225. package/src/tokens/mobile/components/bottomsheet/bottomsheet.json +95 -19
  226. package/src/tokens/mobile/components/button/button.json +175 -36
  227. package/src/tokens/mobile/components/button-group/button-group.json +15 -3
  228. package/src/tokens/mobile/components/calendar/calendar.json +185 -37
  229. package/src/tokens/mobile/components/camera/camera.json +40 -8
  230. package/src/tokens/mobile/components/cards/cards.json +50 -10
  231. package/src/tokens/mobile/components/carousel/carousel.json +145 -29
  232. package/src/tokens/mobile/components/checkbox/checkbox.json +112 -24
  233. package/src/tokens/mobile/components/checkboxset/checkboxset.json +177 -33
  234. package/src/tokens/mobile/components/chips/chips.json +231 -47
  235. package/src/tokens/mobile/components/container/container.json +105 -29
  236. package/src/tokens/mobile/components/datetime/datetime.json +115 -23
  237. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +160 -25
  238. package/src/tokens/mobile/components/fileupload/fileupload.json +60 -12
  239. package/src/tokens/mobile/components/form-controls/form-controls.json +263 -0
  240. package/src/tokens/mobile/components/form-wrapper/form-wrapper.json +369 -0
  241. package/src/tokens/mobile/components/icon/icon.json +30 -6
  242. package/src/tokens/mobile/components/label/label.json +65 -13
  243. package/src/tokens/mobile/components/left-nav/left-nav.json +30 -6
  244. package/src/tokens/mobile/components/list/list.json +107 -145
  245. package/src/tokens/mobile/components/login/login.json +40 -8
  246. package/src/tokens/mobile/components/lottie/lottie.json +10 -2
  247. package/src/tokens/mobile/components/message/message.json +115 -23
  248. package/src/tokens/mobile/components/modal-dialog/modal-dialog.json +135 -27
  249. package/src/tokens/mobile/components/nav/nav.json +60 -12
  250. package/src/tokens/mobile/components/navbar/navbar.json +341 -0
  251. package/src/tokens/mobile/components/page-content/page-content.json +14 -2
  252. package/src/tokens/mobile/components/panel/panel.json +150 -54
  253. package/src/tokens/mobile/components/picture/picture.json +45 -9
  254. package/src/tokens/mobile/components/popover/popover.json +212 -25
  255. package/src/tokens/mobile/components/progress-bar/progress-bar.json +60 -12
  256. package/src/tokens/mobile/components/progress-circle/progress-circle.json +50 -4
  257. package/src/tokens/mobile/components/radioset/radioset.json +136 -28
  258. package/src/tokens/mobile/components/rating/rating.json +50 -10
  259. package/src/tokens/mobile/components/search/search.json +221 -45
  260. package/src/tokens/mobile/components/select/select.json +80 -16
  261. package/src/tokens/mobile/components/slider/slider.json +55 -11
  262. package/src/tokens/mobile/components/spinner/spinner.json +45 -9
  263. package/src/tokens/mobile/components/switch/switch.json +80 -16
  264. package/src/tokens/mobile/components/tabbar/tabbar.json +161 -33
  265. package/src/tokens/mobile/components/tabs/tabs.json +158 -36
  266. package/src/tokens/mobile/components/textarea/textarea.json +5 -1
  267. package/src/tokens/mobile/components/tile/tile.json +36 -8
  268. package/src/tokens/mobile/components/toggle/toggle.json +81 -17
  269. package/src/tokens/mobile/components/video/video.json +10 -2
  270. package/src/tokens/mobile/components/webview/webview.json +5 -1
  271. package/src/tokens/mobile/components/wizard/wizard.json +332 -64
  272. package/src/tokens/mobile/global/border-style/border-style.json +0 -42
  273. package/src/tokens/web/components/accordion/Token.Readme.md +30 -0
  274. package/src/tokens/web/components/accordion/accordion.json +113 -31
  275. package/src/tokens/web/components/anchor/Token.Readme.md +20 -0
  276. package/src/tokens/web/components/anchor/anchor.json +25 -13
  277. package/src/tokens/web/components/audio/Token.Readme.md +9 -0
  278. package/src/tokens/web/components/audio/audio.json +3 -2
  279. package/src/tokens/web/components/badge/Token.Readme.md +19 -0
  280. package/src/tokens/web/components/badge/badge.json +22 -11
  281. package/src/tokens/web/components/breadcrumb/Token.Readme.md +21 -0
  282. package/src/tokens/web/components/breadcrumb/breadcrumb.json +35 -22
  283. package/src/tokens/web/components/button/Token.Readme.md +29 -0
  284. package/src/tokens/web/components/button/button.json +53 -27
  285. package/src/tokens/web/components/button-group/Token.Readme.md +9 -0
  286. package/src/tokens/web/components/button-group/button-group.json +3 -2
  287. package/src/tokens/web/components/calendar/Token.Readme.md +30 -0
  288. package/src/tokens/web/components/calendar/calendar.json +45 -23
  289. package/src/tokens/web/components/cards/Token.Readme.md +22 -0
  290. package/src/tokens/web/components/cards/cards.json +29 -15
  291. package/src/tokens/web/components/carousel/Token.Readme.md +20 -0
  292. package/src/tokens/web/components/carousel/carousel.json +30 -15
  293. package/src/tokens/web/components/checkbox/Token.Readme.md +24 -0
  294. package/src/tokens/web/components/checkbox/checkbox.json +47 -24
  295. package/src/tokens/web/components/checkboxset/Token.Readme.md +9 -0
  296. package/src/tokens/web/components/checkboxset/checkboxset.json +2 -1
  297. package/src/tokens/web/components/chips/Token.Readme.md +43 -0
  298. package/src/tokens/web/components/chips/chips.json +71 -36
  299. package/src/tokens/web/components/color-picker/Token.Readme.md +10 -0
  300. package/src/tokens/web/components/color-picker/color-picker.json +5 -3
  301. package/src/tokens/web/components/container/Token.Readme.md +13 -0
  302. package/src/tokens/web/components/container/container.json +10 -5
  303. package/src/tokens/web/components/currency/Token.Readme.md +14 -0
  304. package/src/tokens/web/components/currency/currency.json +13 -7
  305. package/src/tokens/web/components/data-table/Token.Readme.md +54 -0
  306. package/src/tokens/web/components/data-table/data-table.json +95 -47
  307. package/src/tokens/web/components/date/Token.Readme.md +33 -0
  308. package/src/tokens/web/components/date/date.json +51 -26
  309. package/src/tokens/web/components/dropdown-menu/Token.Readme.md +25 -0
  310. package/src/tokens/web/components/dropdown-menu/dropdown-menu.json +34 -17
  311. package/src/tokens/web/components/fileupload/Token.Readme.md +44 -0
  312. package/src/tokens/web/components/fileupload/fileupload.json +73 -37
  313. package/src/tokens/web/components/form-controls/Token.Readme.md +47 -0
  314. package/src/tokens/web/components/form-controls/form-controls.json +81 -42
  315. package/src/tokens/web/components/grid-layout/Token.Readme.md +11 -0
  316. package/src/tokens/web/components/grid-layout/grid-layout.json +7 -4
  317. package/src/tokens/web/components/icon/Token.Readme.md +14 -0
  318. package/src/tokens/web/components/icon/icon.json +13 -7
  319. package/src/tokens/web/components/iframe/Token.Readme.md +10 -0
  320. package/src/tokens/web/components/iframe/iframe.json +5 -3
  321. package/src/tokens/web/components/label/Token.Readme.md +17 -0
  322. package/src/tokens/web/components/label/label.json +19 -10
  323. package/src/tokens/web/components/list/Token.Readme.md +19 -0
  324. package/src/tokens/web/components/list/list.json +25 -13
  325. package/src/tokens/web/components/message/Token.Readme.md +22 -0
  326. package/src/tokens/web/components/message/message.json +29 -15
  327. package/src/tokens/web/components/modal-dialog/Token.Readme.md +31 -0
  328. package/src/tokens/web/components/modal-dialog/modal-dialog.json +47 -24
  329. package/src/tokens/web/components/nav/Token.Readme.md +25 -0
  330. package/src/tokens/web/components/nav/nav.json +34 -17
  331. package/src/tokens/web/components/page-content/Token.Readme.md +9 -0
  332. package/src/tokens/web/components/page-content/page-content.json +3 -2
  333. package/src/tokens/web/components/page-footer/Token.Readme.md +18 -0
  334. package/src/tokens/web/components/page-footer/page-footer.json +21 -11
  335. package/src/tokens/web/components/page-header/Token.Readme.md +18 -0
  336. package/src/tokens/web/components/page-header/page-header.json +21 -11
  337. package/src/tokens/web/components/page-left-nav/Token.Readme.md +54 -0
  338. package/src/tokens/web/components/page-left-nav/page-left-nav.json +93 -47
  339. package/src/tokens/web/components/page-right-nav/Token.Readme.md +53 -0
  340. package/src/tokens/web/components/page-right-nav/page-right-nav.json +93 -47
  341. package/src/tokens/web/components/page-top-nav/Token.Readme.md +16 -0
  342. package/src/tokens/web/components/page-top-nav/page-top-nav.json +17 -9
  343. package/src/tokens/web/components/pagination/Token.Readme.md +35 -0
  344. package/src/tokens/web/components/pagination/pagination.json +61 -30
  345. package/src/tokens/web/components/panel/Token.Readme.md +39 -0
  346. package/src/tokens/web/components/panel/panel.json +75 -32
  347. package/src/tokens/web/components/picture/Token.Readme.md +16 -0
  348. package/src/tokens/web/components/picture/picture.json +17 -9
  349. package/src/tokens/web/components/popover/Token.Readme.md +33 -0
  350. package/src/tokens/web/components/popover/popover.json +51 -26
  351. package/src/tokens/web/components/progress-bar/Token.Readme.md +15 -0
  352. package/src/tokens/web/components/progress-bar/progress-bar.json +15 -8
  353. package/src/tokens/web/components/progress-circle/Token.Readme.md +11 -0
  354. package/src/tokens/web/components/progress-circle/progress-circle.json +7 -4
  355. package/src/tokens/web/components/radioset/Token.Readme.md +24 -0
  356. package/src/tokens/web/components/radioset/radioset.json +33 -17
  357. package/src/tokens/web/components/rating/Token.Readme.md +14 -0
  358. package/src/tokens/web/components/rating/rating.json +21 -11
  359. package/src/tokens/web/components/richtext-editor/Token.Readme.md +106 -0
  360. package/src/tokens/web/components/richtext-editor/richtext-editor.json +199 -99
  361. package/src/tokens/web/components/scrollbar/Token.Readme.md +15 -0
  362. package/src/tokens/web/components/scrollbar/scrollbar.json +15 -8
  363. package/src/tokens/web/components/search/Token.Readme.md +39 -0
  364. package/src/tokens/web/components/search/search.json +63 -32
  365. package/src/tokens/web/components/spinner/Token.Readme.md +15 -0
  366. package/src/tokens/web/components/spinner/spinner.json +15 -8
  367. package/src/tokens/web/components/switch/Token.Readme.md +20 -0
  368. package/src/tokens/web/components/switch/switch.json +25 -13
  369. package/src/tokens/web/components/tabs/Token.Readme.md +32 -0
  370. package/src/tokens/web/components/tabs/tabs.json +49 -25
  371. package/src/tokens/web/components/tile/Token.Readme.md +13 -0
  372. package/src/tokens/web/components/tile/tile.json +10 -5
  373. package/src/tokens/web/components/time/Token.Readme.md +37 -0
  374. package/src/tokens/web/components/time/time.json +63 -34
  375. package/src/tokens/web/components/toast/Token.Readme.md +35 -0
  376. package/src/tokens/web/components/toast/toast.json +55 -28
  377. package/src/tokens/web/components/toggle/Token.Readme.md +20 -0
  378. package/src/tokens/web/components/toggle/toggle.json +25 -13
  379. package/src/tokens/web/components/video/Token.Readme.md +10 -0
  380. package/src/tokens/web/components/video/video.json +5 -3
  381. package/src/tokens/web/components/wizard/Token.Readme.md +58 -0
  382. package/src/tokens/web/components/wizard/wizard.json +101 -51
  383. package/src/utils/style-dictionary-utils.d.ts +1 -1
  384. package/src/utils/style-dictionary-utils.js +44 -3
  385. package/src/utils/style-dictionary-utils.js.map +1 -1
  386. package/cjs/src_tokens_mobile_components_form-control_form-control_json.foundation-css.cjs +0 -14
  387. package/cjs/src_tokens_mobile_components_form-input_form-input_json.foundation-css.cjs +0 -14
  388. package/src/styles/mobile/components/variables/form-input.variant.less +0 -14
  389. package/src/styles/mobile/studio/container/tabs/tab-header.less +0 -34
  390. package/src/styles/mobile/studio/data/cards.less +0 -36
  391. package/src/styles/mobile/studio/device/barcodescanner.less +0 -3
  392. package/src/styles/mobile/studio/page/page-content.less +0 -4
  393. package/src/styles/mobile/studio/page/tabbar.less +0 -19
  394. package/src/styles/mobile/studio/slider.less +0 -27
  395. package/src/tokens/mobile/components/form-control/form-control.json +0 -217
  396. package/src/tokens/mobile/components/form-input/form-input.json +0 -153
  397. /package/src/styles/mobile/studio/advanced/{carousel/carousel.less → carousel.less} +0 -0
package/src/styles/mobile/components/data/form.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
- @import (optional) url('../variables/form-control.variant.less');
3
- @import (optional) url('../variables/form-input.variant.less');
2
+ @import (optional) url('../variables/form-wrapper.variant.less');
3
+ @import (optional) url('../variables/form-controls.variant.less');
4
4
 
5
5
  .app-form {
6
6
  background-color: var(--wm-form-background);
@@ -12,49 +12,40 @@
12
12
  border-color: var(--wm-form-border-color);
13
13
  }
14
14
 
15
- .form-default{
16
- background-color: var(--wm-form-background);
17
- padding: var(--wm-form-padding);
18
- margin: var(--wm-form-margin);
19
- border-radius: var(--wm-form-border-radius);
20
- border-width: var(--wm-form-border-width);
21
- border-style: var(--wm-form-border-style);
22
- border-color: var(--wm-form-border-color);
23
- }
24
15
 
25
- .app-form-default-header {
26
- padding-top: var(--wm-form-default-header-padding-vertical);
27
- padding-bottom: var(--wm-form-default-header-padding-vertical);
28
- padding-left: var(--wm-form-default-header-padding-horizontal);
29
- padding-right: var(--wm-form-default-header-padding-horizontal);
30
- border-radius: var(--wm-form-default-header-border-radius);
31
- border-color: var(--wm-form-default-header-border-color);
32
- border-style: var(--wm-form-default-header-border-style);
33
- border-width: var(--wm-form-default-header-border-width);
34
- background-color: var(--wm-form-default-header-background);
35
- border-bottom-width: var(--wm-border-width-base);
16
+ .app-form-header {
17
+ padding-top: var(--wm-form-header-padding-vertical);
18
+ padding-bottom: var(--wm-form-header-padding-vertical);
19
+ padding-left: var(--wm-form-header-padding-horizontal);
20
+ padding-right: var(--wm-form-header-padding-horizontal);
21
+ border-radius: var(--wm-form-header-border-radius);
22
+ border-color: var(--wm-form-header-border-color);
23
+ border-style: var(--wm-form-header-border-style);
24
+ border-width: var(--wm-form-header-border-width);
25
+ background-color: var(--wm-form-header-background);
26
+ border-bottom-width: var(--wm-form-header-border-width);
36
27
  }
37
28
 
38
29
  .app-form-title {
39
- color: var(--wm-form-default-header-title-color);
40
- font-size: var(--wm-form-default-header-title-font-size);
41
- font-weight: var(--wm-form-default-header-title-font-weight);
42
- font-family: var(--wm-form-default-header-title-font-family);
43
- margin-top: var(--wm-form-default-header-title-margin-vertical);
44
- margin-bottom: var(--wm-form-default-header-title-margin-vertical);
45
- margin-left: var(--wm-form-default-header-title-margin-horizontal);
46
- margin-right: var(--wm-form-default-header-title-margin-horizontal);
30
+ color: var(--wm-form-header-title-color);
31
+ font-size: var(--wm-form-header-title-font-size);
32
+ font-weight: var(--wm-form-header-title-font-weight);
33
+ font-family: var(--wm-form-header-title-font-family);
34
+ margin-top: var(--wm-form-header-title-margin-vertical);
35
+ margin-bottom: var(--wm-form-header-title-margin-vertical);
36
+ margin-left: var(--wm-form-header-title-margin-horizontal);
37
+ margin-right: var(--wm-form-header-title-margin-horizontal);
47
38
  }
48
39
 
49
40
  .app-form-sub-title {
50
- color: var(--wm-form-default-header-sub-title-color);
51
- font-size: var(--wm-form-default-header-sub-title-font-size);
52
- font-weight: var(--wm-form-default-header-sub-title-font-weight);
53
- font-family: var(--wm-form-default-header-sub-title-font-family);
54
- margin-top: var(--wm-form-default-header-sub-title-margin-vertical);
55
- margin-bottom: var(--wm-form-default-header-sub-title-margin-vertical);
56
- margin-left: var(--wm-form-default-header-sub-title-margin-horizontal);
57
- margin-right: var(--wm-form-default-header-sub-title-margin-horizontal);
41
+ color: var(--wm-form-header-sub-title-color);
42
+ font-size: var(--wm-form-header-sub-title-font-size);
43
+ font-weight: var(--wm-form-header-sub-title-font-weight);
44
+ font-family: var(--wm-form-header-sub-title-font-family);
45
+ margin-top: var(--wm-form-header-sub-title-margin-vertical);
46
+ margin-bottom: var(--wm-form-header-sub-title-margin-vertical);
47
+ margin-left: var(--wm-form-header-sub-title-margin-horizontal);
48
+ margin-right: var(--wm-form-header-sub-title-margin-horizontal);
58
49
  }
59
50
 
60
51
 
@@ -63,17 +54,16 @@
63
54
  padding-right: var(--wm-form-body-padding-horizontal);
64
55
  padding-top: var(--wm-form-body-padding-vertical);
65
56
  padding-bottom: var(--wm-form-body-padding-vertical);
66
- border-color: var(--wm-form-body-border-color);
67
- border-style: var(--wm-form-body-border-style);
68
57
  border-width: var(--wm-form-body-border-width);
58
+ border-color: var(--wm-form-body-border-color);
69
59
  border-radius: var(--wm-form-body-border-radius);
70
60
  background-color: var(--wm-form-body-background);
71
- border-bottom-width: var(--wm-space-0);
61
+ border-style: var(--wm-form-body-border-style);
72
62
  }
73
63
 
74
64
  .app-form-field {
75
65
  min-height: var(--wm-form-field-height); // hardcoded example
76
- // min-height: ~"calc(var(--wm-form-input-min-height) + var(--wm-form-error-font-size) + var(--wm-form-error-padding-vertical) + 10px)";
66
+ // min-height: ~"calc(var(--wm-form-controls-min-height) + var(--wm-form-error-font-size) + var(--wm-form-error-padding-vertical) + 10px)";
77
67
 
78
68
  margin-left: var(--wm-form-field-margin-horizontal);
79
69
  margin-right: var(--wm-form-field-margin-horizontal);
@@ -86,21 +76,58 @@
86
76
  }
87
77
 
88
78
  .form-label.app-label-text {
89
- color: var(--wm-form-input-label-color);
90
- background-color: var(--wm-form-input-label-background);
91
- font-size: var(--wm-form-input-label-font-size);
92
- font-weight: var(--wm-form-input-label-font-weight);
93
- font-family: var(--wm-form-input-label-font-family);
94
- margin-top: var(--wm-form-input-label-margin-vertical);
95
- margin-bottom: var(--wm-form-input-label-margin-vertical);
96
- margin-left: var(--wm-form-input-label-margin-horizontal);
97
- margin-right: var(--wm-form-input-label-margin-horizontal);
79
+ color: var(--wm-form-controls-label-color);
80
+ background-color: var(--wm-form-controls-label-background);
81
+ font-size: var(--wm-form-controls-label-font-size);
82
+ font-weight: var(--wm-form-controls-label-font-weight);
83
+ font-family: var(--wm-form-controls-label-font-family);
84
+ margin-top: var(--wm-form-controls-label-margin-vertical);
85
+ margin-bottom: var(--wm-form-controls-label-margin-vertical);
86
+ margin-left: var(--wm-form-controls-label-margin-horizontal);
87
+ margin-right: var(--wm-form-controls-label-margin-horizontal);
98
88
  }
99
89
 
100
90
  .app-text-place-holder-text{
101
- color: var(--wm-form-input-placeholder-color);
91
+ color: var(--wm-form-controls-placeholder-color);
92
+ }
93
+ .app-textarea-placeholder{
94
+ color: var(--wm-form-controls-placeholder-color);
95
+ }
96
+ .app-number-placeholer{
97
+ color: var(--wm-form-controls-placeholder-color);
102
98
  }
103
99
 
100
+ .app-date-place-holder-text{
101
+ color: var(--wm-form-controls-placeholder-color);
102
+ }
103
+
104
+ .app-datetime-place-holder-text{
105
+ color: var(--wm-form-controls-placeholder-color);
106
+ }
107
+
108
+ .app-time-place-holder-text{
109
+ color: var(--wm-form-controls-placeholder-color);
110
+ }
111
+
112
+ .app-currency-placeholder {
113
+ color: var(--wm-form-controls-placeholder-color);
114
+ }
115
+
116
+ .app-select-placeholderText{
117
+ color: var(--wm-form-controls-placeholder-color);
118
+ }
119
+
120
+ .control-label .app-label-text{
121
+ color: var(--wm-form-controls-label-color);
122
+ background-color: var(--wm-form-controls-label-background);
123
+ font-size: var(--wm-form-controls-label-font-size);
124
+ font-weight: var(--wm-form-controls-label-font-weight);
125
+ font-family: var(--wm-form-controls-label-font-family);
126
+ margin-top: var(--wm-form-controls-label-margin-vertical);
127
+ margin-bottom: var(--wm-form-controls-label-margin-vertical);
128
+ margin-left: var(--wm-form-controls-label-margin-horizontal);
129
+ margin-right: var(--wm-form-controls-label-margin-horizontal);
130
+ }
104
131
  .app-form-field-error-msg {
105
132
  color: var(--wm-form-error-color);
106
133
  font-size: var(--wm-form-error-font-size);
@@ -111,70 +138,70 @@
111
138
  }
112
139
 
113
140
  .app-input {
114
- min-height: var(--wm-form-input-min-height);
115
- padding-top: var(--wm-form-input-padding-vertical);
116
- padding-bottom: var(--wm-form-input-padding-vertical);
117
- padding-left: var(--wm-form-input-padding-horizontal);
118
- padding-right: var(--wm-form-input-padding-horizontal);
119
- border-style: var(--wm-form-input-border-style);
120
- border-width: var(--wm-form-input-border-width);
121
- border-color: var(--wm-form-input-border-color);
122
- border-radius: var(--wm-form-input-border-radius);
123
- background-color: var(--wm-form-input-background);
124
- color: var(--wm-form-input-color);
125
- opacity: var(--wm-form-input-opacity);
141
+ min-height: var(--wm-form-controls-min-height);
142
+ padding-top: var(--wm-form-controls-padding-vertical);
143
+ padding-bottom: var(--wm-form-controls-padding-vertical);
144
+ padding-left: var(--wm-form-controls-padding-horizontal);
145
+ padding-right: var(--wm-form-controls-padding-horizontal);
146
+ border-style: var(--wm-form-controls-border-style);
147
+ border-width: var(--wm-form-controls-border-width);
148
+ border-color: var(--wm-form-controls-border-color);
149
+ border-radius: var(--wm-form-controls-border-radius);
150
+ background-color: var(--wm-form-controls-background);
151
+ color: var(--wm-form-controls-color);
152
+ opacity: var(--wm-form-controls-opacity);
126
153
  }
127
154
 
128
155
  .app-input-focused {
129
- border-width: var(--wm-form-input-border-width);
130
- border-color: var(--wm-form-input-border-color);
131
- background-color: var(--wm-form-input-background);
132
- color: var(--wm-form-input-color);
133
- opacity: var(--wm-form-input-opacity);
156
+ border-width: var(--wm-form-controls-border-width);
157
+ border-color: var(--wm-form-controls-border-color);
158
+ background-color: var(--wm-form-controls-background);
159
+ color: var(--wm-form-controls-color);
160
+ opacity: var(--wm-form-controls-opacity);
134
161
  }
135
162
 
136
163
  .app-input-focused {
137
- min-height: var(--wm-form-input-min-height);
138
- padding-top: var(--wm-form-input-padding-vertical);
139
- padding-bottom: var(--wm-form-input-padding-vertical);
140
- padding-left: var(--wm-form-input-padding-horizontal);
141
- padding-right: var(--wm-form-input-padding-horizontal);
142
- border-style: var(--wm-form-input-border-style);
143
- border-width: var(--wm-form-input-border-width);
144
- border-color: var(--wm-form-input-border-color);
145
- border-radius: var(--wm-form-input-border-radius);
146
- background-color: var(--wm-form-input-background);
147
- color: var(--wm-form-input-color);
148
- opacity: var(--wm-form-input-opacity);
164
+ min-height: var(--wm-form-controls-min-height);
165
+ padding-top: var(--wm-form-controls-padding-vertical);
166
+ padding-bottom: var(--wm-form-controls-padding-vertical);
167
+ padding-left: var(--wm-form-controls-padding-horizontal);
168
+ padding-right: var(--wm-form-controls-padding-horizontal);
169
+ border-style: var(--wm-form-controls-border-style);
170
+ border-width: var(--wm-form-controls-border-width);
171
+ border-color: var(--wm-form-controls-border-color);
172
+ border-radius: var(--wm-form-controls-border-radius);
173
+ background-color: var(--wm-form-controls-background);
174
+ color: var(--wm-form-controls-color);
175
+ opacity: var(--wm-form-controls-opacity);
149
176
  }
150
177
 
151
178
  .app-input-disabled {
152
- min-height: var(--wm-form-input-min-height);
153
- padding-top: var(--wm-form-input-padding-vertical);
154
- padding-bottom: var(--wm-form-input-padding-vertical);
155
- padding-left: var(--wm-form-input-padding-horizontal);
156
- padding-right: var(--wm-form-input-padding-horizontal);
157
- border-style: var(--wm-form-input-border-style);
158
- border-width: var(--wm-form-input-border-width);
159
- border-color: var(--wm-form-input-border-color);
160
- border-radius: var(--wm-form-input-border-radius);
161
- background-color: var(--wm-form-input-background);
162
- color: var(--wm-form-input-color);
163
- opacity: var(--wm-form-input-opacity);
179
+ min-height: var(--wm-form-controls-min-height);
180
+ padding-top: var(--wm-form-controls-padding-vertical);
181
+ padding-bottom: var(--wm-form-controls-padding-vertical);
182
+ padding-left: var(--wm-form-controls-padding-horizontal);
183
+ padding-right: var(--wm-form-controls-padding-horizontal);
184
+ border-style: var(--wm-form-controls-border-style);
185
+ border-width: var(--wm-form-controls-border-width);
186
+ border-color: var(--wm-form-controls-border-color);
187
+ border-radius: var(--wm-form-controls-border-radius);
188
+ background-color: var(--wm-form-controls-background);
189
+ color: var(--wm-form-controls-color);
190
+ opacity: var(--wm-form-controls-opacity);
164
191
  }
165
192
 
166
193
  .app-select-disabled{
167
- min-height: var(--wm-form-input-min-height);
168
- padding-top: var(--wm-form-input-padding-vertical);
169
- padding-bottom: var(--wm-form-input-padding-vertical);
170
- padding-left: var(--wm-form-input-padding-horizontal);
171
- padding-right: var(--wm-form-input-padding-horizontal);
172
- border-style: var(--wm-form-input-border-style);
173
- border-width: var(--wm-form-input-border-width);
174
- border-color: var(--wm-form-input-border-color);
175
- background-color: var(--wm-form-input-background);
176
- color: var(--wm-form-input-color);
177
- opacity: var(--wm-form-input-opacity);
194
+ min-height: var(--wm-form-controls-min-height);
195
+ padding-top: var(--wm-form-controls-padding-vertical);
196
+ padding-bottom: var(--wm-form-controls-padding-vertical);
197
+ padding-left: var(--wm-form-controls-padding-horizontal);
198
+ padding-right: var(--wm-form-controls-padding-horizontal);
199
+ border-style: var(--wm-form-controls-border-style);
200
+ border-width: var(--wm-form-controls-border-width);
201
+ border-color: var(--wm-form-controls-border-color);
202
+ background-color: var(--wm-form-controls-background);
203
+ color: var(--wm-form-controls-color);
204
+ opacity: var(--wm-form-controls-opacity);
178
205
  }
179
206
 
180
207
  .app-input.floatingLabel {
@@ -185,3 +212,32 @@
185
212
  .app-input.activeFloatingLabel {
186
213
  // color: green;
187
214
  }
215
+
216
+ .app-form-footer{
217
+ padding-left: var(--wm-form-footer-padding-horizontal);
218
+ padding-right: var(--wm-form-footer-padding-horizontal);
219
+ padding-top: var(--wm-form-footer-padding-vertical);
220
+ padding-bottom: var(--wm-form-footer-padding-vertical);
221
+ border-width: var(--wm-form-footer-border-width);
222
+ border-color: var(--wm-form-footer-border-color);
223
+ border-radius: var(--wm-form-footer-border-radius);
224
+ background-color: var(--wm-form-footer-background);
225
+ border-style: var(--wm-form-footer-border-style);
226
+ border-top-width: var(--wm-form-footer-border-width);
227
+ }
228
+
229
+ .app-form-header{
230
+ border-style: var(--wm-form-header-border-style);
231
+ background-color: var(--wm-form-header-background);
232
+ border-width: var(--wm-form-header-border-width);
233
+ border-radius: var(--wm-form-header-border-radius);
234
+ border-color: var(--wm-form-header-border-color);
235
+ padding-left: var(--wm-form-header-padding-horizontal);
236
+ padding-right: var(--wm-form-header-padding-horizontal);
237
+ padding-top: var(--wm-form-header-padding-vertical);
238
+ padding-bottom: var(--wm-form-header-padding-vertical);
239
+ }
240
+
241
+ .app-currency{
242
+ border-width: var(--wm-space-0);
243
+ }
package/src/styles/mobile/components/data/list.less CHANGED
@@ -1,25 +1,3 @@
1
- .app-list-icon {
2
- margin-top: var(--wm-list-listicon-margin-top);
3
- margin-right: var(--wm-list-listicon-margin-right);
4
- }
5
-
6
- .app-list-group-heading {
7
- font-family: var(--wm-list-group-heading-font-family);
8
- padding-right: var(--wm-list-group-heading-padding-right);
9
- padding-left: var(--wm-list-group-heading-padding-left);
10
- font-size: var(--wm-list-group-heading-font-size);
11
- line-height: var(--wm-list-group-heading-line-height);
12
- background-color: var(--wm-list-group-heading-background-color);
13
- }
14
-
15
- .app-list-loading-icon {
16
- font-size: var(--wm-list-loading-icon-font-size);
17
- }
18
-
19
- .app-list-loading-icon .app-icon-text {
20
- color: var(--wm-list-loading-icon-text-color);
21
- }
22
-
23
1
  .app-list-heading {
24
2
  padding: var(--wm-list-heading-padding);
25
3
  background-color: var(--wm-list-heading-background-color);
@@ -42,39 +20,27 @@
42
20
  font-weight: var(--wm-list-sub-heading-font-weight);
43
21
  }
44
22
 
45
- .app-list-empty-message {
46
- color: var(--wm-list-empty-message-color);
47
- font-size: var(--wm-list-empty-message-font-size);
48
- line-height: var(--wm-list-empty-message-line-height);
49
- }
50
-
51
- .app-list-on-demand-data-message {
52
- color: var(--wm-list-on-demand-messsage-text);
53
- padding-top: var(--wm-list-on-demand-messsage-padding-vertical);
54
- padding-bottom: var(--wm-list-on-demand-messsage-padding-vertical);
55
- width: var(--wm-list-on-demand-messsage-width);
56
- }
57
-
58
-
59
23
  .app-list-item {
60
24
  color: var(--wm-list-item-header-color);
61
25
  background-color: var(--wm-list-item-header-background-color);
62
26
  padding: var(--wm-list-item-padding);
63
- border-color: var(--wm-list-item-border-color);
64
27
  border-radius: var(--wm-list-item-border-radius);
65
28
  min-height: var(--wm-list-item-min-height);
66
29
  border-style: var(--wm-list-item-border-style);
30
+ box-shadow: none;
67
31
  }
68
32
 
69
- .app-list-selected-icon {
70
- font-size: var(--wm-list-select-icon-font-size);
33
+ .app-list-template{
34
+ color: var(--wm-list-item-header-color);
35
+ background-color: var(--wm-list-item-header-background-color);
36
+ padding: var(--wm-list-item-padding);
37
+ border-color: var(--wm-list-item-border-color);
38
+ border-radius: var(--wm-list-item-border-radius);
39
+ min-height: var(--wm-list-item-min-height);
40
+ border-style: var(--wm-list-item-border-style);
71
41
  }
72
42
 
73
- .app-list-selected-icon-text {
43
+ .app-list-selected-icon-text{
74
44
  font-size: var(--wm-list-select-icon-font-size);
75
45
  color: var(--wm-list-select-icon-color);
76
- }
77
-
78
- .app-list-group {
79
- margin-bottom: var(--wm-list-group-margin-bottom);
80
46
  }
package/src/styles/mobile/components/input/checkbox.less CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .app-checkbox-checkicon.icon {
20
- font-size: var(--wm-checkboxset-icon-size);
20
+ font-size: var(--wm-checkbox-icon-size);
21
21
  color: var(--wm-checkbox-icon-color);
22
22
  }
23
23
 
@@ -35,20 +35,13 @@
35
35
  }
36
36
 
37
37
  .app-checkbox-selected-label {
38
+ margin-left: var(--wm-checkbox-label-margin-left);
38
39
  font-size: var(--wm-checkbox-label-font-size);
39
40
  font-family: var(--wm-checkbox-label-font-family);
40
- }
41
-
42
- .app-checkbox-checkicon.label {
43
41
  color: var(--wm-checkbox-label-color);
44
42
  }
45
43
 
46
- .app-checkbox-disabled.root {
44
+ .app-checkbox-disabled .app-checkbox {
47
45
  opacity: var(--wm-checkbox-opacity);
48
46
  border-color: var(--wm-checkbox-border-color);
49
47
  }
50
-
51
- .app-checkbox-disabled.text {
52
- opacity: var(--wm-checkbox-opacity);
53
- color: var(--wm-checkbox-label-color);
54
- }
package/src/styles/mobile/components/input/checkboxset.less CHANGED
@@ -54,18 +54,10 @@
54
54
  font-size: var(--wm-checkboxset-label-font-size);
55
55
  font-family: var(--wm-checkbox-label-font-family);
56
56
  margin-left: var(--wm-checkboxset-label-margin-left);
57
- }
58
-
59
- .app-checkboxset-checkicon.text {
60
57
  color: var(--wm-checkboxset-label-color);
61
58
  }
62
59
 
63
- .app-checkboxset-disabled.root {
60
+ .app-checkboxset-disabled .app-checkboxset {
64
61
  border-color: var(--wm-checkboxset-border-color);
65
62
  opacity: var(--wm-checkboxset-opacity);
66
63
  }
67
-
68
- .app-checkboxset-disabled.text {
69
- color: var(--wm-checkboxset-label-color);
70
- opacity: var(--wm-checkboxset-opacity);
71
- }
package/src/styles/mobile/components/input/chips.less CHANGED
@@ -18,7 +18,7 @@
18
18
  gap: var(--wm-chips-list-gap);
19
19
  }
20
20
 
21
- .app-chips-disabled {
21
+ .app-chips-disabled .app-chips-item {
22
22
  opacity: var(--wm-chips-opacity);
23
23
  pointer-events: var(--wm-chips-pointer-events);
24
24
  }
@@ -61,7 +61,7 @@
61
61
  box-shadow: var(--wm-chips-shadow);
62
62
  }
63
63
 
64
- .app-chips-chip-label {
64
+ .app-chips-item-text {
65
65
  color: var(--wm-chips-color);
66
66
  font-family: var(--wm-chips-item-font-family);
67
67
  font-weight: var(--wm-chips-item-font-weight);
@@ -90,13 +90,13 @@
90
90
  color: var(--wm-chips-list-place-holder-color);
91
91
  }
92
92
 
93
- .app-chips-done-icon {
93
+ .app-chips-done-icon .app-icon {
94
94
  font-size: var(--wm-chips-item-icon-size);
95
95
  padding-left: var(--wm-chips-item-icon-gap);
96
96
  color: var(--wm-chips-item-icon-color);
97
97
  }
98
98
 
99
- .app-chips-clear-icon {
99
+ .app-chips-clear-icon .app-icon {
100
100
  font-size: var(--wm-chips-item-icon-size);
101
101
  padding-right: var(--wm-chips-item-icon-gap);
102
102
  color: var(--wm-chips-item-icon-color);
package/src/styles/mobile/components/input/radioset.less CHANGED
@@ -56,7 +56,7 @@
56
56
  padding: 0;
57
57
  }
58
58
 
59
- .app-radioset-checked-icon.text {
59
+ .app-radioset-selected-label {
60
60
  color: var(--wm-radiobutton-label-color);
61
61
  }
62
62
 
@@ -70,11 +70,7 @@
70
70
  min-width: var(--wm-radiobutton-size);
71
71
  }
72
72
 
73
- .app-radioset-disabled-root {
73
+ .app-radioset-disabled .app-radioset {
74
74
  color: var(--wm-radiobutton-color);
75
75
  opacity: var(--wm-radiobutton-opacity);
76
76
  }
77
-
78
- .app-radioset-disabled-root.text {
79
- color: var(--wm-radiobutton-color);
80
- }
package/src/styles/mobile/components/input/toggle.less CHANGED
@@ -1,6 +1,6 @@
1
1
  @import url('../variables/toggle.variant.less');
2
2
 
3
- .app-toggle-off.root{
3
+ .app-toggle-off .app-toggle {
4
4
  width: var(--wm-toggle-width);
5
5
  height: var(--wm-toggle-height);
6
6
  border-radius: var(--wm-toggle-border-radius);
@@ -8,7 +8,7 @@
8
8
  background-color: var(--wm-toggle-background-color);
9
9
  border-width: var(--wm-toggle-border-width);
10
10
  }
11
- .app-toggle-off.handle{
11
+ .app-toggle-handle-off .app-toggle-handle {
12
12
  width: var(--wm-toggle-handle-width);
13
13
  height: var(--wm-toggle-handle-height);
14
14
  border-radius: var(--wm-toggle-handle-radius);
@@ -16,13 +16,13 @@
16
16
  margin-right: var(--wm-toggle-handle-margin-right);
17
17
  background-color: var(--wm-toggle-handle-color);
18
18
  }
19
- .app-toggle-on.root{
19
+ .app-toggle-on .app-toggle {
20
20
  width: var(--wm-toggle-width);
21
21
  height: var(--wm-toggle-height);
22
22
  border-radius: var(--wm-toggle-border-radius);
23
23
  background-color: var(--wm-toggle-background-color);
24
24
  }
25
- .app-toggle-on.handle{
25
+ .app-toggle-handle-on .app-toggle-handle {
26
26
  width: var(--wm-toggle-handle-width);
27
27
  height: var(--wm-toggle-handle-height);
28
28
  border-radius: var(--wm-toggle-handle-radius);
@@ -31,7 +31,7 @@
31
31
  background-color: var(--wm-toggle-handle-color);
32
32
  }
33
33
 
34
- .app-toggle-disabled.root{
34
+ .app-toggle-disabled {
35
35
  opacity: var(--wm-toggle-opacity);
36
36
  }
37
37
  .app-toggle-disabled.handle{
package/src/styles/mobile/components/navigation/appnavbar.less CHANGED
@@ -1,66 +1,102 @@
1
1
 
2
2
  .app-appnavbar {
3
+ height: var(--wm-navbar-height);
4
+ padding-left: var(--wm-navbar-padding-left);
5
+ padding-right: var(--wm-navbar-padding-right);
6
+ padding-top: var(--wm-navbar-padding-top);
7
+ padding-bottom: var(--wm-navbar-padding-bottom);
8
+ background-color: var(--wm-navbar-background-color);
3
9
  }
4
10
 
5
- .app-appnavbar-action {
6
- }
7
-
8
- .app-appnavbar-left-section {
9
- }
10
-
11
- .app-appnavbar-middle-section {
12
- }
13
-
14
- .app-appnavbar-right-section {
15
- }
16
11
 
17
12
  .app-appnavbar-left-icon {
13
+ color: var(--wm-navbar-left-icon-color);
14
+ font-size: var(--wm-navbar-left-icon-size);
18
15
  }
19
16
 
20
- .app-appnavbar-left-icon .app-icon {
17
+ .app-appnavbar-left-icon .app-icon-shape {
18
+ color: var(--wm-navbar-left-icon-color);
19
+ font-size: var(--wm-navbar-left-icon-size);
21
20
  }
22
21
 
23
22
  .app-appnavbar-back-icon {
23
+ color: var(--wm-navbar-back-icon-color);
24
+ font-size: var(--wm-navbar-back-icon-size);
24
25
  }
25
26
 
26
- .app-appnavbar-back-icon .app-icon {
27
+ .app-appnavbar-back-icon .app-icon-shape {
28
+ color: var(--wm-navbar-back-icon-color);
29
+ font-size: var(--wm-navbar-back-icon-size);
27
30
  }
28
31
 
29
32
  .app-appnavbar-image {
33
+ width: var(--wm-navbar-image-width);
34
+ height: var(--wm-navbar-image-height);
30
35
  }
31
36
 
32
37
  .app-appnavbar-content {
38
+ color: var(--wm-navbar-content-color);
39
+ font-size: var(--wm-navbar-content-font-size);
40
+ font-weight: var(--wm-navbar-content-font-weight);
41
+ font-family: var(--wm-navbar-content-font-family);
42
+
33
43
  }
34
44
 
35
45
  .app-appnavbar-badge {
46
+ background-color: var(--wm-navbar-badge-background-color);
47
+ color: var(--wm-navbar-badge-color);
48
+ margin-left: var(--wm-navbar-badge-margin-left);
36
49
  }
37
50
 
38
51
  .navbar-anchor {
52
+ padding-right: var(--wm-navbar-anchor-padding-right);
53
+ padding-left: var(--wm-navbar-anchor-padding-left);
54
+ padding-top: var(--wm-navbar-anchor-padding-top);
55
+ padding-bottom: var(--wm-navbar-anchor-padding-bottom);
56
+
39
57
  }
40
58
 
41
59
  .navbar-anchor-text {
60
+ color: var(--wm-navbar-anchor-text-color);
61
+ font-size: var(--wm-navbar-anchor-text-font-size);
62
+ font-weight: var(--wm-navbar-anchor-text-font-weight);
63
+ font-family: var(--wm-navbar-anchor-text-font-family);
42
64
  }
43
65
 
44
66
  .navbar-anchor-icon {
67
+ color: var(--wm-navbar-anchor-icon-color);
68
+ font-size: var(--wm-navbar-anchor-icon-size);
45
69
  }
46
70
 
47
71
  .navbar-button-icon {
72
+ color: var(--wm-navbar-button-icon-color);
73
+ font-size: var(--wm-navbar-button-icon-size);
48
74
  }
49
75
 
50
76
  .navbar-button-text {
51
- }
77
+ color: var(--wm-navbar-button-color);
78
+ font-size: var(--wm-navbar-button-font-size);
79
+ font-weight: var(--wm-navbar-button-font-weight);
80
+ font-family: var(--wm-navbar-button-font-family);
52
81
 
53
- .navbarMenu.app-menu-trigger {
54
82
  }
55
83
 
56
- .navbarMenu.app-menu-trigger .app-anchor-icon .app-icon {
84
+ .navbarMenu.app-menu-trigger .app-anchor-icon .app-icon-shape {
85
+ color: var(--wm-navbar-menu-icon-color);
86
+ font-size: var(--wm-navbar-menu-icon-size);
57
87
  }
58
88
 
59
89
  .navbarMenu.app-menu-trigger .app-anchor-text {
90
+ color: var(--wm-navbar-menu-icon-color);
91
+ font-size: var(--wm-navbar-menu-icon-size);
60
92
  }
61
93
 
62
- .navbarPopover.app-popover-link .app-anchor-icon .app-icon {
94
+ .navbarPopover.app-popover-link .app-anchor-icon .app-icon-shape {
95
+ color: var(--wm-navbar-popover-icon-color);
96
+ font-size: var(--wm-navbar-popover-icon-size);
63
97
  }
64
98
 
65
99
  .navbarPopover.app-popover-link .app-anchor-text {
100
+ color: var(--wm-navbar-popover-icon-color);
101
+ font-size: var(--wm-navbar-popover-icon-size);
66
102
  }