@cds/core 5.7.1 → 6.0.0-beta.3

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 (687) hide show
  1. package/accordion/accordion-content.element.scss.js +1 -1
  2. package/accordion/accordion-header.element.d.ts +2 -0
  3. package/accordion/accordion-header.element.js +1 -1
  4. package/accordion/accordion-header.element.js.map +1 -1
  5. package/accordion/accordion-header.element.scss.js +1 -1
  6. package/accordion/accordion-panel.element.d.ts +2 -2
  7. package/accordion/accordion-panel.element.js +1 -1
  8. package/accordion/accordion-panel.element.js.map +1 -1
  9. package/accordion/accordion-panel.element.scss.js +1 -1
  10. package/accordion/accordion.element.scss.js +1 -1
  11. package/accordion/register.d.ts +1 -0
  12. package/accordion/register.js +1 -1
  13. package/accordion/register.js.map +1 -1
  14. package/alert/alert-actions.element.js +1 -1
  15. package/alert/alert-actions.element.js.map +1 -1
  16. package/alert/alert-actions.element.scss.js +1 -1
  17. package/alert/alert-group.element.js +1 -1
  18. package/alert/alert-group.element.js.map +1 -1
  19. package/alert/alert-group.element.scss.js +1 -1
  20. package/alert/alert.element.d.ts +2 -3
  21. package/alert/alert.element.js +1 -1
  22. package/alert/alert.element.js.map +1 -1
  23. package/alert/alert.element.scss.js +1 -1
  24. package/badge/badge.element.scss.js +1 -1
  25. package/breadcrumb/breadcrumb.element.d.ts +0 -1
  26. package/breadcrumb/breadcrumb.element.js +1 -1
  27. package/breadcrumb/breadcrumb.element.js.map +1 -1
  28. package/breadcrumb/breadcrumb.element.scss.js +1 -1
  29. package/button/button.element.d.ts +1 -1
  30. package/button/button.element.js +1 -1
  31. package/button/button.element.js.map +1 -1
  32. package/button/button.element.scss.js +1 -1
  33. package/button/icon-button.element.d.ts +1 -9
  34. package/button/icon-button.element.js +1 -1
  35. package/button/icon-button.element.js.map +1 -1
  36. package/button/index.d.ts +0 -1
  37. package/button/index.js +1 -1
  38. package/button/register.d.ts +0 -2
  39. package/button/register.js +1 -1
  40. package/button/register.js.map +1 -1
  41. package/button-action/button-action.element.d.ts +45 -0
  42. package/button-action/button-action.element.js +2 -0
  43. package/button-action/button-action.element.js.map +1 -0
  44. package/button-action/button-action.element.scss.js +2 -0
  45. package/button-action/button-action.element.scss.js.map +1 -0
  46. package/button-action/index.d.ts +1 -0
  47. package/button-action/index.js +2 -0
  48. package/{internal/interfaces → button-action}/index.js.map +0 -0
  49. package/button-action/register.d.ts +7 -0
  50. package/button-action/register.js +2 -0
  51. package/button-action/register.js.map +1 -0
  52. package/button-expand/button-expand.element.d.ts +25 -0
  53. package/button-expand/button-expand.element.js +2 -0
  54. package/button-expand/button-expand.element.js.map +1 -0
  55. package/button-expand/button-expand.element.scss.js +2 -0
  56. package/button-expand/button-expand.element.scss.js.map +1 -0
  57. package/button-expand/index.d.ts +1 -0
  58. package/button-expand/index.js +2 -0
  59. package/button-expand/index.js.map +1 -0
  60. package/button-expand/register.d.ts +7 -0
  61. package/button-expand/register.js +2 -0
  62. package/button-expand/register.js.map +1 -0
  63. package/button-handle/button-handle.element.d.ts +19 -0
  64. package/button-handle/button-handle.element.js +2 -0
  65. package/button-handle/button-handle.element.js.map +1 -0
  66. package/button-handle/button-handle.element.scss.js +2 -0
  67. package/button-handle/button-handle.element.scss.js.map +1 -0
  68. package/button-handle/index.d.ts +1 -0
  69. package/button-handle/index.js +2 -0
  70. package/button-handle/index.js.map +1 -0
  71. package/button-handle/register.d.ts +7 -0
  72. package/button-handle/register.js +2 -0
  73. package/button-handle/register.js.map +1 -0
  74. package/{button/inline-button.element.d.ts → button-inline/button-inline.element.d.ts} +10 -3
  75. package/button-inline/button-inline.element.js +2 -0
  76. package/button-inline/button-inline.element.js.map +1 -0
  77. package/{button/inline-button.element.scss.js → button-inline/button-inline.element.scss.js} +2 -2
  78. package/button-inline/button-inline.element.scss.js.map +1 -0
  79. package/button-inline/index.d.ts +1 -0
  80. package/button-inline/index.js +2 -0
  81. package/button-inline/index.js.map +1 -0
  82. package/button-inline/register.d.ts +11 -0
  83. package/button-inline/register.js +2 -0
  84. package/button-inline/register.js.map +1 -0
  85. package/button-sort/button-sort.element.d.ts +23 -0
  86. package/button-sort/button-sort.element.js +2 -0
  87. package/button-sort/button-sort.element.js.map +1 -0
  88. package/button-sort/button-sort.element.scss.js +2 -0
  89. package/button-sort/button-sort.element.scss.js.map +1 -0
  90. package/button-sort/index.d.ts +1 -0
  91. package/button-sort/index.js +2 -0
  92. package/button-sort/index.js.map +1 -0
  93. package/button-sort/register.d.ts +7 -0
  94. package/button-sort/register.js +2 -0
  95. package/button-sort/register.js.map +1 -0
  96. package/button-sort/utils.d.ts +1 -0
  97. package/button-sort/utils.js +2 -0
  98. package/button-sort/utils.js.map +1 -0
  99. package/card/card.element.d.ts +4 -5
  100. package/card/card.element.js.map +1 -1
  101. package/card/card.element.scss.js +1 -1
  102. package/checkbox/checkbox.element.scss.js +1 -1
  103. package/custom-elements.json +17326 -9488
  104. package/datalist/datalist.element.d.ts +0 -1
  105. package/datalist/datalist.element.js +1 -1
  106. package/datalist/datalist.element.js.map +1 -1
  107. package/datalist/register.d.ts +1 -1
  108. package/datalist/register.js +1 -1
  109. package/datalist/register.js.map +1 -1
  110. package/date/date.element.d.ts +0 -1
  111. package/date/date.element.js +1 -1
  112. package/date/date.element.js.map +1 -1
  113. package/date/date.global.scss.js +1 -1
  114. package/date/register.d.ts +1 -0
  115. package/date/register.js +1 -1
  116. package/date/register.js.map +1 -1
  117. package/demo/data/demo.service.d.ts +6 -0
  118. package/demo/data/demo.service.js +2 -0
  119. package/demo/data/demo.service.js.map +1 -0
  120. package/demo/data/food.data.d.ts +2 -0
  121. package/demo/data/food.data.js +2 -0
  122. package/demo/data/food.data.js.map +1 -0
  123. package/demo/data/infrastructure.data.d.ts +2 -0
  124. package/demo/data/infrastructure.data.js +2 -0
  125. package/demo/data/infrastructure.data.js.map +1 -0
  126. package/demo/data/interfaces.d.ts +31 -0
  127. package/demo/data/interfaces.js +2 -0
  128. package/demo/data/interfaces.js.map +1 -0
  129. package/demo/data/system.data.d.ts +2 -0
  130. package/demo/data/system.data.js +2 -0
  131. package/demo/data/system.data.js.map +1 -0
  132. package/demo/index.d.ts +43 -0
  133. package/demo/index.js +2 -0
  134. package/demo/index.js.map +1 -0
  135. package/demo/utils.d.ts +67 -0
  136. package/demo/utils.js +2 -0
  137. package/demo/utils.js.map +1 -0
  138. package/divider/divider.element.d.ts +1 -1
  139. package/divider/divider.element.js.map +1 -1
  140. package/divider/divider.element.scss.js +1 -1
  141. package/dropdown/dropdown.element.d.ts +42 -0
  142. package/dropdown/dropdown.element.js +2 -0
  143. package/dropdown/dropdown.element.js.map +1 -0
  144. package/dropdown/index.d.ts +1 -0
  145. package/dropdown/index.js +2 -0
  146. package/dropdown/index.js.map +1 -0
  147. package/dropdown/register.d.ts +7 -0
  148. package/dropdown/register.js +2 -0
  149. package/dropdown/register.js.map +1 -0
  150. package/file/file.element.d.ts +0 -1
  151. package/file/file.element.js +1 -1
  152. package/file/file.element.js.map +1 -1
  153. package/file/file.element.scss.js +1 -1
  154. package/file/register.d.ts +1 -0
  155. package/file/register.js +1 -1
  156. package/file/register.js.map +1 -1
  157. package/forms/control/control.element.d.ts +1 -1
  158. package/forms/control/control.element.js +2 -2
  159. package/forms/control/control.element.js.map +1 -1
  160. package/forms/control/control.element.scss.js +1 -1
  161. package/forms/control-action/control-action.element.d.ts +4 -14
  162. package/forms/control-action/control-action.element.js +1 -1
  163. package/forms/control-action/control-action.element.js.map +1 -1
  164. package/forms/control-group/control-group.element.d.ts +1 -4
  165. package/forms/control-group/control-group.element.js +1 -1
  166. package/forms/control-group/control-group.element.js.map +1 -1
  167. package/forms/control-group/control-group.element.scss.js +1 -1
  168. package/forms/control-inline/control-inline.element.d.ts +1 -1
  169. package/forms/control-inline/control-inline.element.js +1 -1
  170. package/forms/control-inline/control-inline.element.js.map +1 -1
  171. package/forms/control-inline/control-inline.element.scss.js +1 -1
  172. package/forms/control-label/control-label.element.js +1 -1
  173. package/forms/control-label/control-label.element.js.map +1 -1
  174. package/forms/control-label/control-label.element.scss.js +1 -1
  175. package/forms/control-message/control-message.element.scss.js +1 -1
  176. package/forms/form-group/form-group.element.d.ts +2 -2
  177. package/forms/form-group/form-group.element.js +1 -1
  178. package/forms/form-group/form-group.element.js.map +1 -1
  179. package/forms/register.d.ts +1 -0
  180. package/forms/register.js +1 -1
  181. package/forms/register.js.map +1 -1
  182. package/forms/utils/{index.d.ts → utils.d.ts} +0 -0
  183. package/forms/utils/utils.js +2 -0
  184. package/forms/utils/utils.js.map +1 -0
  185. package/forms/utils/validate.js +1 -1
  186. package/forms/utils/validate.js.map +1 -1
  187. package/global.css +1499 -700
  188. package/global.min.css +1 -1
  189. package/grid/cell/grid-cell.element.d.ts +25 -0
  190. package/grid/cell/grid-cell.element.js +2 -0
  191. package/grid/cell/grid-cell.element.js.map +1 -0
  192. package/grid/cell/grid-cell.element.scss.js +2 -0
  193. package/grid/cell/grid-cell.element.scss.js.map +1 -0
  194. package/grid/column/grid-column-position.controller.d.ts +15 -0
  195. package/grid/column/grid-column-position.controller.js +2 -0
  196. package/grid/column/grid-column-position.controller.js.map +1 -0
  197. package/grid/column/grid-column-size.controller.d.ts +18 -0
  198. package/grid/column/grid-column-size.controller.js +2 -0
  199. package/grid/column/grid-column-size.controller.js.map +1 -0
  200. package/grid/column/grid-column.element.d.ts +53 -0
  201. package/grid/column/grid-column.element.js +2 -0
  202. package/grid/column/grid-column.element.js.map +1 -0
  203. package/grid/column/grid-column.element.scss.js +2 -0
  204. package/grid/column/grid-column.element.scss.js.map +1 -0
  205. package/grid/detail/grid-detail.element.d.ts +59 -0
  206. package/grid/detail/grid-detail.element.js +2 -0
  207. package/grid/detail/grid-detail.element.js.map +1 -0
  208. package/grid/detail/grid-detail.element.scss.js +2 -0
  209. package/grid/detail/grid-detail.element.scss.js.map +1 -0
  210. package/grid/footer/grid-footer.element.d.ts +36 -0
  211. package/grid/footer/grid-footer.element.js +2 -0
  212. package/grid/footer/grid-footer.element.js.map +1 -0
  213. package/grid/footer/grid-footer.element.scss.js +2 -0
  214. package/grid/footer/grid-footer.element.scss.js.map +1 -0
  215. package/grid/grid/grid-layout.controller.d.ts +31 -0
  216. package/grid/grid/grid-layout.controller.js +2 -0
  217. package/grid/grid/grid-layout.controller.js.map +1 -0
  218. package/grid/grid/grid.element.d.ts +73 -0
  219. package/grid/grid/grid.element.js +2 -0
  220. package/grid/grid/grid.element.js.map +1 -0
  221. package/grid/grid/grid.element.scss.js +2 -0
  222. package/grid/grid/grid.element.scss.js.map +1 -0
  223. package/grid/index.d.ts +8 -0
  224. package/grid/index.js +2 -0
  225. package/grid/index.js.map +1 -0
  226. package/grid/pagination/grid-pagination.element.d.ts +52 -0
  227. package/grid/pagination/grid-pagination.element.js +2 -0
  228. package/grid/pagination/grid-pagination.element.js.map +1 -0
  229. package/grid/pagination/grid-pagination.element.scss.js +2 -0
  230. package/grid/pagination/grid-pagination.element.scss.js.map +1 -0
  231. package/grid/placeholder/grid-placeholder.element.d.ts +36 -0
  232. package/grid/placeholder/grid-placeholder.element.js +2 -0
  233. package/grid/placeholder/grid-placeholder.element.js.map +1 -0
  234. package/grid/placeholder/grid-placeholder.element.scss.js +2 -0
  235. package/grid/placeholder/grid-placeholder.element.scss.js.map +1 -0
  236. package/grid/register.d.ts +23 -0
  237. package/grid/register.js +2 -0
  238. package/grid/register.js.map +1 -0
  239. package/grid/row/grid-row-position.controller.d.ts +9 -0
  240. package/grid/row/grid-row-position.controller.js +2 -0
  241. package/grid/row/grid-row-position.controller.js.map +1 -0
  242. package/grid/row/grid-row.element.d.ts +25 -0
  243. package/grid/row/grid-row.element.js +2 -0
  244. package/grid/row/grid-row.element.js.map +1 -0
  245. package/grid/row/grid-row.element.scss.js +2 -0
  246. package/grid/row/grid-row.element.scss.js.map +1 -0
  247. package/icon/collections/core.d.ts +4 -0
  248. package/icon/collections/core.js +1 -1
  249. package/icon/collections/core.js.map +1 -1
  250. package/icon/collections/essential.d.ts +4 -0
  251. package/icon/collections/essential.js +1 -1
  252. package/icon/collections/essential.js.map +1 -1
  253. package/icon/icon.element.js +1 -1
  254. package/icon/icon.element.js.map +1 -1
  255. package/icon/icon.element.scss.js +1 -1
  256. package/icon/index.d.ts +18 -7
  257. package/icon/index.js +1 -1
  258. package/icon/shapes/detail-collapse.d.ts +3 -0
  259. package/icon/shapes/detail-collapse.js +2 -0
  260. package/icon/shapes/detail-collapse.js.map +1 -0
  261. package/icon/shapes/detail-expand.d.ts +3 -0
  262. package/icon/shapes/detail-expand.js +2 -0
  263. package/icon/shapes/detail-expand.js.map +1 -0
  264. package/icon/shapes/host.js +1 -1
  265. package/icon/shapes/host.js.map +1 -1
  266. package/icon/shapes/launchpad.d.ts +3 -0
  267. package/icon/shapes/launchpad.js +2 -0
  268. package/icon/shapes/launchpad.js.map +1 -0
  269. package/icon/shapes/namespace.js +1 -1
  270. package/icon/shapes/namespace.js.map +1 -1
  271. package/icon/shapes/unpin.d.ts +3 -0
  272. package/icon/shapes/unpin.js +2 -0
  273. package/icon/shapes/unpin.js.map +1 -0
  274. package/icon/utils/icon.classnames.d.ts +1 -0
  275. package/icon/utils/icon.classnames.js +1 -1
  276. package/icon/utils/icon.classnames.js.map +1 -1
  277. package/icon/utils/icon.svg-helpers.js +1 -1
  278. package/icon/utils/icon.svg-helpers.js.map +1 -1
  279. package/index.d.ts +2 -1
  280. package/index.js +1 -1
  281. package/input/input-group.element.scss.js +1 -1
  282. package/input/input.element.scss.js +1 -1
  283. package/internal/base/base.element.scss.js +1 -1
  284. package/internal/base/button.base.d.ts +7 -36
  285. package/internal/base/button.base.js +1 -1
  286. package/internal/base/button.base.js.map +1 -1
  287. package/internal/base/focus-trap.base.d.ts +7 -15
  288. package/internal/base/focus-trap.base.js +1 -1
  289. package/internal/base/focus-trap.base.js.map +1 -1
  290. package/internal/controllers/active.controller.d.ts +20 -0
  291. package/internal/controllers/active.controller.js +2 -0
  292. package/internal/controllers/active.controller.js.map +1 -0
  293. package/internal/controllers/aria-button.controller.d.ts +15 -0
  294. package/internal/controllers/aria-button.controller.js +2 -0
  295. package/internal/controllers/aria-button.controller.js.map +1 -0
  296. package/internal/controllers/aria-disabled.controller.d.ts +14 -0
  297. package/internal/controllers/aria-disabled.controller.js +2 -0
  298. package/internal/controllers/aria-disabled.controller.js.map +1 -0
  299. package/internal/controllers/aria-expanded.controller.d.ts +14 -0
  300. package/internal/controllers/aria-expanded.controller.js +2 -0
  301. package/internal/controllers/aria-expanded.controller.js.map +1 -0
  302. package/internal/controllers/aria-grid.controller.d.ts +57 -0
  303. package/internal/controllers/aria-grid.controller.js +2 -0
  304. package/internal/controllers/aria-grid.controller.js.map +1 -0
  305. package/internal/controllers/aria-modal.controller.d.ts +11 -0
  306. package/internal/controllers/aria-modal.controller.js +2 -0
  307. package/internal/controllers/aria-modal.controller.js.map +1 -0
  308. package/internal/controllers/aria-multiselectable.controller.d.ts +13 -0
  309. package/internal/controllers/aria-multiselectable.controller.js +2 -0
  310. package/internal/controllers/aria-multiselectable.controller.js.map +1 -0
  311. package/internal/controllers/aria-popup-trigger.controller.d.ts +14 -0
  312. package/internal/controllers/aria-popup-trigger.controller.js +2 -0
  313. package/internal/controllers/aria-popup-trigger.controller.js.map +1 -0
  314. package/internal/controllers/aria-popup.controller.d.ts +19 -0
  315. package/internal/controllers/aria-popup.controller.js +2 -0
  316. package/internal/controllers/aria-popup.controller.js.map +1 -0
  317. package/internal/controllers/aria-pressed.controller.d.ts +15 -0
  318. package/internal/controllers/aria-pressed.controller.js +2 -0
  319. package/internal/controllers/aria-pressed.controller.js.map +1 -0
  320. package/internal/controllers/aria-selected.controller.d.ts +13 -0
  321. package/internal/controllers/aria-selected.controller.js +2 -0
  322. package/internal/controllers/aria-selected.controller.js.map +1 -0
  323. package/internal/controllers/button-anchor.controller.d.ts +26 -0
  324. package/internal/controllers/button-anchor.controller.js +2 -0
  325. package/internal/controllers/button-anchor.controller.js.map +1 -0
  326. package/internal/controllers/button-submit.controller.d.ts +27 -0
  327. package/internal/controllers/button-submit.controller.js +2 -0
  328. package/internal/controllers/button-submit.controller.js.map +1 -0
  329. package/internal/controllers/closable.controller.d.ts +23 -0
  330. package/internal/controllers/closable.controller.js +2 -0
  331. package/internal/controllers/closable.controller.js.map +1 -0
  332. package/internal/controllers/draggable-list.controller.d.ts +32 -0
  333. package/internal/controllers/draggable-list.controller.js +2 -0
  334. package/internal/controllers/draggable-list.controller.js.map +1 -0
  335. package/internal/controllers/first-focus.controller.d.ts +17 -0
  336. package/internal/controllers/first-focus.controller.js +2 -0
  337. package/internal/controllers/first-focus.controller.js.map +1 -0
  338. package/internal/controllers/grid-range-selection.controller.d.ts +28 -0
  339. package/internal/controllers/grid-range-selection.controller.js +2 -0
  340. package/internal/controllers/grid-range-selection.controller.js.map +1 -0
  341. package/internal/controllers/inline-focus-trap.controller.d.ts +17 -0
  342. package/internal/controllers/inline-focus-trap.controller.js +2 -0
  343. package/internal/controllers/inline-focus-trap.controller.js.map +1 -0
  344. package/internal/controllers/key-navigation-grid.controller.d.ts +28 -0
  345. package/internal/controllers/key-navigation-grid.controller.js +2 -0
  346. package/internal/controllers/key-navigation-grid.controller.js.map +1 -0
  347. package/internal/controllers/key-navigation-list.controller.d.ts +26 -0
  348. package/internal/controllers/key-navigation-list.controller.js +2 -0
  349. package/internal/controllers/key-navigation-list.controller.js.map +1 -0
  350. package/internal/controllers/key-navigation.utils.d.ts +19 -0
  351. package/internal/controllers/key-navigation.utils.js +2 -0
  352. package/internal/controllers/key-navigation.utils.js.map +1 -0
  353. package/internal/controllers/layer.controller.d.ts +24 -0
  354. package/internal/controllers/layer.controller.js +2 -0
  355. package/internal/controllers/layer.controller.js.map +1 -0
  356. package/internal/controllers/responsive.controller.d.ts +19 -0
  357. package/internal/controllers/responsive.controller.js +2 -0
  358. package/internal/controllers/responsive.controller.js.map +1 -0
  359. package/internal/controllers/scrollable-list-visibility.controller.d.ts +13 -0
  360. package/internal/controllers/scrollable-list-visibility.controller.js +2 -0
  361. package/internal/controllers/scrollable-list-visibility.controller.js.map +1 -0
  362. package/internal/controllers/touch.controller.d.ts +22 -0
  363. package/internal/controllers/touch.controller.js +2 -0
  364. package/internal/controllers/touch.controller.js.map +1 -0
  365. package/internal/controllers/trigger.controller.d.ts +31 -0
  366. package/internal/controllers/trigger.controller.js +2 -0
  367. package/internal/controllers/trigger.controller.js.map +1 -0
  368. package/internal/decorators/animate.d.ts +2 -2
  369. package/internal/decorators/animate.js +1 -1
  370. package/internal/decorators/animate.js.map +1 -1
  371. package/internal/decorators/element.d.ts +15 -18
  372. package/internal/decorators/element.js +2 -0
  373. package/internal/decorators/element.js.map +1 -0
  374. package/internal/decorators/i18n.d.ts +16 -0
  375. package/internal/decorators/i18n.js +1 -1
  376. package/internal/decorators/i18n.js.map +1 -1
  377. package/internal/decorators/property.d.ts +3 -16
  378. package/internal/decorators/property.js +1 -1
  379. package/internal/decorators/property.js.map +1 -1
  380. package/internal/decorators/query-slot.js +1 -1
  381. package/internal/decorators/query-slot.js.map +1 -1
  382. package/internal/decorators/utils.d.ts +23 -0
  383. package/internal/decorators/utils.js +2 -0
  384. package/internal/decorators/utils.js.map +1 -0
  385. package/internal/index.d.ts +48 -3
  386. package/internal/index.js +1 -1
  387. package/internal/index.js.map +1 -1
  388. package/internal/interfaces/{index.d.ts → interfaces.d.ts} +0 -0
  389. package/internal/interfaces/interfaces.js +2 -0
  390. package/internal/interfaces/interfaces.js.map +1 -0
  391. package/internal/motion/animations/cds-dropdown-open.d.ts +3 -0
  392. package/internal/motion/animations/cds-dropdown-open.js +2 -0
  393. package/internal/motion/animations/cds-dropdown-open.js.map +1 -0
  394. package/internal/motion/animations/cds-modal-enter.js +1 -1
  395. package/internal/motion/animations/cds-modal-enter.js.map +1 -1
  396. package/internal/motion/interfaces.d.ts +4 -5
  397. package/internal/motion/utils.d.ts +4 -4
  398. package/internal/motion/utils.js +1 -1
  399. package/internal/motion/utils.js.map +1 -1
  400. package/internal/positioning/interfaces.d.ts +61 -0
  401. package/internal/positioning/interfaces.js +2 -0
  402. package/internal/positioning/interfaces.js.map +1 -0
  403. package/internal/positioning/utils.d.ts +26 -0
  404. package/internal/positioning/utils.js +2 -0
  405. package/internal/positioning/utils.js.map +1 -0
  406. package/internal/services/focus-trap-tracker.service.d.ts +3 -0
  407. package/internal/services/focus-trap-tracker.service.js +1 -1
  408. package/internal/services/focus-trap-tracker.service.js.map +1 -1
  409. package/internal/services/global.service.d.ts +2 -2
  410. package/internal/services/i18n.service.d.ts +37 -37
  411. package/internal/services/i18n.service.js +1 -1
  412. package/internal/services/i18n.service.js.map +1 -1
  413. package/internal/utils/array.d.ts +9 -4
  414. package/internal/utils/array.js +1 -1
  415. package/internal/utils/array.js.map +1 -1
  416. package/internal/utils/browser.d.ts +7 -0
  417. package/internal/utils/browser.js +2 -0
  418. package/internal/utils/browser.js.map +1 -0
  419. package/internal/utils/conditional.d.ts +4 -1
  420. package/internal/utils/conditional.js +1 -1
  421. package/internal/utils/conditional.js.map +1 -1
  422. package/internal/utils/css.d.ts +2 -0
  423. package/internal/utils/css.js +1 -1
  424. package/internal/utils/css.js.map +1 -1
  425. package/internal/utils/dom.d.ts +22 -2
  426. package/internal/utils/dom.js +1 -1
  427. package/internal/utils/dom.js.map +1 -1
  428. package/internal/utils/enum.d.ts +1 -0
  429. package/internal/utils/enum.js +2 -0
  430. package/internal/utils/enum.js.map +1 -0
  431. package/internal/utils/environment.js +1 -1
  432. package/internal/utils/environment.js.map +1 -1
  433. package/internal/utils/events.d.ts +4 -0
  434. package/internal/utils/events.js +1 -1
  435. package/internal/utils/events.js.map +1 -1
  436. package/internal/utils/exists.d.ts +1 -1
  437. package/internal/utils/exists.js.map +1 -1
  438. package/internal/utils/focus.d.ts +12 -0
  439. package/internal/utils/focus.js +2 -0
  440. package/internal/utils/focus.js.map +1 -0
  441. package/internal/utils/framework.js +1 -1
  442. package/internal/utils/framework.js.map +1 -1
  443. package/internal/utils/global.d.ts +5 -3
  444. package/internal/utils/global.js +1 -1
  445. package/internal/utils/global.js.map +1 -1
  446. package/internal/utils/identity.d.ts +31 -1
  447. package/internal/utils/identity.js +1 -1
  448. package/internal/utils/identity.js.map +1 -1
  449. package/internal/utils/keycodes.d.ts +11 -0
  450. package/internal/utils/keycodes.js +1 -1
  451. package/internal/utils/keycodes.js.map +1 -1
  452. package/internal/utils/lit.d.ts +5 -1
  453. package/internal/utils/lit.js +1 -1
  454. package/internal/utils/lit.js.map +1 -1
  455. package/internal/utils/math.d.ts +4 -0
  456. package/internal/utils/math.js +2 -0
  457. package/internal/utils/math.js.map +1 -0
  458. package/internal/utils/metadata.js +1 -1
  459. package/internal/utils/metadata.js.map +1 -1
  460. package/internal/utils/registration.js +1 -1
  461. package/internal/utils/registration.js.map +1 -1
  462. package/internal/utils/responsive.d.ts +2 -2
  463. package/internal/utils/responsive.js +1 -1
  464. package/internal/utils/responsive.js.map +1 -1
  465. package/internal/utils/string.d.ts +6 -0
  466. package/internal/utils/string.js +1 -1
  467. package/internal/utils/string.js.map +1 -1
  468. package/internal/utils/supports.d.ts +0 -2
  469. package/internal/utils/supports.js +1 -1
  470. package/internal/utils/supports.js.map +1 -1
  471. package/internal/utils/traversal.d.ts +3 -0
  472. package/internal/utils/traversal.js +2 -0
  473. package/internal/utils/traversal.js.map +1 -0
  474. package/internal-components/close-button/close-button.element.d.ts +5 -14
  475. package/internal-components/close-button/close-button.element.js +1 -1
  476. package/internal-components/close-button/close-button.element.js.map +1 -1
  477. package/internal-components/close-button/index.js +1 -1
  478. package/internal-components/close-button/register.js +1 -1
  479. package/internal-components/close-button/register.js.map +1 -1
  480. package/internal-components/overlay/index.js +1 -1
  481. package/internal-components/overlay/overlay.element.d.ts +22 -25
  482. package/internal-components/overlay/overlay.element.js +1 -1
  483. package/internal-components/overlay/overlay.element.js.map +1 -1
  484. package/internal-components/overlay/overlay.element.scss.js +1 -1
  485. package/internal-components/overlay/shared.element.scss.js +2 -0
  486. package/internal-components/overlay/shared.element.scss.js.map +1 -0
  487. package/internal-components/panel/panel.element.d.ts +1 -1
  488. package/internal-components/panel/panel.element.js.map +1 -1
  489. package/internal-components/panel/panel.element.scss.js +1 -1
  490. package/internal-components/popup/index.d.ts +2 -0
  491. package/internal-components/popup/index.js +2 -0
  492. package/internal-components/popup/index.js.map +1 -0
  493. package/internal-components/popup/pointer.element.d.ts +35 -0
  494. package/internal-components/popup/pointer.element.js +2 -0
  495. package/internal-components/popup/pointer.element.js.map +1 -0
  496. package/internal-components/popup/pointer.element.scss.js +2 -0
  497. package/internal-components/popup/pointer.element.scss.js.map +1 -0
  498. package/internal-components/popup/popup.element.d.ts +114 -0
  499. package/internal-components/popup/popup.element.js +2 -0
  500. package/internal-components/popup/popup.element.js.map +1 -0
  501. package/internal-components/popup/popup.element.scss.js +2 -0
  502. package/internal-components/popup/popup.element.scss.js.map +1 -0
  503. package/internal-components/popup/register.d.ts +9 -0
  504. package/internal-components/popup/register.js +2 -0
  505. package/internal-components/popup/register.js.map +1 -0
  506. package/internal-components/popup/utils/pointer.utils.d.ts +2 -0
  507. package/internal-components/popup/utils/pointer.utils.js +2 -0
  508. package/internal-components/popup/utils/pointer.utils.js.map +1 -0
  509. package/internal-components/split-handle/index.d.ts +1 -0
  510. package/internal-components/split-handle/index.js +2 -0
  511. package/internal-components/split-handle/index.js.map +1 -0
  512. package/internal-components/split-handle/register.d.ts +7 -0
  513. package/internal-components/split-handle/register.js +2 -0
  514. package/internal-components/split-handle/register.js.map +1 -0
  515. package/internal-components/split-handle/split-handle.element.d.ts +38 -0
  516. package/internal-components/split-handle/split-handle.element.js +2 -0
  517. package/internal-components/split-handle/split-handle.element.js.map +1 -0
  518. package/internal-components/split-handle/split-handle.element.scss.js +2 -0
  519. package/internal-components/split-handle/split-handle.element.scss.js.map +1 -0
  520. package/internal-components/visual-checkbox/visual-checkbox.element.scss.js +1 -1
  521. package/list/list.css +12 -12
  522. package/list/list.min.css +1 -1
  523. package/modal/modal-actions.element.js +1 -1
  524. package/modal/modal-actions.element.js.map +1 -1
  525. package/modal/modal-content.element.d.ts +0 -1
  526. package/modal/modal-content.element.js +1 -1
  527. package/modal/modal-content.element.js.map +1 -1
  528. package/modal/modal.element.d.ts +15 -6
  529. package/modal/modal.element.js +1 -1
  530. package/modal/modal.element.js.map +1 -1
  531. package/modal/modal.element.scss.js +1 -1
  532. package/navigation/navigation-group.element.d.ts +7 -5
  533. package/navigation/navigation-group.element.js.map +1 -1
  534. package/navigation/navigation-item.element.d.ts +6 -4
  535. package/navigation/navigation-item.element.js +1 -1
  536. package/navigation/navigation-item.element.js.map +1 -1
  537. package/navigation/navigation-item.element.scss.js +1 -1
  538. package/navigation/navigation-start.element.d.ts +7 -4
  539. package/navigation/navigation-start.element.js +1 -1
  540. package/navigation/navigation-start.element.js.map +1 -1
  541. package/navigation/navigation.element.d.ts +10 -8
  542. package/navigation/navigation.element.js +1 -1
  543. package/navigation/navigation.element.js.map +1 -1
  544. package/navigation/navigation.element.scss.js +1 -1
  545. package/navigation/utils/{index.d.ts → utils.d.ts} +0 -0
  546. package/navigation/utils/utils.js +2 -0
  547. package/navigation/utils/utils.js.map +1 -0
  548. package/package.json +47 -7
  549. package/pagination/pagination-button.element.d.ts +6 -10
  550. package/pagination/pagination-button.element.js +1 -1
  551. package/pagination/pagination-button.element.js.map +1 -1
  552. package/pagination/pagination.element.js +1 -1
  553. package/pagination/pagination.element.js.map +1 -1
  554. package/pagination/pagination.element.scss.js +1 -1
  555. package/pagination/register.d.ts +1 -0
  556. package/pagination/register.js +1 -1
  557. package/pagination/register.js.map +1 -1
  558. package/pagination/utils.d.ts +5 -0
  559. package/pagination/utils.js +2 -0
  560. package/pagination/utils.js.map +1 -0
  561. package/password/password.element.js +1 -1
  562. package/password/password.element.js.map +1 -1
  563. package/password/register.d.ts +1 -0
  564. package/password/register.js +1 -1
  565. package/password/register.js.map +1 -1
  566. package/polyfills/at.d.ts +15 -0
  567. package/polyfills/at.js +2 -0
  568. package/polyfills/at.js.map +1 -0
  569. package/polyfills/index.d.ts +1 -0
  570. package/polyfills/index.js +1 -1
  571. package/progress-circle/progress-circle.element.d.ts +3 -21
  572. package/progress-circle/progress-circle.element.js +1 -1
  573. package/progress-circle/progress-circle.element.js.map +1 -1
  574. package/progress-circle/progress-circle.element.scss.js +1 -1
  575. package/progress-circle/progress-circle.utils.d.ts +0 -5
  576. package/progress-circle/progress-circle.utils.js +1 -1
  577. package/progress-circle/progress-circle.utils.js.map +1 -1
  578. package/radio/radio-group.element.d.ts +1 -1
  579. package/radio/radio.element.scss.js +1 -1
  580. package/range/range.element.scss.js +1 -1
  581. package/range/range.global.scss.js +1 -1
  582. package/search/register.d.ts +1 -0
  583. package/search/register.js +1 -1
  584. package/search/register.js.map +1 -1
  585. package/search/search.element.js +1 -1
  586. package/search/search.element.js.map +1 -1
  587. package/search/search.global.scss.js +1 -1
  588. package/select/register.d.ts +1 -1
  589. package/select/register.js +1 -1
  590. package/select/register.js.map +1 -1
  591. package/select/select.element.js +1 -1
  592. package/select/select.element.js.map +1 -1
  593. package/select/select.element.scss.js +1 -1
  594. package/select/select.global.scss.js +1 -1
  595. package/selection-panels/checkbox/checkbox-panel.element.d.ts +9 -13
  596. package/selection-panels/checkbox/checkbox-panel.element.js.map +1 -1
  597. package/selection-panels/radio/radio-panel.element.d.ts +19 -14
  598. package/selection-panels/radio/radio-panel.element.js.map +1 -1
  599. package/selection-panels/shared/selection-panel.element.scss.js +1 -1
  600. package/signpost/index.d.ts +1 -0
  601. package/signpost/index.js +2 -0
  602. package/signpost/index.js.map +1 -0
  603. package/signpost/register.d.ts +7 -0
  604. package/signpost/register.js +2 -0
  605. package/signpost/register.js.map +1 -0
  606. package/signpost/signpost.element.d.ts +44 -0
  607. package/signpost/signpost.element.js +2 -0
  608. package/signpost/signpost.element.js.map +1 -0
  609. package/styles/module.layout.css +1412 -641
  610. package/styles/module.layout.min.css +1 -1
  611. package/styles/module.tokens.css +74 -55
  612. package/styles/module.tokens.min.css +1 -1
  613. package/styles/module.typography.css +9 -0
  614. package/styles/module.typography.min.css +1 -1
  615. package/styles/shim.clr-ui.css +640 -0
  616. package/styles/shim.clr-ui.min.css +121 -0
  617. package/styles/theme.dark.css +7 -9
  618. package/styles/theme.dark.min.css +1 -1
  619. package/styles/theme.high-contrast.css +43 -0
  620. package/styles/theme.high-contrast.min.css +1 -0
  621. package/table/table.css +7 -7
  622. package/table/table.min.css +1 -1
  623. package/tag/tag.element.d.ts +3 -2
  624. package/tag/tag.element.js +1 -1
  625. package/tag/tag.element.js.map +1 -1
  626. package/tag/tag.element.scss.js +1 -1
  627. package/test/index.d.ts +1 -0
  628. package/test/index.js +1 -1
  629. package/test/utils.d.ts +1 -1
  630. package/test/utils.js +1 -1
  631. package/test/utils.js.map +1 -1
  632. package/test/web-test-server.d.ts +6 -0
  633. package/test/web-test-server.js +2 -0
  634. package/test/web-test-server.js.map +1 -0
  635. package/test-dropdown/test-dropdown.element.d.ts +2 -3
  636. package/test-dropdown/test-dropdown.element.js +1 -1
  637. package/test-dropdown/test-dropdown.element.js.map +1 -1
  638. package/textarea/textarea.element.scss.js +1 -1
  639. package/time/register.d.ts +1 -0
  640. package/time/register.js +1 -1
  641. package/time/register.js.map +1 -1
  642. package/time/time.element.d.ts +0 -1
  643. package/time/time.element.js +1 -1
  644. package/time/time.element.js.map +1 -1
  645. package/toggle/toggle.element.scss.js +1 -1
  646. package/tokens/tokens.android.xml +33 -14
  647. package/tokens/tokens.d.ts +28 -9
  648. package/tokens/tokens.ios.swift +34 -15
  649. package/tokens/tokens.js +29 -10
  650. package/tokens/tokens.json +130 -29
  651. package/tokens/tokens.scss +90 -12
  652. package/tree-view/register.d.ts +1 -0
  653. package/tree-view/register.js +1 -1
  654. package/tree-view/register.js.map +1 -1
  655. package/tree-view/story-utils.d.ts +22 -0
  656. package/tree-view/tree-item.element.d.ts +10 -3
  657. package/tree-view/tree-item.element.js +1 -1
  658. package/tree-view/tree-item.element.js.map +1 -1
  659. package/tree-view/tree-item.element.scss.js +1 -1
  660. package/tree-view/tree.element.d.ts +0 -1
  661. package/tree-view/tree.element.js.map +1 -1
  662. package/button/icon-button.element.scss.js +0 -2
  663. package/button/icon-button.element.scss.js.map +0 -1
  664. package/button/inline-button.element.js +0 -2
  665. package/button/inline-button.element.js.map +0 -1
  666. package/button/inline-button.element.scss.js.map +0 -1
  667. package/forms/control-action/control-action.element.scss.js +0 -2
  668. package/forms/control-action/control-action.element.scss.js.map +0 -1
  669. package/forms/utils/index.js +0 -2
  670. package/forms/utils/index.js.map +0 -1
  671. package/internal/base/css-gap.base.d.ts +0 -18
  672. package/internal/base/css-gap.base.js +0 -2
  673. package/internal/base/css-gap.base.js.map +0 -1
  674. package/internal/interfaces/index.js +0 -2
  675. package/internal/utils/focus-trap.d.ts +0 -22
  676. package/internal/utils/focus-trap.js +0 -2
  677. package/internal/utils/focus-trap.js.map +0 -1
  678. package/internal-components/close-button/close-button.element.scss.js +0 -2
  679. package/internal-components/close-button/close-button.element.scss.js.map +0 -1
  680. package/navigation/utils/index.js +0 -2
  681. package/navigation/utils/index.js.map +0 -1
  682. package/pagination/pagination-button.element.scss.js +0 -2
  683. package/pagination/pagination-button.element.scss.js.map +0 -1
  684. package/search/search.element.scss.js +0 -2
  685. package/search/search.element.scss.js.map +0 -1
  686. package/styles/module.shims.css +0 -916
  687. package/styles/module.shims.min.css +0 -1
