@epam/assets 5.0.0-alpha.4 → 5.0.1

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 (632) hide show
  1. package/css/theme/theme_loveship.css +1209 -0
  2. package/css/theme/theme_loveship.css.map +1 -0
  3. package/css/theme/theme_promo.css +961 -0
  4. package/css/theme/theme_promo.css.map +1 -0
  5. package/css/theme/theme_vanilla_thunder.css +806 -0
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -0
  7. package/icon-sources/12/account-multiple-plus.svg +3 -3
  8. package/icon-sources/12/action-account.svg +3 -3
  9. package/icon-sources/12/action-add.svg +3 -3
  10. package/icon-sources/12/action-calendar.svg +3 -3
  11. package/icon-sources/12/action-delete light.svg +3 -3
  12. package/icon-sources/12/action-delete.svg +4 -4
  13. package/icon-sources/12/action-drag_corner.svg +8 -8
  14. package/icon-sources/12/action-drag_indicator.svg +3 -3
  15. package/icon-sources/12/action-external_link.svg +3 -3
  16. package/icon-sources/12/action-eye-off.svg +11 -11
  17. package/icon-sources/12/action-eye.svg +4 -4
  18. package/icon-sources/12/action-flash.svg +3 -3
  19. package/icon-sources/12/action-history.svg +3 -3
  20. package/icon-sources/12/action-home.svg +3 -3
  21. package/icon-sources/12/action-job_function.svg +3 -3
  22. package/icon-sources/12/action-language.svg +3 -3
  23. package/icon-sources/12/action-lock-fill.svg +3 -3
  24. package/icon-sources/12/action-lock_open-fill.svg +3 -3
  25. package/icon-sources/12/action-map_pin.svg +3 -3
  26. package/icon-sources/12/action-schedule.svg +4 -4
  27. package/icon-sources/12/action-search.svg +3 -3
  28. package/icon-sources/12/action-settings.svg +3 -3
  29. package/icon-sources/12/action-tune.svg +3 -3
  30. package/icon-sources/12/add-below.svg +4 -4
  31. package/icon-sources/12/bell-off-outline.svg +10 -10
  32. package/icon-sources/12/bell-off.svg +10 -10
  33. package/icon-sources/12/bell-outline.svg +3 -3
  34. package/icon-sources/12/bell.svg +3 -3
  35. package/icon-sources/12/blacklist.svg +3 -3
  36. package/icon-sources/12/certificate.svg +3 -3
  37. package/icon-sources/12/chart-multiline.svg +3 -3
  38. package/icon-sources/12/communication-phone_mobile.svg +3 -3
  39. package/icon-sources/12/content-add-fill.svg +3 -3
  40. package/icon-sources/12/content-clear.svg +3 -3
  41. package/icon-sources/12/content-edit.svg +3 -3
  42. package/icon-sources/12/copy_content.svg +3 -3
  43. package/icon-sources/12/core-skill.svg +3 -3
  44. package/icon-sources/12/cv.svg +3 -3
  45. package/icon-sources/12/empty.svg +3 -3
  46. package/icon-sources/12/fav & rates-favorite.svg +3 -3
  47. package/icon-sources/12/file-attachment.svg +3 -3
  48. package/icon-sources/12/file-download.svg +3 -3
  49. package/icon-sources/12/file-export.svg +4 -4
  50. package/icon-sources/12/file-import.svg +4 -4
  51. package/icon-sources/12/file-upload.svg +3 -3
  52. package/icon-sources/12/grow.svg +4 -4
  53. package/icon-sources/12/in_progress-status.svg +16 -16
  54. package/icon-sources/12/interest.svg +3 -3
  55. package/icon-sources/12/linkedin.svg +3 -3
  56. package/icon-sources/12/medal.svg +4 -4
  57. package/icon-sources/12/na.svg +6 -6
  58. package/icon-sources/12/navigation-arrow-down.svg +3 -3
  59. package/icon-sources/12/navigation-arrow-left.svg +3 -3
  60. package/icon-sources/12/navigation-arrow-right.svg +3 -3
  61. package/icon-sources/12/navigation-arrow-up.svg +3 -3
  62. package/icon-sources/12/navigation-back.svg +4 -4
  63. package/icon-sources/12/navigation-chevron-down.svg +3 -3
  64. package/icon-sources/12/navigation-chevron-left.svg +3 -3
  65. package/icon-sources/12/navigation-chevron-left_left.svg +4 -4
  66. package/icon-sources/12/navigation-chevron-right.svg +3 -3
  67. package/icon-sources/12/navigation-chevron-right_right.svg +4 -4
  68. package/icon-sources/12/navigation-chevron-up.svg +3 -3
  69. package/icon-sources/12/navigation-close.svg +3 -3
  70. package/icon-sources/12/navigation-close_bold.svg +3 -3
  71. package/icon-sources/12/navigation-login.svg +3 -3
  72. package/icon-sources/12/navigation-logout.svg +3 -3
  73. package/icon-sources/12/navigation-menu.svg +3 -3
  74. package/icon-sources/12/navigation-more_horiz.svg +3 -3
  75. package/icon-sources/12/navigation-more_vert.svg +3 -3
  76. package/icon-sources/12/navigation-refresh.svg +3 -3
  77. package/icon-sources/12/navigation-unfold-less.svg +3 -3
  78. package/icon-sources/12/navigation-unfold-more.svg +3 -3
  79. package/icon-sources/12/none.svg +4 -4
  80. package/icon-sources/12/not-recommended.svg +3 -3
  81. package/icon-sources/12/notification-check-fill.svg +3 -3
  82. package/icon-sources/12/notification-done.svg +3 -3
  83. package/icon-sources/12/notification-error-fill.svg +3 -3
  84. package/icon-sources/12/notification-help-fill.svg +3 -3
  85. package/icon-sources/12/notification-info-fill.svg +3 -3
  86. package/icon-sources/12/notification-warning-fill.svg +3 -3
  87. package/icon-sources/12/open-status.svg +10 -10
  88. package/icon-sources/12/optional-skills.svg +3 -3
  89. package/icon-sources/12/ready-to.svg +3 -3
  90. package/icon-sources/12/social-person.svg +3 -3
  91. package/icon-sources/12/text-format.svg +3 -3
  92. package/icon-sources/18/account-multiple-plus.svg +3 -3
  93. package/icon-sources/18/action-account.svg +3 -3
  94. package/icon-sources/18/action-add.svg +3 -3
  95. package/icon-sources/18/action-calendar.svg +3 -3
  96. package/icon-sources/18/action-chat.svg +3 -3
  97. package/icon-sources/18/action-clock.svg +3 -3
  98. package/icon-sources/18/action-copy_content.svg +3 -3
  99. package/icon-sources/18/action-deactivate.svg +3 -3
  100. package/icon-sources/18/action-delete forever.svg +3 -3
  101. package/icon-sources/18/action-delete light.svg +3 -3
  102. package/icon-sources/18/action-delete.svg +4 -4
  103. package/icon-sources/18/action-drag_corner.svg +3 -3
  104. package/icon-sources/18/action-drag_indicator.svg +3 -3
  105. package/icon-sources/18/action-external_link.svg +4 -4
  106. package/icon-sources/18/action-eye-off.svg +4 -4
  107. package/icon-sources/18/action-eye.svg +4 -4
  108. package/icon-sources/18/action-flash.svg +3 -3
  109. package/icon-sources/18/action-history.svg +3 -3
  110. package/icon-sources/18/action-home.svg +3 -3
  111. package/icon-sources/18/action-job_function.svg +3 -3
  112. package/icon-sources/18/action-language.svg +3 -3
  113. package/icon-sources/18/action-level.svg +7 -7
  114. package/icon-sources/18/action-lock-fill.svg +3 -3
  115. package/icon-sources/18/action-lock_open-fill.svg +3 -3
  116. package/icon-sources/18/action-map_pin.svg +3 -3
  117. package/icon-sources/18/action-move_to.svg +3 -3
  118. package/icon-sources/18/action-pin_off.svg +4 -4
  119. package/icon-sources/18/action-pin_on.svg +3 -3
  120. package/icon-sources/18/action-schedule.svg +3 -3
  121. package/icon-sources/18/action-search.svg +3 -3
  122. package/icon-sources/18/action-settings.svg +3 -3
  123. package/icon-sources/18/action-snapshot.svg +7 -7
  124. package/icon-sources/18/action-target.svg +3 -3
  125. package/icon-sources/18/action-trophy.svg +3 -3
  126. package/icon-sources/18/action-tune.svg +3 -3
  127. package/icon-sources/18/action-update.svg +3 -3
  128. package/icon-sources/18/add-above.svg +4 -4
  129. package/icon-sources/18/add-below.svg +4 -4
  130. package/icon-sources/18/bell-off-outline.svg +3 -3
  131. package/icon-sources/18/bell-off.svg +3 -3
  132. package/icon-sources/18/bell-outline.svg +3 -3
  133. package/icon-sources/18/bell.svg +3 -3
  134. package/icon-sources/18/blacklist.svg +3 -3
  135. package/icon-sources/18/certificate.svg +3 -3
  136. package/icon-sources/18/chart-multiline.svg +3 -3
  137. package/icon-sources/18/communication-mail.svg +3 -3
  138. package/icon-sources/18/communication-phone.svg +3 -3
  139. package/icon-sources/18/communication-phone_mobile.svg +3 -3
  140. package/icon-sources/18/communication-skype.svg +3 -3
  141. package/icon-sources/18/communication-skype_business.svg +3 -3
  142. package/icon-sources/18/communication-telescope.svg +7 -7
  143. package/icon-sources/18/content-add-fill.svg +3 -3
  144. package/icon-sources/18/content-add-outline.svg +3 -3
  145. package/icon-sources/18/content-clear.svg +3 -3
  146. package/icon-sources/18/content-code.svg +3 -3
  147. package/icon-sources/18/content-code_check.svg +3 -3
  148. package/icon-sources/18/content-deselect-fill.svg +3 -3
  149. package/icon-sources/18/content-deselect-outline.svg +3 -3
  150. package/icon-sources/18/content-edit.svg +3 -3
  151. package/icon-sources/18/content-edit_redo.svg +3 -3
  152. package/icon-sources/18/content-edit_undo.svg +3 -3
  153. package/icon-sources/18/content-filter_list.svg +3 -3
  154. package/icon-sources/18/content-filtration.svg +3 -3
  155. package/icon-sources/18/content-link.svg +3 -3
  156. package/icon-sources/18/content-link_off.svg +3 -3
  157. package/icon-sources/18/content-plus.svg +3 -3
  158. package/icon-sources/18/content-plus_bold.svg +3 -3
  159. package/icon-sources/18/core-skill.svg +3 -3
  160. package/icon-sources/18/cv.svg +3 -3
  161. package/icon-sources/18/empty.svg +3 -3
  162. package/icon-sources/18/fav & rates-favorite-outline.svg +3 -3
  163. package/icon-sources/18/fav & rates-favorite.svg +3 -3
  164. package/icon-sources/18/fav & rates-star-outline.svg +3 -3
  165. package/icon-sources/18/fav & rates-star.svg +3 -3
  166. package/icon-sources/18/fav & rates-star_half.svg +3 -3
  167. package/icon-sources/18/file-archive.svg +3 -3
  168. package/icon-sources/18/file-attachment.svg +3 -3
  169. package/icon-sources/18/file-download.svg +3 -3
  170. package/icon-sources/18/file-export.svg +4 -4
  171. package/icon-sources/18/file-import.svg +4 -4
  172. package/icon-sources/18/file-upload.svg +3 -3
  173. package/icon-sources/18/folder.svg +4 -4
  174. package/icon-sources/18/grow.svg +4 -4
  175. package/icon-sources/18/interest.svg +3 -3
  176. package/icon-sources/18/linkedin.svg +3 -3
  177. package/icon-sources/18/medal.svg +4 -4
  178. package/icon-sources/18/media-fullscreen.svg +3 -3
  179. package/icon-sources/18/media-fullscreen_exit.svg +3 -3
  180. package/icon-sources/18/media-pause-fill.svg +3 -3
  181. package/icon-sources/18/media-pause-outline.svg +3 -3
  182. package/icon-sources/18/media-pause.svg +3 -3
  183. package/icon-sources/18/media-play-fill.svg +3 -3
  184. package/icon-sources/18/media-play-outline.svg +3 -3
  185. package/icon-sources/18/media-play.svg +3 -3
  186. package/icon-sources/18/media-play_pause.svg +3 -3
  187. package/icon-sources/18/media-playlist-add.svg +3 -3
  188. package/icon-sources/18/media-playlist-check.svg +3 -3
  189. package/icon-sources/18/media-playlist-minus.svg +3 -3
  190. package/icon-sources/18/media-playlist-play.svg +3 -3
  191. package/icon-sources/18/media-playlist-remove.svg +3 -3
  192. package/icon-sources/18/media-replay.svg +3 -3
  193. package/icon-sources/18/media-skip_backward.svg +3 -3
  194. package/icon-sources/18/media-skip_forward.svg +3 -3
  195. package/icon-sources/18/media-skip_next.svg +3 -3
  196. package/icon-sources/18/media-skip_previous.svg +3 -3
  197. package/icon-sources/18/media-stop-fill.svg +3 -3
  198. package/icon-sources/18/media-stop-outline.svg +3 -3
  199. package/icon-sources/18/media-stop.svg +3 -3
  200. package/icon-sources/18/microsoft-teams-outline.svg +3 -3
  201. package/icon-sources/18/microsoft-teams.svg +7 -7
  202. package/icon-sources/18/na.svg +6 -6
  203. package/icon-sources/18/navigation-arrow-down.svg +3 -3
  204. package/icon-sources/18/navigation-arrow-left.svg +3 -3
  205. package/icon-sources/18/navigation-arrow-right.svg +3 -3
  206. package/icon-sources/18/navigation-arrow-up.svg +3 -3
  207. package/icon-sources/18/navigation-back.svg +3 -3
  208. package/icon-sources/18/navigation-chevron-down.svg +3 -3
  209. package/icon-sources/18/navigation-chevron-down_down.svg +4 -4
  210. package/icon-sources/18/navigation-chevron-left.svg +3 -3
  211. package/icon-sources/18/navigation-chevron-left_left.svg +4 -4
  212. package/icon-sources/18/navigation-chevron-right.svg +3 -3
  213. package/icon-sources/18/navigation-chevron-right_right.svg +4 -4
  214. package/icon-sources/18/navigation-chevron-up.svg +3 -3
  215. package/icon-sources/18/navigation-chevron-up_up.svg +4 -4
  216. package/icon-sources/18/navigation-close.svg +3 -3
  217. package/icon-sources/18/navigation-close_bold.svg +3 -3
  218. package/icon-sources/18/navigation-dependency.svg +3 -3
  219. package/icon-sources/18/navigation-first.svg +3 -3
  220. package/icon-sources/18/navigation-last.svg +3 -3
  221. package/icon-sources/18/navigation-login.svg +3 -3
  222. package/icon-sources/18/navigation-logout.svg +3 -3
  223. package/icon-sources/18/navigation-menu.svg +3 -3
  224. package/icon-sources/18/navigation-more_horiz.svg +3 -3
  225. package/icon-sources/18/navigation-more_vert.svg +3 -3
  226. package/icon-sources/18/navigation-refresh.svg +3 -3
  227. package/icon-sources/18/navigation-structure.svg +3 -3
  228. package/icon-sources/18/navigation-structure_alt.svg +3 -3
  229. package/icon-sources/18/navigation-unfold-less.svg +3 -3
  230. package/icon-sources/18/navigation-unfold-more.svg +3 -3
  231. package/icon-sources/18/none.svg +4 -4
  232. package/icon-sources/18/not-recommended.svg +3 -3
  233. package/icon-sources/18/notification-check-fill.svg +3 -3
  234. package/icon-sources/18/notification-check-outline.svg +3 -3
  235. package/icon-sources/18/notification-done.svg +3 -3
  236. package/icon-sources/18/notification-done_bold.svg +3 -3
  237. package/icon-sources/18/notification-error-fill.svg +3 -3
  238. package/icon-sources/18/notification-error-outline.svg +3 -3
  239. package/icon-sources/18/notification-help-fill.svg +3 -3
  240. package/icon-sources/18/notification-help-outline.svg +3 -3
  241. package/icon-sources/18/notification-info-fill.svg +3 -3
  242. package/icon-sources/18/notification-info-outline.svg +3 -3
  243. package/icon-sources/18/notification-warning-fill.svg +3 -3
  244. package/icon-sources/18/notification-warning-outline.svg +3 -3
  245. package/icon-sources/18/optional-skills.svg +7 -7
  246. package/icon-sources/18/people.svg +6 -6
  247. package/icon-sources/18/ready-to.svg +3 -3
  248. package/icon-sources/18/save-outline.svg +3 -3
  249. package/icon-sources/18/save.svg +3 -3
  250. package/icon-sources/18/social-group.svg +3 -3
  251. package/icon-sources/18/social-hot.svg +3 -3
  252. package/icon-sources/18/social-network-facebook.svg +3 -3
  253. package/icon-sources/18/social-network-github.svg +3 -3
  254. package/icon-sources/18/social-network-instagram.svg +3 -3
  255. package/icon-sources/18/social-network-linkedin.svg +3 -3
  256. package/icon-sources/18/social-network-pinterest.svg +3 -3
  257. package/icon-sources/18/social-network-telegram.svg +3 -3
  258. package/icon-sources/18/social-network-twitter.svg +3 -3
  259. package/icon-sources/18/social-network-vk.svg +3 -3
  260. package/icon-sources/18/social-network-yammer.svg +3 -3
  261. package/icon-sources/18/social-network-youtube.svg +3 -3
  262. package/icon-sources/18/social-person.svg +3 -3
  263. package/icon-sources/18/social-reply.svg +3 -3
  264. package/icon-sources/18/social-share.svg +3 -3
  265. package/icon-sources/18/social-thumb-down.svg +3 -3
  266. package/icon-sources/18/social-thumb-up.svg +3 -3
  267. package/icon-sources/18/table-columns.svg +5 -5
  268. package/icon-sources/18/table-group_by.svg +9 -9
  269. package/icon-sources/18/table-info-fill.svg +3 -3
  270. package/icon-sources/18/table-info-outline.svg +3 -3
  271. package/icon-sources/18/table-sort_asc.svg +3 -3
  272. package/icon-sources/18/table-sort_desc.svg +3 -3
  273. package/icon-sources/18/table-swap.svg +3 -3
  274. package/icon-sources/18/text-format.svg +4 -4
  275. package/icon-sources/18/view-grid.svg +6 -6
  276. package/icon-sources/18/view-table.svg +3 -3
  277. package/icon-sources/24/account-multiple-plus.svg +3 -3
  278. package/icon-sources/24/action-account.svg +3 -3
  279. package/icon-sources/24/action-add.svg +3 -3
  280. package/icon-sources/24/action-align-center.svg +3 -3
  281. package/icon-sources/24/action-align-left.svg +3 -3
  282. package/icon-sources/24/action-align-right.svg +3 -3
  283. package/icon-sources/24/action-calendar.svg +3 -3
  284. package/icon-sources/24/action-copy_content.svg +3 -3
  285. package/icon-sources/24/action-currency.svg +3 -3
  286. package/icon-sources/24/action-currency_off.svg +3 -3
  287. package/icon-sources/24/action-delete.svg +3 -3
  288. package/icon-sources/24/action-drag_corner.svg +3 -3
  289. package/icon-sources/24/action-drag_indicator.svg +3 -3
  290. package/icon-sources/24/action-external_link.svg +3 -3
  291. package/icon-sources/24/action-eye-off.svg +4 -4
  292. package/icon-sources/24/action-eye.svg +4 -4
  293. package/icon-sources/24/action-flash.svg +3 -3
  294. package/icon-sources/24/action-full_width.svg +3 -3
  295. package/icon-sources/24/action-history.svg +3 -3
  296. package/icon-sources/24/action-home.svg +3 -3
  297. package/icon-sources/24/action-job_function.svg +3 -3
  298. package/icon-sources/24/action-language.svg +3 -3
  299. package/icon-sources/24/action-level.svg +7 -7
  300. package/icon-sources/24/action-lock-fill.svg +3 -3
  301. package/icon-sources/24/action-lock-outline.svg +3 -3
  302. package/icon-sources/24/action-lock_open-fill.svg +3 -3
  303. package/icon-sources/24/action-lock_open-outline.svg +4 -4
  304. package/icon-sources/24/action-map_pin.svg +3 -3
  305. package/icon-sources/24/action-mic.svg +3 -3
  306. package/icon-sources/24/action-move_to.svg +3 -3
  307. package/icon-sources/24/action-photo.svg +3 -3
  308. package/icon-sources/24/action-pin_off.svg +3 -3
  309. package/icon-sources/24/action-pin_on.svg +3 -3
  310. package/icon-sources/24/action-schedule.svg +3 -3
  311. package/icon-sources/24/action-search.svg +3 -3
  312. package/icon-sources/24/action-send.svg +3 -3
  313. package/icon-sources/24/action-settings.svg +3 -3
  314. package/icon-sources/24/action-snapshot.svg +7 -7
  315. package/icon-sources/24/action-target.svg +3 -3
  316. package/icon-sources/24/action-trophy.svg +3 -3
  317. package/icon-sources/24/action-tune.svg +3 -3
  318. package/icon-sources/24/add-above-1.svg +4 -4
  319. package/icon-sources/24/add-above.svg +4 -4
  320. package/icon-sources/24/add-below.svg +4 -4
  321. package/icon-sources/24/bell-off-outline.svg +3 -3
  322. package/icon-sources/24/bell-off.svg +3 -3
  323. package/icon-sources/24/bell-outline.svg +3 -3
  324. package/icon-sources/24/bell.svg +3 -3
  325. package/icon-sources/24/blacklist.svg +3 -3
  326. package/icon-sources/24/certificate.svg +3 -3
  327. package/icon-sources/24/chart-multiline.svg +3 -3
  328. package/icon-sources/24/communication-chat.svg +3 -3
  329. package/icon-sources/24/communication-communication-chat_alt.svg +3 -3
  330. package/icon-sources/24/communication-geo_tag.svg +3 -3
  331. package/icon-sources/24/communication-mail.svg +3 -3
  332. package/icon-sources/24/communication-phone.svg +3 -3
  333. package/icon-sources/24/communication-phone_mobile.svg +3 -3
  334. package/icon-sources/24/communication-skype.svg +3 -3
  335. package/icon-sources/24/communication-skype_business.svg +3 -3
  336. package/icon-sources/24/communication-telescope.svg +3 -3
  337. package/icon-sources/24/content-add-fill.svg +3 -3
  338. package/icon-sources/24/content-add-outline.svg +3 -3
  339. package/icon-sources/24/content-bookmark-fill.svg +3 -3
  340. package/icon-sources/24/content-bookmark-outline.svg +3 -3
  341. package/icon-sources/24/content-clear-outline.svg +3 -3
  342. package/icon-sources/24/content-clear.svg +3 -3
  343. package/icon-sources/24/content-code.svg +3 -3
  344. package/icon-sources/24/content-code_braces.svg +3 -3
  345. package/icon-sources/24/content-code_check.svg +3 -3
  346. package/icon-sources/24/content-deselect-fill.svg +3 -3
  347. package/icon-sources/24/content-deselect-outline.svg +3 -3
  348. package/icon-sources/24/content-edit.svg +3 -3
  349. package/icon-sources/24/content-edit_redo.svg +3 -3
  350. package/icon-sources/24/content-edit_undo.svg +3 -3
  351. package/icon-sources/24/content-filter_list.svg +3 -3
  352. package/icon-sources/24/content-filtration.svg +3 -3
  353. package/icon-sources/24/content-link.svg +3 -3
  354. package/icon-sources/24/content-link_off.svg +3 -3
  355. package/icon-sources/24/content-minus.svg +3 -3
  356. package/icon-sources/24/content-sort_asc.svg +3 -3
  357. package/icon-sources/24/content-sort_desc.svg +3 -3
  358. package/icon-sources/24/core-skill.svg +3 -3
  359. package/icon-sources/24/cv.svg +3 -3
  360. package/icon-sources/24/database-database.svg +3 -3
  361. package/icon-sources/24/database-lock.svg +6 -6
  362. package/icon-sources/24/database-plus.svg +3 -3
  363. package/icon-sources/24/database-remove.svg +3 -3
  364. package/icon-sources/24/database-settings.svg +3 -3
  365. package/icon-sources/24/delete-1.svg +3 -3
  366. package/icon-sources/24/editor-breakline.svg +5 -5
  367. package/icon-sources/24/editor-chart-arc.svg +3 -3
  368. package/icon-sources/24/editor-chart-areaspline.svg +3 -3
  369. package/icon-sources/24/editor-chart-bar_stacked.svg +3 -3
  370. package/icon-sources/24/editor-chart-bar_vert.svg +3 -3
  371. package/icon-sources/24/editor-chart-bubble.svg +3 -3
  372. package/icon-sources/24/editor-chart-curve.svg +3 -3
  373. package/icon-sources/24/editor-chart-donut.svg +3 -3
  374. package/icon-sources/24/editor-chart-gantt.svg +3 -3
  375. package/icon-sources/24/editor-chart-histogram.svg +3 -3
  376. package/icon-sources/24/editor-chart-line.svg +3 -3
  377. package/icon-sources/24/editor-chart-line_multiline.svg +3 -3
  378. package/icon-sources/24/editor-chart-line_var.svg +3 -3
  379. package/icon-sources/24/editor-chart-pie.svg +3 -3
  380. package/icon-sources/24/editor-chart-table.svg +3 -3
  381. package/icon-sources/24/editor-chart-timeline.svg +3 -3
  382. package/icon-sources/24/editor-chart-tree.svg +6 -6
  383. package/icon-sources/24/editor-code.svg +3 -3
  384. package/icon-sources/24/editor-color.svg +3 -3
  385. package/icon-sources/24/editor-color_none.svg +3 -3
  386. package/icon-sources/24/editor-format_bold.svg +3 -3
  387. package/icon-sources/24/editor-format_italic.svg +3 -3
  388. package/icon-sources/24/editor-format_strikethrough.svg +3 -3
  389. package/icon-sources/24/editor-format_subscript.svg +3 -3
  390. package/icon-sources/24/editor-format_superscript.svg +3 -3
  391. package/icon-sources/24/editor-format_text_alignment_center.svg +3 -3
  392. package/icon-sources/24/editor-format_text_alignment_justify.svg +3 -3
  393. package/icon-sources/24/editor-format_text_alignment_left.svg +3 -3
  394. package/icon-sources/24/editor-format_text_alignment_right.svg +3 -3
  395. package/icon-sources/24/editor-format_text_color.svg +3 -3
  396. package/icon-sources/24/editor-format_underlined.svg +3 -3
  397. package/icon-sources/24/editor-functions.svg +3 -3
  398. package/icon-sources/24/editor-headline.svg +3 -3
  399. package/icon-sources/24/editor-headline_h1.svg +3 -3
  400. package/icon-sources/24/editor-headline_h2.svg +3 -3
  401. package/icon-sources/24/editor-headline_h3.svg +3 -3
  402. package/icon-sources/24/editor-image.svg +3 -3
  403. package/icon-sources/24/editor-issue.svg +3 -3
  404. package/icon-sources/24/editor-list_bullet.svg +3 -3
  405. package/icon-sources/24/editor-list_checkbox.svg +3 -3
  406. package/icon-sources/24/editor-list_number.svg +3 -3
  407. package/icon-sources/24/editor-mention.svg +3 -3
  408. package/icon-sources/24/editor-outline.svg +3 -3
  409. package/icon-sources/24/editor-quote.svg +3 -3
  410. package/icon-sources/24/editor-risk.svg +3 -3
  411. package/icon-sources/24/editor-stats.svg +3 -3
  412. package/icon-sources/24/editor-table_merge_cells.svg +3 -3
  413. package/icon-sources/24/editor-table_split_cells.svg +3 -3
  414. package/icon-sources/24/editor-title.svg +3 -3
  415. package/icon-sources/24/editor-video.svg +3 -3
  416. package/icon-sources/24/empty.svg +3 -3
  417. package/icon-sources/24/fav & rates-favorite-outline.svg +3 -3
  418. package/icon-sources/24/fav & rates-favorite.svg +3 -3
  419. package/icon-sources/24/fav & rates-star-outline.svg +3 -3
  420. package/icon-sources/24/fav & rates-star.svg +3 -3
  421. package/icon-sources/24/fav & rates-star_half.svg +3 -3
  422. package/icon-sources/24/file-attachment.svg +3 -3
  423. package/icon-sources/24/file-cloud_download.svg +3 -3
  424. package/icon-sources/24/file-cloud_upload.svg +3 -3
  425. package/icon-sources/24/file-download.svg +3 -3
  426. package/icon-sources/24/file-export.svg +3 -3
  427. package/icon-sources/24/file-file.svg +3 -3
  428. package/icon-sources/24/file-file_archive.svg +3 -3
  429. package/icon-sources/24/file-file_chart.svg +3 -3
  430. package/icon-sources/24/file-file_eml.svg +3 -3
  431. package/icon-sources/24/file-file_excel.svg +3 -3
  432. package/icon-sources/24/file-file_image.svg +3 -3
  433. package/icon-sources/24/file-file_pdf.svg +3 -3
  434. package/icon-sources/24/file-file_table.svg +3 -3
  435. package/icon-sources/24/file-file_text.svg +3 -3
  436. package/icon-sources/24/file-file_video.svg +4 -4
  437. package/icon-sources/24/file-file_word.svg +3 -3
  438. package/icon-sources/24/file-import.svg +3 -3
  439. package/icon-sources/24/file-upload.svg +3 -3
  440. package/icon-sources/24/folder.svg +4 -4
  441. package/icon-sources/24/global_menu.svg +3 -3
  442. package/icon-sources/24/grow.svg +4 -4
  443. package/icon-sources/24/interest.svg +3 -3
  444. package/icon-sources/24/linkedin.svg +3 -3
  445. package/icon-sources/24/medal.svg +4 -4
  446. package/icon-sources/24/media-fullscreen.svg +3 -3
  447. package/icon-sources/24/media-fullscreen_exit.svg +3 -3
  448. package/icon-sources/24/media-pause-fill.svg +3 -3
  449. package/icon-sources/24/media-pause-outline.svg +3 -3
  450. package/icon-sources/24/media-pause.svg +3 -3
  451. package/icon-sources/24/media-play-fill.svg +3 -3
  452. package/icon-sources/24/media-play-outline.svg +3 -3
  453. package/icon-sources/24/media-play.svg +3 -3
  454. package/icon-sources/24/media-play_pause.svg +3 -3
  455. package/icon-sources/24/media-playlist-check.svg +3 -3
  456. package/icon-sources/24/media-playlist-minus.svg +3 -3
  457. package/icon-sources/24/media-playlist-play.svg +3 -3
  458. package/icon-sources/24/media-playlist-plus.svg +3 -3
  459. package/icon-sources/24/media-playlist.remove.svg +3 -3
  460. package/icon-sources/24/media-replay.svg +3 -3
  461. package/icon-sources/24/media-skip_backward.svg +3 -3
  462. package/icon-sources/24/media-skip_forward.svg +3 -3
  463. package/icon-sources/24/media-skip_next.svg +3 -3
  464. package/icon-sources/24/media-skip_previous.svg +3 -3
  465. package/icon-sources/24/media-stop-fill.svg +3 -3
  466. package/icon-sources/24/media-stop-outline.svg +3 -3
  467. package/icon-sources/24/media-stop.svg +3 -3
  468. package/icon-sources/24/microsoft-teams-outline.svg +3 -3
  469. package/icon-sources/24/microsoft-teams.svg +7 -7
  470. package/icon-sources/24/na.svg +6 -6
  471. package/icon-sources/24/navigation-arrow-down.svg +3 -3
  472. package/icon-sources/24/navigation-arrow-left.svg +3 -3
  473. package/icon-sources/24/navigation-arrow-right.svg +3 -3
  474. package/icon-sources/24/navigation-arrow-up.svg +3 -3
  475. package/icon-sources/24/navigation-arrows_collapse.svg +3 -3
  476. package/icon-sources/24/navigation-arrows_expand.svg +3 -3
  477. package/icon-sources/24/navigation-back.svg +3 -3
  478. package/icon-sources/24/navigation-chevron-down.svg +3 -3
  479. package/icon-sources/24/navigation-chevron-left.svg +3 -3
  480. package/icon-sources/24/navigation-chevron-left_left.svg +4 -4
  481. package/icon-sources/24/navigation-chevron-right.svg +3 -3
  482. package/icon-sources/24/navigation-chevron-right_right.svg +3 -3
  483. package/icon-sources/24/navigation-chevron-up.svg +3 -3
  484. package/icon-sources/24/navigation-close.svg +3 -3
  485. package/icon-sources/24/navigation-close_popup-(/342/233/224/357/270/217outdated).svg +4 -4
  486. package/icon-sources/24/navigation-dependency.svg +3 -3
  487. package/icon-sources/24/navigation-first.svg +3 -3
  488. package/icon-sources/24/navigation-hide.svg +3 -3
  489. package/icon-sources/24/navigation-last.svg +3 -3
  490. package/icon-sources/24/navigation-login.svg +3 -3
  491. package/icon-sources/24/navigation-logout.svg +3 -3
  492. package/icon-sources/24/navigation-menu.svg +3 -3
  493. package/icon-sources/24/navigation-more_horiz.svg +3 -3
  494. package/icon-sources/24/navigation-more_vert.svg +3 -3
  495. package/icon-sources/24/navigation-refresh.svg +3 -3
  496. package/icon-sources/24/navigation-show.svg +3 -3
  497. package/icon-sources/24/navigation-structure.svg +3 -3
  498. package/icon-sources/24/navigation-structure_alt.svg +3 -3
  499. package/icon-sources/24/navigation-today.svg +3 -3
  500. package/icon-sources/24/navigation-unfold-less.svg +3 -3
  501. package/icon-sources/24/navigation-unfold-more.svg +3 -3
  502. package/icon-sources/24/none.svg +4 -4
  503. package/icon-sources/24/not-reccomended.svg +3 -3
  504. package/icon-sources/24/notification-check-fill.svg +3 -3
  505. package/icon-sources/24/notification-check-outline.svg +3 -3
  506. package/icon-sources/24/notification-done.svg +3 -3
  507. package/icon-sources/24/notification-error-fill.svg +3 -3
  508. package/icon-sources/24/notification-error-outline.svg +3 -3
  509. package/icon-sources/24/notification-help-fill.svg +3 -3
  510. package/icon-sources/24/notification-help-outline.svg +3 -3
  511. package/icon-sources/24/notification-info-fill.svg +3 -3
  512. package/icon-sources/24/notification-info-outline.svg +3 -3
  513. package/icon-sources/24/notification-warning-fill.svg +3 -3
  514. package/icon-sources/24/notification-warning-outline.svg +3 -3
  515. package/icon-sources/24/optional-skills.svg +3 -3
  516. package/icon-sources/24/people.svg +6 -6
  517. package/icon-sources/24/radar.svg +4 -4
  518. package/icon-sources/24/ready-to.svg +3 -3
  519. package/icon-sources/24/save-outline.svg +3 -3
  520. package/icon-sources/24/save.svg +3 -3
  521. package/icon-sources/24/social-group.svg +3 -3
  522. package/icon-sources/24/social-hot.svg +3 -3
  523. package/icon-sources/24/social-hot_off.svg +4 -4
  524. package/icon-sources/24/social-network-facebook.svg +3 -3
  525. package/icon-sources/24/social-network-github.svg +3 -3
  526. package/icon-sources/24/social-network-instagram.svg +3 -3
  527. package/icon-sources/24/social-network-linkedin.svg +3 -3
  528. package/icon-sources/24/social-network-pinterest.svg +3 -3
  529. package/icon-sources/24/social-network-telegram.svg +3 -3
  530. package/icon-sources/24/social-network-twitter.svg +3 -3
  531. package/icon-sources/24/social-network-vk.svg +3 -3
  532. package/icon-sources/24/social-network-yammer.svg +3 -3
  533. package/icon-sources/24/social-network-youtube.svg +3 -3
  534. package/icon-sources/24/social-person.svg +3 -3
  535. package/icon-sources/24/social-share.svg +3 -3
  536. package/icon-sources/24/social-thumb-down.svg +3 -3
  537. package/icon-sources/24/social-thumb-up.svg +3 -3
  538. package/icon-sources/24/table-column.svg +3 -3
  539. package/icon-sources/24/table-column_plus_after.svg +3 -3
  540. package/icon-sources/24/table-column_plus_before.svg +3 -3
  541. package/icon-sources/24/table-column_remove.svg +3 -3
  542. package/icon-sources/24/table-row.svg +3 -3
  543. package/icon-sources/24/table-row_plus_after.svg +3 -3
  544. package/icon-sources/24/table-row_plus_before.svg +3 -3
  545. package/icon-sources/24/table-row_remove.svg +3 -3
  546. package/icon-sources/24/table-table.svg +3 -3
  547. package/icon-sources/24/table-table_edit.svg +3 -3
  548. package/icon-sources/24/table-table_plus.svg +3 -3
  549. package/icon-sources/24/table-table_remove.svg +3 -3
  550. package/icon-sources/24/table-table_search.svg +3 -3
  551. package/icon-sources/24/text-format.svg +3 -3
  552. package/icon-sources/24/view-grid.svg +6 -6
  553. package/icon-sources/36/action-delete light.svg +3 -3
  554. package/icon-sources/36/action-eye-off.svg +4 -4
  555. package/icon-sources/36/action-eye.svg +4 -4
  556. package/icon-sources/36/add-above.svg +4 -4
  557. package/icon-sources/36/add-below.svg +4 -4
  558. package/icon-sources/36/blacklist.svg +3 -3
  559. package/icon-sources/36/certificate.svg +3 -3
  560. package/icon-sources/36/chart-multiline.svg +3 -3
  561. package/icon-sources/36/core-skill.svg +3 -3
  562. package/icon-sources/36/cv.svg +3 -3
  563. package/icon-sources/36/empty.svg +3 -3
  564. package/icon-sources/36/folder.svg +4 -4
  565. package/icon-sources/36/grow.svg +4 -4
  566. package/icon-sources/36/interest.svg +3 -3
  567. package/icon-sources/36/linkedin.svg +3 -3
  568. package/icon-sources/36/medal.svg +4 -4
  569. package/icon-sources/36/na.svg +6 -6
  570. package/icon-sources/36/navigation-close.svg +3 -3
  571. package/icon-sources/36/none.svg +4 -4
  572. package/icon-sources/36/not-reccomended.svg +3 -3
  573. package/icon-sources/36/notification-help-outline.svg +3 -3
  574. package/icon-sources/36/optional-skills.svg +3 -3
  575. package/icon-sources/36/ready-to.svg +3 -3
  576. package/icon-sources/36/text-format.svg +4 -4
  577. package/icon-sources/36/view-grid.svg +6 -6
  578. package/icon-sources/36/view-table.svg +3 -3
  579. package/icons/common/action-deleteforever-12.svg +1 -1
  580. package/icons/common/radio-point-10.svg +13 -13
  581. package/icons/legacy/btn_cross.svg +22 -22
  582. package/icons/legacy/btn_tick.svg +22 -22
  583. package/icons/legacy/calendar-30.svg +12 -12
  584. package/icons/legacy/calendar-36.svg +14 -14
  585. package/icons/legacy/excel.svg +12 -12
  586. package/icons/legacy/filter-24.svg +11 -11
  587. package/icons/legacy/filter.svg +12 -12
  588. package/icons/legacy/folding-arrow.svg +14 -14
  589. package/icons/legacy/gear.svg +14 -14
  590. package/icons/legacy/help-24.svg +11 -11
  591. package/icons/legacy/help.svg +21 -21
  592. package/icons/legacy/label_info.svg +14 -14
  593. package/icons/legacy/lens.svg +17 -17
  594. package/icons/legacy/modal-close-cross.svg +22 -22
  595. package/icons/legacy/more.svg +20 -20
  596. package/icons/legacy/pencil.svg +12 -12
  597. package/icons/legacy/plus.svg +12 -12
  598. package/icons/legacy/sliders.svg +12 -12
  599. package/icons/legacy/sort-24.svg +15 -15
  600. package/icons/legacy/sort-desc-24.svg +15 -15
  601. package/icons/legacy/sort.svg +4 -4
  602. package/icons/legacy/trash.svg +12 -12
  603. package/icons/loaders/circle_loader_30.svg +69 -69
  604. package/icons/loaders/dots_loader_30.svg +22 -22
  605. package/icons/templates/generic-24.svg +40 -40
  606. package/icons/templates/generic-30.svg +43 -43
  607. package/icons/templates/generic.svg +40 -40
  608. package/icons/templates/tall.svg +69 -69
  609. package/package.json +4 -4
  610. package/readme.md +6 -6
  611. package/scss/font-faces.scss +3 -106
  612. package/scss/fonts.scss +2 -13
  613. package/scss/index.scss +4 -9
  614. package/scss/loveship/colors.scss +121 -0
  615. package/scss/loveship/font-faces.scss +66 -0
  616. package/scss/loveship/fonts.scss +7 -0
  617. package/scss/loveship/typography.scss +153 -0
  618. package/scss/loveship-colors.scss +2 -56
  619. package/scss/promo/colors.scss +116 -71
  620. package/scss/promo/font-faces.scss +53 -45
  621. package/scss/promo/fonts.scss +7 -9
  622. package/scss/promo/typography.scss +170 -171
  623. package/scss/typography.scss +2 -141
  624. package/theme/theme_loveship.scss +1490 -1378
  625. package/theme/theme_promo.scss +1195 -1148
  626. package/theme/theme_vanilla_thunder.scss +1019 -1019
  627. package/scss/contrast.scss +0 -39
  628. package/scss/control-layout.scss +0 -2
  629. package/scss/control-size.scss +0 -7
  630. package/scss/dnd.scss +0 -9
  631. package/scss/effects.scss +0 -25
  632. package/scss/text-size.scss +0 -37
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -1,1019 +1,1019 @@
1
- /* Name convention */
2
- /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
- .uui-theme-vanilla_thunder {
4
- --font-regular: 'Sans Regular', 'Arial', sans-serif;
5
- --font-semibold: 'Sans Semibold', 'Arial', sans-serif;
6
- --font-italic: 'Sans Italic', 'Arial', sans-serif;
7
- --font-primary: 'Museo Sans', 'Sans Semibold', 'Arial', sans-serif;
8
- --font-promo: 'Museo Slab', 'Roboto Slab', 'Arial', sans-serif;
9
- --font-mono: 'Roboto Mono', 'Arial', sans-serif;
10
- --font-redacted: 'Redacted';
11
- --font-light: 'Sans Light', 'Arial', sans-serif;
12
-
13
- --blue-0: #F0F7FC;
14
- --blue-100: #D4F0FE;
15
- --blue-200: #76CDD8;
16
- --blue-300: #2BC1F0;
17
- --blue-400: #1CA5D3;
18
- --blue-500: #008ACE;
19
-
20
- --grass-25: #EBFCC7;
21
- --grass-50: #E4ED94;
22
- --grass-100: #CEDB56;
23
- --grass-200: #91C229;
24
- --grass-300: #4FA762;
25
- --grass-400: #329247;
26
- --grass-500: #157D2C;
27
-
28
- --sun-50: #FFF1A7;
29
- --sun-100: #FFD602;
30
- --sun-200: #F7A02C;
31
- --sun-250: #F67E00;
32
- --sun-300: #F2682A;
33
-
34
- --chromatic-0: #FFF;
35
- --chromatic-100: #F7F7FD;
36
- --chromatic-150: #E5E5EE;
37
- --chromatic-200: #CDCDD9;
38
- --chromatic-300: #8D8D9C;
39
- --chromatic-400: #34384A;
40
- --chromatic-500: #191F3D;
41
-
42
- /* start Loveship colors for controllers */
43
-
44
- --fire-lightest: #FDE1E1;
45
- --fire-light: #FCC8C8;
46
- --fire: #FA4B4B;
47
- --fire-dark: #CC2929;
48
- --fire-darkest: #B32424;
49
-
50
- --white: #FFF;
51
-
52
- --night50: #FAFAFC;
53
- --night100: #F5F6FA;
54
- --night200: #EBEDF5;
55
- --night300: #E1E3EB;
56
- --night400: #CED0DB;
57
- --night500: #ACAFBF;
58
- --night600: #6C6F80;
59
- --night700: #474A59;
60
- --night800: #303240;
61
- --night900: #1D1E26;
62
-
63
- /* end Loveship colors for controllers */
64
-
65
- --uui-accent: var(--grass-300);
66
- --uui-accent-light: var(--grass-200);
67
- --uui-accent-lightest: var(--grass-100);
68
- --uui-accent-dark: var(--grass-400);
69
- --uui-accent-darkest: var(--grass-500);
70
-
71
- --uui-primary: var(--blue-300);
72
- --uui-primary-light: var(--blue-200);
73
- --uui-primary-lightest: var(--blue-100);
74
- --uui-primary-halftone: var(--night200); // TODO: why we have that?
75
- --uui-primary-dark: var(--blue-400);
76
- --uui-primary-darkest: var(--blue-500);
77
-
78
- --uui-secondary: var(--night500);
79
- --uui-secondary-light: var(--night300);
80
- --uui-secondary-lightest: var(--night200);
81
- --uui-secondary-dark: var(--night600);
82
- --uui-secondary-darkest: var(--night700);
83
- --uui-secondary-hover: var(--night600);
84
- --uui-secondary-active: var(--night700);
85
-
86
- --uui-negative: var(--sun-200);
87
- --uui-negative-light: var(--sun-100);
88
- --uui-negative-lightest: var(--sun-50);
89
- --uui-negative-dark: var(--sun-250);
90
- --uui-negative-darkest: var(--sun-300);
91
-
92
-
93
- --uui-link: var(--blue-300);
94
- --uui-link-hover: var(--blue-400);
95
- --uui-link-visited: #8018A0;
96
- --uui-link-disabled: var(--chromatic-200);
97
- --uui-visited: #5214CC;
98
-
99
- --uui-info: var(--blue-300);
100
- --uui-info-lightest: var(--blue-0);
101
- --uui-info-light: var(--blue-100);
102
- --uui-info-dark: var(--blue-400);
103
- --uui-info-darkest: var(--blue-500);
104
- --uui-info-hover: var(--blue-400);
105
- --uui-info-active: var(--blue-500);
106
-
107
- --uui-success: var(--grass-300);
108
- --uui-success-lightest: var(--grass-100);
109
- --uui-success-light: var(--grass-200);
110
- --uui-success-dark: var(--grass-400);
111
- --uui-success-darkest: var(--grass-500);
112
- --uui-success-hover: var(--grass-400);
113
- --uui-success-active: var(--grass-500);
114
-
115
- --uui-warning: var(--sun-200);
116
- --uui-warning-lightest: var(--sun-50);
117
- --uui-warning-light: var(--sun-100);
118
- --uui-warning-dark: var(--sun-250);
119
- --uui-warning-darkest: var(--sun-300);
120
- --uui-warning-hover: var(--sun-250);
121
- --uui-warning-active: var(--sun-300);
122
-
123
- --uui-error: var(--fire);
124
- --uui-error-lightest: var(--fire-lightest);
125
- --uui-error-light: var(--fire-light);
126
- --uui-error-dark: var(--fire-dark);
127
- --uui-error-darkest: var(--fire-darkest);
128
- --uui-error-hover: var(--fire-dark);
129
- --uui-error-active: var(--fire-darkest);
130
-
131
- --uui-icon: var(--chromatic-300);
132
- --uui-icon-hover: var(--chromatic-400);
133
- --uui-icon-active: var(--chromatic-500);
134
- --uui-icon-disabled: var(--chromatic-200);
135
-
136
- --uui-surface: var(--chromatic-0);
137
- --uui-surface-hover: var(--night200);
138
- --uui-surface-inverted: var(--night900);
139
- /* new start */
140
- --uui-surface-light: var(--night50);
141
- --uui-surface-light-hover: var(--night100);
142
- --uui-surface-contrast: var(--night800);
143
- --uui-surface-contrast-hover: var(--night900);
144
- --uui-surface-contrast-active: var(--night900);
145
- /* new end */
146
-
147
- --uui-background: var(--chromatic-100);
148
- --uui-divider: var(--chromatic-200);
149
- --uui-divider-light: var(--chromatic-150);
150
- --uui-contrast: var(--chromatic-0);
151
- --uui-disabled: var(--chromatic-150);
152
-
153
- --uui-scroll-bars-bg: var(--chromatic-200);
154
- --uui-scroll-bars-bg-active: var(--chromatic-300);
155
-
156
- --uui-button-bg-halftone: var(--chromatic-0);
157
- --uui-button-caption-disabled: var(--chromatic-300);
158
-
159
- --uui-text-brand: var(--chromatic-500);
160
- --uui-text-primary: var(--chromatic-500);
161
- --uui-text-secondary: var(--chromatic-300);
162
- --uui-text-disabled: var(--chromatic-200);
163
- --uui-text-contrast: var(--chromatic-0);
164
-
165
- --uui-control-bg: var(--chromatic-0);
166
- --uui-control-bg-checked: var(--uui-primary);
167
- --uui-control-bg-checked-hover: var(--uui-primary-dark);
168
- --uui-control-bg-checked-disabled: var(--uui-primary-light);
169
- --uui-control-bg-hover: var(--chromatic-300);
170
- --uui-control-bg-disabled: var(--chromatic-100);
171
- --uui-control-bg-readonly: var(--chromatic-100);
172
- --uui-control_switch-bg: var(--chromatic-200);
173
- --uui-control_switch_toggler-bg: var(--chromatic-0);
174
-
175
- --uui-control-border-checked-disabled: var(--uui-primary-light);
176
- --uui-control-border: var(--chromatic-200);
177
- --uui-control-border-checked: var(--uui-primary);
178
- --uui-control-border-checked-hover: var(--uui-primary-dark);
179
- --uui-control-border-hover: var(--uui-primary-dark);
180
- --uui-control-border-disabled: var(--uui-disabled);
181
- --uui-control-border-readonly: var(--uui-disabled);
182
-
183
- --uui-control_switch-border-hover: var(--chromatic-300);
184
- --uui-control_textinput-border-hover: var(--chromatic-300);
185
-
186
- --uui-control-label: var(--uui-text-primary);
187
- --uui-control-label-disabled: var(--uui-text-disabled);
188
- --uui-control-label-error: var(--uui-error);
189
- --uui-control-label-fill: var(--uui-icon);
190
- --uui-control-label-optional-text: var(--uui-text-secondary);
191
- --uui-control-label-asterisk: var(--uui-error);
192
-
193
- --uui-control-placeholder: var(--night600);
194
- --uui-control-placeholder-disabled: var(--night500);
195
-
196
- --uui-control-text: var(--chromatic-500);
197
- --uui-control-text-disabled: var(--chromatic-200);
198
-
199
- --uui-control-icon: var(--chromatic-200);
200
- --uui-control-icon-disabled: var(--chromatic-200);
201
-
202
- --uui-control-checkbox-icon: var(--chromatic-0);
203
-
204
- --uui-tag-bg: var(--night300);
205
- --uui-tag-bg-hover: var(--night400);
206
-
207
- --uui-skeleton: var(--chromatic-200);
208
- --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
209
-
210
- --uui-overlay: rgb(29 30 38 / 80%);
211
- --uui-border-radius: 3px;
212
- --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
213
- --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);
214
- --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);
215
-
216
- /* TextInput vars */
217
- --uui-text-input-bg: var(--uui-control-bg);
218
- --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
219
- --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
220
- --uui-text-input-border: var(--uui-control-border);
221
- --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
222
- --uui-text-input-border-active: var(--uui-control-border-checked);
223
- --uui-text-input-border-error: var(--uui-negative);
224
- --uui-text-input-border-disabled: var(--uui-control-border-disabled);
225
- --uui-text-input-border-readonly: var(--uui-control-border-readonly);
226
- --uui-text-input-placeholder: var(--uui-control-placeholder);
227
- --uui-text-input-placeholder-disabled: var(--uui-control-placeholder-disabled);
228
- --uui-text-input-text: var(--uui-control-text);
229
- --uui-text-input-text-disabled: var(--uui-control-text-disabled);
230
- --uui-text-input-icon: var(--uui-control-icon);
231
- --uui-text-input-icon-disabled: var(--uui-control-icon-disabled);
232
- --uui-text-input-icon-clickable: var(--uui-icon);
233
- --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
234
- --uui-text-input-border-radius: var(--uui-border-radius);
235
-
236
- --uui-text-input-font: var(--font-inter);
237
- --uui-text-input-font-weight: 400;
238
-
239
- /* Button vars */
240
- --uui-btn-border-radius: 8px;
241
-
242
- --uui-btn-font: var(--font-museo-sans);
243
- --uui-btn-font-weight: 500;
244
-
245
-
246
- /* LinkButton vars */
247
- --uui-link-button-text: var(--uui-primary);
248
- --uui-link-button-text-hover: var(--uui-primary-dark);
249
- --uui-link-button-text-active: var(--uui-primary-darkest);
250
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
251
-
252
- --uui-link-button-font: var(--font-inter);
253
- --uui-link-button-font-weight: 400;
254
-
255
- /* DatePicker vars */
256
- --uui-dtp-title-bg: var(--uui-control-bg);
257
- --uui-dtp-title-bg-hover: var(--uui-primary-halftone);
258
- --uui-dtp-text-selected: var(--uui-control-border-checked);
259
- --uui-dtp-text: var(--uui-control-text);
260
- --uui-dtp-next-prev-icon: var(--uui-icon);
261
- --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
262
-
263
- --uui-dtp_header-font: var(--font-inter);
264
- --uui-dtp_header-font-weight: 400;
265
- --uui-dtp_body-content-font: var(--font-inter);
266
- --uui-dtp_body-content-font-weight: 400;
267
-
268
- /* RangeDatePicker vars */
269
- --uui-rdtp-bg: var(--uui-control-bg);
270
- --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
271
-
272
- /* Calendar vars */
273
- --uui-calendar-selected-hover: var(--uui-control-bg);
274
- --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
275
- --uui-calendar-start-end-selected: var(--uui-control-border-checked);
276
- --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
277
- --uui-calendar-text: var(--uui-control-text);
278
- --uui-calendar-text-filtered: var(--uui-control-text-disabled);
279
- --uui-calendar-bg-selected: var(--uui-secondary);
280
-
281
- --uui-calendar-content-font: var(--font-inter);
282
- --uui-calendar-content-font-weight: 400;
283
- --uui-calendar-weekday-font: var(--font-inter);
284
- --uui-calendar-weekday-font-weight: 400;
285
- --uui-calendar-selected_day-font: var(--font-inter);
286
- --uui-calendar-selected_day-font-weight: 600;
287
-
288
- /* tab-button-vars */
289
- --uui-tab-button-text: var(--uui-text-primary);
290
- --uui-tab-button-text-hover: var(--uui-primary);
291
- --uui-tab-button-text-active: var(--uui-primary);
292
- --uui-tab-button-text-disabled: var(--uui-text-disabled);
293
-
294
- --uui-tab-button-font: var(--font-inter);
295
- --uui-tab-button-font-weight: 600;
296
-
297
- /* radio-input-vars */
298
- --uui-radio-input-bg: var(--uui-control-bg);
299
- --uui-radio-input-bg-disabled: var(--uui-control-bg-disabled);
300
- --uui-radio-input-border: var(--uui-control-border);
301
- --uui-radio-input-border-checked: var(--uui-control-border-checked);
302
- --uui-radio-input-border-hover: var(--uui-control-border-hover);
303
- --uui-radio-input-border-disabled: var(--uui-control-border-disabled);
304
- --uui-radio-input-border-checked-disabled: var(--uui-control-border-checked-disabled);
305
- --uui-radio-input-label: var(--uui-control-label);
306
- --uui-radio-input-label-disabled: var(--uui-control-label-disabled);
307
- --uui-radio-input-fill-checked: var(--uui-control-border-checked);
308
- --uui-radio-input-fill-hover: var(--uui-control-border-hover);
309
- --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
310
- --uui-radio-input-error: var(--uui-negative);
311
-
312
- --uui-radio-input-font: var(--font-inter);
313
- --uui-radio-input-font-weight: 400;
314
-
315
- /* Checkbox vars */
316
- --uui-checkbox-border: var(--uui-control-border);
317
- --uui-checkbox-border-hover: var(--uui-control-border-hover);
318
- --uui-checkbox-border-disabled: var(--uui-control-border-disabled);
319
- --uui-checkbox-border-checked: var(--uui-control-border-checked);
320
- --uui-checkbox-border-checked-disabled: var(--uui-control-border-checked-disabled);
321
- --uui-checkbox-bg: var(--uui-control-bg);
322
- --uui-checkbox-bg-checked: var(--uui-control-bg-checked);
323
- --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
324
- --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
325
- --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
326
- --uui-checkbox-error: var(--uui-negative);
327
- --uui-checkbox-fill: var(--uui-control-checkbox-icon);
328
- --uui-checkbox-label: var(--uui-control-label);
329
- --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
330
- --uui-checkbox-border-radius: var(--uui-border-radius);
331
-
332
- --uui-checkbox-font: var(--font-inter);
333
- --uui-checkbox-font-weight: 400;
334
-
335
- /* Tag vars */
336
- --uui-tag-caption: var(--uui-text-primary);
337
- --uui-tag-fill: var(--uui-icon);
338
- --uui-tag-fill-hover: var(--uui-icon-hover);
339
- --uui-tag-count-bg: var(--uui-surface);
340
- --uui-tag-count: var(--uui-text-secondary);
341
- --uui-tag-label: var(--uui-text-secondary);
342
- --uui-tag-border-radius: 30px;
343
-
344
- --uui-tag-font: var(--font-inter);
345
- --uui-tag-font-weight: 400;
346
- --uui-tag-count-font: var(--font-inter);
347
- --uui-tag-count-font-weight: 500;
348
-
349
- /* TextArea vars */
350
- --uui-text-area-bg: var(--uui-control-bg);
351
- --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
352
- --uui-text-area-border: var(--uui-control-border);
353
- --uui-text-area-border-disabled: var(--uui-control-border-disabled);
354
- --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
355
- --uui-text-area-border-active: var(--uui-control-border-checked);
356
- --uui-text-area-border-error: var(--uui-negative);
357
- --uui-text-area-placeholder: var(--uui-control-placeholder);
358
- --uui-text-area-text: var(--uui-control-text);
359
- --uui-text-area-text-disabled: var(--uui-control-text-disabled);
360
- --uui-text-area-icon: var(--uui-icon);
361
- --uui-text-area-border-radius: var(--uui-border-radius);
362
-
363
- --uui-text-area-font: var(--font-inter);
364
- --uui-text-area-font-weight: 400;
365
- --uui-text-area-counter-font: var(--font-inter);
366
- --uui-text-area-counter-font-weight: 400;
367
-
368
- /* DropMarker vars */
369
- --uui-drop-marker: var(--uui-primary);
370
- --uui-drop-marker-blocked: var(--uui-error);
371
-
372
- /* Tooltip vars */
373
- --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgb(44 47 60 / 30%), 0 1px 4px 0 rgb(44 47 60 / 50%)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
374
- --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
375
- --uui-tooltip-border-radius: 8px;
376
-
377
- --uui-tooltip-font: var(--font-inter);
378
- --uui-tooltip-font-weight: 400;
379
-
380
- /* PickerInput vars */
381
- --uui-picker_input-bg: var(--uui-surface);
382
-
383
- /* PickerToggler vars */
384
- --uui-picker-toggler-bg: var(--uui-control-bg);
385
- --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
386
- --uui-picker-toggler-border: var(--uui-control-border);
387
- --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
388
- --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
389
- --uui-picker-toggler-border-active: var(--uui-control-border-checked);
390
- --uui-picker-toggler-border-error: var(--uui-negative);
391
- --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
392
- --uui-picker-toggler-text: var(--uui-control-text);
393
- --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
394
- --uui-picker-toggler-icon: var(--uui-control-icon);
395
- --uui-picker-toggler-icon-disabled: var(--uui-control-icon-disabled);
396
- --uui-picker-toggler-icon-clickable: var(--uui-icon);
397
- --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
398
- --uui-picker-toggler-border-radius: var(--uui-border-radius);
399
-
400
- --uui-picker-toggler-font: var(--font-inter);
401
- --uui-picker-toggler-font-weight: 400;
402
-
403
- /* Panel */
404
- --uui-panel-border-radius: 8px;
405
- --uui-panel-shadow: var(--uui-shadow-level-1);
406
-
407
- /* Modals */
408
- --uui-modals-border-radius: 8px;
409
- --uui-modals-overlay: rgb(29 30 38 / 80%);
410
- --uui-modals-shadow: var(--uui-shadow-level-3);
411
- --uui-modals-bg: var(--uui-surface);
412
-
413
- /* TextPlaceholder */
414
- --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);
415
- --uui-text-placeholder: var(--uui-skeleton);
416
-
417
- /* LabeledInput */
418
- --uui-labeled-input: var(--uui-text-primary);
419
- --uui-labeled-input-disabled: var(--uui-text-disabled);
420
- --uui-labeled-input-error: var(--uui-error);
421
- --uui-labeled-input-fill: var(--uui-icon);
422
- --uui-labeled-input-info-fill: var(--uui-icon);
423
- --uui-labeled-input-optional-text: var(--uui-text-secondary);
424
- --uui-labeled-input-asterisk: var(--uui-error);
425
-
426
- --uui-labeled-input-font: var(--font-inter);
427
- --uui-labeled-input-font-weight: 500;
428
- --uui-labeled-input-optional-font: var(--font-inter);
429
- --uui-labeled-input-optional-font-weight: 300;
430
- --uui-labeled-input-invalid-msg-font: var(--font-inter);
431
- --uui-labeled-input-invalid-msg-font-weight: 400;
432
-
433
- /* Accordion */
434
- --uui-accordion-bg: var(--uui-surface);
435
- --uui-accordion-border: var(--uui-divider);
436
- --uui-accordion-border-radius: 6px;
437
- --uui-accordion-text: var(--uui-text-primary);
438
- --uui-accordion-text-disabled: var(--uui-text-disabled);
439
- --uui-accordion-icon: var(--uui-icon);
440
- --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
441
- --uui-accordion-focus: var(--uui-primary);
442
- --uui-accordion-shadow: var(--uui-shadow-level-1);
443
- --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
444
-
445
- --uui-accordion-toggler-font: var(--font-inter);
446
- --uui-accordion-toggler-font-weight: 500;
447
- --uui-accordion-body-font: var(--font-inter);
448
- --uui-accordion-body-font-weight: 400;
449
-
450
- /* Switch */
451
- --uui-switch-bg: var(--uui-control_switch-bg);
452
- --uui-switch-border-hover: var(--uui-control_switch-border-hover);
453
- --uui-switch-bg-checked: var(--uui-control-bg-checked);
454
- --uui-switch-bg-hover: var(--uui-control-bg-hover);
455
- --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
456
- --uui-switch-bg-checked-hover: var(--uui-control-bg-checked-hover);
457
- --uui-switch-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
458
- --uui-switch-border: var(--uui-control-border);
459
- --uui-switch-border-checked: var(--uui-control-border-checked);
460
- --uui-switch-border-disabled: var(--uui-control-border-disabled);
461
- --uui-switch-border-checked-hover: var(--uui-control-border-checked-hover);
462
- --uui-switch-border-checked-hover-copy: var(--uui-control-border-checked-hover);
463
- --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
464
- --uui-switch-label: var(--uui-control-label);
465
- --uui-switch-label-disabled: var(--uui-control-label-disabled);
466
- --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
467
- --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
468
- --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
469
- --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
470
- --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);
471
- --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
472
- --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
473
-
474
- --uui-switch-font: var(--font-inter);
475
- --uui-switch-font-weight: 400;
476
-
477
- /* DropdownContainer */
478
- --uui-dropdown-container-border-radius: 6px;
479
- --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
480
- --uui-dropdown-container-bg: var(--uui-surface);
481
-
482
- /* DropdownMenu */
483
- // TODO: update tokens
484
- --uui-dropdown-menu-bg: var(--uui-surface);
485
- --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
486
- --uui-dropdown-menu-splitter: var(--uui-divider);
487
- --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
488
- --uui-dropdown-menu-item-active: var(--uui-surface-hover);
489
- --uui-dropdown-menu-item-text: var(--uui-text-primary);
490
-
491
- --uui-dropdown-menu-body-font: var(--font-inter);
492
- --uui-dropdown-menu-body-font-weight: 400;
493
- --uui-dropdown-menu-item-font: var(--font-inter);
494
- --uui-dropdown-menu-item-font-weight: 400;
495
-
496
- /* MainMenu */
497
- --uui-main_menu-text: var(--uui-text-primary);
498
- --uui-main_menu-bg: #F0F7FCD9;
499
- --uui-main_menu-hover: #FFF;
500
- --uui-main_menu-active: #FFF;
501
- --uui-main_menu-border-active: var(--uui-primary);
502
-
503
- --uui-main_menu-dropdown-bg: var(--uui-surface);
504
- --uui-main_menu-dropdown-hover: var(--uui-primary);
505
- --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
506
- --uui-main_menu-dropdown-border-radius: 8px;
507
-
508
- --uui-main_menu-search-bg: var(--uui-secondary-darkest);
509
- --uui-main_menu-search-border: var(--uui-secondary-darkest);
510
- --uui-main_menu-search-placeholder: var(--uui-text-disabled);
511
- --uui-main_menu-search-text: var(--uui-text-contrast);
512
- --uui-main_menu-search-icon: var(--uui-icon-disabled);
513
-
514
- --uui-main_menu-icon: var(--uui-text-primary);
515
- --uui-main_menu-icon-hover: var(--uui-text-primary);
516
- --uui-main_menu-icon-active: var(--uui-text-primary);
517
-
518
- --uui-main_menu-font: var(--font-museo-sans);
519
- --uui-main_menu-font-weight: 500;
520
- --uui-main_menu-search-font: var(--font-inter);
521
- --uui-main_menu-search-font-weight: 400;
522
-
523
- /* BurgerMenu */
524
- --uui-burger_menu-bg: var(--uui-surface);
525
- --uui-burger_menu-bg-hover: var(--uui-surface-light-hover);
526
- --uui-burger_menu-caption: var(--uui-contrast);
527
- --uui-burger_menu-caption-hover: var(--uui-primary);
528
- --uui-burger_menu-overlay: var(--uui-overlay);
529
- --uui-burger_icon: var(--uui-text-primary);
530
- --uui-burger_item: var(--uui-text-brand);
531
-
532
- /* BurgerGroupHeader */
533
- --uui-burger_group-text: var(--uui-text-disabled);
534
- --uui-burger_group-bg: var(--uui-surface-contrast);
535
- --uui-burger_group-line: var(--uui-divider);
536
-
537
- --uui-burger_group-font: var(--font-inter);
538
- --uui-burger_group-font-weight: 400;
539
-
540
- /* BurgerButton */
541
- --uui-burger_btn_caption: var(--uui-text-contrast);
542
- --uui-burger_btn_caption-hover: var(--uui-primary);
543
- --uui-burger_btn_caption-active: var(--uui-primary);
544
- --uui-burger_btn-border: var(--uui-divider-light);
545
-
546
- --uui-burger_btn-font: var(--font-inter);
547
- --uui-burger_btn-font-weight: 400;
548
-
549
- /* BurgerSearch */
550
- --uui-burger_search: var(--uui-text-contrast);
551
- --uui-burger_search-fill: var(--uui-text-disabled);
552
- --uui-burger_search-bg: var(--uui-surface-contrast);
553
- --uui-burger_search-placeholder: var(--uui-text-disabled);
554
-
555
- --uui-burger_search-font: var(--font-inter);
556
- --uui-burger_search-font-weight: 400;
557
-
558
- /* NumericInput */
559
- --uui-numeric-input-bg: var(--uui-control-bg);
560
- --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
561
- --uui-numeric-input-border: var(--uui-control-border);
562
- --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
563
- --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
564
- --uui-numeric-input-border-active: var(--uui-control-border-checked);
565
- --uui-numeric-input-border-error: var(--uui-negative);
566
- --uui-numeric-input-placeholder: var(--uui-control-placeholder);
567
- --uui-numeric-input-text: var(--uui-control-text);
568
- --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
569
- --uui-numeric-input-icon-clickable: var(--uui-icon);
570
- --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);
571
- --uui-numeric-input-border-radius: var(--uui-border-radius);
572
-
573
- /* TimePicker */
574
- --uui-time-picker-bg: var(--uui-control-bg);
575
- --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);
576
- --uui-time-picker-border: var(--uui-control-border);
577
- --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
578
- --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
579
- --uui-time-picker-border-active: var(--uui-control-border-checked);
580
- --uui-time-picker-border-error: var(--uui-negative);
581
- --uui-time-picker-placeholder: var(--uui-control-placeholder);
582
- --uui-time-picker-text: var(--uui-control-text);
583
- --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
584
- --uui-time-picker-icon-clickable: var(--uui-icon);
585
- --uui-time-picker-icon-clickable-hover: var(--uui-icon-hover);
586
- --uui-time-picker-border-radius: var(--uui-border-radius);
587
-
588
- /* SearchPicker */
589
- --uui-search-input-bg: var(--uui-control-bg);
590
- --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);
591
- --uui-search-input-border: var(--uui-control-border);
592
- --uui-search-input-border-disabled: var(--uui-control-border-disabled);
593
- --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
594
- --uui-search-input-border-active: var(--uui-control-border-checked);
595
- --uui-search-input-border-error: var(--uui-negative);
596
- --uui-search-input-placeholder: var(--uui-control-placeholder);
597
- --uui-search-input-text: var(--uui-control-text);
598
- --uui-search-input-text-disabled: var(--uui-control-text-disabled);
599
- --uui-search-input-icon-clickable: var(--uui-icon);
600
- --uui-search-input-icon-clickable-hover: var(--uui-icon-hover);
601
- --uui-search-input-icon-disabled: var(--uui-icon-disabled);
602
- --uui-search-input-border-radius: var(--uui-border-radius);
603
-
604
- /* Popover */
605
- --uui-popover-shadow: var(--uui-shadow-level-2);
606
-
607
- /* Footer */
608
- --uui-footer-bg: var(--uui-surface-contrast);
609
-
610
- /* FilterPanelItemToggler vars */
611
- --uui-filters-toggler-border: var(--uui-surface);
612
- --uui-filters-toggler-border-hover: var(--blue-0);
613
- --uui-filters-toggler-border-radius: 8px;
614
- --uui-filters-toggler-bg: var(--uui-surface);
615
- --uui-filters-toggler-bg-hover: var(--blue-0);
616
- --uui-filters-toggler-text: var(--uui-text-brand);
617
- --uui-filters-toggler-label: var(--uui-text-secondary);
618
- --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
619
- --uui-filters-toggler-shadow: var(--uui-shadow-level-1);
620
-
621
- --uui-filters-toggler-font: var(--font-inter);
622
- --uui-filters-toggler-font-weight: 400;
623
- --uui-filters-panel-header-font: var(--font-inter);
624
- --uui-filters-panel-header-font-weight: 400;
625
-
626
- /* NotificationCard */
627
- --uui-notification-card-border-radius: 8px;
628
- --uui-notification-card-border-width: 0;
629
- --uui-notification-card-border-top-width: 6px;
630
- --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
631
-
632
- /* Alert */
633
- --uui-alert-border-radius: 6px;
634
-
635
- /* Panel */
636
-
637
- --uui-panel-bg: var(--uui-surface);
638
-
639
- /* Spinner */
640
- --uui-spinner: var(--uui-primary);
641
-
642
- /* Blocker */
643
- --uui-blocker-bg: var(--uui-background);
644
- --uui-blocker-bg-with-opacity: #F5F6FA80;
645
-
646
- /* FlexRow */
647
- --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
648
-
649
- /* DataTable vars */
650
- --uui-dt-border: var(--uui-divider-light);
651
-
652
- --uui-dt-cell-bg: transparent;
653
- --uui-dt-cell-bg-resize: #EF55331F;
654
- --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
655
- --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
656
- --uui-dt-cell-border-focus: var(--uui-control-border-checked);
657
-
658
- --uui-dt-row-bg: var(--uui-surface);
659
- --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
660
- --uui-dt-row-bg-invalid: #FEF7F6;
661
- --uui-dt-row-bg-selected: #EBF7FF;
662
-
663
- --uui-dt-header-row-bg: var(--uui-surface-light);
664
- --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
665
-
666
- --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
667
- --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
668
- --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
669
- --uui-dt_header-drop_marker: var(--uui-primary);
670
-
671
- --uui-dt-header-cell-font: var(--font-inter);
672
- --uui-dt-header-cell-font-weight: 500;
673
-
674
- /* AvatarStack */
675
-
676
- --uui-avatar-stack-font: var(--font-inter);
677
- --uui-avatar-stack-font-weight: 400;
678
-
679
- /* Badge */
680
-
681
- --uui-badge-font: var(--font-museo-sans);
682
- --uui-badge-font-weight: 700;
683
- --uui-badge-count-font: var(--font-museo-sans);
684
- --uui-badge-count-font-weight: 700;
685
-
686
- /* Pagination */
687
-
688
- --uui-pagination-font: var(--font-inter);
689
- --uui-pagination-font-weight: 400;
690
-
691
-
692
- /* ------------------------------------ */
693
-
694
- .tooltip-contrast {
695
- --uui-tooltip-bg: var(--uui-surface-inverted);
696
- --uui-tooltip-text: var(--uui-contrast);
697
- }
698
-
699
- .tooltip-default {
700
- --uui-tooltip-bg: var(--uui-surface);
701
- --uui-tooltip-text: var(--uui-text-primary);
702
- }
703
-
704
- .tooltip-critical {
705
- --uui-tooltip-bg: var(--uui-error-dark);
706
- --uui-tooltip-text: var(--uui-contrast);
707
- }
708
-
709
- .button-primary {
710
- --uui-btn-bg: var(--uui-primary);
711
- --uui-btn-bg-hover: var(--uui-primary-dark);
712
- --uui-btn-bg-active: var(--uui-primary-darkest);
713
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
714
- --uui-btn-bg-halftone-hover: var(--blue-0);
715
- --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
716
- --uui-btn-bg-disabled: var(--uui-disabled);
717
- --uui-btn-border: var(--uui-primary);
718
- --uui-btn-border-hover: var(--uui-primary-dark);
719
- --uui-btn-border-active: var(--uui-primary-darkest);
720
- --uui-btn-border-disabled: var(--uui-disabled);
721
- --uui-btn-caption: var(--uui-contrast);
722
- --uui-btn-caption-halftone: var(--uui-text-primary);
723
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
724
- }
725
-
726
- .button-accent {
727
- --uui-btn-bg: var(--uui-accent);
728
- --uui-btn-bg-hover: var(--uui-accent-dark);
729
- --uui-btn-bg-active: var(--uui-accent-darkest);
730
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
731
- --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
732
- --uui-btn-bg-halftone-active: var(--uui-accent-light);
733
- --uui-btn-border: var(--uui-accent);
734
- --uui-btn-border-hover: var(--uui-accent-dark);
735
- --uui-btn-border-active: var(--uui-accent-darkest);
736
- --uui-btn-bg-disabled: var(--uui-disabled);
737
- --uui-btn-border-disabled: var(--uui-disabled);
738
- --uui-btn-caption: var(--uui-contrast);
739
- --uui-btn-caption-halftone: var(--uui-text-primary);
740
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
741
- }
742
-
743
- .button-negative {
744
- --uui-btn-bg: var(--uui-negative);
745
- --uui-btn-bg-hover: var(--uui-negative-dark);
746
- --uui-btn-bg-active: var(--uui-negative-darkest);
747
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
748
- --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
749
- --uui-btn-bg-halftone-active: var(--uui-negative-light);
750
- --uui-btn-border: var(--uui-negative);
751
- --uui-btn-border-hover: var(--uui-negative-dark);
752
- --uui-btn-border-active: var(--uui-negative-darkest);
753
- --uui-btn-bg-disabled: var(--uui-disabled);
754
- --uui-btn-border-disabled: var(--uui-disabled);
755
- --uui-btn-caption: var(--uui-contrast);
756
- --uui-btn-caption-halftone: var(--uui-text-primary);
757
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
758
- }
759
-
760
- .button-secondary {
761
- --uui-btn-bg: var(--uui-secondary);
762
- --uui-btn-bg-hover: var(--uui-secondary-dark);
763
- --uui-btn-bg-active: var(--uui-secondary-darkest);
764
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
765
- --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
766
- --uui-btn-bg-halftone-active: var(--uui-secondary-light);
767
- --uui-btn-border: var(--uui-secondary);
768
- --uui-btn-border-hover: var(--uui-secondary-dark);
769
- --uui-btn-border-active: var(--uui-secondary-darkest);
770
- --uui-btn-bg-disabled: var(--uui-disabled);
771
- --uui-btn-border-disabled: var(--uui-disabled);
772
- --uui-btn-caption: var(--uui-contrast);
773
- --uui-btn-caption-halftone: var(--uui-text-primary);
774
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
775
- }
776
-
777
- .icon-button-info {
778
- --uui-icon-btn: var(--uui-info);
779
- --uui-icon-btn-hover: var(--uui-info-dark);
780
- --uui-icon-btn-active: var(--uui-info-darkest);
781
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
782
- }
783
-
784
- .icon-button-success {
785
- --uui-icon-btn: var(--uui-success);
786
- --uui-icon-btn-hover: var(--uui-success-dark);
787
- --uui-icon-btn-active: var(--uui-success-darkest);
788
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
789
- }
790
-
791
- .icon-button-warning {
792
- --uui-icon-btn: var(--uui-warning);
793
- --uui-icon-btn-hover: var(--uui-warning-dark);
794
- --uui-icon-btn-active: var(--uui-warning-darkest);
795
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
796
- }
797
-
798
- .icon-button-error {
799
- --uui-icon-btn: var(--uui-error);
800
- --uui-icon-btn-hover: var(--uui-error-dark);
801
- --uui-icon-btn-active: var(--uui-error-darkest);
802
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
803
- }
804
-
805
- .icon-button-secondary {
806
- --uui-icon-btn: var(--gray50);
807
- --uui-icon-btn-hover: var(--uui-color-night500-800);
808
- --uui-icon-btn-active: var(--uui-color-night500-900);
809
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
810
- }
811
-
812
- .icon-button-default {
813
- --uui-icon-btn: var(--gray60);
814
- --uui-icon-btn-hover: var(--uui-color-night600-800);
815
- --uui-icon-btn-active: var(--uui-color-night600-900);
816
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
817
- }
818
-
819
- .notification-card-warning {
820
- --uui-notification-card-fill: var(--uui-warning);
821
- --uui-notification-card-border: var(--uui-warning);
822
- --uui-notification-card-bg: var(--uui-surface);
823
- --uui-notification-card-text: var(--uui-text-primary);
824
- }
825
-
826
- .notification-card-success {
827
- --uui-notification-card-fill: var(--uui-success);
828
- --uui-notification-card-border: var(--uui-success);
829
- --uui-notification-card-bg: var(--uui-surface);
830
- --uui-notification-card-text: var(--uui-text-primary);
831
- }
832
-
833
- .notification-card-info {
834
- --uui-notification-card-fill: var(--uui-info);
835
- --uui-notification-card-border: var(--uui-info);
836
- --uui-notification-card-bg: var(--uui-surface);
837
- --uui-notification-card-text: var(--uui-text-primary);
838
- }
839
-
840
- .notification-card-error {
841
- --uui-notification-card-fill: var(--uui-error);
842
- --uui-notification-card-border: var(--uui-error);
843
- --uui-notification-card-bg: var(--uui-surface);
844
- --uui-notification-card-text: var(--uui-text-primary);
845
- }
846
-
847
- .alert-error {
848
- --uui-alert-text: var(--uui-text-primary);
849
- --uui-alert-bg: #F5E5E9;
850
- --uui-alert-border: var(--uui-error);
851
- --uui-alert-icon: var(--uui-error);
852
- }
853
-
854
- .alert-warning {
855
- --uui-alert-text: var(--uui-text-primary);
856
- --uui-alert-bg: #F6EEE1;
857
- --uui-alert-border: var(--uui-warning);
858
- --uui-alert-icon: var(--uui-warning);
859
- }
860
-
861
- .alert-success {
862
- --uui-alert-text: var(--uui-text-primary);
863
- --uui-alert-bg: #E7EEE1;
864
- --uui-alert-border: var(--uui-success);
865
- --uui-alert-icon: var(--uui-success);
866
- }
867
-
868
- .alert-info {
869
- --uui-alert-text: var(--uui-text-primary);
870
- --uui-alert-bg: #DCEDF6;
871
- --uui-alert-border: var(--uui-info);
872
- --uui-alert-icon: var(--uui-info);
873
- }
874
-
875
- .badge-default {
876
- --uui-badge-bg: var(--night300);
877
- --uui-badge-bg-hover: var(--night400);
878
- --uui-badge-caption-solid: var(--uui-text-primary);
879
- --uui-badge-count-bg: var(--white);
880
- --uui-badge-count: var(--uui-text-secondary);
881
- --uui-badge-bg-halftone: var(--night200);
882
- --uui-badge-bg-halftone-hover: var(--night300);
883
- --uui-badge-border-halftone: var(--night400);
884
- --uui-badge-border-halftone-hover: var(--night500);
885
- --uui-badge-caption-halftone: var(--uui-text-primary);
886
- }
887
-
888
- .badge-info {
889
- --uui-badge-bg: var(--uui-info);
890
- --uui-badge-bg-hover: var(--uui-info-dark);
891
- --uui-badge-caption-solid: var(--white);
892
- --uui-badge-count-bg: var(--white);
893
- --uui-badge-count: var(--uui-text-secondary);
894
- --uui-badge-bg-halftone: var(--uui-info-lightest);
895
- --uui-badge-bg-halftone-hover: var(--uui-info-light);
896
- --uui-badge-border-halftone: var(--uui-info-light);
897
- --uui-badge-border-halftone-hover: var(--uui-info);
898
- --uui-badge-caption-halftone: var(--uui-info-darkest);
899
- }
900
-
901
- .badge-success {
902
- --uui-badge-bg: var(--uui-success);
903
- --uui-badge-bg-hover: var(--uui-success-dark);
904
- --uui-badge-caption-solid: var(--white);
905
- --uui-badge-count-bg: var(--white);
906
- --uui-badge-count: var(--uui-text-secondary);
907
- --uui-badge-bg-halftone: var(--uui-success-lightest);
908
- --uui-badge-bg-halftone-hover: var(--uui-success-light);
909
- --uui-badge-border-halftone: var(--uui-success-light);
910
- --uui-badge-border-halftone-hover: var(--uui-success);
911
- --uui-badge-caption-halftone: var(--uui-success-darkest);
912
- }
913
-
914
- .badge-warning {
915
- --uui-badge-bg: var(--uui-warning);
916
- --uui-badge-bg-hover: var(--uui-warning-dark);
917
- --uui-badge-caption-solid: var(--uui-text-primary);
918
- --uui-badge-count-bg: var(--white);
919
- --uui-badge-count: var(--uui-text-secondary);
920
- --uui-badge-bg-halftone: var(--uui-warning-lightest);
921
- --uui-badge-bg-halftone-hover: var(--uui-warning-light);
922
- --uui-badge-border-halftone: var(--uui-warning-light);
923
- --uui-badge-border-halftone-hover: var(--uui-warning);
924
- --uui-badge-caption-halftone: var(--uui-warning-darkest);
925
- }
926
-
927
- .badge-error {
928
- --uui-badge-bg: var(--uui-error);
929
- --uui-badge-bg-hover: var(--uui-error-dark);
930
- --uui-badge-caption-solid: var(--white);
931
- --uui-badge-count-bg: var(--white);
932
- --uui-badge-count: var(--uui-text-secondary);
933
- --uui-badge-bg-halftone: var(--uui-error-lightest);
934
- --uui-badge-bg-halftone-hover: var(--uui-error-light);
935
- --uui-badge-border-halftone: var(--uui-error-light);
936
- --uui-badge-border-halftone-hover: var(--uui-error);
937
- --uui-badge-caption-halftone: var(--uui-error-darkest);
938
- }
939
-
940
- .informer-default {
941
- --uui-informer-bg: var(--uui-secondary-light);
942
- --uui-informer-caption: var(--uui-text-secondary);
943
- }
944
-
945
- .informer-focus {
946
- --uui-informer-bg: var(--uui-negative);
947
- --uui-informer-caption: var(--uui-caption);
948
- }
949
-
950
- .informer-white {
951
- --uui-informer-bg: var(--uui-surface);
952
- --uui-informer-caption: var(--uui-text-secondary);
953
- }
954
-
955
- .uui-text-brand {
956
- --uui-text: var(--uui-text-brand);
957
- }
958
-
959
- .uui-text-primary {
960
- --uui-text: var(--uui-text-primary);
961
- }
962
-
963
- .uui-text-secondary {
964
- --uui-text: var(--uui-text-secondary);
965
- }
966
-
967
- .uui-text-disabled {
968
- --uui-text: var(--uui-text-disabled);
969
- }
970
-
971
- .uui-text-contrast {
972
- --uui-text: var(--uui-text-contrast);
973
- }
974
-
975
- .uui-font-inter, .uui-font-regular {
976
- --uui-text-font: var(--font-inter);
977
- }
978
-
979
- .uui-font-museo-sans {
980
- --uui-text-font: var(--font-museo-sans);
981
- }
982
-
983
- .uui-font-semibold {
984
- --uui-text-font: var(--font-museo-sans);
985
- --uui-text-font-weight: 700;
986
- }
987
-
988
- .dropdown-container-white {
989
- --uui-dropdown-container-bg: var(--white);
990
- }
991
-
992
- .dropdown-container-night700 {
993
- --uui-dropdown-container-bg: var(--night700);
994
- }
995
-
996
- .flex-row-background-white {
997
- --uui-flex-row-bg: var(--uui-surface);
998
- }
999
-
1000
- .flex-row-background-night50 {
1001
- --uui-flex-row-bg: var(--night50);
1002
- }
1003
-
1004
- .flex-row-background-night100 {
1005
- --uui-flex-row-bg: var(--night100);
1006
- }
1007
-
1008
- .flex-row-background-none {
1009
- --uui-flex-row-bg: transparent;
1010
- }
1011
-
1012
- .panel-white {
1013
- --uui-panel-bg: var(--uui-surface);
1014
- }
1015
-
1016
- .panel-night50 {
1017
- --uui-panel-bg: var(--night50);
1018
- }
1019
- }
1
+ /* Name convention */
2
+ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
+ .uui-theme-vanilla_thunder {
4
+ --font-regular: 'Sans Regular', 'Arial', sans-serif;
5
+ --font-semibold: 'Sans Semibold', 'Arial', sans-serif;
6
+ --font-italic: 'Sans Italic', 'Arial', sans-serif;
7
+ --font-primary: 'Museo Sans', 'Sans Semibold', 'Arial', sans-serif;
8
+ --font-promo: 'Museo Slab', 'Roboto Slab', 'Arial', sans-serif;
9
+ --font-mono: 'Roboto Mono', 'Arial', sans-serif;
10
+ --font-redacted: 'Redacted';
11
+ --font-light: 'Sans Light', 'Arial', sans-serif;
12
+
13
+ --blue-0: #F0F7FC;
14
+ --blue-100: #D4F0FE;
15
+ --blue-200: #76CDD8;
16
+ --blue-300: #2BC1F0;
17
+ --blue-400: #1CA5D3;
18
+ --blue-500: #008ACE;
19
+
20
+ --grass-25: #EBFCC7;
21
+ --grass-50: #E4ED94;
22
+ --grass-100: #CEDB56;
23
+ --grass-200: #91C229;
24
+ --grass-300: #4FA762;
25
+ --grass-400: #329247;
26
+ --grass-500: #157D2C;
27
+
28
+ --sun-50: #FFF1A7;
29
+ --sun-100: #FFD602;
30
+ --sun-200: #F7A02C;
31
+ --sun-250: #F67E00;
32
+ --sun-300: #F2682A;
33
+
34
+ --chromatic-0: #FFF;
35
+ --chromatic-100: #F7F7FD;
36
+ --chromatic-150: #E5E5EE;
37
+ --chromatic-200: #CDCDD9;
38
+ --chromatic-300: #8D8D9C;
39
+ --chromatic-400: #34384A;
40
+ --chromatic-500: #191F3D;
41
+
42
+ /* start Loveship colors for controllers */
43
+
44
+ --fire-lightest: #FDE1E1;
45
+ --fire-light: #FCC8C8;
46
+ --fire: #FA4B4B;
47
+ --fire-dark: #CC2929;
48
+ --fire-darkest: #B32424;
49
+
50
+ --white: #FFF;
51
+
52
+ --night50: #FAFAFC;
53
+ --night100: #F5F6FA;
54
+ --night200: #EBEDF5;
55
+ --night300: #E1E3EB;
56
+ --night400: #CED0DB;
57
+ --night500: #ACAFBF;
58
+ --night600: #6C6F80;
59
+ --night700: #474A59;
60
+ --night800: #303240;
61
+ --night900: #1D1E26;
62
+
63
+ /* end Loveship colors for controllers */
64
+
65
+ --uui-accent: var(--grass-300);
66
+ --uui-accent-light: var(--grass-200);
67
+ --uui-accent-lightest: var(--grass-100);
68
+ --uui-accent-dark: var(--grass-400);
69
+ --uui-accent-darkest: var(--grass-500);
70
+
71
+ --uui-primary: var(--blue-300);
72
+ --uui-primary-light: var(--blue-200);
73
+ --uui-primary-lightest: var(--blue-100);
74
+ --uui-primary-halftone: var(--night200); // TODO: why we have that?
75
+ --uui-primary-dark: var(--blue-400);
76
+ --uui-primary-darkest: var(--blue-500);
77
+
78
+ --uui-secondary: var(--night500);
79
+ --uui-secondary-light: var(--night300);
80
+ --uui-secondary-lightest: var(--night200);
81
+ --uui-secondary-dark: var(--night600);
82
+ --uui-secondary-darkest: var(--night700);
83
+ --uui-secondary-hover: var(--night600);
84
+ --uui-secondary-active: var(--night700);
85
+
86
+ --uui-negative: var(--sun-200);
87
+ --uui-negative-light: var(--sun-100);
88
+ --uui-negative-lightest: var(--sun-50);
89
+ --uui-negative-dark: var(--sun-250);
90
+ --uui-negative-darkest: var(--sun-300);
91
+
92
+
93
+ --uui-link: var(--blue-300);
94
+ --uui-link-hover: var(--blue-400);
95
+ --uui-link-visited: #8018A0;
96
+ --uui-link-disabled: var(--chromatic-200);
97
+ --uui-visited: #5214CC;
98
+
99
+ --uui-info: var(--blue-300);
100
+ --uui-info-lightest: var(--blue-0);
101
+ --uui-info-light: var(--blue-100);
102
+ --uui-info-dark: var(--blue-400);
103
+ --uui-info-darkest: var(--blue-500);
104
+ --uui-info-hover: var(--blue-400);
105
+ --uui-info-active: var(--blue-500);
106
+
107
+ --uui-success: var(--grass-300);
108
+ --uui-success-lightest: var(--grass-100);
109
+ --uui-success-light: var(--grass-200);
110
+ --uui-success-dark: var(--grass-400);
111
+ --uui-success-darkest: var(--grass-500);
112
+ --uui-success-hover: var(--grass-400);
113
+ --uui-success-active: var(--grass-500);
114
+
115
+ --uui-warning: var(--sun-200);
116
+ --uui-warning-lightest: var(--sun-50);
117
+ --uui-warning-light: var(--sun-100);
118
+ --uui-warning-dark: var(--sun-250);
119
+ --uui-warning-darkest: var(--sun-300);
120
+ --uui-warning-hover: var(--sun-250);
121
+ --uui-warning-active: var(--sun-300);
122
+
123
+ --uui-error: var(--fire);
124
+ --uui-error-lightest: var(--fire-lightest);
125
+ --uui-error-light: var(--fire-light);
126
+ --uui-error-dark: var(--fire-dark);
127
+ --uui-error-darkest: var(--fire-darkest);
128
+ --uui-error-hover: var(--fire-dark);
129
+ --uui-error-active: var(--fire-darkest);
130
+
131
+ --uui-icon: var(--chromatic-300);
132
+ --uui-icon-hover: var(--chromatic-400);
133
+ --uui-icon-active: var(--chromatic-500);
134
+ --uui-icon-disabled: var(--chromatic-200);
135
+
136
+ --uui-surface: var(--chromatic-0);
137
+ --uui-surface-hover: var(--night200);
138
+ --uui-surface-inverted: var(--night900);
139
+ /* new start */
140
+ --uui-surface-light: var(--night50);
141
+ --uui-surface-light-hover: var(--night100);
142
+ --uui-surface-contrast: var(--night800);
143
+ --uui-surface-contrast-hover: var(--night900);
144
+ --uui-surface-contrast-active: var(--night900);
145
+ /* new end */
146
+
147
+ --uui-background: var(--chromatic-100);
148
+ --uui-divider: var(--chromatic-200);
149
+ --uui-divider-light: var(--chromatic-150);
150
+ --uui-contrast: var(--chromatic-0);
151
+ --uui-disabled: var(--chromatic-150);
152
+
153
+ --uui-scroll-bars-bg: var(--chromatic-200);
154
+ --uui-scroll-bars-bg-active: var(--chromatic-300);
155
+
156
+ --uui-button-bg-halftone: var(--chromatic-0);
157
+ --uui-button-caption-disabled: var(--chromatic-300);
158
+
159
+ --uui-text-brand: var(--chromatic-500);
160
+ --uui-text-primary: var(--chromatic-500);
161
+ --uui-text-secondary: var(--chromatic-300);
162
+ --uui-text-disabled: var(--chromatic-200);
163
+ --uui-text-contrast: var(--chromatic-0);
164
+
165
+ --uui-control-bg: var(--chromatic-0);
166
+ --uui-control-bg-checked: var(--uui-primary);
167
+ --uui-control-bg-checked-hover: var(--uui-primary-dark);
168
+ --uui-control-bg-checked-disabled: var(--uui-primary-light);
169
+ --uui-control-bg-hover: var(--chromatic-300);
170
+ --uui-control-bg-disabled: var(--chromatic-100);
171
+ --uui-control-bg-readonly: var(--chromatic-100);
172
+ --uui-control_switch-bg: var(--chromatic-200);
173
+ --uui-control_switch_toggler-bg: var(--chromatic-0);
174
+
175
+ --uui-control-border-checked-disabled: var(--uui-primary-light);
176
+ --uui-control-border: var(--chromatic-200);
177
+ --uui-control-border-checked: var(--uui-primary);
178
+ --uui-control-border-checked-hover: var(--uui-primary-dark);
179
+ --uui-control-border-hover: var(--uui-primary-dark);
180
+ --uui-control-border-disabled: var(--uui-disabled);
181
+ --uui-control-border-readonly: var(--uui-disabled);
182
+
183
+ --uui-control_switch-border-hover: var(--chromatic-300);
184
+ --uui-control_textinput-border-hover: var(--chromatic-300);
185
+
186
+ --uui-control-label: var(--uui-text-primary);
187
+ --uui-control-label-disabled: var(--uui-text-disabled);
188
+ --uui-control-label-error: var(--uui-error);
189
+ --uui-control-label-fill: var(--uui-icon);
190
+ --uui-control-label-optional-text: var(--uui-text-secondary);
191
+ --uui-control-label-asterisk: var(--uui-error);
192
+
193
+ --uui-control-placeholder: var(--night600);
194
+ --uui-control-placeholder-disabled: var(--night500);
195
+
196
+ --uui-control-text: var(--chromatic-500);
197
+ --uui-control-text-disabled: var(--chromatic-200);
198
+
199
+ --uui-control-icon: var(--chromatic-200);
200
+ --uui-control-icon-disabled: var(--chromatic-200);
201
+
202
+ --uui-control-checkbox-icon: var(--chromatic-0);
203
+
204
+ --uui-tag-bg: var(--night300);
205
+ --uui-tag-bg-hover: var(--night400);
206
+
207
+ --uui-skeleton: var(--chromatic-200);
208
+ --uui-skeleton-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
209
+
210
+ --uui-overlay: rgb(29 30 38 / 80%);
211
+ --uui-border-radius: 3px;
212
+ --uui-shadow-level-1: 0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
213
+ --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);
214
+ --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);
215
+
216
+ /* TextInput vars */
217
+ --uui-text-input-bg: var(--uui-control-bg);
218
+ --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
219
+ --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
220
+ --uui-text-input-border: var(--uui-control-border);
221
+ --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
222
+ --uui-text-input-border-active: var(--uui-control-border-checked);
223
+ --uui-text-input-border-error: var(--uui-negative);
224
+ --uui-text-input-border-disabled: var(--uui-control-border-disabled);
225
+ --uui-text-input-border-readonly: var(--uui-control-border-readonly);
226
+ --uui-text-input-placeholder: var(--uui-control-placeholder);
227
+ --uui-text-input-placeholder-disabled: var(--uui-control-placeholder-disabled);
228
+ --uui-text-input-text: var(--uui-control-text);
229
+ --uui-text-input-text-disabled: var(--uui-control-text-disabled);
230
+ --uui-text-input-icon: var(--uui-control-icon);
231
+ --uui-text-input-icon-disabled: var(--uui-control-icon-disabled);
232
+ --uui-text-input-icon-clickable: var(--uui-icon);
233
+ --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
234
+ --uui-text-input-border-radius: var(--uui-border-radius);
235
+
236
+ --uui-text-input-font: var(--font-inter);
237
+ --uui-text-input-font-weight: 400;
238
+
239
+ /* Button vars */
240
+ --uui-btn-border-radius: 8px;
241
+
242
+ --uui-btn-font: var(--font-museo-sans);
243
+ --uui-btn-font-weight: 500;
244
+
245
+
246
+ /* LinkButton vars */
247
+ --uui-link-button-text: var(--uui-primary);
248
+ --uui-link-button-text-hover: var(--uui-primary-dark);
249
+ --uui-link-button-text-active: var(--uui-primary-darkest);
250
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
251
+
252
+ --uui-link-button-font: var(--font-inter);
253
+ --uui-link-button-font-weight: 400;
254
+
255
+ /* DatePicker vars */
256
+ --uui-dtp-title-bg: var(--uui-control-bg);
257
+ --uui-dtp-title-bg-hover: var(--uui-primary-halftone);
258
+ --uui-dtp-text-selected: var(--uui-control-border-checked);
259
+ --uui-dtp-text: var(--uui-control-text);
260
+ --uui-dtp-next-prev-icon: var(--uui-icon);
261
+ --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
262
+
263
+ --uui-dtp_header-font: var(--font-inter);
264
+ --uui-dtp_header-font-weight: 400;
265
+ --uui-dtp_body-content-font: var(--font-inter);
266
+ --uui-dtp_body-content-font-weight: 400;
267
+
268
+ /* RangeDatePicker vars */
269
+ --uui-rdtp-bg: var(--uui-control-bg);
270
+ --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
271
+
272
+ /* Calendar vars */
273
+ --uui-calendar-selected-hover: var(--uui-control-bg);
274
+ --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
275
+ --uui-calendar-start-end-selected: var(--uui-control-border-checked);
276
+ --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
277
+ --uui-calendar-text: var(--uui-control-text);
278
+ --uui-calendar-text-filtered: var(--uui-control-text-disabled);
279
+ --uui-calendar-bg-selected: var(--uui-secondary);
280
+
281
+ --uui-calendar-content-font: var(--font-inter);
282
+ --uui-calendar-content-font-weight: 400;
283
+ --uui-calendar-weekday-font: var(--font-inter);
284
+ --uui-calendar-weekday-font-weight: 400;
285
+ --uui-calendar-selected_day-font: var(--font-inter);
286
+ --uui-calendar-selected_day-font-weight: 600;
287
+
288
+ /* tab-button-vars */
289
+ --uui-tab-button-text: var(--uui-text-primary);
290
+ --uui-tab-button-text-hover: var(--uui-primary);
291
+ --uui-tab-button-text-active: var(--uui-primary);
292
+ --uui-tab-button-text-disabled: var(--uui-text-disabled);
293
+
294
+ --uui-tab-button-font: var(--font-inter);
295
+ --uui-tab-button-font-weight: 600;
296
+
297
+ /* radio-input-vars */
298
+ --uui-radio-input-bg: var(--uui-control-bg);
299
+ --uui-radio-input-bg-disabled: var(--uui-control-bg-disabled);
300
+ --uui-radio-input-border: var(--uui-control-border);
301
+ --uui-radio-input-border-checked: var(--uui-control-border-checked);
302
+ --uui-radio-input-border-hover: var(--uui-control-border-hover);
303
+ --uui-radio-input-border-disabled: var(--uui-control-border-disabled);
304
+ --uui-radio-input-border-checked-disabled: var(--uui-control-border-checked-disabled);
305
+ --uui-radio-input-label: var(--uui-control-label);
306
+ --uui-radio-input-label-disabled: var(--uui-control-label-disabled);
307
+ --uui-radio-input-fill-checked: var(--uui-control-border-checked);
308
+ --uui-radio-input-fill-hover: var(--uui-control-border-hover);
309
+ --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
310
+ --uui-radio-input-error: var(--uui-negative);
311
+
312
+ --uui-radio-input-font: var(--font-inter);
313
+ --uui-radio-input-font-weight: 400;
314
+
315
+ /* Checkbox vars */
316
+ --uui-checkbox-border: var(--uui-control-border);
317
+ --uui-checkbox-border-hover: var(--uui-control-border-hover);
318
+ --uui-checkbox-border-disabled: var(--uui-control-border-disabled);
319
+ --uui-checkbox-border-checked: var(--uui-control-border-checked);
320
+ --uui-checkbox-border-checked-disabled: var(--uui-control-border-checked-disabled);
321
+ --uui-checkbox-bg: var(--uui-control-bg);
322
+ --uui-checkbox-bg-checked: var(--uui-control-bg-checked);
323
+ --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
324
+ --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
325
+ --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
326
+ --uui-checkbox-error: var(--uui-negative);
327
+ --uui-checkbox-fill: var(--uui-control-checkbox-icon);
328
+ --uui-checkbox-label: var(--uui-control-label);
329
+ --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
330
+ --uui-checkbox-border-radius: var(--uui-border-radius);
331
+
332
+ --uui-checkbox-font: var(--font-inter);
333
+ --uui-checkbox-font-weight: 400;
334
+
335
+ /* Tag vars */
336
+ --uui-tag-caption: var(--uui-text-primary);
337
+ --uui-tag-fill: var(--uui-icon);
338
+ --uui-tag-fill-hover: var(--uui-icon-hover);
339
+ --uui-tag-count-bg: var(--uui-surface);
340
+ --uui-tag-count: var(--uui-text-secondary);
341
+ --uui-tag-label: var(--uui-text-secondary);
342
+ --uui-tag-border-radius: 30px;
343
+
344
+ --uui-tag-font: var(--font-inter);
345
+ --uui-tag-font-weight: 400;
346
+ --uui-tag-count-font: var(--font-inter);
347
+ --uui-tag-count-font-weight: 500;
348
+
349
+ /* TextArea vars */
350
+ --uui-text-area-bg: var(--uui-control-bg);
351
+ --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
352
+ --uui-text-area-border: var(--uui-control-border);
353
+ --uui-text-area-border-disabled: var(--uui-control-border-disabled);
354
+ --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
355
+ --uui-text-area-border-active: var(--uui-control-border-checked);
356
+ --uui-text-area-border-error: var(--uui-negative);
357
+ --uui-text-area-placeholder: var(--uui-control-placeholder);
358
+ --uui-text-area-text: var(--uui-control-text);
359
+ --uui-text-area-text-disabled: var(--uui-control-text-disabled);
360
+ --uui-text-area-icon: var(--uui-icon);
361
+ --uui-text-area-border-radius: var(--uui-border-radius);
362
+
363
+ --uui-text-area-font: var(--font-inter);
364
+ --uui-text-area-font-weight: 400;
365
+ --uui-text-area-counter-font: var(--font-inter);
366
+ --uui-text-area-counter-font-weight: 400;
367
+
368
+ /* DropMarker vars */
369
+ --uui-drop-marker: var(--uui-primary);
370
+ --uui-drop-marker-blocked: var(--uui-error);
371
+
372
+ /* Tooltip vars */
373
+ --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgb(44 47 60 / 30%), 0 1px 4px 0 rgb(44 47 60 / 50%)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
374
+ --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
375
+ --uui-tooltip-border-radius: 8px;
376
+
377
+ --uui-tooltip-font: var(--font-inter);
378
+ --uui-tooltip-font-weight: 400;
379
+
380
+ /* PickerInput vars */
381
+ --uui-picker_input-bg: var(--uui-surface);
382
+
383
+ /* PickerToggler vars */
384
+ --uui-picker-toggler-bg: var(--uui-control-bg);
385
+ --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
386
+ --uui-picker-toggler-border: var(--uui-control-border);
387
+ --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
388
+ --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
389
+ --uui-picker-toggler-border-active: var(--uui-control-border-checked);
390
+ --uui-picker-toggler-border-error: var(--uui-negative);
391
+ --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
392
+ --uui-picker-toggler-text: var(--uui-control-text);
393
+ --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
394
+ --uui-picker-toggler-icon: var(--uui-control-icon);
395
+ --uui-picker-toggler-icon-disabled: var(--uui-control-icon-disabled);
396
+ --uui-picker-toggler-icon-clickable: var(--uui-icon);
397
+ --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
398
+ --uui-picker-toggler-border-radius: var(--uui-border-radius);
399
+
400
+ --uui-picker-toggler-font: var(--font-inter);
401
+ --uui-picker-toggler-font-weight: 400;
402
+
403
+ /* Panel */
404
+ --uui-panel-border-radius: 8px;
405
+ --uui-panel-shadow: var(--uui-shadow-level-1);
406
+
407
+ /* Modals */
408
+ --uui-modals-border-radius: 8px;
409
+ --uui-modals-overlay: rgb(29 30 38 / 80%);
410
+ --uui-modals-shadow: var(--uui-shadow-level-3);
411
+ --uui-modals-bg: var(--uui-surface);
412
+
413
+ /* TextPlaceholder */
414
+ --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);
415
+ --uui-text-placeholder: var(--uui-skeleton);
416
+
417
+ /* LabeledInput */
418
+ --uui-labeled-input: var(--uui-text-primary);
419
+ --uui-labeled-input-disabled: var(--uui-text-disabled);
420
+ --uui-labeled-input-error: var(--uui-error);
421
+ --uui-labeled-input-fill: var(--uui-icon);
422
+ --uui-labeled-input-info-fill: var(--uui-icon);
423
+ --uui-labeled-input-optional-text: var(--uui-text-secondary);
424
+ --uui-labeled-input-asterisk: var(--uui-error);
425
+
426
+ --uui-labeled-input-font: var(--font-inter);
427
+ --uui-labeled-input-font-weight: 500;
428
+ --uui-labeled-input-optional-font: var(--font-inter);
429
+ --uui-labeled-input-optional-font-weight: 300;
430
+ --uui-labeled-input-invalid-msg-font: var(--font-inter);
431
+ --uui-labeled-input-invalid-msg-font-weight: 400;
432
+
433
+ /* Accordion */
434
+ --uui-accordion-bg: var(--uui-surface);
435
+ --uui-accordion-border: var(--uui-divider);
436
+ --uui-accordion-border-radius: 6px;
437
+ --uui-accordion-text: var(--uui-text-primary);
438
+ --uui-accordion-text-disabled: var(--uui-text-disabled);
439
+ --uui-accordion-icon: var(--uui-icon);
440
+ --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
441
+ --uui-accordion-focus: var(--uui-primary);
442
+ --uui-accordion-shadow: var(--uui-shadow-level-1);
443
+ --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
444
+
445
+ --uui-accordion-toggler-font: var(--font-inter);
446
+ --uui-accordion-toggler-font-weight: 500;
447
+ --uui-accordion-body-font: var(--font-inter);
448
+ --uui-accordion-body-font-weight: 400;
449
+
450
+ /* Switch */
451
+ --uui-switch-bg: var(--uui-control_switch-bg);
452
+ --uui-switch-border-hover: var(--uui-control_switch-border-hover);
453
+ --uui-switch-bg-checked: var(--uui-control-bg-checked);
454
+ --uui-switch-bg-hover: var(--uui-control-bg-hover);
455
+ --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
456
+ --uui-switch-bg-checked-hover: var(--uui-control-bg-checked-hover);
457
+ --uui-switch-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
458
+ --uui-switch-border: var(--uui-control-border);
459
+ --uui-switch-border-checked: var(--uui-control-border-checked);
460
+ --uui-switch-border-disabled: var(--uui-control-border-disabled);
461
+ --uui-switch-border-checked-hover: var(--uui-control-border-checked-hover);
462
+ --uui-switch-border-checked-hover-copy: var(--uui-control-border-checked-hover);
463
+ --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
464
+ --uui-switch-label: var(--uui-control-label);
465
+ --uui-switch-label-disabled: var(--uui-control-label-disabled);
466
+ --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
467
+ --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
468
+ --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
469
+ --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
470
+ --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);
471
+ --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
472
+ --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
473
+
474
+ --uui-switch-font: var(--font-inter);
475
+ --uui-switch-font-weight: 400;
476
+
477
+ /* DropdownContainer */
478
+ --uui-dropdown-container-border-radius: 6px;
479
+ --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
480
+ --uui-dropdown-container-bg: var(--uui-surface);
481
+
482
+ /* DropdownMenu */
483
+ // TODO: update tokens
484
+ --uui-dropdown-menu-bg: var(--uui-surface);
485
+ --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
486
+ --uui-dropdown-menu-splitter: var(--uui-divider);
487
+ --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
488
+ --uui-dropdown-menu-item-active: var(--uui-surface-hover);
489
+ --uui-dropdown-menu-item-text: var(--uui-text-primary);
490
+
491
+ --uui-dropdown-menu-body-font: var(--font-inter);
492
+ --uui-dropdown-menu-body-font-weight: 400;
493
+ --uui-dropdown-menu-item-font: var(--font-inter);
494
+ --uui-dropdown-menu-item-font-weight: 400;
495
+
496
+ /* MainMenu */
497
+ --uui-main_menu-text: var(--uui-text-primary);
498
+ --uui-main_menu-bg: #F0F7FCD9;
499
+ --uui-main_menu-hover: #FFF;
500
+ --uui-main_menu-active: #FFF;
501
+ --uui-main_menu-border-active: var(--uui-primary);
502
+
503
+ --uui-main_menu-dropdown-bg: var(--uui-surface);
504
+ --uui-main_menu-dropdown-hover: var(--uui-primary);
505
+ --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
506
+ --uui-main_menu-dropdown-border-radius: 8px;
507
+
508
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
509
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
510
+ --uui-main_menu-search-placeholder: var(--uui-text-disabled);
511
+ --uui-main_menu-search-text: var(--uui-text-contrast);
512
+ --uui-main_menu-search-icon: var(--uui-icon-disabled);
513
+
514
+ --uui-main_menu-icon: var(--uui-text-primary);
515
+ --uui-main_menu-icon-hover: var(--uui-text-primary);
516
+ --uui-main_menu-icon-active: var(--uui-text-primary);
517
+
518
+ --uui-main_menu-font: var(--font-museo-sans);
519
+ --uui-main_menu-font-weight: 500;
520
+ --uui-main_menu-search-font: var(--font-inter);
521
+ --uui-main_menu-search-font-weight: 400;
522
+
523
+ /* BurgerMenu */
524
+ --uui-burger_menu-bg: var(--uui-surface);
525
+ --uui-burger_menu-bg-hover: var(--uui-surface-light-hover);
526
+ --uui-burger_menu-caption: var(--uui-contrast);
527
+ --uui-burger_menu-caption-hover: var(--uui-primary);
528
+ --uui-burger_menu-overlay: var(--uui-overlay);
529
+ --uui-burger_icon: var(--uui-text-primary);
530
+ --uui-burger_item: var(--uui-text-brand);
531
+
532
+ /* BurgerGroupHeader */
533
+ --uui-burger_group-text: var(--uui-text-disabled);
534
+ --uui-burger_group-bg: var(--uui-surface-contrast);
535
+ --uui-burger_group-line: var(--uui-divider);
536
+
537
+ --uui-burger_group-font: var(--font-inter);
538
+ --uui-burger_group-font-weight: 400;
539
+
540
+ /* BurgerButton */
541
+ --uui-burger_btn_caption: var(--uui-text-contrast);
542
+ --uui-burger_btn_caption-hover: var(--uui-primary);
543
+ --uui-burger_btn_caption-active: var(--uui-primary);
544
+ --uui-burger_btn-border: var(--uui-divider-light);
545
+
546
+ --uui-burger_btn-font: var(--font-inter);
547
+ --uui-burger_btn-font-weight: 400;
548
+
549
+ /* BurgerSearch */
550
+ --uui-burger_search: var(--uui-text-contrast);
551
+ --uui-burger_search-fill: var(--uui-text-disabled);
552
+ --uui-burger_search-bg: var(--uui-surface-contrast);
553
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
554
+
555
+ --uui-burger_search-font: var(--font-inter);
556
+ --uui-burger_search-font-weight: 400;
557
+
558
+ /* NumericInput */
559
+ --uui-numeric-input-bg: var(--uui-control-bg);
560
+ --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
561
+ --uui-numeric-input-border: var(--uui-control-border);
562
+ --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
563
+ --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
564
+ --uui-numeric-input-border-active: var(--uui-control-border-checked);
565
+ --uui-numeric-input-border-error: var(--uui-negative);
566
+ --uui-numeric-input-placeholder: var(--uui-control-placeholder);
567
+ --uui-numeric-input-text: var(--uui-control-text);
568
+ --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
569
+ --uui-numeric-input-icon-clickable: var(--uui-icon);
570
+ --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);
571
+ --uui-numeric-input-border-radius: var(--uui-border-radius);
572
+
573
+ /* TimePicker */
574
+ --uui-time-picker-bg: var(--uui-control-bg);
575
+ --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);
576
+ --uui-time-picker-border: var(--uui-control-border);
577
+ --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
578
+ --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
579
+ --uui-time-picker-border-active: var(--uui-control-border-checked);
580
+ --uui-time-picker-border-error: var(--uui-negative);
581
+ --uui-time-picker-placeholder: var(--uui-control-placeholder);
582
+ --uui-time-picker-text: var(--uui-control-text);
583
+ --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
584
+ --uui-time-picker-icon-clickable: var(--uui-icon);
585
+ --uui-time-picker-icon-clickable-hover: var(--uui-icon-hover);
586
+ --uui-time-picker-border-radius: var(--uui-border-radius);
587
+
588
+ /* SearchPicker */
589
+ --uui-search-input-bg: var(--uui-control-bg);
590
+ --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);
591
+ --uui-search-input-border: var(--uui-control-border);
592
+ --uui-search-input-border-disabled: var(--uui-control-border-disabled);
593
+ --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
594
+ --uui-search-input-border-active: var(--uui-control-border-checked);
595
+ --uui-search-input-border-error: var(--uui-negative);
596
+ --uui-search-input-placeholder: var(--uui-control-placeholder);
597
+ --uui-search-input-text: var(--uui-control-text);
598
+ --uui-search-input-text-disabled: var(--uui-control-text-disabled);
599
+ --uui-search-input-icon-clickable: var(--uui-icon);
600
+ --uui-search-input-icon-clickable-hover: var(--uui-icon-hover);
601
+ --uui-search-input-icon-disabled: var(--uui-icon-disabled);
602
+ --uui-search-input-border-radius: var(--uui-border-radius);
603
+
604
+ /* Popover */
605
+ --uui-popover-shadow: var(--uui-shadow-level-2);
606
+
607
+ /* Footer */
608
+ --uui-footer-bg: var(--uui-surface-contrast);
609
+
610
+ /* FilterPanelItemToggler vars */
611
+ --uui-filters-toggler-border: var(--uui-surface);
612
+ --uui-filters-toggler-border-hover: var(--blue-0);
613
+ --uui-filters-toggler-border-radius: 8px;
614
+ --uui-filters-toggler-bg: var(--uui-surface);
615
+ --uui-filters-toggler-bg-hover: var(--blue-0);
616
+ --uui-filters-toggler-text: var(--uui-text-secondarybrand);
617
+ --uui-filters-toggler-label: var(--uui-text-brand);
618
+ --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
619
+ --uui-filters-toggler-shadow: var(--uui-shadow-level-1);
620
+
621
+ --uui-filters-toggler-font: var(--font-inter);
622
+ --uui-filters-toggler-font-weight: 400;
623
+ --uui-filters-panel-header-font: var(--font-inter);
624
+ --uui-filters-panel-header-font-weight: 400;
625
+
626
+ /* NotificationCard */
627
+ --uui-notification-card-border-radius: 8px;
628
+ --uui-notification-card-border-width: 0;
629
+ --uui-notification-card-border-top-width: 6px;
630
+ --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
631
+
632
+ /* Alert */
633
+ --uui-alert-border-radius: 6px;
634
+
635
+ /* Panel */
636
+
637
+ --uui-panel-bg: var(--uui-surface);
638
+
639
+ /* Spinner */
640
+ --uui-spinner: var(--uui-primary);
641
+
642
+ /* Blocker */
643
+ --uui-blocker-bg: var(--uui-background);
644
+ --uui-blocker-bg-with-opacity: #F5F6FA80;
645
+
646
+ /* FlexRow */
647
+ --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
648
+
649
+ /* DataTable vars */
650
+ --uui-dt-border: var(--uui-divider-light);
651
+
652
+ --uui-dt-cell-bg: transparent;
653
+ --uui-dt-cell-bg-resize: #EF55331F;
654
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
655
+ --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
656
+ --uui-dt-cell-border-focus: var(--uui-control-border-checked);
657
+
658
+ --uui-dt-row-bg: var(--uui-surface);
659
+ --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
660
+ --uui-dt-row-bg-invalid: #FEF7F6;
661
+ --uui-dt-row-bg-selected: #EBF7FF;
662
+
663
+ --uui-dt-header-row-bg: var(--uui-surface-light);
664
+ --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
665
+
666
+ --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
667
+ --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
668
+ --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
669
+ --uui-dt_header-drop_marker: var(--uui-primary);
670
+
671
+ --uui-dt-header-cell-font: var(--font-inter);
672
+ --uui-dt-header-cell-font-weight: 500;
673
+
674
+ /* AvatarStack */
675
+
676
+ --uui-avatar-stack-font: var(--font-inter);
677
+ --uui-avatar-stack-font-weight: 400;
678
+
679
+ /* Badge */
680
+
681
+ --uui-badge-font: var(--font-museo-sans);
682
+ --uui-badge-font-weight: 700;
683
+ --uui-badge-count-font: var(--font-museo-sans);
684
+ --uui-badge-count-font-weight: 700;
685
+
686
+ /* Pagination */
687
+
688
+ --uui-pagination-font: var(--font-inter);
689
+ --uui-pagination-font-weight: 400;
690
+
691
+
692
+ /* ------------------------------------ */
693
+
694
+ .tooltip-contrast {
695
+ --uui-tooltip-bg: var(--uui-surface-inverted);
696
+ --uui-tooltip-text: var(--uui-contrast);
697
+ }
698
+
699
+ .tooltip-default {
700
+ --uui-tooltip-bg: var(--uui-surface);
701
+ --uui-tooltip-text: var(--uui-text-primary);
702
+ }
703
+
704
+ .tooltip-critical {
705
+ --uui-tooltip-bg: var(--uui-error-dark);
706
+ --uui-tooltip-text: var(--uui-contrast);
707
+ }
708
+
709
+ .button-primary {
710
+ --uui-btn-bg: var(--uui-primary);
711
+ --uui-btn-bg-hover: var(--uui-primary-dark);
712
+ --uui-btn-bg-active: var(--uui-primary-darkest);
713
+ --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
714
+ --uui-btn-bg-halftone-hover: var(--blue-0);
715
+ --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
716
+ --uui-btn-bg-disabled: var(--uui-disabled);
717
+ --uui-btn-border: var(--uui-primary);
718
+ --uui-btn-border-hover: var(--uui-primary-dark);
719
+ --uui-btn-border-active: var(--uui-primary-darkest);
720
+ --uui-btn-border-disabled: var(--uui-disabled);
721
+ --uui-btn-caption: var(--uui-contrast);
722
+ --uui-btn-caption-halftone: var(--uui-text-primary);
723
+ --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
724
+ }
725
+
726
+ .button-accent {
727
+ --uui-btn-bg: var(--uui-accent);
728
+ --uui-btn-bg-hover: var(--uui-accent-dark);
729
+ --uui-btn-bg-active: var(--uui-accent-darkest);
730
+ --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
731
+ --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
732
+ --uui-btn-bg-halftone-active: var(--uui-accent-light);
733
+ --uui-btn-border: var(--uui-accent);
734
+ --uui-btn-border-hover: var(--uui-accent-dark);
735
+ --uui-btn-border-active: var(--uui-accent-darkest);
736
+ --uui-btn-bg-disabled: var(--uui-disabled);
737
+ --uui-btn-border-disabled: var(--uui-disabled);
738
+ --uui-btn-caption: var(--uui-contrast);
739
+ --uui-btn-caption-halftone: var(--uui-text-primary);
740
+ --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
741
+ }
742
+
743
+ .button-negative {
744
+ --uui-btn-bg: var(--uui-negative);
745
+ --uui-btn-bg-hover: var(--uui-negative-dark);
746
+ --uui-btn-bg-active: var(--uui-negative-darkest);
747
+ --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
748
+ --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
749
+ --uui-btn-bg-halftone-active: var(--uui-negative-light);
750
+ --uui-btn-border: var(--uui-negative);
751
+ --uui-btn-border-hover: var(--uui-negative-dark);
752
+ --uui-btn-border-active: var(--uui-negative-darkest);
753
+ --uui-btn-bg-disabled: var(--uui-disabled);
754
+ --uui-btn-border-disabled: var(--uui-disabled);
755
+ --uui-btn-caption: var(--uui-contrast);
756
+ --uui-btn-caption-halftone: var(--uui-text-primary);
757
+ --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
758
+ }
759
+
760
+ .button-secondary {
761
+ --uui-btn-bg: var(--uui-secondary);
762
+ --uui-btn-bg-hover: var(--uui-secondary-dark);
763
+ --uui-btn-bg-active: var(--uui-secondary-darkest);
764
+ --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
765
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
766
+ --uui-btn-bg-halftone-active: var(--uui-secondary-light);
767
+ --uui-btn-border: var(--uui-secondary);
768
+ --uui-btn-border-hover: var(--uui-secondary-dark);
769
+ --uui-btn-border-active: var(--uui-secondary-darkest);
770
+ --uui-btn-bg-disabled: var(--uui-disabled);
771
+ --uui-btn-border-disabled: var(--uui-disabled);
772
+ --uui-btn-caption: var(--uui-contrast);
773
+ --uui-btn-caption-halftone: var(--uui-text-primary);
774
+ --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
775
+ }
776
+
777
+ .icon-button-info {
778
+ --uui-icon-btn: var(--uui-info);
779
+ --uui-icon-btn-hover: var(--uui-info-dark);
780
+ --uui-icon-btn-active: var(--uui-info-darkest);
781
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
782
+ }
783
+
784
+ .icon-button-success {
785
+ --uui-icon-btn: var(--uui-success);
786
+ --uui-icon-btn-hover: var(--uui-success-dark);
787
+ --uui-icon-btn-active: var(--uui-success-darkest);
788
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
789
+ }
790
+
791
+ .icon-button-warning {
792
+ --uui-icon-btn: var(--uui-warning);
793
+ --uui-icon-btn-hover: var(--uui-warning-dark);
794
+ --uui-icon-btn-active: var(--uui-warning-darkest);
795
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
796
+ }
797
+
798
+ .icon-button-error {
799
+ --uui-icon-btn: var(--uui-error);
800
+ --uui-icon-btn-hover: var(--uui-error-dark);
801
+ --uui-icon-btn-active: var(--uui-error-darkest);
802
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
803
+ }
804
+
805
+ .icon-button-secondary {
806
+ --uui-icon-btn: var(--gray50);
807
+ --uui-icon-btn-hover: var(--uui-color-night500-800);
808
+ --uui-icon-btn-active: var(--uui-color-night500-900);
809
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
810
+ }
811
+
812
+ .icon-button-default {
813
+ --uui-icon-btn: var(--gray60);
814
+ --uui-icon-btn-hover: var(--uui-color-night600-800);
815
+ --uui-icon-btn-active: var(--uui-color-night600-900);
816
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
817
+ }
818
+
819
+ .notification-card-warning {
820
+ --uui-notification-card-fill: var(--uui-warning);
821
+ --uui-notification-card-border: var(--uui-warning);
822
+ --uui-notification-card-bg: var(--uui-surface);
823
+ --uui-notification-card-text: var(--uui-text-primary);
824
+ }
825
+
826
+ .notification-card-success {
827
+ --uui-notification-card-fill: var(--uui-success);
828
+ --uui-notification-card-border: var(--uui-success);
829
+ --uui-notification-card-bg: var(--uui-surface);
830
+ --uui-notification-card-text: var(--uui-text-primary);
831
+ }
832
+
833
+ .notification-card-info {
834
+ --uui-notification-card-fill: var(--uui-info);
835
+ --uui-notification-card-border: var(--uui-info);
836
+ --uui-notification-card-bg: var(--uui-surface);
837
+ --uui-notification-card-text: var(--uui-text-primary);
838
+ }
839
+
840
+ .notification-card-error {
841
+ --uui-notification-card-fill: var(--uui-error);
842
+ --uui-notification-card-border: var(--uui-error);
843
+ --uui-notification-card-bg: var(--uui-surface);
844
+ --uui-notification-card-text: var(--uui-text-primary);
845
+ }
846
+
847
+ .alert-error {
848
+ --uui-alert-text: var(--uui-text-primary);
849
+ --uui-alert-bg: #F5E5E9;
850
+ --uui-alert-border: var(--uui-error);
851
+ --uui-alert-icon: var(--uui-error);
852
+ }
853
+
854
+ .alert-warning {
855
+ --uui-alert-text: var(--uui-text-primary);
856
+ --uui-alert-bg: #F6EEE1;
857
+ --uui-alert-border: var(--uui-warning);
858
+ --uui-alert-icon: var(--uui-warning);
859
+ }
860
+
861
+ .alert-success {
862
+ --uui-alert-text: var(--uui-text-primary);
863
+ --uui-alert-bg: #E7EEE1;
864
+ --uui-alert-border: var(--uui-success);
865
+ --uui-alert-icon: var(--uui-success);
866
+ }
867
+
868
+ .alert-info {
869
+ --uui-alert-text: var(--uui-text-primary);
870
+ --uui-alert-bg: #DCEDF6;
871
+ --uui-alert-border: var(--uui-info);
872
+ --uui-alert-icon: var(--uui-info);
873
+ }
874
+
875
+ .badge-default {
876
+ --uui-badge-bg: var(--night300);
877
+ --uui-badge-bg-hover: var(--night400);
878
+ --uui-badge-caption-solid: var(--uui-text-primary);
879
+ --uui-badge-count-bg: var(--white);
880
+ --uui-badge-count: var(--uui-text-secondary);
881
+ --uui-badge-bg-halftone: var(--night200);
882
+ --uui-badge-bg-halftone-hover: var(--night300);
883
+ --uui-badge-border-halftone: var(--night400);
884
+ --uui-badge-border-halftone-hover: var(--night500);
885
+ --uui-badge-caption-halftone: var(--uui-text-primary);
886
+ }
887
+
888
+ .badge-info {
889
+ --uui-badge-bg: var(--uui-info);
890
+ --uui-badge-bg-hover: var(--uui-info-dark);
891
+ --uui-badge-caption-solid: var(--white);
892
+ --uui-badge-count-bg: var(--white);
893
+ --uui-badge-count: var(--uui-text-secondary);
894
+ --uui-badge-bg-halftone: var(--uui-info-lightest);
895
+ --uui-badge-bg-halftone-hover: var(--uui-info-light);
896
+ --uui-badge-border-halftone: var(--uui-info-light);
897
+ --uui-badge-border-halftone-hover: var(--uui-info);
898
+ --uui-badge-caption-halftone: var(--uui-info-darkest);
899
+ }
900
+
901
+ .badge-success {
902
+ --uui-badge-bg: var(--uui-success);
903
+ --uui-badge-bg-hover: var(--uui-success-dark);
904
+ --uui-badge-caption-solid: var(--white);
905
+ --uui-badge-count-bg: var(--white);
906
+ --uui-badge-count: var(--uui-text-secondary);
907
+ --uui-badge-bg-halftone: var(--uui-success-lightest);
908
+ --uui-badge-bg-halftone-hover: var(--uui-success-light);
909
+ --uui-badge-border-halftone: var(--uui-success-light);
910
+ --uui-badge-border-halftone-hover: var(--uui-success);
911
+ --uui-badge-caption-halftone: var(--uui-success-darkest);
912
+ }
913
+
914
+ .badge-warning {
915
+ --uui-badge-bg: var(--uui-warning);
916
+ --uui-badge-bg-hover: var(--uui-warning-dark);
917
+ --uui-badge-caption-solid: var(--uui-text-primary);
918
+ --uui-badge-count-bg: var(--white);
919
+ --uui-badge-count: var(--uui-text-secondary);
920
+ --uui-badge-bg-halftone: var(--uui-warning-lightest);
921
+ --uui-badge-bg-halftone-hover: var(--uui-warning-light);
922
+ --uui-badge-border-halftone: var(--uui-warning-light);
923
+ --uui-badge-border-halftone-hover: var(--uui-warning);
924
+ --uui-badge-caption-halftone: var(--uui-warning-darkest);
925
+ }
926
+
927
+ .badge-error {
928
+ --uui-badge-bg: var(--uui-error);
929
+ --uui-badge-bg-hover: var(--uui-error-dark);
930
+ --uui-badge-caption-solid: var(--white);
931
+ --uui-badge-count-bg: var(--white);
932
+ --uui-badge-count: var(--uui-text-secondary);
933
+ --uui-badge-bg-halftone: var(--uui-error-lightest);
934
+ --uui-badge-bg-halftone-hover: var(--uui-error-light);
935
+ --uui-badge-border-halftone: var(--uui-error-light);
936
+ --uui-badge-border-halftone-hover: var(--uui-error);
937
+ --uui-badge-caption-halftone: var(--uui-error-darkest);
938
+ }
939
+
940
+ .informer-default {
941
+ --uui-informer-bg: var(--uui-secondary-light);
942
+ --uui-informer-caption: var(--uui-text-secondary);
943
+ }
944
+
945
+ .informer-focus {
946
+ --uui-informer-bg: var(--uui-negative);
947
+ --uui-informer-caption: var(--uui-caption);
948
+ }
949
+
950
+ .informer-white {
951
+ --uui-informer-bg: var(--uui-surface);
952
+ --uui-informer-caption: var(--uui-text-secondary);
953
+ }
954
+
955
+ .uui-text-brand {
956
+ --uui-text: var(--uui-text-brand);
957
+ }
958
+
959
+ .uui-text-primary {
960
+ --uui-text: var(--uui-text-primary);
961
+ }
962
+
963
+ .uui-text-secondary {
964
+ --uui-text: var(--uui-text-secondary);
965
+ }
966
+
967
+ .uui-text-disabled {
968
+ --uui-text: var(--uui-text-disabled);
969
+ }
970
+
971
+ .uui-text-contrast {
972
+ --uui-text: var(--uui-text-contrast);
973
+ }
974
+
975
+ .uui-font-inter, .uui-font-regular {
976
+ --uui-text-font: var(--font-inter);
977
+ }
978
+
979
+ .uui-font-museo-sans {
980
+ --uui-text-font: var(--font-museo-sans);
981
+ }
982
+
983
+ .uui-font-semibold {
984
+ --uui-text-font: var(--font-museo-sans);
985
+ --uui-text-font-weight: 700;
986
+ }
987
+
988
+ .dropdown-container-white {
989
+ --uui-dropdown-container-bg: var(--white);
990
+ }
991
+
992
+ .dropdown-container-night700 {
993
+ --uui-dropdown-container-bg: var(--night700);
994
+ }
995
+
996
+ .flex-row-background-white {
997
+ --uui-flex-row-bg: var(--uui-surface);
998
+ }
999
+
1000
+ .flex-row-background-night50 {
1001
+ --uui-flex-row-bg: var(--night50);
1002
+ }
1003
+
1004
+ .flex-row-background-night100 {
1005
+ --uui-flex-row-bg: var(--night100);
1006
+ }
1007
+
1008
+ .flex-row-background-none {
1009
+ --uui-flex-row-bg: transparent;
1010
+ }
1011
+
1012
+ .panel-white {
1013
+ --uui-panel-bg: var(--uui-surface);
1014
+ }
1015
+
1016
+ .panel-night50 {
1017
+ --uui-panel-bg: var(--night50);
1018
+ }
1019
+ }