@ptsecurity/mosaic 13.2.0 → 13.4.0

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 (345) hide show
  1. package/_theming.scss +241 -64
  2. package/_visual.scss +437 -232
  3. package/button/button.component.d.ts +1 -1
  4. package/core/option/option.d.ts +1 -0
  5. package/core/validation/validation.d.ts +3 -3
  6. package/design-tokens/legacy-2017/tokens/components/alert.json5 +37 -37
  7. package/design-tokens/legacy-2017/tokens/components/autocomplete.json5 +2 -2
  8. package/design-tokens/legacy-2017/tokens/components/badge.json5 +69 -69
  9. package/design-tokens/legacy-2017/tokens/components/button-toggle.json5 +2 -2
  10. package/design-tokens/legacy-2017/tokens/components/button.json5 +55 -56
  11. package/design-tokens/legacy-2017/tokens/components/card.json5 +25 -25
  12. package/design-tokens/legacy-2017/tokens/components/checkbox.json5 +13 -13
  13. package/design-tokens/legacy-2017/tokens/components/datepicker.json5 +12 -12
  14. package/design-tokens/legacy-2017/tokens/components/dl.json5 +8 -8
  15. package/design-tokens/legacy-2017/tokens/components/dropdown.json5 +5 -4
  16. package/design-tokens/legacy-2017/tokens/components/form-field.json5 +27 -26
  17. package/design-tokens/legacy-2017/tokens/components/forms.json5 +14 -14
  18. package/design-tokens/legacy-2017/tokens/components/icon.json5 +104 -0
  19. package/design-tokens/legacy-2017/tokens/components/input.json5 +2 -3
  20. package/design-tokens/legacy-2017/tokens/components/link.json5 +13 -19
  21. package/design-tokens/legacy-2017/tokens/components/list.json5 +3 -5
  22. package/design-tokens/legacy-2017/tokens/components/modal.json5 +17 -15
  23. package/design-tokens/legacy-2017/tokens/components/navbar.json5 +19 -18
  24. package/design-tokens/legacy-2017/tokens/components/option.json5 +2 -2
  25. package/design-tokens/legacy-2017/tokens/components/popover.json5 +23 -23
  26. package/design-tokens/legacy-2017/tokens/components/popup.json5 +8 -8
  27. package/design-tokens/legacy-2017/tokens/components/progress-bar.json5 +3 -3
  28. package/design-tokens/legacy-2017/tokens/components/progress-spinner.json5 +1 -1
  29. package/design-tokens/legacy-2017/tokens/components/radio.json5 +12 -12
  30. package/design-tokens/legacy-2017/tokens/components/select.json5 +6 -7
  31. package/design-tokens/legacy-2017/tokens/components/sidepanel.json5 +7 -5
  32. package/design-tokens/legacy-2017/tokens/components/table.json5 +4 -4
  33. package/design-tokens/legacy-2017/tokens/components/tabs.json5 +32 -32
  34. package/design-tokens/legacy-2017/tokens/components/tags.json5 +56 -57
  35. package/design-tokens/legacy-2017/tokens/components/textarea.json5 +1 -1
  36. package/design-tokens/legacy-2017/tokens/components/timepicker.json5 +1 -1
  37. package/design-tokens/legacy-2017/tokens/components/toggle.json5 +18 -18
  38. package/design-tokens/legacy-2017/tokens/components/tooltip.json5 +27 -27
  39. package/design-tokens/legacy-2017/tokens/components/tree.json5 +6 -3
  40. package/design-tokens/legacy-2017/tokens/properties/colors.json5 +39 -35
  41. package/design-tokens/legacy-2017/tokens/properties/globals.json5 +14 -14
  42. package/design-tokens/legacy-2017/tokens/properties/typography.json5 +70 -35
  43. package/design-tokens/legacy-2017/tokens.d.ts +220 -122
  44. package/design-tokens/pt-2022/tokens/components/alert.json5 +37 -37
  45. package/design-tokens/pt-2022/tokens/components/autocomplete.json5 +2 -2
  46. package/design-tokens/pt-2022/tokens/components/badge.json5 +68 -68
  47. package/design-tokens/pt-2022/tokens/components/button-toggle.json5 +2 -2
  48. package/design-tokens/pt-2022/tokens/components/button.json5 +56 -57
  49. package/design-tokens/pt-2022/tokens/components/card.json5 +25 -25
  50. package/design-tokens/pt-2022/tokens/components/checkbox.json5 +13 -13
  51. package/design-tokens/pt-2022/tokens/components/datepicker.json5 +12 -12
  52. package/design-tokens/pt-2022/tokens/components/dl.json5 +4 -4
  53. package/design-tokens/pt-2022/tokens/components/dropdown.json5 +5 -4
  54. package/design-tokens/pt-2022/tokens/components/form-field.json5 +26 -25
  55. package/design-tokens/pt-2022/tokens/components/forms.json5 +14 -14
  56. package/design-tokens/pt-2022/tokens/components/icon.json5 +104 -0
  57. package/design-tokens/pt-2022/tokens/components/input.json5 +2 -3
  58. package/design-tokens/pt-2022/tokens/components/link.json5 +17 -23
  59. package/design-tokens/pt-2022/tokens/components/list.json5 +2 -4
  60. package/design-tokens/pt-2022/tokens/components/modal.json5 +17 -15
  61. package/design-tokens/pt-2022/tokens/components/navbar.json5 +21 -20
  62. package/design-tokens/pt-2022/tokens/components/option.json5 +2 -2
  63. package/design-tokens/pt-2022/tokens/components/popover.json5 +26 -26
  64. package/design-tokens/pt-2022/tokens/components/popup.json5 +8 -8
  65. package/design-tokens/pt-2022/tokens/components/progress-bar.json5 +2 -2
  66. package/design-tokens/pt-2022/tokens/components/progress-spinner.json5 +1 -1
  67. package/design-tokens/pt-2022/tokens/components/radio.json5 +12 -12
  68. package/design-tokens/pt-2022/tokens/components/select.json5 +6 -7
  69. package/design-tokens/pt-2022/tokens/components/sidepanel.json5 +8 -6
  70. package/design-tokens/pt-2022/tokens/components/table.json5 +4 -4
  71. package/design-tokens/pt-2022/tokens/components/tabs.json5 +32 -32
  72. package/design-tokens/pt-2022/tokens/components/tags.json5 +56 -57
  73. package/design-tokens/pt-2022/tokens/components/textarea.json5 +1 -1
  74. package/design-tokens/pt-2022/tokens/components/timepicker.json5 +1 -1
  75. package/design-tokens/pt-2022/tokens/components/toggle.json5 +19 -19
  76. package/design-tokens/pt-2022/tokens/components/tooltip.json5 +29 -29
  77. package/design-tokens/pt-2022/tokens/components/tree.json5 +6 -3
  78. package/design-tokens/pt-2022/tokens/properties/colors.json5 +41 -37
  79. package/design-tokens/pt-2022/tokens/properties/globals.json5 +14 -14
  80. package/design-tokens/pt-2022/tokens/properties/palette.json5 +7 -0
  81. package/design-tokens/pt-2022/tokens/properties/typography.json5 +69 -34
  82. package/design-tokens/pt-2022/tokens.d.ts +508 -118
  83. package/dropdown/dropdown-trigger.directive.d.ts +4 -3
  84. package/esm2020/autocomplete/autocomplete-origin.directive.mjs +3 -3
  85. package/esm2020/autocomplete/autocomplete-trigger.directive.mjs +3 -3
  86. package/esm2020/autocomplete/autocomplete.component.mjs +5 -5
  87. package/esm2020/autocomplete/autocomplete.module.mjs +4 -4
  88. package/esm2020/button/button.component.mjs +29 -21
  89. package/esm2020/button/button.module.mjs +4 -4
  90. package/esm2020/button-toggle/button-toggle.component.mjs +8 -8
  91. package/esm2020/button-toggle/button-toggle.module.mjs +4 -4
  92. package/esm2020/card/card.component.mjs +3 -3
  93. package/esm2020/card/card.module.mjs +4 -4
  94. package/esm2020/checkbox/checkbox-module.mjs +4 -4
  95. package/esm2020/checkbox/checkbox-required-validator.mjs +3 -3
  96. package/esm2020/checkbox/checkbox.mjs +3 -3
  97. package/esm2020/core/common-behaviors/common-module.mjs +4 -4
  98. package/esm2020/core/error/error-options.mjs +6 -6
  99. package/esm2020/core/formatters/date/formatter.mjs +3 -3
  100. package/esm2020/core/formatters/index.mjs +4 -4
  101. package/esm2020/core/formatters/number/formatter.mjs +4 -4
  102. package/esm2020/core/forms/forms-module.mjs +4 -4
  103. package/esm2020/core/forms/forms.directive.mjs +6 -6
  104. package/esm2020/core/highlight/highlight.pipe.mjs +3 -3
  105. package/esm2020/core/highlight/index.mjs +4 -4
  106. package/esm2020/core/line/line.mjs +7 -7
  107. package/esm2020/core/option/action.mjs +3 -3
  108. package/esm2020/core/option/optgroup.mjs +3 -3
  109. package/esm2020/core/option/option-module.mjs +4 -4
  110. package/esm2020/core/option/option.mjs +10 -7
  111. package/esm2020/core/pop-up/pop-up-trigger.mjs +3 -3
  112. package/esm2020/core/pop-up/pop-up.mjs +3 -3
  113. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  114. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.module.mjs +4 -4
  115. package/esm2020/core/services/measure-scrollbar.service.mjs +3 -3
  116. package/esm2020/core/validation/validation.mjs +10 -5
  117. package/esm2020/datepicker/calendar-body.component.mjs +3 -3
  118. package/esm2020/datepicker/calendar.component.mjs +6 -6
  119. package/esm2020/datepicker/datepicker-input.directive.mjs +3 -3
  120. package/esm2020/datepicker/datepicker-intl.mjs +3 -3
  121. package/esm2020/datepicker/datepicker-module.mjs +4 -4
  122. package/esm2020/datepicker/datepicker-toggle.component.mjs +6 -6
  123. package/esm2020/datepicker/datepicker.component.mjs +6 -6
  124. package/esm2020/datepicker/month-view.component.mjs +3 -3
  125. package/esm2020/datepicker/multi-year-view.component.mjs +3 -3
  126. package/esm2020/datepicker/year-view.component.mjs +3 -3
  127. package/esm2020/design-tokens/legacy-2017/tokens.mjs +221 -123
  128. package/esm2020/design-tokens/pt-2022/tokens.mjs +243 -138
  129. package/esm2020/divider/divider.component.mjs +3 -3
  130. package/esm2020/divider/divider.module.mjs +4 -4
  131. package/esm2020/dl/dl.component.mjs +9 -9
  132. package/esm2020/dl/dl.module.mjs +4 -4
  133. package/esm2020/dropdown/dropdown-content.directive.mjs +3 -3
  134. package/esm2020/dropdown/dropdown-item.component.mjs +5 -5
  135. package/esm2020/dropdown/dropdown-trigger.directive.mjs +11 -7
  136. package/esm2020/dropdown/dropdown.component.mjs +6 -6
  137. package/esm2020/dropdown/dropdown.module.mjs +4 -4
  138. package/esm2020/form-field/cleaner.mjs +3 -3
  139. package/esm2020/form-field/form-field.mjs +7 -7
  140. package/esm2020/form-field/form-field.module.mjs +4 -4
  141. package/esm2020/form-field/hint.mjs +3 -3
  142. package/esm2020/form-field/password-hint.mjs +34 -15
  143. package/esm2020/form-field/prefix.mjs +3 -3
  144. package/esm2020/form-field/stepper.mjs +3 -3
  145. package/esm2020/form-field/suffix.mjs +3 -3
  146. package/esm2020/icon/icon.component.mjs +6 -6
  147. package/esm2020/icon/icon.module.mjs +4 -4
  148. package/esm2020/input/input-number-validators.mjs +6 -6
  149. package/esm2020/input/input-number.mjs +3 -3
  150. package/esm2020/input/input-password.mjs +12 -11
  151. package/esm2020/input/input.mjs +12 -11
  152. package/esm2020/input/input.module.mjs +4 -4
  153. package/esm2020/link/link.component.mjs +3 -3
  154. package/esm2020/link/link.module.mjs +4 -4
  155. package/esm2020/list/list-selection.component.mjs +11 -11
  156. package/esm2020/list/list.component.mjs +7 -7
  157. package/esm2020/list/list.module.mjs +4 -4
  158. package/esm2020/modal/css-unit.pipe.mjs +3 -3
  159. package/esm2020/modal/modal-control.service.mjs +3 -3
  160. package/esm2020/modal/modal.component.mjs +4 -4
  161. package/esm2020/modal/modal.directive.mjs +12 -12
  162. package/esm2020/modal/modal.module.mjs +4 -4
  163. package/esm2020/modal/modal.service.mjs +3 -3
  164. package/esm2020/navbar/navbar-item.component.mjs +81 -82
  165. package/esm2020/navbar/navbar.component.mjs +10 -10
  166. package/esm2020/navbar/navbar.module.mjs +4 -4
  167. package/esm2020/navbar/vertical-navbar.animation.mjs +3 -3
  168. package/esm2020/navbar/vertical-navbar.component.mjs +6 -6
  169. package/esm2020/popover/popover-confirm.component.mjs +8 -8
  170. package/esm2020/popover/popover.component.mjs +8 -8
  171. package/esm2020/popover/popover.module.mjs +4 -4
  172. package/esm2020/progress-bar/progress-bar.component.mjs +3 -3
  173. package/esm2020/progress-bar/progress-bar.module.mjs +4 -4
  174. package/esm2020/progress-spinner/progress-spinner.component.mjs +3 -3
  175. package/esm2020/progress-spinner/progress-spinner.module.mjs +4 -4
  176. package/esm2020/radio/radio.component.mjs +6 -6
  177. package/esm2020/radio/radio.module.mjs +4 -4
  178. package/esm2020/select/public-api.mjs +2 -1
  179. package/esm2020/select/select-option.directive.mjs +65 -0
  180. package/esm2020/select/select.component.mjs +16 -16
  181. package/esm2020/select/select.module.mjs +19 -10
  182. package/esm2020/sidebar/sidebar.component.mjs +9 -9
  183. package/esm2020/sidebar/sidebar.module.mjs +4 -4
  184. package/esm2020/sidepanel/sidepanel-container.component.mjs +5 -5
  185. package/esm2020/sidepanel/sidepanel-directives.mjs +15 -15
  186. package/esm2020/sidepanel/sidepanel.module.mjs +4 -4
  187. package/esm2020/sidepanel/sidepanel.service.mjs +3 -3
  188. package/esm2020/splitter/splitter.component.mjs +12 -12
  189. package/esm2020/splitter/splitter.module.mjs +4 -4
  190. package/esm2020/table/table.component.mjs +3 -3
  191. package/esm2020/table/table.module.mjs +4 -4
  192. package/esm2020/tabs/paginated-tab-header.mjs +3 -3
  193. package/esm2020/tabs/tab-body.component.mjs +6 -6
  194. package/esm2020/tabs/tab-content.directive.mjs +3 -3
  195. package/esm2020/tabs/tab-group.component.mjs +19 -19
  196. package/esm2020/tabs/tab-header.component.mjs +4 -4
  197. package/esm2020/tabs/tab-label-wrapper.directive.mjs +3 -3
  198. package/esm2020/tabs/tab-label.directive.mjs +3 -3
  199. package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +6 -6
  200. package/esm2020/tabs/tab.component.mjs +3 -3
  201. package/esm2020/tabs/tabs.module.mjs +4 -4
  202. package/esm2020/tags/tag-input.mjs +3 -3
  203. package/esm2020/tags/tag-list.component.mjs +6 -6
  204. package/esm2020/tags/tag.component.mjs +67 -69
  205. package/esm2020/tags/tag.module.mjs +4 -4
  206. package/esm2020/textarea/textarea.component.mjs +9 -8
  207. package/esm2020/textarea/textarea.module.mjs +4 -4
  208. package/esm2020/timepicker/timepicker.directive.mjs +3 -3
  209. package/esm2020/timepicker/timepicker.module.mjs +4 -4
  210. package/esm2020/toggle/toggle.component.mjs +3 -3
  211. package/esm2020/toggle/toggle.module.mjs +4 -4
  212. package/esm2020/tooltip/tooltip.component.mjs +15 -14
  213. package/esm2020/tooltip/tooltip.module.mjs +4 -4
  214. package/esm2020/tree/node.mjs +3 -3
  215. package/esm2020/tree/outlet.mjs +3 -3
  216. package/esm2020/tree/padding.directive.mjs +3 -3
  217. package/esm2020/tree/toggle.mjs +10 -10
  218. package/esm2020/tree/tree-base.mjs +6 -6
  219. package/esm2020/tree/tree-option.component.mjs +5 -5
  220. package/esm2020/tree/tree-selection.component.mjs +8 -6
  221. package/esm2020/tree/tree.mjs +3 -3
  222. package/esm2020/tree/tree.module.mjs +4 -4
  223. package/esm2020/tree-select/tree-select.component.mjs +14 -14
  224. package/esm2020/tree-select/tree-select.module.mjs +4 -4
  225. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +15 -15
  226. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs +12 -12
  227. package/fesm2015/ptsecurity-mosaic-button.mjs +32 -24
  228. package/fesm2015/ptsecurity-mosaic-button.mjs.map +1 -1
  229. package/fesm2015/ptsecurity-mosaic-card.mjs +7 -7
  230. package/fesm2015/ptsecurity-mosaic-checkbox.mjs +10 -10
  231. package/fesm2015/ptsecurity-mosaic-core.mjs +89 -81
  232. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  233. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +40 -40
  234. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs +572 -271
  235. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  236. package/fesm2015/ptsecurity-mosaic-divider.mjs +7 -7
  237. package/fesm2015/ptsecurity-mosaic-dl.mjs +13 -13
  238. package/fesm2015/ptsecurity-mosaic-dropdown.mjs +25 -21
  239. package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  240. package/fesm2015/ptsecurity-mosaic-form-field.mjs +60 -38
  241. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  242. package/fesm2015/ptsecurity-mosaic-icon.mjs +10 -10
  243. package/fesm2015/ptsecurity-mosaic-input.mjs +33 -31
  244. package/fesm2015/ptsecurity-mosaic-input.mjs.map +1 -1
  245. package/fesm2015/ptsecurity-mosaic-link.mjs +7 -7
  246. package/fesm2015/ptsecurity-mosaic-list.mjs +21 -21
  247. package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
  248. package/fesm2015/ptsecurity-mosaic-modal.mjs +29 -29
  249. package/fesm2015/ptsecurity-mosaic-modal.mjs.map +1 -1
  250. package/fesm2015/ptsecurity-mosaic-navbar.mjs +100 -101
  251. package/fesm2015/ptsecurity-mosaic-navbar.mjs.map +1 -1
  252. package/fesm2015/ptsecurity-mosaic-popover.mjs +18 -18
  253. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  254. package/fesm2015/ptsecurity-mosaic-progress-bar.mjs +7 -7
  255. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs +7 -7
  256. package/fesm2015/ptsecurity-mosaic-radio.mjs +10 -10
  257. package/fesm2015/ptsecurity-mosaic-select.mjs +99 -33
  258. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  259. package/fesm2015/ptsecurity-mosaic-sidebar.mjs +13 -13
  260. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +26 -26
  261. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  262. package/fesm2015/ptsecurity-mosaic-splitter.mjs +16 -16
  263. package/fesm2015/ptsecurity-mosaic-table.mjs +7 -7
  264. package/fesm2015/ptsecurity-mosaic-tabs.mjs +54 -54
  265. package/fesm2015/ptsecurity-mosaic-tabs.mjs.map +1 -1
  266. package/fesm2015/ptsecurity-mosaic-tags.mjs +81 -83
  267. package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
  268. package/fesm2015/ptsecurity-mosaic-textarea.mjs +11 -10
  269. package/fesm2015/ptsecurity-mosaic-textarea.mjs.map +1 -1
  270. package/fesm2015/ptsecurity-mosaic-timepicker.mjs +7 -7
  271. package/fesm2015/ptsecurity-mosaic-toggle.mjs +7 -7
  272. package/fesm2015/ptsecurity-mosaic-tooltip.mjs +18 -17
  273. package/fesm2015/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  274. package/fesm2015/ptsecurity-mosaic-tree-select.mjs +17 -17
  275. package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  276. package/fesm2015/ptsecurity-mosaic-tree.mjs +44 -42
  277. package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
  278. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +15 -15
  279. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs +12 -12
  280. package/fesm2020/ptsecurity-mosaic-button.mjs +32 -24
  281. package/fesm2020/ptsecurity-mosaic-button.mjs.map +1 -1
  282. package/fesm2020/ptsecurity-mosaic-card.mjs +7 -7
  283. package/fesm2020/ptsecurity-mosaic-checkbox.mjs +10 -10
  284. package/fesm2020/ptsecurity-mosaic-core.mjs +89 -81
  285. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  286. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +40 -40
  287. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs +572 -271
  288. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  289. package/fesm2020/ptsecurity-mosaic-divider.mjs +7 -7
  290. package/fesm2020/ptsecurity-mosaic-dl.mjs +13 -13
  291. package/fesm2020/ptsecurity-mosaic-dropdown.mjs +25 -21
  292. package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  293. package/fesm2020/ptsecurity-mosaic-form-field.mjs +57 -38
  294. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  295. package/fesm2020/ptsecurity-mosaic-icon.mjs +10 -10
  296. package/fesm2020/ptsecurity-mosaic-input.mjs +33 -31
  297. package/fesm2020/ptsecurity-mosaic-input.mjs.map +1 -1
  298. package/fesm2020/ptsecurity-mosaic-link.mjs +7 -7
  299. package/fesm2020/ptsecurity-mosaic-list.mjs +21 -21
  300. package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
  301. package/fesm2020/ptsecurity-mosaic-modal.mjs +29 -29
  302. package/fesm2020/ptsecurity-mosaic-modal.mjs.map +1 -1
  303. package/fesm2020/ptsecurity-mosaic-navbar.mjs +100 -101
  304. package/fesm2020/ptsecurity-mosaic-navbar.mjs.map +1 -1
  305. package/fesm2020/ptsecurity-mosaic-popover.mjs +18 -18
  306. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  307. package/fesm2020/ptsecurity-mosaic-progress-bar.mjs +7 -7
  308. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs +7 -7
  309. package/fesm2020/ptsecurity-mosaic-radio.mjs +10 -10
  310. package/fesm2020/ptsecurity-mosaic-select.mjs +96 -32
  311. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  312. package/fesm2020/ptsecurity-mosaic-sidebar.mjs +13 -13
  313. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +26 -26
  314. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  315. package/fesm2020/ptsecurity-mosaic-splitter.mjs +16 -16
  316. package/fesm2020/ptsecurity-mosaic-table.mjs +7 -7
  317. package/fesm2020/ptsecurity-mosaic-tabs.mjs +54 -54
  318. package/fesm2020/ptsecurity-mosaic-tabs.mjs.map +1 -1
  319. package/fesm2020/ptsecurity-mosaic-tags.mjs +79 -81
  320. package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
  321. package/fesm2020/ptsecurity-mosaic-textarea.mjs +11 -10
  322. package/fesm2020/ptsecurity-mosaic-textarea.mjs.map +1 -1
  323. package/fesm2020/ptsecurity-mosaic-timepicker.mjs +7 -7
  324. package/fesm2020/ptsecurity-mosaic-toggle.mjs +7 -7
  325. package/fesm2020/ptsecurity-mosaic-tooltip.mjs +18 -17
  326. package/fesm2020/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  327. package/fesm2020/ptsecurity-mosaic-tree-select.mjs +17 -17
  328. package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  329. package/fesm2020/ptsecurity-mosaic-tree.mjs +44 -42
  330. package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
  331. package/form-field/password-hint.d.ts +3 -1
  332. package/input/input-password.d.ts +4 -3
  333. package/input/input.d.ts +4 -3
  334. package/list/list-selection.component.d.ts +1 -1
  335. package/navbar/navbar-item.component.d.ts +18 -18
  336. package/package.json +4 -4
  337. package/prebuilt-themes/dark-theme.css +1 -1
  338. package/prebuilt-themes/default-theme.css +1 -1
  339. package/prebuilt-visual/default-visual.css +1 -1
  340. package/select/public-api.d.ts +1 -0
  341. package/select/select-option.directive.d.ts +20 -0
  342. package/select/select.module.d.ts +9 -7
  343. package/tags/tag.component.d.ts +21 -21
  344. package/textarea/textarea.component.d.ts +4 -3
  345. package/toggle/README.md +0 -0