package/styles/shim.clr-ui.css ADDED
@@ -0,0 +1,640 @@
1
+ /*
2
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
3
+ * This software is released under MIT license.
4
+ * The full license information can be found in LICENSE in the root directory of this project.
5
+ */
6
+ /* This shim file maps the custom properties of @clr/ui to Core tokens. Thus, it is only needed for apps currently dependent on @clr/ui and wanting to apply Core look and feel. */
7
+ [cds-theme] {
8
+ /* Global */
9
+ --clr-global-app-background: var(
10
+ --cds-alias-object-app-background
11
+ );
12
+ --clr-global-selection-color: var(
13
+ --cds-alias-object-interaction-background-selected
14
+ );
15
+ --clr-global-on-selection-color: var(
16
+ --cds-alias-object-interaction-color-selected
17
+ );
18
+ --clr-global-hover-color: var(
19
+ --cds-global-typography-link-color-hover
20
+ );
21
+ --clr-global-content-header-font-color: var(
22
+ --cds-global-typography-color-400
23
+ );
24
+ --clr-global-font-color: var(
25
+ --cds-global-typography-color-500
26
+ );
27
+ --clr-global-success-color: var(--cds-alias-status-success);
28
+ --clr-global-error-color: var(--cds-alias-status-danger);
29
+ --clr-close-color--normal: var(
30
+ --cds-alias-object-interaction-color
31
+ );
32
+ --clr-close-color--hover: var(
33
+ --cds-alias-object-interaction-color-hover
34
+ );
35
+ /* Typography */
36
+ --clr-h1-color: var(--cds-global-typography-color-400);
37
+ --clr-h2-color: var(--cds-global-typography-color-400);
38
+ --clr-h3-color: var(--cds-global-typography-color-400);
39
+ --clr-h4-color: var(--cds-global-typography-color-400);
40
+ --clr-h5-color: var(--cds-global-typography-color-400);
41
+ --clr-h6-color: var(--cds-global-typography-color-400);
42
+ --clr-p0-color: var(--cds-global-typography-color-500);
43
+ --clr-p1-color: var(--cds-global-typography-color-500);
44
+ --clr-p2-color: var(--cds-global-typography-color-500);
45
+ --clr-p3-color: var(--cds-global-typography-color-500);
46
+ --clr-p4-color: var(--cds-global-typography-color-500);
47
+ --clr-p5-color: var(--cds-global-typography-color-500);
48
+ --clr-p6-color: var(--cds-global-typography-color-500);
49
+ --clr-p7-color: var(--cds-global-typography-color-500);
50
+ --clr-p8-color: var(--cds-global-typography-color-500);
51
+ /* Buttons */
52
+ --clr-btn-outline-bg-color: transparent;
53
+ --clr-btn-default-color: var(--cds-alias-status-info);
54
+ --clr-btn-default-border-color: var(--clr-btn-default-color);
55
+ --clr-btn-default-bg-color: var(--clr-btn-outline-bg-color);
56
+ --clr-btn-default-hover-bg-color: hsla(198, 100%, 34%, 0.1);
57
+ --clr-btn-default-hover-color: var(
58
+ --cds-alias-status-info
59
+ );
60
+ --clr-btn-default-box-shadow-color: var(--cds-alias-object-opacity-100);
61
+ --clr-btn-default-disabled-color: var(--cds-alias-status-disabled-tint);
62
+ --clr-btn-default-disabled-bg-color: var(--clr-btn-default-bg-color);
63
+ --clr-btn-default-disabled-border-color: var(--cds-alias-status-disabled-tint);
64
+ --clr-btn-default-checked-color: var(--cds-global-typography-color-100);
65
+ --clr-btn-default-checked-bg-color: var(--clr-btn-default-color);
66
+ --clr-btn-default-outline-color: var(--cds-alias-status-info);
67
+ --clr-btn-default-outline-border-color: var(--clr-btn-default-outline-color);
68
+ --clr-btn-default-outline-bg-color: var(--clr-btn-outline-bg-color);
69
+ --clr-btn-default-outline-hover-bg-color: hsla(198, 100%, 34%, 0.1);
70
+ --clr-btn-default-outline-hover-color: var(--cds-alias-status-info);
71
+ --clr-btn-default-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
72
+ --clr-btn-default-outline-disabled-color: var(--cds-alias-status-disabled-tint);
73
+ --clr-btn-default-outline-disabled-bg-color: var(--clr-btn-default-outline-bg-color);
74
+ --clr-btn-default-outline-disabled-border-color: var(
75
+ --cds-alias-status-disabled-tint
76
+ );
77
+ --clr-btn-default-outline-checked-color: var(--cds-global-typography-color-100);
78
+ --clr-btn-default-outline-checked-bg-color: var(--clr-btn-default-outline-bg-color);
79
+ --clr-btn-primary-color: var(--cds-global-typography-color-100);
80
+ --clr-btn-primary-bg-color: var(--cds-alias-status-info);
81
+ --clr-btn-primary-border-color: var(--cds-alias-status-info);
82
+ --clr-btn-primary-hover-bg-color: var(--cds-alias-status-info);
83
+ --clr-btn-primary-hover-color: var(--cds-global-typography-color-100);
84
+ --clr-btn-primary-box-shadow-color: var(--cds-alias-object-opacity-100);
85
+ --clr-btn-primary-disabled-color: var(--cds-global-typography-color-100);
86
+ --clr-btn-primary-disabled-bg-color: var(--cds-alias-status-disabled-tint);
87
+ --clr-btn-primary-disabled-border-color: var(--cds-alias-status-disabled-tint);
88
+ --clr-btn-primary-checked-bg-color: var(--cds-alias-status-info);
89
+ --clr-btn-primary-checked-color: var(--cds-global-typography-color-100);
90
+ --clr-btn-success-color: var(--cds-global-typography-color-100);
91
+ --clr-btn-success-bg-color: var(--cds-alias-status-success);
92
+ --clr-btn-success-border-color: var(--clr-btn-success-bg-color);
93
+ --clr-btn-success-hover-bg-color: var(--cds-alias-status-success);
94
+ --clr-btn-success-hover-color: var(--clr-btn-success-color);
95
+ --clr-btn-success-box-shadow-color: var(--cds-alias-object-opacity-100);
96
+ --clr-btn-success-disabled-color: var(--cds-global-typography-color-100);
97
+ --clr-btn-success-disabled-bg-color: var(--cds-alias-status-disabled-tint);
98
+ --clr-btn-success-disabled-border-color: var(--cds-alias-status-disabled-tint);
99
+ --clr-btn-success-checked-bg-color: var(--clr-btn-success-bg-color);
100
+ --clr-btn-success-checked-color: var(--clr-btn-success-color);
101
+ --clr-btn-success-outline-color: var(--cds-alias-status-success);
102
+ --clr-btn-success-outline-bg-color: var(--clr-btn-outline-bg-color);
103
+ --clr-btn-success-outline-border-color: var(--cds-alias-status-success);
104
+ --clr-btn-success-outline-hover-bg-color: hsla(93, 80%, 28%, 0.1);
105
+ --clr-btn-success-outline-hover-color: var(--cds-alias-status-success);
106
+ --clr-btn-success-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
107
+ --clr-btn-success-outline-disabled-color: var(--cds-alias-status-disabled-tint);
108
+ --clr-btn-success-outline-disabled-bg-color: var(--clr-btn-success-outline-bg-color);
109
+ --clr-btn-success-outline-disabled-border-color: var(
110
+ --cds-alias-status-disabled-tint
111
+ );
112
+ --clr-btn-success-outline-checked-bg-color: var(--clr-btn-success-outline-bg-color);
113
+ --clr-btn-success-outline-checked-color: var(--clr-btn-success-outline-color);
114
+ --clr-btn-danger-color: var(--cds-global-typography-color-100);
115
+ --clr-btn-danger-bg-color: var(--cds-alias-status-danger);
116
+ --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color);
117
+ --clr-btn-danger-hover-bg-color: var(--cds-alias-status-danger);
118
+ --clr-btn-danger-hover-color: var(--clr-btn-danger-color);
119
+ --clr-btn-danger-box-shadow-color: var(--cds-alias-object-opacity-100);
120
+ --clr-btn-danger-disabled-color: var(--cds-global-typography-color-100);
121
+ --clr-btn-danger-disabled-bg-color: var(--cds-alias-status-disabled-tint);
122
+ --clr-btn-danger-disabled-border-color: var(--clr-btn-danger-disabled-color);
123
+ --clr-btn-danger-checked-bg-color: var(--clr-btn-danger-bg-color);
124
+ --clr-btn-danger-checked-color: var(--clr-btn-danger-color);
125
+ --clr-btn-danger-outline-color: var(--cds-alias-status-danger);
126
+ --clr-btn-danger-outline-bg-color: var(--clr-btn-outline-bg-color);
127
+ --clr-btn-danger-outline-border-color: var(--cds-alias-status-danger);
128
+ --clr-btn-danger-outline-hover-bg-color: hsla(9, 100%, 44%, 0.1);
129
+ --clr-btn-danger-outline-hover-color: var(--cds-alias-status-danger);
130
+ --clr-btn-danger-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
131
+ --clr-btn-danger-outline-disabled-color: var(--cds-alias-status-disabled-tint);
132
+ --clr-btn-danger-outline-disabled-bg-color: var(--clr-btn-danger-outline-bg-color);
133
+ --clr-btn-danger-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
134
+ --clr-btn-danger-outline-checked-bg-color: var(--clr-btn-danger-outline-bg-color);
135
+ --clr-btn-danger-outline-checked-color: var(--clr-btn-danger-outline-color);
136
+ --clr-btn-warning-color: var(--cds-global-color-construction-900);
137
+ --clr-btn-warning-bg-color: var(--cds-alias-status-warning);
138
+ --clr-btn-warning-border-color: var(--clr-btn-warning-bg-color);
139
+ --clr-btn-warning-hover-bg-color: var(--cds-alias-status-warning);
140
+ --clr-btn-warning-hover-color: var(--clr-btn-warning-color);
141
+ --clr-btn-warning-box-shadow-color: var(--cds-alias-object-opacity-100);
142
+ --clr-btn-warning-disabled-color: var(--cds-global-typography-color-100);
143
+ --clr-btn-warning-disabled-bg-color: var(--cds-alias-status-disabled-tint);
144
+ --clr-btn-warning-disabled-border-color: var(--clr-btn-warning-disabled-color);
145
+ --clr-btn-warning-checked-bg-color: var(--clr-btn-warning-bg-color);
146
+ --clr-btn-warning-checked-color: var(--clr-btn-warning-color);
147
+ --clr-btn-warning-outline-color: var(--cds-alias-status-warning-dark);
148
+ --clr-btn-warning-outline-bg-color: var(--clr-btn-outline-bg-color);
149
+ --clr-btn-warning-outline-border-color: var(--cds-alias-status-warning-dark);
150
+ --clr-btn-warning-outline-hover-bg-color: hsla(40, 100%, 59%, 0.1);
151
+ --clr-btn-warning-outline-hover-color: var(--cds-alias-status-warning-dark);
152
+ --clr-btn-warning-outline-box-shadow-color: var(--cds-alias-object-opacity-100);
153
+ --clr-btn-warning-outline-disabled-color: var(--cds-alias-status-disabled-tint);
154
+ --clr-btn-warning-outline-disabled-bg-color: var(--clr-btn-warning-outline-bg-color);
155
+ --clr-btn-warning-outline-disabled-border-color: var(--cds-alias-status-disabled-tint);
156
+ --clr-btn-warning-outline-checked-bg-color: var(--clr-btn-warning-outline-bg-color);
157
+ --clr-btn-warning-outline-checked-color: var(--clr-btn-warning-outline-color);
158
+ --clr-btn-link-color: var(--cds-alias-status-info);
159
+ --clr-btn-link-bg-color: transparent;
160
+ --clr-btn-link-border-color: transparent;
161
+ --clr-btn-link-hover-bg-color: transparent;
162
+ --clr-btn-link-hover-color: var(
163
+ --cds-alias-status-info
164
+ );
165
+ --clr-btn-link-disabled-color: var(--cds-alias-status-disabled-tint);
166
+ --clr-btn-link-disabled-bg-color: transparent;
167
+ --clr-btn-link-disabled-border-color: transparent;
168
+ --clr-btn-link-checked-bg-color: transparent;
169
+ --clr-btn-link-checked-color: var(
170
+ --cds-global-color-blue-800
171
+ );
172
+ --clr-btn-inverse-color: var(--cds-global-typography-color-100);
173
+ --clr-btn-inverse-border-color: var(--cds-global-typography-color-100);
174
+ --clr-btn-inverse-bg-color: transparent;
175
+ --clr-btn-inverse-hover-bg-color: rgba(255, 255, 255, 0.15);
176
+ --clr-btn-inverse-hover-color: var(--cds-global-typography-color-100);
177
+ --clr-btn-inverse-box-shadow-color: rgba(0, 0, 0, 0.25);
178
+ --clr-btn-inverse-disabled-color: var(--cds-alias-status-disabled-tint);
179
+ --clr-btn-inverse-disabled-bg-color: var(--clr-btn-inverse-bg-color);
180
+ --clr-btn-inverse-disabled-border-color: var(--cds-alias-status-disabled-tint);
181
+ --clr-btn-inverse-checked-bg-color: rgba(255, 255, 255, 0.15);
182
+ --clr-btn-inverse-checked-color: var(--cds-alias-status-disabled-tint);
183
+ --clr-btn-icon-disabled-color: var(
184
+ --cds-alias-status-disabled-tint
185
+ );
186
+ /* Alert Color Properties */
187
+ --clr-alert-action-color: var(--cds-global-typography-color-500);
188
+ --clr-alert-action-active-color: var(
189
+ --cds-alias-object-interaction-color-active
190
+ );
191
+ --clr-alert-close-icon-color: var(--clr-alert-action-color);
192
+ --clr-alert-close-icon-hover-color: var(--clr-alert-action-active-color);
193
+ --clr-app-level-alert-color: var(--cds-global-color-white);
194
+ --clr-app-alert-close-icon-color: var(--clr-app-level-alert-color);
195
+ --clr-alert-info-bg-color: var(--cds-alias-status-info-tint);
196
+ --clr-alert-info-font-color: var(--cds-global-typography-color-500);
197
+ --clr-alert-info-border-color: var(
198
+ --cds-alias-status-info
199
+ );
200
+ --clr-alert-info-icon-color: var(
201
+ --cds-global-typography-color-500
202
+ );
203
+ --clr-alert-info-close-icon-color: var(--cds-global-typography-color-500);
204
+ --clr-alert-info-action-color: var(--cds-global-typography-color-500);
205
+ --clr-alert-success-bg-color: var(--cds-alias-status-success-tint);
206
+ --clr-alert-success-font-color: var(--cds-global-typography-color-500);
207
+ --clr-alert-success-border-color: var(--cds-alias-status-success);
208
+ --clr-alert-success-icon-color: var(--cds-global-typography-color-500);
209
+ --clr-alert-success-close-icon-color: var(--cds-global-typography-color-500);
210
+ --clr-alert-success-action-color: var(--cds-global-typography-color-500);
211
+ --clr-alert-warning-bg-color: var(--cds-alias-status-warning-tint);
212
+ --clr-alert-warning-font-color: var(--cds-global-color-black);
213
+ --clr-alert-warning-border-color: var(--cds-alias-status-warning);
214
+ --clr-alert-warning-icon-color: var(--cds-global-color-black);
215
+ --clr-alert-warning-close-icon-color: var(--cds-global-color-black);
216
+ --clr-alert-warning-action-color: var(--cds-global-color-black);
217
+ --clr-alert-danger-bg-color: var(--cds-alias-status-danger-tint);
218
+ --clr-alert-danger-font-color: var(--cds-global-typography-color-500);
219
+ --clr-alert-danger-border-color: var(--cds-alias-status-danger);
220
+ --clr-alert-danger-icon-color: var(--cds-global-typography-color-500);
221
+ --clr-alert-danger-close-icon-color: var(--cds-global-typography-color-500);
222
+ --clr-alert-danger-action-color: var(--cds-global-typography-color-500);
223
+ --clr-app-alert-info-bg-color: var(--cds-alias-status-info);
224
+ --clr-app-alert-info-font-color: var(--cds-global-typography-color-100);
225
+ --clr-app-alert-info-icon-color: var(--clr-app-alert-info-font-color);
226
+ --clr-app-alert-info-action-color: var(--clr-app-alert-info-font-color);
227
+ --clr-app-alert-info-action-active-color: var(--clr-app-alert-info-font-color);
228
+ --clr-app-alert-info-close-icon-color: var(--clr-app-alert-info-font-color);
229
+ --clr-app-alert-info-close-icon-hover-color: var(--clr-app-alert-info-font-color);
230
+ --clr-app-alert-warning-bg-color: var(--cds-alias-status-warning);
231
+ --clr-app-alert-warning-font-color: var(--cds-global-color-black);
232
+ --clr-app-alert-warning-icon-color: var(--clr-app-alert-warning-font-color);
233
+ --clr-app-alert-warning-close-icon-color: var(--clr-app-alert-warning-font-color);
234
+ --clr-app-alert-warning-action-color: var(--clr-app-alert-warning-font-color);
235
+ --clr-app-alert-warning-action-active-color: var(
236
+ --clr-app-alert-warning-font-color
237
+ );
238
+ --clr-app-alert-warning-close-icon-hover-color: var(
239
+ --clr-app-alert-warning-font-color
240
+ );
241
+ --clr-app-alert-danger-bg-color: var(--cds-alias-status-danger);
242
+ --clr-app-alert-danger-font-color: var(--cds-global-typography-color-100);
243
+ --clr-app-alert-danger-icon-color: var(--clr-app-alert-danger-font-color);
244
+ --clr-app-alert-danger-close-icon-color: var(--clr-app-alert-danger-font-color);
245
+ --clr-app-alert-danger-action-color: var(--clr-app-alert-danger-font-color);
246
+ --clr-app-alert-danger-action-active-color: var(--clr-app-alert-danger-font-color);
247
+ --clr-app-alert-danger-close-icon-hover-color: var(
248
+ --clr-app-alert-danger-font-color
249
+ );
250
+ --clr-app-alert-success-bg-color: var(--cds-alias-status-success);
251
+ --clr-app-alert-success-font-color: var(--cds-global-typography-color-100);
252
+ --clr-app-alert-success-icon-color: var(--clr-app-alert-success-font-color);
253
+ --clr-app-alert-success-close-icon-color: var(--clr-app-alert-success-font-color);
254
+ --clr-app-alert-success-action-color: var(--clr-app-alert-success-font-color);
255
+ --clr-app-alert-success-action-active-color: var(--clr-app-alert-success-font-color);
256
+ --clr-app-alert-success-close-icon-hover-color: var(
257
+ --clr-app-alert-success-font-color
258
+ );
259
+ --clr-app-alert-pager-text-color: var(
260
+ --cds-global-typography-color-500
261
+ );
262
+ --clr-app-alert-info-pager-bg-color: var(
263
+ --cds-alias-status-info-shade
264
+ );
265
+ --clr-app-alert-warning-pager-bg-color: var(
266
+ --cds-alias-status-warning-shade
267
+ );
268
+ --clr-app-alert-danger-pager-bg-color: var(
269
+ --cds-alias-status-danger-shade
270
+ );
271
+ --clr-app-alert-info-pager-font-color: var(--cds-global-color-white);
272
+ --clr-app-alert-warning-pager-font-color: var(--cds-global-color-black);
273
+ --clr-app-alert-danger-pager-font-color: var(--cds-global-color-white);
274
+ --clr-app-alert-success-pager-font-color: var(--cds-global-color-white);
275
+ /* Labels */
276
+ --clr-label-font-color-light: var(--cds-global-typography-color-500);
277
+ --clr-label-font-color-dark: var(--cds-global-typography-color-500);
278
+ --clr-label-default-border-color: var(--cds-alias-status-neutral);
279
+ --clr-label-bg-hover-color: var(--cds-alias-status-neutral-tint);
280
+ --clr-label-gray-bg-color: var(
281
+ --cds-alias-status-neutral
282
+ );
283
+ --clr-label-gray-color: var(--clr-label-font-color-light);
284
+ --clr-label-purple-bg-color: var(--cds-global-color-violet-500);
285
+ --clr-label-purple-color: var(--clr-label-font-color-light);
286
+ --clr-label-blue-bg-color: var(--cds-global-color-blue-800);
287
+ --clr-label-blue-color: var(--clr-label-font-color-light);
288
+ --clr-label-orange-bg-color: var(--cds-global-color-ochre-800);
289
+ --clr-label-orange-color: var(--clr-label-font-color-dark);
290
+ --clr-label-light-blue-bg-color: var(--cds-global-color-blue-600);
291
+ --clr-label-light-blue-color: var(--clr-label-font-color-dark);
292
+ --clr-label-info-bg-color: var(--cds-alias-status-tint);
293
+ --clr-label-info-font-color: var(--clr-label-font-color-light);
294
+ --clr-label-info-border-color: var(--cds-alias-status-info);
295
+ --clr-label-success-bg-color: var(--cds-alias-status-tint);
296
+ --clr-label-success-font-color: var(--clr-label-font-color-light);
297
+ --clr-label-success-border-color: var(--cds-alias-status-success);
298
+ --clr-label-warning-bg-color: var(--cds-alias-status-tint);
299
+ --clr-label-warning-font-color: var(--clr-label-font-color-light);
300
+ --clr-label-warning-border-color: var(--cds-alias-status-warning);
301
+ --clr-label-danger-bg-color: var(--cds-alias-status-tint);
302
+ --clr-label-danger-font-color: var(--clr-label-font-color-light);
303
+ --clr-label-danger-border-color: var(--cds-alias-status-danger);
304
+ /* Badges */
305
+ --clr-badge-background-color: var(--cds-alias-status-neutral-shade);
306
+ --clr-badge-color: var(--cds-global-color-white);
307
+ --clr-badge-info-bg-color: var(--cds-alias-status-info-shade);
308
+ --clr-badge-info-color: var(--cds-global-color-white);
309
+ --clr-badge-success-bg-color: var(--cds-alias-status-success-shade);
310
+ --clr-badge-success-color: var(--cds-global-color-white);
311
+ --clr-badge-warning-bg-color: var(--cds-alias-status-warning-shade);
312
+ --clr-badge-warning-color: var(--cds-global-color-black);
313
+ --clr-badge-danger-bg-color: var(--cds-alias-status-danger-shade);
314
+ --clr-badge-danger-color: var(--cds-global-color-white);
315
+ --clr-badge-gray-bg-color: var(--cds-global-color-gray-600);
316
+ --clr-badge-gray-color: var(--cds-global-color-white);
317
+ --clr-badge-purple-bg-color: var(--cds-global-color-violet-500);
318
+ --clr-badge-purple-color: var(--cds-global-color-white);
319
+ --clr-badge-blue-bg-color: var(--cds-global-color-blue-800);
320
+ --clr-badge-blue-color: var(--cds-global-color-white);
321
+ --clr-badge-orange-bg-color: var(--cds-global-color-ochre-700);
322
+ --clr-badge-orange-color: var(--cds-global-color-black);
323
+ --clr-badge-light-blue-bg-color: var(--cds-global-color-blue-400);
324
+ --clr-badge-light-blue-color: var(--cds-global-color-black);
325
+ /* Progress Bars */
326
+ --clr-progress-default-color: var(--cds-alias-status-info);
327
+ --clr-progress-alt-color-1: var(--cds-alias-status-success);
328
+ --clr-progress-alt-color-2: var(--cds-alias-status-danger);
329
+ --clr-progress-alt-color-3: var(--clr-progress-alt-color-2);
330
+ --clr-progress-bg-color: var(--cds-alias-object-border-color-tint);
331
+ /* Accordion */
332
+ --clr-accordion-text-color: var(--cds-global-typography-color-500);
333
+ --clr-accordion-active-background-color: var(
334
+ --cds-alias-object-interaction-background-selected
335
+ );
336
+ --clr-accordion-content-background-color: var(--cds-alias-object-app-background);
337
+ --clr-accordion-header-background-color: var(--cds-alias-object-app-background);
338
+ --clr-accordion-header-hover-background-color: var(
339
+ --cds-alias-object-interaction-background-hover
340
+ );
341
+ --clr-accordion-error-color: var(--cds-alias-status-danger);
342
+ --clr-accordion-complete-color: var(--cds-alias-status-success);
343
+ --clr-accordion-border-color: var(--cds-alias-object-border-color);
344
+ --clr-accordion-border-left-color: var(--cds-alias-object-border-color-tint);
345
+ --clr-accordion-border-left-color-complete: var(--clr-accordion-complete-color);
346
+ --clr-accordion-border-left-color-error: var(--clr-accordion-error-color);
347
+ /* Cards */
348
+ --clr-card-bg-color: var(--cds-alias-object-container-background);
349
+ --clr-card-divider-color: var(--cds-alias-object-border-color);
350
+ --clr-card-title-color: var(--clr-h4-color);
351
+ --clr-card-border-color: var(--cds-alias-object-container-border-color);
352
+ --clr-card-box-shadow-color: var(--clr-card-border-color);
353
+ --clr-card-clickable-border-color: var(
354
+ --cds-alias-object-interaction-background-highlight
355
+ );
356
+ --clr-card-clickable-box-shadow-color: var(--clr-card-clickable-border-color);
357
+ /* Forms */
358
+ --clr-form-disabled-background-color: var(--cds-alias-status-disabled-tint);
359
+ --clr-forms-label-color: var(--cds-global-typography-color-300);
360
+ --clr-forms-text-color: var(--cds-global-typography-color-500);
361
+ --clr-forms-invalid-color: var(--cds-alias-status-danger);
362
+ --clr-forms-valid-color: var(--cds-alias-status-success);
363
+ --clr-forms-valid-text-color: var(--cds-alias-status-success);
364
+ --clr-forms-subtext-color: var(--cds-global-typography-color-300);
365
+ --clr-forms-placeholder-color: var(--cds-global-typography-color-200);
366
+ --clr-forms-border-color: var(
367
+ --cds-alias-object-interaction-border-color
368
+ );
369
+ --clr-forms-focused-color: var(--cds-alias-status-info);
370
+ --clr-forms-subtext-disabled-color: var(--cds-alias-status-disabled);
371
+ --clr-forms-border-disabled-color: var(--cds-alias-object-border-color-tint);
372
+ --clr-forms-text-disabled-color: var(--cds-alias-status-disabled);
373
+ --clr-forms-label-disabled-color: var(--cds-alias-status-disabled);
374
+ --clr-forms-textarea-background-color: var(--cds-alias-object-container-background);
375
+ --clr-forms-select-caret-hover-color: var(
376
+ --cds-alias-object-interaction-color-hover
377
+ );
378
+ --clr-forms-select-caret-color: var(
379
+ --cds-alias-object-interaction-color
380
+ );
381
+ --clr-forms-select-option-color: var(--clr-forms-text-color);
382
+ --clr-forms-select-multiple-background-color: var(--clr-forms-textarea-background-color);
383
+ --clr-forms-select-multiple-border-color: var(--cds-alias-object-border-color);
384
+ --clr-forms-select-multiple-option-color: var(--clr-forms-text-color);
385
+ --clr-forms-checkbox-label-color: var(--clr-forms-label-color);
386
+ --clr-forms-checkbox-background-color: var(--cds-alias-status-info);
387
+ --clr-forms-checkbox-indeterminate-border-color: var(--cds-alias-status-info);
388
+ --clr-forms-checkbox-mark-color: var(--cds-global-typography-color-100);
389
+ --clr-forms-checkbox-disabled-background-color: var(--clr-form-disabled-background-color);
390
+ --clr-forms-checkbox-disabled-mark-color: var(--cds-global-typography-color-100);
391
+ --clr-forms-radio-label-color: var(--clr-forms-checkbox-label-color);
392
+ --clr-forms-radio-disabled-background-color: var(
393
+ --clr-form-disabled-background-color
394
+ );
395
+ --clr-forms-radio-disabled-mark-color: var(
396
+ --clr-forms-checkbox-disabled-mark-color
397
+ );
398
+ --clr-forms-range-progress-fill-color: var(--cds-alias-status-info);
399
+ --clr-forms-range-track-color: var(--cds-alias-object-border-color);
400
+ /* Combobox */
401
+ --clr-combobox-border-color: var(--cds-alias-object-border-color);
402
+ --clr-combobox-trigger-color: var(--clr-color-neutral-500);
403
+ --clr-combobox-input-background-color: var(--cds-alias-object-container-background-tint);
404
+ --clr-combobox-pill-background-color: var(
405
+ --cds-alias-object-interaction-background
406
+ );
407
+ --clr-combobox-pill-border-color: var(
408
+ --cds-alias-object-interaction-border-color
409
+ );
410
+ --clr-combobox-pill-font-color: var(--cds-global-typography-color-500);
411
+ --clr-combobox-filter-highlight: var(
412
+ --cds-alias-object-interaction-background-highlight
413
+ );
414
+ /* Datepicker */
415
+ --clr-calendar-background-color: var(--cds-alias-object-overlay-background);
416
+ --clr-calendar-border-color: var(--cds-alias-object-container-border-color);
417
+ --clr-datepicker-trigger-color: var(--cds-alias-status-info);
418
+ --clr-datepicker-trigger-hover-color: var(--clr-color-action-800);
419
+ --clr-calendar-btn-color: var(--cds-alias-status-info);
420
+ --clr-calendar-btn-hover-focus-color: var(
421
+ --cds-alias-object-interaction-background-hover
422
+ );
423
+ --clr-calendar-today-date-cell-color: var(--cds-global-typography-color-500);
424
+ --clr-calendar-active-cell-background-color: var(
425
+ --cds-alias-object-interaction-background-selected
426
+ );
427
+ --clr-calendar-active-focus-cell-background-color: var(
428
+ --cds-alias-object-interaction-background-selected
429
+ );
430
+ --clr-calendar-active-cell-color: var(--cds-global-typography-color-500);
431
+ /* Dropdown */
432
+ --clr-dropdown-active-text-color: var(--cds-alias-object-interaction-color-active);
433
+ --clr-dropdown-bg-color: var(--cds-alias-object-overlay-background);
434
+ --clr-dropdown-border-color: var(--cds-alias-object-border-color);
435
+ --clr-dropdown-divider-color: var(--cds-alias-object-border-color-tint);
436
+ --clr-dropdown-child-border-color: var(--cds-alias-object-border-color);
437
+ --clr-dropdown-bg-hover-color: var(--cds-alias-object-interaction-background-hover);
438
+ --clr-dropdown-selection-color: var(
439
+ --cds-alias-object-interaction-background-selected
440
+ );
441
+ --clr-dropdown-box-shadow: var(--clr-popover-box-shadow-color);
442
+ --clr-dropdown-text-color: var(--clr-p1-color);
443
+ --clr-dropdown-header-color: var(--cds-global-typography-color-400);
444
+ --clr-dropdown-item-color: var(--cds-global-typography-color-300);
445
+ /* Header */
446
+ /* Modal */
447
+ --clr-modal-title-color: var(--cds-global-typography-color-400);
448
+ --clr-modal-close-color: var(--cds-alias-object-interaction-color);
449
+ --clr-modal-bg-color: var(--cds-alias-object-overlay-background);
450
+ --clr-modal-backdrop-color: var(--cds-alias-object-overlay-backdrop-background);
451
+ /* Navigation */
452
+ --clr-link-active-color: var(--cds-global-typography-link-color);
453
+ --clr-link-color: var(--cds-global-typography-link-color);
454
+ --clr-link-hover-color: var(--cds-global-typography-link-color-hover);
455
+ --clr-link-visited-color: var(--cds-global-typography-link-color-visited);
456
+ --clr-link-visited-color-hover: var(--cds-global-typography-link-color-visited-hover);
457
+ --clr-custom-links-hover-color: var(--cds-global-color-gray-200);
458
+ /* Responsive Navigation */
459
+ --clr-sliding-panel-text-color: var(--cds-global-color-gray-700);
460
+ --clr-nav-background-color: var(--cds-global-color-gray-200);
461
+ --clr-responsive-nav-hover-bg: var(--cds-global-color-gray-0);
462
+ --clr-responsive-nav-trigger-bg-color: var(--cds-global-color-gray-0);
463
+ --clr-responsive-nav-header-backdrop-bg-color: var(--cds-global-color-gray-1000);
464
+ /* Sidenav */
465
+ --clr-sidenav-border-color: var(--cds-alias-object-border-color);
466
+ --clr-sidenav-link-hover-color: var(--cds-alias-object-interaction-background-hover);
467
+ --clr-sidenav-link-active-color: var(--cds-alias-object-interaction-color-active);
468
+ --clr-sidenav-link-active-bg-color: var(--clr-global-selection-color);
469
+ --clr-sidenav-header-color: var(--clr-h6-color);
470
+ --clr-sidenav-color: var(--clr-p1-color);
471
+ /* Signpost */
472
+ --clr-signpost-content-bg-color: var(--cds-alias-object-overlay-background);
473
+ --clr-signpost-content-border-color: var(--cds-alias-object-overlay-border-color);
474
+ --clr-signpost-action-color: var(--cds-alias-object-interaction-color);
475
+ --clr-signpost-action-hover-color: var(--cds-alias-object-interaction-color-hover);
476
+ --clr-signpost-border-size: 0.6rem;
477
+ --clr-signpost-pointer-border: var(--clr-signpost-border-size) solid var(--cds-alias-object-overlay-border-color);
478
+ --clr-signpost-pointer-psuedo-border: var(--clr-signpost-border-size) solid var(--clr-signpost-content-bg-color);
479
+ /* StackView */
480
+ --clr-stack-view-border-color: var(--cds-alias-object-border-color);
481
+ --clr-stack-view-bg-color: var(--cds-alias-object-container-background);
482
+ --clr-stack-view-stack-block-border-bottom: var(--cds-alias-object-border-color);
483
+ --clr-stack-view-color: var(--cds-global-typography-color-500);
484
+ --clr-stack-view-stack-block-label-text-color: var(--cds-global-typography-color-500);
485
+ --clr-stack-view-border-box-color: var(--cds-alias-object-border-color-tint);
486
+ --clr-stack-block-changed-border-top-color: var(
487
+ --cds-alias-object-interaction-background-highlight
488
+ );
489
+ --clr-stack-view-stack-block-label-and-content-bg-color: var(
490
+ --cds-alias-object-container-background-tint
491
+ );
492
+ --clr-stack-view-stack-children-stack-block-border-bottom-color: var(
493
+ --cds-alias-object-border-color-tint
494
+ );
495
+ --clr-stack-view-stack-children-stack-block-label-and-content-bg-color: var(
496
+ --cds-alias-object-container-background
497
+ );
498
+ --clr-stack-view-stack-block-expanded-bg-color: var(--clr-global-selection-color);
499
+ --clr-stack-view-stack-block-expandable-hover: var(
500
+ --cds-alias-object-interaction-background-hover
501
+ );
502
+ --clr-stack-view-stack-block-content-text-color: inherit;
503
+ --clr-stack-view-stack-block-expanded-text-color: var(
504
+ --cds-global-typography-color-500
505
+ );
506
+ --clr-stack-view-stack-block-caret-color: var(--cds-global-typography-color-500);
507
+ /* Subnav */
508
+ --clr-subnav-bg-color: var(--cds-alias-object-container-background);
509
+ /* Tabs */
510
+ --clr-nav-box-shadow-color: var(--cds-alias-object-border-color);
511
+ --clr-nav-active-box-shadow-color: var(
512
+ --cds-alias-object-interaction-background-highlight
513
+ );
514
+ --clr-nav-active-bg-color: var(--cds-alias-object-interaction-background-active);
515
+ --clr-nav-hover-bg-color: var(--cds-alias-object-interaction-background-hover);
516
+ --clr-nav-link-color: var(--cds-alias-object-interaction-color);
517
+ --clr-nav-link-active-color: var(--cds-alias-object-interaction-color-active);
518
+ /* Timeline */
519
+ --clr-timeline-line-color: var(--cds-alias-object-border-color-shade);
520
+ --clr-timeline-step-header-color: var(
521
+ --cds-alias-status-neutral
522
+ );
523
+ --clr-timeline-step-title-color: var(--cds-alias-object-interaction-color);
524
+ --clr-timeline-step-description-color: var(--cds-global-typography-color-500);
525
+ --clr-timeline-incomplete-step-color: var(
526
+ --cds-alias-object-border-color-shade
527
+ );
528
+ --clr-timeline-current-step-color: var(
529
+ --cds-alias-object-interaction-background-highlight
530
+ );
531
+ --clr-timeline-success-step-color: var(--cds-alias-status-success);
532
+ --clr-timeline-error-step-color: var(--cds-alias-status-danger);
533
+ /* Toggles */
534
+ --clr-toggle-bg-color-off: var(--cds-alias-status-neutral);
535
+ --clr-toggle-bg-color-on: var(--cds-alias-status-success);
536
+ --clr-toggle-handle-bg-color: var(--cds-global-color-construction-50);
537
+ --clr-toggle-disabled-default-border-color: var(--cds-global-color-gray-400);
538
+ --clr-toggle-disabled-default-handle-color: var(--cds-global-color-construction-50);
539
+ --clr-toggle-disabled-off-border-color: var(--clr-toggle-disabled-default-border-color);
540
+ --clr-toggle-disabled-off-bg-color: var(--clr-toggle-disabled-default-handle-color);
541
+ --clr-toggle-disabled-off-handle-border-color: var(--clr-toggle-disabled-default-border-color);
542
+ --clr-toggle-disabled-on-border-color: var(--clr-toggle-disabled-default-border-color);
543
+ --clr-toggle-disabled-on-bg-color: var(--clr-toggle-disabled-default-border-color);
544
+ --clr-toggle-disabled-on-handle-border-color: var(--clr-toggle-disabled-default-handle-color);
545
+ /* Tooltips */
546
+ --clr-tooltip-background-color: var(--cds-global-color-gray-1000);
547
+ --clr-tooltip-color: var(--cds-global-color-construction-50);
548
+ /* Wizard */
549
+ --clr-wizard-main-bgcolor: var(--cds-alias-object-overlay-background);
550
+ --clr-wizard-sidenav-bgcolor: var(--cds-alias-object-container-background-tint);
551
+ --clr-wizard-main-textColor: var(--cds-global-typography-color-500);
552
+ --clr-wizard-sidenav-text: var(--cds-global-typography-color-500);
553
+ --clr-wizard-sidenav-text--active: var(--clr-global-on-selection-color);
554
+ --clr-wizard-title-text: var(--cds-global-typography-color-500);
555
+ --clr-wizard-stepnav-border-color: var(--cds-alias-object-border-color);
556
+ --clr-wizard-stepnav-border-color--active: var(--cds-alias-status-success);
557
+ --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color);
558
+ --clr-wizard-header-action-color: var(--cds-global-color-gray-600);
559
+ --clr-wizard-header-action-color--hovered: var(--cds-global-color-gray-1000);
560
+ --clr-wizard-step-nav-border-color: var(--cds-alias-object-border-color);
561
+ --clr-wizard-box-shadow-color: rgba(0, 0, 0, 0.2);
562
+ /* Tree View */
563
+ --clr-tree-node-caret-link-hover-color: var(
564
+ --cds-alias-object-interaction-color-hover
565
+ );
566
+ --clr-tree-link-hover-color: var(--cds-alias-object-interaction-background-hover);
567
+ --clr-tree-link-selection-color: var(--clr-global-selection-color);
568
+ --clr-tree-link-text-color: var(--cds-global-typography-color-500);
569
+ --clr-tree-node-caret-color: var(--cds-global-color-gray-500);
570
+ /* Vertical Nav */
571
+ --clr-vertical-nav-divider-color: var(--cds-alias-object-border-color);
572
+ --clr-vertical-nav-icon-active-color: var(--cds-alias-object-interaction-color);
573
+ --clr-vertical-nav-item-color: var(--cds-alias-object-interaction-color);
574
+ --clr-vertical-nav-item-active-color: var(
575
+ --cds-alias-object-interaction-color-active
576
+ );
577
+ --clr-vertical-nav-bg-color: var(--cds-alias-object-container-background-shade);
578
+ --clr-vertical-nav-active-bg-color: var(
579
+ --cds-alias-object-interaction-background-selected
580
+ );
581
+ --clr-vertical-nav-hover-bg-color: var(
582
+ --cds-alias-object-interaction-background-hover
583
+ );
584
+ --clr-vertical-nav-toggle-icon-color: var(--cds-alias-object-interaction-color);
585
+ --clr-vertical-nav-trigger-divider-border-color: var(
586
+ --cds-alias-object-border-color
587
+ );
588
+ /* Tables */
589
+ --clr-table-bgcolor: var(--cds-alias-object-container-background);
590
+ --clr-thead-bgcolor: var(--cds-alias-object-container-background-tint);
591
+ --clr-table-header-border-bottom-color: var(--cds-alias-object-border-color);
592
+ --clr-table-footer-border-top-color: var(--cds-alias-object-border-color);
593
+ --clr-table-border-color: var(--cds-alias-object-border-color);
594
+ --clr-tablerow-bordercolor: var(--cds-alias-object-border-color);
595
+ --clr-table-font-color: var(--cds-global-typography-color-500);
596
+ --clr-thead-color: var(--cds-global-typography-color-500);
597
+ /* Datagrid */
598
+ --clr-datagrid-font-color: var(--cds-global-typography-color-500);
599
+ --clr-datagrid-default-border-color: var(--cds-alias-object-border-color);
600
+ --clr-datagrid-icon-color: var(--cds-alias-object-interaction-color);
601
+ --clr-datagrid-row-hover: var(--cds-alias-object-interaction-background-hover);
602
+ --clr-datagrid-row-hover-font-color: var(--cds-global-typography-color-500);
603
+ --clr-datagrid-action-toggle: var(
604
+ --cds-alias-object-interaction-background-active
605
+ );
606
+ --clr-datagrid-pagination-btn-color: var(--cds-alias-object-interaction-color);
607
+ --clr-datagrid-pagination-btn-disabled-color: var(--cds-alias-status-disabled);
608
+ --clr-datagrid-pagination-input-border-color: var(--cds-alias-object-border-color);
609
+ --clr-datagrid-pagination-input-border-focus-color: var(--clr-color-action-400);
610
+ --clr-datagrid-popover-bg-color: var(--cds-alias-object-overlay-background);
611
+ --clr-datagrid-popover-border-color: var(--cds-alias-object-overlay-border-color);
612
+ --clr-datagrid-action-popover-hover-color: var(
613
+ --cds-alias-object-interaction-color-hover
614
+ );
615
+ --clr-datagrid-row-selected: var(--cds-global-typography-color-500);
616
+ --clr-datagrid-column-switch-header-font-color: var(--cds-global-color-gray-500);
617
+ --clr-datagrid-column-switch-header-font-hover-color: var(
618
+ --cds-alias-object-interaction-background-highlight
619
+ );
620
+ --clr-datagrid-detail-caret-icon-open-bg-color: var(
621
+ --cds-alias-object-interaction-background-highlight
622
+ );
623
+ --clr-datagrid-detail-caret-icon-open-icon-color: var(--cds-global-color-gray-0);
624
+ --clr-datagrid-placeholder-color: var(--cds-global-color-gray-700);
625
+ }
626
+ [cds-theme] .btn:not([disabled]):hover,
627
+ [cds-theme] .btn:not([disabled]):focus,
628
+ [cds-theme] .btn:not([disabled]):active {
629
+ filter: brightness(90%);
630
+ }
631
+ [cds-theme] .btn.disabled,
632
+ [cds-theme] .btn:disabled {
633
+ opacity: 1;
634
+ }
635
+ [cds-theme] .btn-primary,
636
+ [cds-theme] .btn-success,
637
+ [cds-theme] .btn-warning,
638
+ [cds-theme] .btn-danger {
639
+ --clr-btn-icon-disabled-color: var(--cds-global-typography-color-100);
640
+ }