package/button/button.component.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare class McButtonCssStyler implements AfterContentInit {
7
7
  private renderer;
8
8
  icons: QueryList<McIcon>;
9
9
  nativeElement: HTMLElement;
10
- get isIconButton(): boolean;
10
+ isIconButton: boolean;
11
11
  constructor(elementRef: ElementRef, renderer: Renderer2);
12
12
  ngAfterContentInit(): void;
13
13
  updateClassModifierForIcons(): void;
package/core/option/option.d.ts CHANGED
@@ -28,6 +28,7 @@ export declare class McOption implements AfterViewChecked, OnDestroy {
28
28
  private readonly changeDetectorRef;
29
29
  private readonly parent;
30
30
  readonly group: McOptgroup;
31
+ textElement: ElementRef;
31
32
  /** The form value of the option. */
32
33
  value: any;
33
34
  get showCheckbox(): boolean | undefined;
package/core/validation/validation.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { InjectionToken } from '@angular/core';
1
+ import { ChangeDetectorRef, InjectionToken } from '@angular/core';
2
2
  import { NgControl, NgForm, Validator } from '@angular/forms';
3
3
  export declare const validationTooltipShowDelay = 10;
4
4
  export declare const validationTooltipHideDelay = 3000;
@@ -11,6 +11,6 @@ export declare const MC_VALIDATION: InjectionToken<McValidationOptions>;
11
11
  * - prevent validation in required validator if form doesn't submitted
12
12
  * - if control has focus validation will be prevented
13
13
  */
14
- export declare function setMosaicValidation(component: any): void;
14
+ export declare function setMosaicValidation(component: any, cdr?: ChangeDetectorRef): void;
15
15
  export declare function setMosaicValidationForModelControl(component: any, validators: Validator[], parentForm: NgForm): void;
16
- export declare function setMosaicValidationForFormControl(component: any, parentForm: NgForm, ngControl: NgControl): void;
16
+ export declare function setMosaicValidationForFormControl(component: any, parentForm: NgForm, ngControl: NgControl, cdr?: ChangeDetectorRef): void;
package/design-tokens/legacy-2017/tokens/components/alert.json5 CHANGED
@@ -2,71 +2,71 @@
2
2
  alert: {
3
3
  'light-color-scheme': {
4
4
  error: {
5
- background: { value: '{light-color-scheme.error.palette.value.60.value}' },
6
- border: { value: '{light-color-scheme.error.default.value}' },
7
- icon: { value: '{light-color-scheme.error.default.value}' }
5
+ background: { value: '{light-color-scheme.error.palette.value.60}' },
6
+ border: { value: '{light-color-scheme.error.default}' },
7
+ icon: { value: '{light-color-scheme.error.default}' }
8
8
  },
9
9
  warning: {
10
- background: { value: '{light-color-scheme.warning.palette.value.60.value}' },
11
- border: { value: '{light-color-scheme.warning.default.value}' },
12
- icon: { value: '{light-color-scheme.warning.palette.value.400.value}' }
10
+ background: { value: '{light-color-scheme.warning.palette.value.60}' },
11
+ border: { value: '{light-color-scheme.warning.default}' },
12
+ icon: { value: '{light-color-scheme.warning.palette.value.400}' }
13
13
  },
14
14
  success: {
15
- background: { value: '{light-color-scheme.success.palette.value.60.value}' },
16
- border: { value: '{light-color-scheme.success.default.value}' },
17
- icon: { value: '{light-color-scheme.success.palette.value.400.value}' }
15
+ background: { value: '{light-color-scheme.success.palette.value.60}' },
16
+ border: { value: '{light-color-scheme.success.default}' },
17
+ icon: { value: '{light-color-scheme.success.palette.value.400}' }
18
18
  },
19
19
  info: {
20
- background: { value: '{light-color-scheme.info.palette.value.60.value}' },
21
- border: { value: '{light-color-scheme.info.default.value}' },
22
- icon: { value: '{light-color-scheme.info.palette.value.400.value}' }
20
+ background: { value: '{light-color-scheme.info.palette.value.60}' },
21
+ border: { value: '{light-color-scheme.info.default}' },
22
+ icon: { value: '{light-color-scheme.info.palette.value.400}' }
23
23
  },
24
24
  default: {
25
- background: { value: '{light-color-scheme.second.palette.value.60.value}' },
26
- border: { value: '{light-color-scheme.second.default.value}' },
27
- icon: { value: '{light-color-scheme.second.palette.value.200.value}' }
25
+ background: { value: '{light-color-scheme.second.palette.value.60}' },
26
+ border: { value: '{light-color-scheme.second.default}' },
27
+ icon: { value: '{light-color-scheme.second.palette.value.200}' }
28
28
  }
29
29
  },
30
30
  'dark-color-scheme': {
31
31
  error: {
32
- background: { value: '{dark-color-scheme.error.palette.value.700.value}' },
33
- border: { value: '{dark-color-scheme.error.palette.value.700.value}' },
34
- icon: { value: '{dark-color-scheme.error.default.value}' }
32
+ background: { value: '{dark-color-scheme.error.palette.value.700}' },
33
+ border: { value: '{dark-color-scheme.error.palette.value.700}' },
34
+ icon: { value: '{dark-color-scheme.error.default}' }
35
35
  },
36
36
  warning: {
37
- background: { value: '{dark-color-scheme.warning.palette.value.700.value}' },
38
- border: { value: '{dark-color-scheme.warning.palette.value.700.value}' },
39
- icon: { value: '{dark-color-scheme.warning.default.value}' }
37
+ background: { value: '{dark-color-scheme.warning.palette.value.700}' },
38
+ border: { value: '{dark-color-scheme.warning.palette.value.700}' },
39
+ icon: { value: '{dark-color-scheme.warning.default}' }
40
40
  },
41
41
  success: {
42
- background: { value: '{dark-color-scheme.success.palette.value.700.value}' },
43
- border: { value: '{dark-color-scheme.success.palette.value.700.value}' },
44
- icon: { value: '{dark-color-scheme.success.default.value}' }
42
+ background: { value: '{dark-color-scheme.success.palette.value.700}' },
43
+ border: { value: '{dark-color-scheme.success.palette.value.700}' },
44
+ icon: { value: '{dark-color-scheme.success.default}' }
45
45
  },
46
46
  info: {
47
- background: { value: '{dark-color-scheme.info.palette.value.700.value}' },
48
- border: { value: '{dark-color-scheme.info.palette.value.700.value}' },
49
- icon: { value: '{dark-color-scheme.info.default.value}' }
47
+ background: { value: '{dark-color-scheme.info.palette.value.700}' },
48
+ border: { value: '{dark-color-scheme.info.palette.value.700}' },
49
+ icon: { value: '{dark-color-scheme.info.default}' }
50
50
  },
51
51
  default: {
52
- background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
53
- border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
54
- icon: { value: '{dark-color-scheme.second.default.value}' }
52
+ background: { value: '{dark-color-scheme.second.palette.value.700}' },
53
+ border: { value: '{dark-color-scheme.second.palette.value.700}' },
54
+ icon: { value: '{dark-color-scheme.second.default}' }
55
55
  }
56
56
  },
57
57
  size: {
58
- 'border-width': { value: '1px' },
59
- 'border-radius': { value: '4px' },
58
+ 'border-width': { value: '{size.border-width}' },
59
+ 'border-radius': { value: '{size.border-radius}' },
60
60
 
61
- 'horizontal-padding': { value: '{padding.control-horizontal}' },
62
- 'vertical-padding': { value: '13px' },
61
+ 'horizontal-padding': { value: '{size.l}' },
62
+ 'vertical-padding': { value: '{size.m}' },
63
63
 
64
- 'icon-margin': { value: '{margin.iconText_M-horizontal}' },
64
+ 'icon-margin': { value: '{size.s}' },
65
65
 
66
- 'close-button-width': { value: '16px' },
66
+ 'close-button-width': { value: '{size.l}' },
67
67
 
68
68
  small: {
69
- 'vertical-padding': { value: '11px' }
69
+ 'vertical-padding': { value: '{size.m}' }
70
70
  }
71
71
  },
72
72
  font: {
package/design-tokens/legacy-2017/tokens/components/autocomplete.json5 CHANGED
@@ -2,9 +2,9 @@
2
2
  autocomplete: {
3
3
  size: {
4
4
  panel: {
5
- padding: { value: '4px 0' },
5
+ padding: { value: '{size.xxs} 0' },
6
6
  'max-height': { value: '256px' },
7
- 'border-radius': { value: '3px' }
7
+ 'border-radius': { value: '{size.border-radius}' }
8
8
  }
9
9
  }
10
10
  }
package/design-tokens/legacy-2017/tokens/components/badge.json5 CHANGED
@@ -3,141 +3,141 @@
3
3
  'light-color-scheme': {
4
4
  solid: {
5
5
  primary: {
6
- background: { value: '{light-color-scheme.primary.palette.value.500.value}' },
6
+ background: { value: '{light-color-scheme.primary.palette.value.500}' },
7
7
  color: { value: 'white' },
8
- border: { value: '{light-color-scheme.primary.palette.value.500.value}' },
8
+ border: { value: '{light-color-scheme.primary.palette.value.500}' },
9
9
  },
10
10
  info: {
11
- border: { value: '{light-color-scheme.primary.palette.value.500.value}' },
12
- background: { value: '{light-color-scheme.primary.palette.value.500.value}' },
11
+ border: { value: '{light-color-scheme.primary.palette.value.500}' },
12
+ background: { value: '{light-color-scheme.primary.palette.value.500}' },
13
13
  color: { value: 'white' }
14
14
  },
15
15
  success: {
16
- border: { value: '{light-color-scheme.success.palette.value.500.value}' },
17
- background: { value: '{light-color-scheme.success.palette.value.500.value}' },
16
+ border: { value: '{light-color-scheme.success.palette.value.500}' },
17
+ background: { value: '{light-color-scheme.success.palette.value.500}' },
18
18
  color: { value: 'white' }
19
19
  },
20
20
  warning: {
21
- border: { value: '{light-color-scheme.warning.palette.value.500.value}' },
22
- background: { value: '{light-color-scheme.warning.palette.value.500.value}' },
21
+ border: { value: '{light-color-scheme.warning.palette.value.500}' },
22
+ background: { value: '{light-color-scheme.warning.palette.value.500}' },
23
23
  color: { value: 'white' }
24
24
  },
25
25
  error: {
26
- border: { value: '{light-color-scheme.error.palette.value.500.value}' },
27
- background: { value: '{light-color-scheme.error.palette.value.500.value}' },
26
+ border: { value: '{light-color-scheme.error.palette.value.500}' },
27
+ background: { value: '{light-color-scheme.error.palette.value.500}' },
28
28
  color: { value: 'white' }
29
29
  },
30
30
  transparent: {
31
- border: { value: '{light-color-scheme.second.palette.value.200.value}' },
32
- color: { value: '{light-color-scheme.primary.palette.value.contrast.300.value}' },
31
+ border: { value: '{light-color-scheme.second.palette.value.200}' },
32
+ color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' },
33
33
  background: { value: 'transparent' }
34
34
  },
35
35
  light: {
36
- border: { value: '{light-color-scheme.second.palette.value.100.value}' },
37
- background: { value: '{light-color-scheme.second.palette.value.100.value}' },
38
- color: { value: '{light-color-scheme.primary.palette.value.contrast.300.value}' }
36
+ border: { value: '{light-color-scheme.second.palette.value.100}' },
37
+ background: { value: '{light-color-scheme.second.palette.value.100}' },
38
+ color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' }
39
39
  },
40
40
  second: {
41
- border: { value: '{light-color-scheme.second.palette.value.600.value}' },
42
- background: { value: '{light-color-scheme.second.palette.value.600.value}' },
41
+ border: { value: '{light-color-scheme.second.palette.value.600}' },
42
+ background: { value: '{light-color-scheme.second.palette.value.600}' },
43
43
  color: { value: 'white' }
44
44
  }
45
45
  },
46
46
  pastel: {
47
47
  primary: {
48
- background: { value: '{light-color-scheme.primary.palette.value.40.value}' },
49
- border: { value: '{light-color-scheme.primary.palette.value.200.value}' },
50
- color: { value: '{light-color-scheme.primary.palette.value.500.value}' }
48
+ background: { value: '{light-color-scheme.primary.palette.value.40}' },
49
+ border: { value: '{light-color-scheme.primary.palette.value.200}' },
50
+ color: { value: '{light-color-scheme.primary.palette.value.500}' }
51
51
  },
52
52
  info: {
53
- background: { value: '{light-color-scheme.info.palette.value.40.value}' },
54
- border: { value: '{light-color-scheme.primary.palette.value.200.value}' },
55
- color: { value: '{light-color-scheme.info.palette.value.500.value}' }
53
+ background: { value: '{light-color-scheme.info.palette.value.40}' },
54
+ border: { value: '{light-color-scheme.primary.palette.value.200}' },
55
+ color: { value: '{light-color-scheme.info.palette.value.500}' }
56
56
  },
57
57
  success: {
58
- background: { value: '{light-color-scheme.success.palette.value.40.value}' },
59
- border: { value: '{light-color-scheme.success.palette.value.200.value}' },
60
- color: { value: '{light-color-scheme.success.palette.value.560.value}' }
58
+ background: { value: '{light-color-scheme.success.palette.value.40}' },
59
+ border: { value: '{light-color-scheme.success.palette.value.200}' },
60
+ color: { value: '{light-color-scheme.success.palette.value.560}' }
61
61
  },
62
62
  warning: {
63
- background: { value: '{light-color-scheme.warning.palette.value.40.value}' },
64
- border: { value: '{light-color-scheme.warning.palette.value.200.value}' },
65
- color: { value: '{light-color-scheme.warning.palette.value.560.value}' }
63
+ background: { value: '{light-color-scheme.warning.palette.value.40}' },
64
+ border: { value: '{light-color-scheme.warning.palette.value.200}' },
65
+ color: { value: '{light-color-scheme.warning.palette.value.560}' }
66
66
  },
67
67
  error: {
68
- background: { value: '{light-color-scheme.error.palette.value.40.value}' },
69
- border: { value: '{light-color-scheme.error.palette.value.200.value}' },
70
- color: { value: '{light-color-scheme.error.palette.value.500.value}' }
68
+ background: { value: '{light-color-scheme.error.palette.value.40}' },
69
+ border: { value: '{light-color-scheme.error.palette.value.200}' },
70
+ color: { value: '{light-color-scheme.error.palette.value.500}' }
71
71
  }
72
72
  }
73
73
  },
74
74
  'dark-color-scheme': {
75
75
  pastel: {
76
76
  primary: {
77
- background: { value: '{light-color-scheme.primary.palette.value.A100.value}' },
78
- color: { value: '{light-color-scheme.primary.palette.value.100.value}' },
79
- border: { value: '{light-color-scheme.primary.palette.value.700.value}' },
77
+ background: { value: '{light-color-scheme.primary.palette.value.A100}' },
78
+ color: { value: '{light-color-scheme.primary.palette.value.100}' },
79
+ border: { value: '{light-color-scheme.primary.palette.value.700}' },
80
80
  },
81
81
  info: {
82
- background: { value: '{light-color-scheme.primary.palette.value.100.value}' },
83
- color: { value: '{light-color-scheme.primary.palette.value.100.value}' },
84
- border: { value: '{light-color-scheme.primary.palette.value.A100.value}' }
82
+ background: { value: '{light-color-scheme.primary.palette.value.100}' },
83
+ color: { value: '{light-color-scheme.primary.palette.value.100}' },
84
+ border: { value: '{light-color-scheme.primary.palette.value.A100}' }
85
85
  },
86
86
  success: {
87
- border: { value: '{light-color-scheme.success.palette.value.700.value}' },
88
- background: { value: '{light-color-scheme.success.palette.value.A100.value}' },
89
- color: { value: '{light-color-scheme.success.palette.value.100.value}' }
87
+ border: { value: '{light-color-scheme.success.palette.value.700}' },
88
+ background: { value: '{light-color-scheme.success.palette.value.A100}' },
89
+ color: { value: '{light-color-scheme.success.palette.value.100}' }
90
90
  },
91
91
  warning: {
92
- border: { value: '{light-color-scheme.warning.palette.value.700.value}' },
93
- background: { value: '{light-color-scheme.warning.palette.value.A100.value}' },
94
- color: { value: '{light-color-scheme.warning.palette.value.100.value}' }
92
+ border: { value: '{light-color-scheme.warning.palette.value.700}' },
93
+ background: { value: '{light-color-scheme.warning.palette.value.A100}' },
94
+ color: { value: '{light-color-scheme.warning.palette.value.100}' }
95
95
  },
96
96
  error: {
97
- border: { value: '{light-color-scheme.error.palette.value.700.value}' },
98
- background: { value: '{light-color-scheme.error.palette.value.A100.value}' },
99
- color: { value: '{light-color-scheme.error.palette.value.100.value}' }
97
+ border: { value: '{light-color-scheme.error.palette.value.700}' },
98
+ background: { value: '{light-color-scheme.error.palette.value.A100}' },
99
+ color: { value: '{light-color-scheme.error.palette.value.100}' }
100
100
  }
101
101
  },
102
102
  solid: {
103
103
  primary: {
104
- background: { value: '{light-color-scheme.primary.palette.value.700.value}' },
104
+ background: { value: '{light-color-scheme.primary.palette.value.700}' },
105
105
  color: { value: 'white' },
106
- border: { value: '{light-color-scheme.primary.palette.value.700.value}' },
106
+ border: { value: '{light-color-scheme.primary.palette.value.700}' },
107
107
  },
108
108
  info: {
109
- border: { value: '{light-color-scheme.primary.palette.value.800.value}' },
110
- background: { value: '{light-color-scheme.primary.palette.value.800.value}' },
109
+ border: { value: '{light-color-scheme.primary.palette.value.800}' },
110
+ background: { value: '{light-color-scheme.primary.palette.value.800}' },
111
111
  color: { value: 'white' }
112
112
  },
113
113
  success: {
114
- border: { value: '{light-color-scheme.success.palette.value.700.value}' },
115
- background: { value: '{light-color-scheme.success.palette.value.700.value}' },
114
+ border: { value: '{light-color-scheme.success.palette.value.700}' },
115
+ background: { value: '{light-color-scheme.success.palette.value.700}' },
116
116
  color: { value: 'white' }
117
117
  },
118
118
  warning: {
119
- border: { value: '{light-color-scheme.warning.palette.value.700.value}' },
120
- background: { value: '{light-color-scheme.warning.palette.value.700.value}' },
119
+ border: { value: '{light-color-scheme.warning.palette.value.700}' },
120
+ background: { value: '{light-color-scheme.warning.palette.value.700}' },
121
121
  color: { value: 'white' }
122
122
  },
123
123
  error: {
124
- border: { value: '{light-color-scheme.error.palette.value.700.value}' },
125
- background: { value: '{light-color-scheme.error.palette.value.700.value}' },
124
+ border: { value: '{light-color-scheme.error.palette.value.700}' },
125
+ background: { value: '{light-color-scheme.error.palette.value.700}' },
126
126
  color: { value: 'white' }
127
127
  },
128
128
  transparent: {
129
- border: { value: '{light-color-scheme.second.palette.value.500.value}' },
130
- color: { value: '{light-color-scheme.second.palette.value.40.value}' },
129
+ border: { value: '{light-color-scheme.second.palette.value.500}' },
130
+ color: { value: '{light-color-scheme.second.palette.value.40}' },
131
131
  background: { value: 'transparent' }
132
132
  },
133
133
  light: {
134
- border: { value: '{light-color-scheme.second.palette.value.400.value}' },
135
- background: { value: '{light-color-scheme.second.palette.value.400.value}' },
134
+ border: { value: '{light-color-scheme.second.palette.value.400}' },
135
+ background: { value: '{light-color-scheme.second.palette.value.400}' },
136
136
  color: { value: 'white' }
137
137
  },
138
138
  second: {
139
- border: { value: '{light-color-scheme.second.palette.value.700.value}' },
140
- background: { value: '{light-color-scheme.second.palette.value.700.value}' },
139
+ border: { value: '{light-color-scheme.second.palette.value.700}' },
140
+ background: { value: '{light-color-scheme.second.palette.value.700}' },
141
141
  color: { value: 'white' }
142
142
  }
143
143
  }
@@ -146,16 +146,16 @@
146
146
  default: {
147
147
  height: { value: '{size.xxl}' },
148
148
  'min-width': { value: '10px' },
149
- padding: { value: '0 8px' },
150
- 'border-width': { value: '1px' },
151
- 'border-radius': { value: '4px' }
149
+ padding: { value: '0 {size.s}' },
150
+ 'border-width': { value: '{size.border-width}' },
151
+ 'border-radius': { value: '{size.border-radius}' }
152
152
  },
153
153
  mini: {
154
154
  height: { value: '{size.l}' },
155
155
  'min-width': { value: '10px' },
156
- 'border-width': { value: '1px' },
157
- 'border-radius': { value: '2px' },
158
- padding: { value: '0 4px' }
156
+ 'border-width': { value: '{size.border-width}' },
157
+ 'border-radius': { value: '{size.3xs}' },
158
+ padding: { value: '0 {size.xxs}' }
159
159
  }
160
160
  },
161
161
  font: {
package/design-tokens/legacy-2017/tokens/components/button-toggle.json5 CHANGED
@@ -2,8 +2,8 @@
2
2
  'button-toggle': {
3
3
  size: {
4
4
  border: {
5
- size: { value: '1px' },
6
- radius: { value: '3px' }
5
+ size: { value: '{size.border-width}' },
6
+ radius: { value: '{size.border-radius}' }
7
7
  }
8
8
  }
9
9
  }
package/design-tokens/legacy-2017/tokens/components/button.json5 CHANGED
@@ -5,56 +5,56 @@
5
5
  shadow: { value: 'inset 0 1px 2px 0 rgba(black, 0.2)' }
6
6
  },
7
7
  primary: {
8
- color: { value: '{light-color-scheme.primary.palette.value.contrast.500.value}' },
9
- border: { value: '{light-color-scheme.primary.palette.value.560.value}' },
10
- background: { value: '{light-color-scheme.primary.palette.value.500.value}' },
11
- icon: { value: '{light-color-scheme.primary.palette.value.contrast.500.value}' },
8
+ color: { value: '{light-color-scheme.primary.palette.value.contrast.500}' },
9
+ border: { value: '{light-color-scheme.primary.palette.value.560}' },
10
+ background: { value: '{light-color-scheme.primary.palette.value.500}' },
11
+ icon: { value: '{light-color-scheme.primary.palette.value.contrast.500}' },
12
12
 
13
13
  states: {
14
14
  active: {
15
- border: { value: 'darken({light-color-scheme.primary.palette.value.560.value}, 5)' },
16
- background: { value: 'darken({light-color-scheme.primary.palette.value.500.value}, 5)' }
15
+ border: { value: 'darken({light-color-scheme.primary.palette.value.560}, 5)' },
16
+ background: { value: 'darken({light-color-scheme.primary.palette.value.500}, 5)' }
17
17
  }
18
18
  }
19
19
  },
20
20
  primary_transparent: {
21
- color: { value: '{light-color-scheme.primary.palette.value.500.value}' },
22
- icon: { value: '{light-color-scheme.primary.palette.value.500.value}' },
21
+ color: { value: '{light-color-scheme.primary.palette.value.500}' },
22
+ icon: { value: '{light-color-scheme.primary.palette.value.500}' },
23
23
 
24
24
  states: {
25
25
  hover: {
26
- color: { value: '{light-color-scheme.primary.palette.value.600.value}' },
27
- icon: { value: '{light-color-scheme.primary.palette.value.600.value}' }
26
+ color: { value: '{light-color-scheme.primary.palette.value.600}' },
27
+ icon: { value: '{light-color-scheme.primary.palette.value.600}' }
28
28
  },
29
29
  active: {
30
- color: { value: '{light-color-scheme.primary.palette.value.700.value}' },
31
- icon: { value: '{light-color-scheme.primary.palette.value.700.value}' }
30
+ color: { value: '{light-color-scheme.primary.palette.value.700}' },
31
+ icon: { value: '{light-color-scheme.primary.palette.value.700}' }
32
32
  }
33
33
  }
34
34
  },
35
35
  second: {
36
- border: { value: '{light-color-scheme.foreground.border.value}' },
37
- background: { value: '{light-color-scheme.background.background-disabled.value}' },
38
- color: { value: '{light-color-scheme.foreground.text.value}' },
39
- icon: { value: '{light-color-scheme.foreground.text-less-contrast.value}' },
36
+ border: { value: '{light-color-scheme.foreground.border}' },
37
+ background: { value: '{light-color-scheme.background.background-disabled}' },
38
+ color: { value: '{light-color-scheme.foreground.text}' },
39
+ icon: { value: '{light-color-scheme.foreground.text-less-contrast}' },
40
40
 
41
41
  states: {
42
42
  active: {
43
- border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' },
44
- background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 5)' }
43
+ border: { value: 'darken({light-color-scheme.foreground.border}, 5)' },
44
+ background: { value: 'darken({light-color-scheme.background.background-disabled}, 5)' }
45
45
  }
46
46
  }
47
47
  },
48
48
  error: {
49
- border: { value: '{light-color-scheme.foreground.border.value}' },
50
- background: { value: '{light-color-scheme.background.background-disabled.value}' },
51
- color: { value: '{light-color-scheme.error.palette.value.400.value}' },
52
- icon: { value: '{light-color-scheme.error.palette.value.400.value}' },
49
+ border: { value: '{light-color-scheme.foreground.border}' },
50
+ background: { value: '{light-color-scheme.background.background-disabled}' },
51
+ color: { value: '{light-color-scheme.error.palette.value.400}' },
52
+ icon: { value: '{light-color-scheme.error.palette.value.400}' },
53
53
 
54
54
  states: {
55
55
  active: {
56
- border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' },
57
- background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 5)' }
56
+ border: { value: 'darken({light-color-scheme.foreground.border}, 5)' },
57
+ background: { value: 'darken({light-color-scheme.background.background-disabled}, 5)' }
58
58
  }
59
59
  }
60
60
  }
@@ -64,67 +64,68 @@
64
64
  shadow: { value: 'inset 1px 2px 2px 0 rgba(black, 0.2)' }
65
65
  },
66
66
  primary: {
67
- color: { value: '{dark-color-scheme.primary.palette.value.contrast.500.value}' },
68
- border: { value: '{dark-color-scheme.primary.palette.value.560.value}' },
69
- background: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
70
- icon: { value: '{dark-color-scheme.primary.palette.value.contrast.500.value}' },
67
+ color: { value: '{dark-color-scheme.primary.palette.value.contrast.500}' },
68
+ border: { value: '{dark-color-scheme.primary.palette.value.560}' },
69
+ background: { value: '{dark-color-scheme.primary.palette.value.500}' },
70
+ icon: { value: '{dark-color-scheme.primary.palette.value.contrast.500}' },
71
71
 
72
72
  states: {
73
73
  active: {
74
- border: { value: 'darken({dark-color-scheme.primary.palette.value.560.value}, 5)' },
75
- background: { value: 'darken({dark-color-scheme.primary.palette.value.400.value}, 5)' }
74
+ border: { value: 'darken({dark-color-scheme.primary.palette.value.560}, 5)' },
75
+ background: { value: 'darken({dark-color-scheme.primary.palette.value.400}, 5)' }
76
76
  }
77
77
  }
78
78
  },
79
79
 
80
80
  primary_transparent: {
81
- color: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
82
- icon: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
81
+ color: { value: '{dark-color-scheme.primary.palette.value.500}' },
82
+ icon: { value: '{dark-color-scheme.primary.palette.value.500}' },
83
83
 
84
84
  states: {
85
85
  hover: {
86
- color: { value: '{dark-color-scheme.primary.palette.value.600.value}' },
87
- icon: { value: '{dark-color-scheme.primary.palette.value.600.value}' }
86
+ color: { value: '{dark-color-scheme.primary.palette.value.600}' },
87
+ icon: { value: '{dark-color-scheme.primary.palette.value.600}' }
88
88
  },
89
89
  active: {
90
- color: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
91
- icon: { value: '{dark-color-scheme.primary.palette.value.700.value}' }
90
+ color: { value: '{dark-color-scheme.primary.palette.value.700}' },
91
+ icon: { value: '{dark-color-scheme.primary.palette.value.700}' }
92
92
  }
93
93
  }
94
94
  },
95
95
  second: {
96
- border: { value: '{dark-color-scheme.foreground.border.value}' },
97
- background: { value: '{dark-color-scheme.background.background-disabled.value}' },
98
- color: { value: '{dark-color-scheme.foreground.text.value}' },
99
- icon: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' },
96
+ border: { value: '{dark-color-scheme.foreground.border}' },
97
+ background: { value: '{dark-color-scheme.background.background-disabled}' },
98
+ color: { value: '{dark-color-scheme.foreground.text}' },
99
+ icon: { value: '{dark-color-scheme.foreground.text-less-contrast}' },
100
100
 
101
101
  states: {
102
102
  active: {
103
- border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' },
104
- background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' }
103
+ border: { value: 'darken({dark-color-scheme.foreground.border}, 5)' },
104
+ background: { value: 'darken({dark-color-scheme.background.background-disabled}, 5)' }
105
105
  }
106
106
  }
107
107
  },
108
108
  error: {
109
- border: { value: '{dark-color-scheme.foreground.border.value}' },
110
- background: { value: '{dark-color-scheme.background.background-disabled.value}' },
111
- color: { value: '{dark-color-scheme.error.palette.value.400.value}' },
112
- icon: { value: '{dark-color-scheme.error.palette.value.400.value}' },
109
+ border: { value: '{dark-color-scheme.foreground.border}' },
110
+ background: { value: '{dark-color-scheme.background.background-disabled}' },
111
+ color: { value: '{dark-color-scheme.error.palette.value.400}' },
112
+ icon: { value: '{dark-color-scheme.error.palette.value.400}' },
113
113
 
114
114
  states: {
115
115
  active: {
116
- border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' },
117
- background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' }
116
+ border: { value: 'darken({dark-color-scheme.foreground.border}, 5)' },
117
+ background: { value: 'darken({dark-color-scheme.background.background-disabled}, 5)' }
118
118
  }
119
119
  }
120
120
  }
121
121
  },
122
122
  size: {
123
- 'border-width': { value: '1px' },
124
- 'border-radius': { value: '3px' },
123
+ height: { value: '{size.3xl}' },
125
124
 
126
- 'vertical-padding': { value: '6px' },
127
- 'horizontal-padding': { value: '16px' }
125
+ 'border-width': { value: '{size.border-width}' },
126
+ 'border-radius': { value: '{size.border-radius}' },
127
+
128
+ 'horizontal-padding': { value: '{size.m}' }
128
129
  },
129
130
  font: {
130
131
  default: { value: 'body' },
@@ -134,10 +135,8 @@
134
135
  },
135
136
  'icon-button': {
136
137
  size: {
137
- 'vertical-padding': { value: '6px' },
138
- 'horizontal-padding': { value: '8px' },
139
-
140
- 'icon-horizontal-padding': { value: '16px' }
138
+ 'horizontal-padding': { value: '{size.s}' },
139
+ 'left-icon-padding': { value: '{size.xs}' }
141
140
  }
142
141
  }
143
142
  }