@eturnity/eturnity_reusable_components 8.19.8-EPDM-13618.0 → 8.19.8-EPDM-14690.2

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 (575) hide show
  1. package/README.md +29 -29
  2. package/package.json +85 -85
  3. package/src/App.vue +30 -30
  4. package/src/DemoChart.vue +424 -0
  5. package/src/Test.vue +64 -64
  6. package/src/TestChart.vue +229 -0
  7. package/src/assets/icons/arrow_down.svg +3 -3
  8. package/src/assets/icons/arrow_up_red.svg +3 -3
  9. package/src/assets/icons/black_spinner.svg +35 -35
  10. package/src/assets/icons/delete_icon.svg +11 -11
  11. package/src/assets/icons/delete_icon_gray.svg +11 -11
  12. package/src/assets/icons/drag_icon.svg +8 -8
  13. package/src/assets/icons/external_icon.svg +6 -6
  14. package/src/assets/icons/language_icon.svg +6 -6
  15. package/src/assets/icons/pdf_icon.svg +6 -6
  16. package/src/assets/icons/plus_button.svg +4 -4
  17. package/src/assets/icons/search_icon_black.svg +3 -3
  18. package/src/assets/icons/subposition_icon.svg +3 -3
  19. package/src/assets/icons/subposition_marker.svg +3 -3
  20. package/src/assets/icons/warning_icon.svg +3 -3
  21. package/src/assets/svgIcons/2d_active.svg +7 -7
  22. package/src/assets/svgIcons/2d_inactive.svg +8 -8
  23. package/src/assets/svgIcons/3d_active.svg +7 -7
  24. package/src/assets/svgIcons/3d_inactive.svg +8 -8
  25. package/src/assets/svgIcons/_readme.md +7 -7
  26. package/src/assets/svgIcons/ac_power.svg +4 -4
  27. package/src/assets/svgIcons/accept.svg +5 -5
  28. package/src/assets/svgIcons/activate_panels_active.svg +22 -22
  29. package/src/assets/svgIcons/activate_panels_inactive.svg +20 -20
  30. package/src/assets/svgIcons/add_icon-1.svg +3 -3
  31. package/src/assets/svgIcons/add_icon.svg +4 -4
  32. package/src/assets/svgIcons/add_plus.svg +4 -4
  33. package/src/assets/svgIcons/address_book.svg +3 -3
  34. package/src/assets/svgIcons/adjust_roof.svg +6 -6
  35. package/src/assets/svgIcons/after_sale_as_a_service.svg +6 -6
  36. package/src/assets/svgIcons/all_good.svg +3 -3
  37. package/src/assets/svgIcons/angle_active.svg +5 -5
  38. package/src/assets/svgIcons/angle_inactive.svg +4 -4
  39. package/src/assets/svgIcons/area_active.svg +11 -11
  40. package/src/assets/svgIcons/area_inactive.svg +26 -26
  41. package/src/assets/svgIcons/areas_tool.svg +14 -14
  42. package/src/assets/svgIcons/arrow_down.svg +3 -3
  43. package/src/assets/svgIcons/arrow_down_unfilled.svg +4 -4
  44. package/src/assets/svgIcons/arrow_left.svg +4 -4
  45. package/src/assets/svgIcons/arrow_long_left.svg +3 -3
  46. package/src/assets/svgIcons/arrow_long_right.svg +3 -3
  47. package/src/assets/svgIcons/arrow_right.svg +4 -4
  48. package/src/assets/svgIcons/arrow_up.svg +3 -3
  49. package/src/assets/svgIcons/arrow_up_unfilled.svg +4 -4
  50. package/src/assets/svgIcons/attachment.svg +3 -3
  51. package/src/assets/svgIcons/base_layer.svg +3 -3
  52. package/src/assets/svgIcons/battery.svg +3 -3
  53. package/src/assets/svgIcons/bell.svg +3 -3
  54. package/src/assets/svgIcons/bell_alt.svg +3 -3
  55. package/src/assets/svgIcons/bexio.svg +4 -4
  56. package/src/assets/svgIcons/bold.svg +3 -3
  57. package/src/assets/svgIcons/bom.svg +3 -3
  58. package/src/assets/svgIcons/bom_generation.svg +10 -10
  59. package/src/assets/svgIcons/bookmaker.svg +3 -3
  60. package/src/assets/svgIcons/bubble.svg +3 -3
  61. package/src/assets/svgIcons/bug.svg +5 -5
  62. package/src/assets/svgIcons/buildings.svg +55 -55
  63. package/src/assets/svgIcons/bullet_list.svg +8 -8
  64. package/src/assets/svgIcons/calendar.svg +7 -7
  65. package/src/assets/svgIcons/calendar_icon.svg +7 -7
  66. package/src/assets/svgIcons/call.svg +3 -3
  67. package/src/assets/svgIcons/camera.svg +3 -3
  68. package/src/assets/svgIcons/car.svg +3 -3
  69. package/src/assets/svgIcons/cart.svg +3 -3
  70. package/src/assets/svgIcons/charger_icon_white.svg +44 -44
  71. package/src/assets/svgIcons/chassis_ground_symbol.svg +27 -27
  72. package/src/assets/svgIcons/checkbox.svg +3 -3
  73. package/src/assets/svgIcons/checkmark.svg +3 -3
  74. package/src/assets/svgIcons/checkmark_white.svg +4 -4
  75. package/src/assets/svgIcons/clear_formatting.svg +7 -7
  76. package/src/assets/svgIcons/clenergy.svg +3 -3
  77. package/src/assets/svgIcons/clickable_info.svg +4 -4
  78. package/src/assets/svgIcons/clickable_info_white.svg +5 -5
  79. package/src/assets/svgIcons/clip.svg +3 -3
  80. package/src/assets/svgIcons/clock.svg +17 -17
  81. package/src/assets/svgIcons/clock_full.svg +3 -3
  82. package/src/assets/svgIcons/close.svg +4 -4
  83. package/src/assets/svgIcons/co_branding.svg +5 -5
  84. package/src/assets/svgIcons/collapse.svg +4 -4
  85. package/src/assets/svgIcons/collapse_all.svg +3 -3
  86. package/src/assets/svgIcons/collections.svg +3 -3
  87. package/src/assets/svgIcons/component_library.svg +7 -7
  88. package/src/assets/svgIcons/consumption_tariffs.svg +43 -43
  89. package/src/assets/svgIcons/context_menu-1.svg +6 -6
  90. package/src/assets/svgIcons/context_menu-2.svg +5 -5
  91. package/src/assets/svgIcons/context_menu.svg +5 -5
  92. package/src/assets/svgIcons/context_menu_tabs.svg +5 -5
  93. package/src/assets/svgIcons/cross.svg +4 -4
  94. package/src/assets/svgIcons/current_variant.svg +4 -4
  95. package/src/assets/svgIcons/customer.svg +3 -3
  96. package/src/assets/svgIcons/dashboard.svg +3 -3
  97. package/src/assets/svgIcons/data_transfer.svg +3 -3
  98. package/src/assets/svgIcons/deadline.svg +4 -4
  99. package/src/assets/svgIcons/deal_flow.svg +3 -3
  100. package/src/assets/svgIcons/delete.svg +4 -4
  101. package/src/assets/svgIcons/delete_area_active.svg +16 -16
  102. package/src/assets/svgIcons/delete_area_inactive.svg +15 -15
  103. package/src/assets/svgIcons/direction_active-1.svg +12 -12
  104. package/src/assets/svgIcons/direction_active.svg +5 -5
  105. package/src/assets/svgIcons/direction_arrow.svg +4 -4
  106. package/src/assets/svgIcons/direction_inactive.svg +4 -4
  107. package/src/assets/svgIcons/dislike.svg +3 -3
  108. package/src/assets/svgIcons/distance_tool.svg +8 -8
  109. package/src/assets/svgIcons/distances_active.svg +9 -9
  110. package/src/assets/svgIcons/distances_inactive.svg +8 -8
  111. package/src/assets/svgIcons/distort_tool.svg +10 -10
  112. package/src/assets/svgIcons/distort_tool2.svg +16 -16
  113. package/src/assets/svgIcons/document.svg +3 -3
  114. package/src/assets/svgIcons/documents.svg +3 -3
  115. package/src/assets/svgIcons/documents_landscape.svg +3 -3
  116. package/src/assets/svgIcons/double_arrow_long.svg +4 -4
  117. package/src/assets/svgIcons/downarrow.svg +3 -3
  118. package/src/assets/svgIcons/download.svg +4 -4
  119. package/src/assets/svgIcons/drag_icon.svg +8 -8
  120. package/src/assets/svgIcons/draggable_corner.svg +5 -5
  121. package/src/assets/svgIcons/draw_tool.svg +3 -3
  122. package/src/assets/svgIcons/duplicate-1.svg +8 -8
  123. package/src/assets/svgIcons/duplicate-2.svg +5 -5
  124. package/src/assets/svgIcons/duplicate.svg +3 -3
  125. package/src/assets/svgIcons/e-mobility_configurator.svg +6 -6
  126. package/src/assets/svgIcons/e_signature.svg +5 -5
  127. package/src/assets/svgIcons/ed_ac.svg +3 -3
  128. package/src/assets/svgIcons/ed_ac_path.svg +3 -3
  129. package/src/assets/svgIcons/ed_acgrid.svg +3 -3
  130. package/src/assets/svgIcons/ed_acgrid_old.svg +4 -4
  131. package/src/assets/svgIcons/ed_arrow_both.svg +3 -3
  132. package/src/assets/svgIcons/ed_arrow_left.svg +3 -3
  133. package/src/assets/svgIcons/ed_arrow_right.svg +3 -3
  134. package/src/assets/svgIcons/ed_battery.svg +3 -3
  135. package/src/assets/svgIcons/ed_batteryacinverter.svg +3 -3
  136. package/src/assets/svgIcons/ed_batteryintegratedinverter.svg +3 -3
  137. package/src/assets/svgIcons/ed_cirquitbreaker.svg +3 -3
  138. package/src/assets/svgIcons/ed_cirquitbreaker_magnetic.svg +3 -3
  139. package/src/assets/svgIcons/ed_cirquitbreaker_thermal.svg +3 -3
  140. package/src/assets/svgIcons/ed_cirquitbreaker_thermal_magnetic.svg +3 -3
  141. package/src/assets/svgIcons/ed_consumption.svg +3 -3
  142. package/src/assets/svgIcons/ed_dc.svg +3 -3
  143. package/src/assets/svgIcons/ed_disconnector.svg +3 -3
  144. package/src/assets/svgIcons/ed_disconnector_fuse.svg +3 -3
  145. package/src/assets/svgIcons/ed_disconnector_fuse_switch.svg +3 -3
  146. package/src/assets/svgIcons/ed_disconnector_loadbreak_switch.svg +3 -3
  147. package/src/assets/svgIcons/ed_disconnector_switch.svg +3 -3
  148. package/src/assets/svgIcons/ed_disconnector_switch_auto_release.svg +3 -3
  149. package/src/assets/svgIcons/ed_energymanagement_rectangle.svg +3 -3
  150. package/src/assets/svgIcons/ed_evcharger.svg +3 -3
  151. package/src/assets/svgIcons/ed_flexiblecomponent_circle.svg +3 -3
  152. package/src/assets/svgIcons/ed_flexiblecomponent_square.svg +3 -3
  153. package/src/assets/svgIcons/ed_fuse.svg +3 -3
  154. package/src/assets/svgIcons/ed_ground.svg +3 -3
  155. package/src/assets/svgIcons/ed_heatpump.svg +3 -3
  156. package/src/assets/svgIcons/ed_icon_battery.svg +3 -3
  157. package/src/assets/svgIcons/ed_icon_circle.svg +3 -3
  158. package/src/assets/svgIcons/ed_icon_heatpump.svg +3 -3
  159. package/src/assets/svgIcons/ed_icon_inverter.svg +8 -8
  160. package/src/assets/svgIcons/ed_icon_m.svg +3 -3
  161. package/src/assets/svgIcons/ed_icon_optimizer.svg +11 -11
  162. package/src/assets/svgIcons/ed_icon_optimizer_path.svg +11 -11
  163. package/src/assets/svgIcons/ed_integratedbatteryinverter.svg +3 -3
  164. package/src/assets/svgIcons/ed_inverter-blank.svg +3 -3
  165. package/src/assets/svgIcons/ed_mainsconnection.svg +3 -3
  166. package/src/assets/svgIcons/ed_meter-blank.svg +3 -3
  167. package/src/assets/svgIcons/ed_meter_arrowleft.svg +3 -3
  168. package/src/assets/svgIcons/ed_meter_arrowright.svg +3 -3
  169. package/src/assets/svgIcons/ed_meter_bidirectional.svg +3 -3
  170. package/src/assets/svgIcons/ed_networkandsystemprotection_double.svg +3 -3
  171. package/src/assets/svgIcons/ed_networkandsystemprotection_single.svg +3 -3
  172. package/src/assets/svgIcons/ed_pvpanel (Stroke).svg +3 -3
  173. package/src/assets/svgIcons/ed_pvpanel.svg +3 -3
  174. package/src/assets/svgIcons/ed_rcd.svg +3 -3
  175. package/src/assets/svgIcons/ed_rcd_simple.svg +3 -3
  176. package/src/assets/svgIcons/ed_spd.svg +3 -3
  177. package/src/assets/svgIcons/ed_stringwithoptimizer.svg +5 -5
  178. package/src/assets/svgIcons/ed_stringwithoutoptimizer.svg +7 -7
  179. package/src/assets/svgIcons/ed_transformer.svg +3 -3
  180. package/src/assets/svgIcons/edit.svg +3 -3
  181. package/src/assets/svgIcons/edit_button.svg +3 -3
  182. package/src/assets/svgIcons/edit_stroke.svg +3 -3
  183. package/src/assets/svgIcons/efs.svg +5 -5
  184. package/src/assets/svgIcons/electricity_tariff.svg +3 -3
  185. package/src/assets/svgIcons/email.svg +3 -3
  186. package/src/assets/svgIcons/ems-1.svg +3 -3
  187. package/src/assets/svgIcons/ems.svg +3 -3
  188. package/src/assets/svgIcons/end_of_the_list.svg +5 -5
  189. package/src/assets/svgIcons/energy_meter.svg +3 -3
  190. package/src/assets/svgIcons/erase.svg +4 -4
  191. package/src/assets/svgIcons/erase_white.svg +4 -4
  192. package/src/assets/svgIcons/expand_all.svg +4 -4
  193. package/src/assets/svgIcons/export_document.svg +3 -3
  194. package/src/assets/svgIcons/external_icon.svg +5 -5
  195. package/src/assets/svgIcons/fav_icon.svg +4 -4
  196. package/src/assets/svgIcons/filter.svg +3 -3
  197. package/src/assets/svgIcons/finance.svg +3 -3
  198. package/src/assets/svgIcons/financing_for_pv-1.svg +5 -5
  199. package/src/assets/svgIcons/financing_for_pv-2.svg +3 -3
  200. package/src/assets/svgIcons/financing_for_pv.svg +3 -3
  201. package/src/assets/svgIcons/finish-1.svg +4 -4
  202. package/src/assets/svgIcons/finish.svg +3 -3
  203. package/src/assets/svgIcons/flatten.svg +11 -11
  204. package/src/assets/svgIcons/flatten_roof.svg +20 -20
  205. package/src/assets/svgIcons/folder.svg +3 -3
  206. package/src/assets/svgIcons/free_technology.svg +3 -3
  207. package/src/assets/svgIcons/ground_symbol.svg +28 -28
  208. package/src/assets/svgIcons/handle.svg +5 -5
  209. package/src/assets/svgIcons/heat_calc.svg +7 -7
  210. package/src/assets/svgIcons/heat_pump.svg +5 -5
  211. package/src/assets/svgIcons/heating_system.svg +3 -3
  212. package/src/assets/svgIcons/height_equalize.svg +3 -3
  213. package/src/assets/svgIcons/height_snap.svg +3 -3
  214. package/src/assets/svgIcons/house.svg +3 -3
  215. package/src/assets/svgIcons/house_3d-1.svg +7 -7
  216. package/src/assets/svgIcons/house_3d.svg +7 -7
  217. package/src/assets/svgIcons/house_sun.svg +3 -3
  218. package/src/assets/svgIcons/hybrid.svg +4 -4
  219. package/src/assets/svgIcons/inclination.svg +2 -2
  220. package/src/assets/svgIcons/info.svg +3 -3
  221. package/src/assets/svgIcons/initial_situation.svg +3 -3
  222. package/src/assets/svgIcons/integrations.svg +3 -3
  223. package/src/assets/svgIcons/intro-tour-1.svg +3 -3
  224. package/src/assets/svgIcons/intro-tour.svg +3 -3
  225. package/src/assets/svgIcons/inverter.svg +3 -3
  226. package/src/assets/svgIcons/italic.svg +3 -3
  227. package/src/assets/svgIcons/k2.svg +4 -4
  228. package/src/assets/svgIcons/kanban_view.svg +6 -6
  229. package/src/assets/svgIcons/key.svg +3 -3
  230. package/src/assets/svgIcons/lake.svg +29 -29
  231. package/src/assets/svgIcons/layers_close.svg +4 -4
  232. package/src/assets/svgIcons/layers_open.svg +4 -4
  233. package/src/assets/svgIcons/lead_marketplace.svg +6 -6
  234. package/src/assets/svgIcons/lead_provider.svg +4 -4
  235. package/src/assets/svgIcons/legend.svg +3 -3
  236. package/src/assets/svgIcons/length_2d.svg +2 -2
  237. package/src/assets/svgIcons/length_3d.svg +4 -4
  238. package/src/assets/svgIcons/length_calculator.svg +2 -2
  239. package/src/assets/svgIcons/length_in_2d_active.svg +12 -12
  240. package/src/assets/svgIcons/length_in_2d_inctive.svg +13 -13
  241. package/src/assets/svgIcons/light_bulb.svg +3 -3
  242. package/src/assets/svgIcons/like.svg +3 -3
  243. package/src/assets/svgIcons/line_graph.svg +3 -3
  244. package/src/assets/svgIcons/local_subsidies.svg +18 -18
  245. package/src/assets/svgIcons/location.svg +3 -3
  246. package/src/assets/svgIcons/lock.svg +3 -3
  247. package/src/assets/svgIcons/logout.svg +3 -3
  248. package/src/assets/svgIcons/loop.svg +3 -3
  249. package/src/assets/svgIcons/low-vegetation.svg +37 -37
  250. package/src/assets/svgIcons/lunch.svg +4 -4
  251. package/src/assets/svgIcons/magic_tool.svg +6 -6
  252. package/src/assets/svgIcons/map_icon.svg +5 -5
  253. package/src/assets/svgIcons/map_settings.svg +3 -3
  254. package/src/assets/svgIcons/margin_tool.svg +4 -4
  255. package/src/assets/svgIcons/meeting.svg +6 -6
  256. package/src/assets/svgIcons/module.svg +3 -3
  257. package/src/assets/svgIcons/move_copy.svg +4 -4
  258. package/src/assets/svgIcons/move_down.svg +3 -3
  259. package/src/assets/svgIcons/move_left.svg +3 -3
  260. package/src/assets/svgIcons/move_right.svg +3 -3
  261. package/src/assets/svgIcons/move_up.svg +3 -3
  262. package/src/assets/svgIcons/new_area_inactive.svg +11 -11
  263. package/src/assets/svgIcons/next.svg +4 -4
  264. package/src/assets/svgIcons/normal-tg.svg +30 -30
  265. package/src/assets/svgIcons/normal-vegetation.svg +53 -53
  266. package/src/assets/svgIcons/not_equal_to.svg +3 -3
  267. package/src/assets/svgIcons/numbered_list.svg +6 -6
  268. package/src/assets/svgIcons/obstacle_tool.svg +8 -8
  269. package/src/assets/svgIcons/obstacle_tool_origin.svg +3 -3
  270. package/src/assets/svgIcons/offset_tool.svg +8 -8
  271. package/src/assets/svgIcons/open-tg.svg +21 -21
  272. package/src/assets/svgIcons/optimizer.svg +3 -3
  273. package/src/assets/svgIcons/order.svg +3 -3
  274. package/src/assets/svgIcons/outline_tool.svg +11 -11
  275. package/src/assets/svgIcons/pan_tool.svg +12 -12
  276. package/src/assets/svgIcons/panels_tool.svg +8 -8
  277. package/src/assets/svgIcons/pen_tool.svg +4 -4
  278. package/src/assets/svgIcons/picker_tool.svg +4 -4
  279. package/src/assets/svgIcons/picture.svg +3 -3
  280. package/src/assets/svgIcons/pin.svg +5 -5
  281. package/src/assets/svgIcons/plus_button.svg +4 -4
  282. package/src/assets/svgIcons/presentation.svg +3 -3
  283. package/src/assets/svgIcons/preview.svg +3 -3
  284. package/src/assets/svgIcons/previous.svg +4 -4
  285. package/src/assets/svgIcons/profile-1.svg +4 -4
  286. package/src/assets/svgIcons/profile.svg +3 -3
  287. package/src/assets/svgIcons/profitability.svg +3 -3
  288. package/src/assets/svgIcons/project_analysis.svg +3 -3
  289. package/src/assets/svgIcons/project_settings.svg +3 -3
  290. package/src/assets/svgIcons/protected-tg.svg +47 -47
  291. package/src/assets/svgIcons/pv.svg +3 -3
  292. package/src/assets/svgIcons/question_mark.svg +3 -3
  293. package/src/assets/svgIcons/question_mark_white.svg +4 -4
  294. package/src/assets/svgIcons/quotations.svg +6 -6
  295. package/src/assets/svgIcons/rectangle.svg +3 -3
  296. package/src/assets/svgIcons/redo.svg +6 -6
  297. package/src/assets/svgIcons/refresh.svg +3 -3
  298. package/src/assets/svgIcons/reorder_string.svg +3 -3
  299. package/src/assets/svgIcons/resizer.svg +5 -5
  300. package/src/assets/svgIcons/roof_layer.svg +3 -3
  301. package/src/assets/svgIcons/rotate_tool.svg +3 -3
  302. package/src/assets/svgIcons/rotate_view.svg +5 -5
  303. package/src/assets/svgIcons/ruler_tool.svg +3 -3
  304. package/src/assets/svgIcons/run_simulation.svg +3 -3
  305. package/src/assets/svgIcons/save.svg +3 -3
  306. package/src/assets/svgIcons/scaling_tool.svg +8 -8
  307. package/src/assets/svgIcons/sea.svg +34 -34
  308. package/src/assets/svgIcons/search.svg +3 -3
  309. package/src/assets/svgIcons/security.svg +3 -3
  310. package/src/assets/svgIcons/settings.svg +3 -3
  311. package/src/assets/svgIcons/show_in_a_new_tab.svg +12 -12
  312. package/src/assets/svgIcons/smartphone.svg +4 -4
  313. package/src/assets/svgIcons/solar_calc.svg +13 -13
  314. package/src/assets/svgIcons/solarmarkt.svg +3 -3
  315. package/src/assets/svgIcons/sorting.svg +4 -4
  316. package/src/assets/svgIcons/split.svg +12 -12
  317. package/src/assets/svgIcons/star.svg +3 -3
  318. package/src/assets/svgIcons/start_of_the_list.svg +5 -5
  319. package/src/assets/svgIcons/strikethrough.svg +4 -4
  320. package/src/assets/svgIcons/string_design.svg +5 -5
  321. package/src/assets/svgIcons/string_directions.svg +10 -10
  322. package/src/assets/svgIcons/subscriptions.svg +3 -3
  323. package/src/assets/svgIcons/subsidies-2.svg +3 -3
  324. package/src/assets/svgIcons/subsidies.svg +3 -3
  325. package/src/assets/svgIcons/subtract_icon.svg +3 -3
  326. package/src/assets/svgIcons/suitcase.svg +3 -3
  327. package/src/assets/svgIcons/summer.svg +3 -3
  328. package/src/assets/svgIcons/switch_polarity.svg +5 -5
  329. package/src/assets/svgIcons/table_view.svg +3 -3
  330. package/src/assets/svgIcons/template_icon_not_clickable.svg +6 -6
  331. package/src/assets/svgIcons/text_column_one.svg +6 -6
  332. package/src/assets/svgIcons/text_column_three.svg +14 -14
  333. package/src/assets/svgIcons/text_column_two.svg +10 -10
  334. package/src/assets/svgIcons/text_icon.svg +3 -3
  335. package/src/assets/svgIcons/transfer.svg +4 -4
  336. package/src/assets/svgIcons/transparent_warning.svg +4 -4
  337. package/src/assets/svgIcons/trim_tool.svg +4 -4
  338. package/src/assets/svgIcons/truck.svg +3 -3
  339. package/src/assets/svgIcons/underlined.svg +3 -3
  340. package/src/assets/svgIcons/undo.svg +6 -6
  341. package/src/assets/svgIcons/uparrow.svg +3 -3
  342. package/src/assets/svgIcons/update.svg +3 -3
  343. package/src/assets/svgIcons/upload_avatar-1.svg +12 -12
  344. package/src/assets/svgIcons/upload_avatar.svg +5 -5
  345. package/src/assets/svgIcons/upload_image.svg +8 -8
  346. package/src/assets/svgIcons/upload_image_tool.svg +7 -7
  347. package/src/assets/svgIcons/variants.svg +3 -3
  348. package/src/assets/svgIcons/vdv.svg +5 -5
  349. package/src/assets/svgIcons/vertical_tool.svg +3 -3
  350. package/src/assets/svgIcons/virtual_storage.svg +3 -3
  351. package/src/assets/svgIcons/warning.svg +4 -4
  352. package/src/assets/svgIcons/warning_triangle.svg +3 -3
  353. package/src/assets/svgIcons/warning_triangle_white.svg +5 -5
  354. package/src/assets/svgIcons/way.svg +5 -5
  355. package/src/assets/svgIcons/wifi.svg +3 -3
  356. package/src/assets/svgIcons/winter.svg +3 -3
  357. package/src/assets/svgIcons/workflow_template.svg +11 -11
  358. package/src/assets/svgIcons//360/237/223/221 Documents/ed_ac.svg" +3 -3
  359. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_both.svg" +7 -7
  360. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_left.svg" +7 -7
  361. package/src/assets/svgIcons//360/237/223/221 Documents/ed_arrow_right.svg" +7 -7
  362. package/src/assets/svgIcons//360/237/223/221 Documents/ed_battery.svg" +4 -4
  363. package/src/assets/svgIcons//360/237/223/221 Documents/ed_batteryacinverter.svg" +5 -5
  364. package/src/assets/svgIcons//360/237/223/221 Documents/ed_batteryintegratedinverter.svg" +5 -5
  365. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker.svg" +6 -6
  366. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_magnetic.svg" +9 -9
  367. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_thermal.svg" +5 -5
  368. package/src/assets/svgIcons//360/237/223/221 Documents/ed_cirquitbreaker_thermal_magnetic.svg" +10 -10
  369. package/src/assets/svgIcons//360/237/223/221 Documents/ed_consumption.svg" +5 -5
  370. package/src/assets/svgIcons//360/237/223/221 Documents/ed_dc.svg" +3 -3
  371. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector.svg" +5 -5
  372. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_fuse.svg" +6 -6
  373. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_fuse_switch.svg" +7 -7
  374. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_loadbreak_switch.svg" +7 -7
  375. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_switch.svg" +6 -6
  376. package/src/assets/svgIcons//360/237/223/221 Documents/ed_disconnector_switch_auto_release.svg" +7 -7
  377. package/src/assets/svgIcons//360/237/223/221 Documents/ed_energymanagement_rectangle.svg" +3 -3
  378. package/src/assets/svgIcons//360/237/223/221 Documents/ed_evcharger.svg" +8 -8
  379. package/src/assets/svgIcons//360/237/223/221 Documents/ed_flexiblecomponent_circle.svg" +3 -3
  380. package/src/assets/svgIcons//360/237/223/221 Documents/ed_flexiblecomponent_square.svg" +3 -3
  381. package/src/assets/svgIcons//360/237/223/221 Documents/ed_fuse.svg" +4 -4
  382. package/src/assets/svgIcons//360/237/223/221 Documents/ed_ground.svg" +6 -6
  383. package/src/assets/svgIcons//360/237/223/221 Documents/ed_heatpump.svg" +4 -4
  384. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_battery.svg" +3 -3
  385. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_circle.svg" +3 -3
  386. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_heatpump.svg" +3 -3
  387. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_inverter.svg" +3 -3
  388. package/src/assets/svgIcons//360/237/223/221 Documents/ed_icon_optimizer.svg" +3 -3
  389. package/src/assets/svgIcons//360/237/223/221 Documents/ed_integratedbatteryinverter.svg" +3 -3
  390. package/src/assets/svgIcons//360/237/223/221 Documents/ed_inverter-blank.svg" +3 -3
  391. package/src/assets/svgIcons//360/237/223/221 Documents/ed_mainsconnection.svg" +3 -3
  392. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter-blank.svg" +3 -3
  393. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_arrowleft.svg" +8 -8
  394. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_arrowright.svg" +8 -8
  395. package/src/assets/svgIcons//360/237/223/221 Documents/ed_meter_bidirectional.svg" +8 -8
  396. package/src/assets/svgIcons//360/237/223/221 Documents/ed_networkandsystemprotection_double.svg" +15 -15
  397. package/src/assets/svgIcons//360/237/223/221 Documents/ed_networkandsystemprotection_single.svg" +10 -10
  398. package/src/assets/svgIcons//360/237/223/221 Documents/ed_pvpanel.svg" +7 -7
  399. package/src/assets/svgIcons//360/237/223/221 Documents/ed_rcd.svg" +7 -7
  400. package/src/assets/svgIcons//360/237/223/221 Documents/ed_rcd_simple.svg" +4 -4
  401. package/src/assets/svgIcons//360/237/223/221 Documents/ed_spd.svg" +9 -9
  402. package/src/assets/svgIcons//360/237/223/221 Documents/ed_stringwithoptimizer.svg" +5 -5
  403. package/src/assets/svgIcons//360/237/223/221 Documents/ed_stringwithoutoptimizer.svg" +13 -13
  404. package/src/assets/svgIcons//360/237/223/221 Documents/ed_transformer.svg" +6 -6
  405. package/src/assets/tests/__mocks__/iconCache.js +1 -1
  406. package/src/assets/tests/__mocks__/svgMock.js +1 -1
  407. package/src/assets/tests/helpers.js +12 -12
  408. package/src/assets/theme.js +688 -700
  409. package/src/components/addNewButton/AddNewButton.stories.js +17 -17
  410. package/src/components/addNewButton/addNewButton.spec.js +23 -23
  411. package/src/components/addNewButton/index.vue +66 -66
  412. package/src/components/banner/actionBanner/ActionBanner.stories.js +45 -45
  413. package/src/components/banner/actionBanner/actionBanner.spec.js +76 -76
  414. package/src/components/banner/actionBanner/index.vue +86 -86
  415. package/src/components/banner/banner/Banner.stories.js +120 -120
  416. package/src/components/banner/banner/banner.spec.js +149 -149
  417. package/src/components/banner/banner/index.vue +205 -205
  418. package/src/components/banner/infoBanner/InfoBanner.spec.js +57 -57
  419. package/src/components/banner/infoBanner/InfoBanner.stories.js +84 -84
  420. package/src/components/banner/infoBanner/index.vue +97 -97
  421. package/src/components/banner/notificationBanner/index.vue +131 -131
  422. package/src/components/barchart/BottomFields.vue +337 -253
  423. package/src/components/barchart/ChartControls.vue +113 -113
  424. package/src/components/barchart/SelectionBox.vue +150 -150
  425. package/src/components/barchart/composables/index.js +5 -5
  426. package/src/components/barchart/composables/useAxisCalculations.js +104 -104
  427. package/src/components/barchart/composables/useChartData.js +114 -114
  428. package/src/components/barchart/composables/useChartScroll.js +61 -61
  429. package/src/components/barchart/composables/useSelection.js +75 -75
  430. package/src/components/barchart/composables/useTooltip.js +125 -100
  431. package/src/components/barchart/index.vue +423 -385
  432. package/src/components/barchart/styles/bottomFields.js +80 -66
  433. package/src/components/barchart/styles/chart.js +273 -272
  434. package/src/components/barchart/styles/chartControls.js +59 -59
  435. package/src/components/buttons/buttonIcon/ButtonIcon.stories.js +167 -167
  436. package/src/components/buttons/buttonIcon/index.vue +301 -301
  437. package/src/components/buttons/closeButton/CloseButton.stories.js +25 -25
  438. package/src/components/buttons/closeButton/index.vue +62 -62
  439. package/src/components/buttons/mainButton/MainButton.stories.js +145 -145
  440. package/src/components/buttons/mainButton/index.vue +248 -256
  441. package/src/components/buttons/mainButton/mainButton.spec.js +35 -35
  442. package/src/components/buttons/splitButtons/index.vue +86 -86
  443. package/src/components/card/Card.stories.js +79 -79
  444. package/src/components/card/card.spec.js +135 -135
  445. package/src/components/card/index.vue +116 -116
  446. package/src/components/collapsableInfoText/index.vue +127 -127
  447. package/src/components/deleteIcon/DeleteIcon.stories.js +29 -29
  448. package/src/components/deleteIcon/index.vue +78 -78
  449. package/src/components/draggableCard/defaultProps.js +16 -16
  450. package/src/components/draggableCard/draggableCard.spec.js +99 -99
  451. package/src/components/draggableCard/draggableCard.stories.js +135 -135
  452. package/src/components/draggableCard/index.vue +363 -363
  453. package/src/components/draggableInputHandle/index.vue +46 -46
  454. package/src/components/dropdown/Dropdown.stories.js +53 -53
  455. package/src/components/dropdown/index.vue +138 -146
  456. package/src/components/errorMessage/errorMessage.spec.js +34 -34
  457. package/src/components/errorMessage/errorMessage.stories.js +35 -35
  458. package/src/components/errorMessage/index.vue +64 -64
  459. package/src/components/filter/filterSettings.vue +672 -672
  460. package/src/components/filter/index.vue +154 -154
  461. package/src/components/filter/parentDropdown.vue +91 -91
  462. package/src/components/filterComponent/viewFilter.vue +605 -605
  463. package/src/components/filterComponent/viewSettings.vue +281 -281
  464. package/src/components/filterComponent/viewSort.vue +330 -330
  465. package/src/components/icon/Icon.stories.js +220 -220
  466. package/src/components/icon/icon.spec.js +66 -66
  467. package/src/components/icon/iconCache.mjs +23 -23
  468. package/src/components/icon/iconCollection.vue +83 -83
  469. package/src/components/icon/index.vue +240 -240
  470. package/src/components/iconWrapper/index.vue +184 -184
  471. package/src/components/infoCard/InfoCard.stories.js +170 -170
  472. package/src/components/infoCard/defaultProps.js +7 -7
  473. package/src/components/infoCard/index.vue +172 -160
  474. package/src/components/infoCard/infoCard.spec.js +64 -64
  475. package/src/components/infoLabel/index.vue +63 -63
  476. package/src/components/infoText/constants.js +4 -4
  477. package/src/components/infoText/index.vue +650 -645
  478. package/src/components/infoText/infoText.spec.js +67 -67
  479. package/src/components/infoText/infoText.stories.js +48 -48
  480. package/src/components/infoText/placeholder.vue +225 -225
  481. package/src/components/inputs/checkbox/Checkbox.stories.js +63 -63
  482. package/src/components/inputs/checkbox/checkbox.spec.js +109 -109
  483. package/src/components/inputs/checkbox/index.vue +250 -250
  484. package/src/components/inputs/inputNumber/InputNumber.stories.js +150 -150
  485. package/src/components/inputs/inputNumber/index.vue +1088 -1006
  486. package/src/components/inputs/inputNumberQuestion/index.vue +218 -218
  487. package/src/components/inputs/inputText/InputText.stories.js +70 -70
  488. package/src/components/inputs/inputText/index.vue +478 -478
  489. package/src/components/inputs/inputText/inputText.spec.js +588 -588
  490. package/src/components/inputs/radioButton/RadioButton.stories.js +77 -77
  491. package/src/components/inputs/radioButton/defaultProps.js +31 -31
  492. package/src/components/inputs/radioButton/index.vue +336 -336
  493. package/src/components/inputs/radioButton/radioButton.spec.js +306 -306
  494. package/src/components/inputs/searchInput/SearchInput.stories.js +66 -66
  495. package/src/components/inputs/searchInput/defaultProps.js +12 -12
  496. package/src/components/inputs/searchInput/index.vue +181 -181
  497. package/src/components/inputs/searchInput/searchInput.spec.js +64 -64
  498. package/src/components/inputs/select/index.vue +1080 -1080
  499. package/src/components/inputs/select/option/index.vue +176 -176
  500. package/src/components/inputs/select/select.stories.js +58 -58
  501. package/src/components/inputs/slider/index.vue +126 -126
  502. package/src/components/inputs/switchField/index.vue +266 -266
  503. package/src/components/inputs/textAreaInput/TextAreaInput.stories.js +127 -127
  504. package/src/components/inputs/textAreaInput/index.vue +204 -204
  505. package/src/components/inputs/toggle/Toggle.stories.js +77 -77
  506. package/src/components/inputs/toggle/index.vue +322 -322
  507. package/src/components/inputs/toggle/toggle.spec.js +102 -102
  508. package/src/components/label/index.vue +98 -98
  509. package/src/components/markerItem/index.vue +95 -95
  510. package/src/components/modals/actionModal/actionModal.spec.js +52 -52
  511. package/src/components/modals/actionModal/actionModal.stories.js +53 -53
  512. package/src/components/modals/actionModal/index.vue +64 -64
  513. package/src/components/modals/infoModal/index.vue +82 -82
  514. package/src/components/modals/infoModal/infoModal.spec.js +55 -55
  515. package/src/components/modals/infoModal/infoModal.stories.js +47 -47
  516. package/src/components/modals/modal/index.vue +211 -211
  517. package/src/components/modals/modal/modal.stories.js +31 -31
  518. package/src/components/navigationTabs/index.vue +114 -114
  519. package/src/components/pageSubtitle/PageSubtitle.stories.js +58 -58
  520. package/src/components/pageSubtitle/index.vue +78 -78
  521. package/src/components/pageSubtitle/pageSubtitle.spec.js +46 -46
  522. package/src/components/pageTitle/PageTitle.stories.js +95 -95
  523. package/src/components/pageTitle/index.vue +90 -91
  524. package/src/components/pageTitle/pageTitle.spec.js +46 -46
  525. package/src/components/pagination/index.vue +148 -148
  526. package/src/components/paginationV2/index.vue +175 -175
  527. package/src/components/panelRangeInfo/index.vue +196 -196
  528. package/src/components/progressBar/index.vue +125 -116
  529. package/src/components/projectMarker/ProjectMarker.stories.js +130 -130
  530. package/src/components/projectMarker/index.vue +301 -301
  531. package/src/components/rangeSlider/Slider.vue +578 -578
  532. package/src/components/rangeSlider/index.vue +517 -517
  533. package/src/components/rangeSlider/utils/dom.js +49 -49
  534. package/src/components/rangeSlider/utils/fns.js +26 -26
  535. package/src/components/roundTabs/index.vue +107 -107
  536. package/src/components/selectedOptions/index.vue +473 -473
  537. package/src/components/selectedOptions/selectedOptions.spec.js +176 -176
  538. package/src/components/selectedOptions/selectedOptions.stories.js +253 -253
  539. package/src/components/sideMenu/index.vue +325 -325
  540. package/src/components/spinner/Spinner.stories.js +86 -86
  541. package/src/components/spinner/index.vue +129 -129
  542. package/src/components/spinner/spinner.spec.js +69 -69
  543. package/src/components/spinnerGif/SpinnerGif.stories.js +86 -86
  544. package/src/components/spinnerGif/index.vue +98 -98
  545. package/src/components/tableDropdown/TableDropdown.stories.js +192 -192
  546. package/src/components/tableDropdown/index.vue +692 -692
  547. package/src/components/tables/mainTable/MainTable.stories.js +151 -151
  548. package/src/components/tables/mainTable/exampleNested.vue +328 -328
  549. package/src/components/tables/mainTable/index.vue +523 -524
  550. package/src/components/tables/viewTable/index.vue +195 -195
  551. package/src/components/tabsHeader/TabsHeader.stories.js +142 -142
  552. package/src/components/tabsHeader/index.vue +150 -150
  553. package/src/components/threeDots/index.vue +413 -413
  554. package/src/components/videoThumbnail/index.vue +103 -103
  555. package/src/components/videoThumbnail/videoThumbnail.stories.js +106 -106
  556. package/src/helpers/currencyMapping.js +28 -28
  557. package/src/helpers/dateTimeFormatting.js +51 -51
  558. package/src/helpers/isObjectEqual.js +22 -22
  559. package/src/helpers/numberConverter.js +103 -103
  560. package/src/helpers/toLocaleNumber.js +11 -11
  561. package/src/helpers/translateLang.js +199 -199
  562. package/src/main.js +8 -8
  563. package/src/mixins/inputValidations.js +97 -97
  564. package/src/router/dynamicRoutes.js +23 -23
  565. package/src/stories/Button.stories.js +48 -48
  566. package/src/stories/Button.vue +52 -52
  567. package/src/stories/Configure.mdx +364 -364
  568. package/src/stories/Header.stories.js +41 -41
  569. package/src/stories/Header.vue +59 -59
  570. package/src/stories/Page.stories.js +30 -30
  571. package/src/stories/Page.vue +83 -83
  572. package/src/stories/button.css +30 -30
  573. package/src/stories/header.css +32 -32
  574. package/src/stories/page.css +69 -69
  575. package/src/utils/index.js +12 -12
@@ -1,700 +1,688 @@
1
- const theme = (() => {
2
- const colors = {
3
- primary: '#5900CC',
4
- secondary: '#FAF5FF',
5
- tertiary: '#d5d5d5',
6
- black: '#263238',
7
- black2: '#151B1E',
8
- yellow: '#fdb813',
9
- yellow2: '#FFEFB7',
10
- yellow3: '#FFFBEE',
11
- yellow4: '#FFE066',
12
- darkGray: '#818181',
13
- mediumGray: '#d5d5d5',
14
- lightGray: '#f2f2f2',
15
- white: '#ffffff',
16
- blue: '#48a2d0',
17
- blue1: '#e4efff',
18
- blue2: '#f6faff',
19
- blue3: '#6CD4D4',
20
- blue4: '#66D0F3',
21
- blue5: '#00B0EB',
22
- brightBlue: '#0068DE',
23
- ballBlue: '#2CC0EB',
24
- red: '#FF5656',
25
- red1: '#f5a2a2',
26
- red2: '#de5959',
27
- red3: '#FFCCCC',
28
- red4: '#FF9A9A',
29
- pureRed: '#ff0000',
30
- darkRed: '#d00000',
31
- cornellRed: '#a52019',
32
- transparentRed10: '#ff000016',
33
- transparentRed20: '#ff000032',
34
- transparentRed40: '#ff000064',
35
- transparentRed50: '#ff000080',
36
- grey1: '#666',
37
- grey2: '#c4c4c4',
38
- grey3: '#b2b9c5',
39
- grey4: '#dee2eb',
40
- grey5: '#fafafa',
41
- grey6: '#555d61',
42
- grey7: '#f2f1f7',
43
- grey8: '#393939',
44
- grey9: '#607466',
45
- grey10: '#4a5861',
46
- grey11: '#656d70',
47
- grey12: '#787d81',
48
- grey13: '#CCCCCC',
49
- grey14: '#D1DBE0',
50
- grey15: '#E1E7EA',
51
- grey16: '#F0F3F5',
52
- grey17: '#394E58',
53
- grey18: '#3E5C6A',
54
- grey19: '#6E8E9E',
55
- grey20: '#D9DEE9',
56
- grey21: '#3E464B',
57
- turquoise: '#20A4CA',
58
- green: '#99db0c',
59
- green2: '#e5fcb4',
60
- green3: '#C2E96D',
61
- seaGreen: '#008351',
62
- purple: '#505ca6', // Keeping this as a standalone purple, but nested purple object below takes precedence for purple[500]
63
- purple1: '#F1E5FF',
64
- purple2: '#C739E4',
65
- purple3: '#E9CEFE',
66
- purple4: '#D0D6F5',
67
- purple5: '#533181',
68
- purple6: '#6F20DC',
69
- orange: '#ffc338',
70
- disabled: '#dfe1e1',
71
- transparentWhite2: '#ffffff32',
72
- transparentWhite1: '#ffffff16',
73
- transparentBlack1: '#263238e6',
74
- transparentBlack2: '#263238e5',
75
- transparentBlue1: '#20a4cae6',
76
- blueElectric: '#66dffa',
77
- eturnityGrey: '#263238',
78
- teal: '#018b7d',
79
- slateGrey: '#495257',
80
- cornflower: '#6276DF',
81
- lavender: '#8392EE',
82
- }
83
-
84
- const semanticColors = {
85
- purple: {
86
- 50: '#F5EEFF',
87
- 100: '#EEE4FC',
88
- 200: '#E8D8FE',
89
- 300: '#D3BBF5',
90
- 400: '#B17BFA',
91
- 500: '#6F20DC',
92
- 600: '#5C1FAF',
93
- 700: '#411083',
94
- 800: '#33165A',
95
- 900: '#190B2D',
96
- },
97
- beige: {
98
- 50: '#F9F5F2',
99
- 100: '#F2EBE7',
100
- 200: '#E6D6D0',
101
- 300: '#D9C2B8',
102
- 400: '#CDADA1',
103
- 500: '#C09989',
104
- 600: '#9A7A6E',
105
- 700: '#6A5247',
106
- 800: '#4D3D37',
107
- 900: '#261F1B',
108
- },
109
- grey: {
110
- 50: '#FDFDFD',
111
- 100: '#F8F9FB',
112
- 200: '#F2F3F7',
113
- 300: '#EBEEF3',
114
- 400: '#E5E8EF',
115
- 500: '#D9DEE9',
116
- 600: '#B2B5BC',
117
- 700: '#85888D',
118
- 800: '#595A5E',
119
- 900: '#2C2D2F',
120
- },
121
- teal: {
122
- 50: '#F0F3F5',
123
- 100: '#E1E7EA',
124
- 200: '#D1DBE0',
125
- 300: '#ADC0C8',
126
- 400: '#8CA6B3',
127
- 500: '#6E8E9E',
128
- 600: '#3E5C6A',
129
- 700: '#394E58',
130
- 800: '#263238',
131
- 900: '#151B1E',
132
- },
133
- blue: {
134
- 50: '#E0F6FD',
135
- 100: '#CCEFFB',
136
- 200: '#99DFF7',
137
- 300: '#66D0F3',
138
- 400: '#33C0EF',
139
- 500: '#00B0EB',
140
- 600: '#008DBC',
141
- 700: '#006A8D',
142
- 800: '#00465E',
143
- 900: '#00232F',
144
- },
145
- green: {
146
- 50: '#F8FFE9',
147
- 100: '#F2FFD6',
148
- 200: '#D6F19E',
149
- 300: '#C2E96D',
150
- 400: '#ADE23D',
151
- 500: '#99DB0C',
152
- 600: '#7AAF0A',
153
- 700: '#5C8307',
154
- 800: '#3D5805',
155
- 900: '#1F2C02',
156
- },
157
- yellow: {
158
- 50: '#FFFBEC',
159
- 100: '#FFF5CC',
160
- 200: '#FFEB99',
161
- 300: '#FFE066',
162
- 400: '#FFD633',
163
- 500: '#FFCC00',
164
- 600: '#CCA300',
165
- 700: '#997A00',
166
- 800: '#665200',
167
- 900: '#332900',
168
- },
169
- red: {
170
- 50: '#FFEBEB',
171
- 100: '#FFDDDD',
172
- 200: '#FFBBBB',
173
- 300: '#FF9A9A',
174
- 400: '#FF7F7F',
175
- 500: '#FF6565',
176
- 600: '#CC4545',
177
- 700: '#993434',
178
- 800: '#662222',
179
- 900: '#331111',
180
- },
181
- }
182
-
183
- const chartGradients = {
184
- simple: {
185
- from: semanticColors.purple[500],
186
- to: semanticColors.purple[400],
187
- },
188
- stacked: [
189
- { from: '#F5EDFF', to: '#DEC5FF' },
190
- { from: '#CAA2FF', to: '#F2E8FF' },
191
- { from: '#B987FC', to: '#904AEF' },
192
- { from: '#8B40F2', to: '#4A1394' },
193
- { from: '#6A05F2', to: '#4905A5' },
194
- { from: '#5402C3', to: '#2B0362' },
195
- ],
196
- }
197
-
198
- return {
199
- colors,
200
- semanticColors,
201
- chartGradients,
202
- fonts: {
203
- mainFont: '"Figtree", sans-serif',
204
- },
205
- screen: {
206
- mobileSmall: '345px',
207
- mobile: '425px',
208
- mobileLarge: '530px',
209
- tablet: '768px',
210
- tabletLarge: '950px',
211
- tabletLandscape: '1024px',
212
- tabletLandscapeLarge: '1280px',
213
- laptopSmall: '1440px',
214
- laptopMiddle: '1680px',
215
- },
216
- borderRadius: '4px',
217
- boxShadow: {
218
- card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
219
- },
220
- progressBar: {
221
- light: {
222
- fillColor: semanticColors.purple[500],
223
- backgroundColor: semanticColors.grey[200],
224
- labelColor: semanticColors.grey[700],
225
- },
226
- dark: {
227
- fillColor: semanticColors.white,
228
- backgroundColor: semanticColors.grey[700],
229
- labelColor: semanticColors.grey[200],
230
- },
231
- },
232
- mainButton: {
233
- light: {
234
- // theme
235
- primary: {
236
- // type
237
- main: {
238
- // variant: this is the default variant
239
- default: {
240
- backgroundColor: semanticColors.purple[500],
241
- textColor: colors.white,
242
- borderColor: '',
243
- },
244
- hover: {
245
- backgroundColor: semanticColors.purple[700],
246
- textColor: colors.white,
247
- borderColor: '',
248
- },
249
- active: {
250
- backgroundColor: semanticColors.purple[600],
251
- textColor: colors.white,
252
- borderColor: '',
253
- },
254
- disabled: {
255
- textColor: colors.white,
256
- backgroundColor: semanticColors.grey[500],
257
- borderColor: '',
258
- },
259
- },
260
- cancel: {
261
- // variant
262
- default: {
263
- backgroundColor: semanticColors.red[600],
264
- textColor: colors.white,
265
- borderColor: '',
266
- },
267
- hover: {
268
- backgroundColor: semanticColors.red[800],
269
- textColor: colors.white,
270
- borderColor: '',
271
- },
272
- active: {
273
- backgroundColor: semanticColors.red[700],
274
- textColor: colors.white,
275
- borderColor: '',
276
- },
277
- disabled: {
278
- textColor: colors.white,
279
- backgroundColor: semanticColors.grey[500],
280
- borderColor: '',
281
- },
282
- },
283
- },
284
- secondary: {
285
- // type
286
- main: {
287
- // variant: this is the default variant
288
- default: {
289
- backgroundColor: semanticColors.purple[50],
290
- textColor: semanticColors.purple[500],
291
- borderColor: '',
292
- },
293
- hover: {
294
- backgroundColor: semanticColors.purple[100],
295
- textColor: semanticColors.purple[700],
296
- borderColor: '',
297
- },
298
- active: {
299
- backgroundColor: semanticColors.purple[50],
300
- textColor: semanticColors.purple[600],
301
- borderColor: '',
302
- },
303
- disabled: {
304
- textColor: semanticColors.grey[600],
305
- backgroundColor: semanticColors.grey[300],
306
- borderColor: '',
307
- },
308
- },
309
- cancel: {
310
- // variant
311
- default: {
312
- backgroundColor: semanticColors.red[50],
313
- textColor: semanticColors.red[600],
314
- borderColor: '',
315
- },
316
- hover: {
317
- backgroundColor: semanticColors.red[100],
318
- textColor: semanticColors.red[700],
319
- borderColor: '',
320
- },
321
- active: {
322
- backgroundColor: semanticColors.red[200],
323
- textColor: semanticColors.red[800],
324
- borderColor: '',
325
- },
326
- disabled: {
327
- textColor: semanticColors.grey[600],
328
- backgroundColor: semanticColors.grey[300],
329
- borderColor: '',
330
- },
331
- },
332
- },
333
- tertiary: {
334
- // type
335
- main: {
336
- // variant: this is the default variant
337
- default: {
338
- backgroundColor: colors.white,
339
- textColor: semanticColors.purple[500],
340
- borderColor: semanticColors.grey[300],
341
- },
342
- hover: {
343
- backgroundColor: semanticColors.purple[100],
344
- textColor: semanticColors.purple[700],
345
- borderColor: semanticColors.grey[300],
346
- },
347
- active: {
348
- backgroundColor: semanticColors.purple[100],
349
- textColor: semanticColors.purple[600],
350
- borderColor: semanticColors.grey[600],
351
- },
352
- disabled: {
353
- textColor: semanticColors.grey[600],
354
- backgroundColor: semanticColors.grey[300],
355
- borderColor: semanticColors.grey[300],
356
- },
357
- },
358
- cancel: {
359
- // variant
360
- default: {
361
- backgroundColor: colors.white,
362
- textColor: semanticColors.red[600],
363
- borderColor: semanticColors.grey[300],
364
- },
365
- hover: {
366
- backgroundColor: semanticColors.red[100],
367
- textColor: semanticColors.red[700],
368
- borderColor: semanticColors.grey[300],
369
- },
370
- active: {
371
- backgroundColor: semanticColors.red[200],
372
- textColor: semanticColors.red[800],
373
- borderColor: semanticColors.grey[300],
374
- },
375
- disabled: {
376
- textColor: semanticColors.grey[600],
377
- backgroundColor: semanticColors.grey[300],
378
- borderColor: semanticColors.grey[300],
379
- },
380
- },
381
- },
382
- ghost: {
383
- // type
384
- main: {
385
- // variant: this is the default variant
386
- default: {
387
- backgroundColor: colors.white,
388
- textColor: semanticColors.purple[500],
389
- borderColor: '',
390
- },
391
- hover: {
392
- backgroundColor: semanticColors.purple[200],
393
- textColor: semanticColors.purple[700],
394
- borderColor: '',
395
- },
396
- active: {
397
- backgroundColor: semanticColors.purple[100],
398
- textColor: semanticColors.purple[600],
399
- borderColor: '',
400
- },
401
- disabled: {
402
- textColor: semanticColors.grey[600],
403
- backgroundColor: semanticColors.grey[300],
404
- borderColor: '',
405
- },
406
- },
407
- cancel: {
408
- // variant
409
- default: {
410
- backgroundColor: colors.white,
411
- textColor: semanticColors.red[600],
412
- borderColor: '',
413
- },
414
- hover: {
415
- backgroundColor: semanticColors.red[100],
416
- textColor: semanticColors.red[700],
417
- borderColor: '',
418
- },
419
- active: {
420
- backgroundColor: semanticColors.red[200],
421
- textColor: semanticColors.red[800],
422
- borderColor: '',
423
- },
424
- disabled: {
425
- textColor: semanticColors.grey[600],
426
- backgroundColor: semanticColors.grey[300],
427
- borderColor: '',
428
- },
429
- },
430
- },
431
- filter: {
432
- main: {
433
- default: {
434
- backgroundColor: colors.white,
435
- textColor: semanticColors.teal[800],
436
- borderColor: semanticColors.teal[100],
437
- },
438
- hover: {
439
- backgroundColor: semanticColors.teal[50],
440
- textColor: semanticColors.teal[800],
441
- borderColor: semanticColors.teal[100],
442
- },
443
- active: {
444
- backgroundColor: semanticColors.teal[100],
445
- textColor: semanticColors.teal[800],
446
- borderColor: semanticColors.teal[100],
447
- },
448
- disabled: {
449
- textColor: semanticColors.grey[600],
450
- backgroundColor: semanticColors.grey[300],
451
- borderColor: '',
452
- },
453
- },
454
- },
455
- },
456
- dark: {
457
- // theme
458
- primary: {
459
- // type
460
- main: {
461
- // variant: this is the default variant
462
- default: {
463
- backgroundColor: colors.white,
464
- textColor: semanticColors.teal[800],
465
- borderColor: '',
466
- },
467
- hover: {
468
- backgroundColor: semanticColors.purple[100],
469
- textColor: semanticColors.teal[800],
470
- borderColor: '',
471
- },
472
- active: {
473
- backgroundColor: semanticColors.purple[100],
474
- textColor: semanticColors.teal[800],
475
- borderColor: '',
476
- },
477
- disabled: {
478
- textColor: semanticColors.grey[800],
479
- backgroundColor: semanticColors.grey[400],
480
- borderColor: '',
481
- },
482
- },
483
- cancel: {
484
- // variant
485
- default: {
486
- backgroundColor: semanticColors.red[400],
487
- textColor: semanticColors.teal[800],
488
- borderColor: '',
489
- },
490
- hover: {
491
- backgroundColor: semanticColors.red[100],
492
- textColor: semanticColors.teal[800],
493
- borderColor: '',
494
- },
495
- active: {
496
- backgroundColor: semanticColors.red[200],
497
- textColor: semanticColors.teal[800],
498
- borderColor: '',
499
- },
500
- disabled: {
501
- backgroundColor: semanticColors.grey[300],
502
- textColor: semanticColors.grey[800],
503
- borderColor: '',
504
- },
505
- },
506
- },
507
- secondary: {
508
- // type
509
- main: {
510
- // variant: this is the default variant
511
- default: {
512
- backgroundColor: semanticColors.teal[800],
513
- textColor: semanticColors.purple[50],
514
- borderColor: '',
515
- },
516
- hover: {
517
- backgroundColor: semanticColors.teal[600],
518
- textColor: semanticColors.purple[50],
519
- borderColor: '',
520
- },
521
- active: {
522
- backgroundColor: semanticColors.teal[700],
523
- textColor: semanticColors.purple[50],
524
- borderColor: '',
525
- },
526
- disabled: {
527
- textColor: semanticColors.grey[600],
528
- backgroundColor: semanticColors.grey[500],
529
- borderColor: '',
530
- },
531
- },
532
- cancel: {
533
- // variant
534
- default: {
535
- backgroundColor: semanticColors.red[800],
536
- textColor: semanticColors.red[400],
537
- borderColor: '',
538
- },
539
- hover: {
540
- backgroundColor: semanticColors.red[700],
541
- textColor: semanticColors.red[300],
542
- borderColor: '',
543
- },
544
- active: {
545
- backgroundColor: semanticColors.red[600],
546
- textColor: semanticColors.red[200],
547
- borderColor: '',
548
- },
549
- disabled: {
550
- textColor: semanticColors.grey[600],
551
- backgroundColor: semanticColors.grey[500],
552
- borderColor: '',
553
- },
554
- },
555
- },
556
- tertiary: {
557
- // type
558
- main: {
559
- // variant: this is the default variant
560
- default: {
561
- backgroundColor: 'transparent',
562
- textColor: semanticColors.purple[50],
563
- borderColor: semanticColors.teal[500],
564
- },
565
- hover: {
566
- backgroundColor: semanticColors.teal[600],
567
- textColor: semanticColors.purple[50],
568
- borderColor: semanticColors.teal[400],
569
- },
570
- active: {
571
- backgroundColor: semanticColors.teal[700],
572
- textColor: semanticColors.purple[50],
573
- borderColor: semanticColors.teal[300],
574
- },
575
- disabled: {
576
- textColor: semanticColors.grey[600],
577
- backgroundColor: semanticColors.grey[500],
578
- borderColor: semanticColors.grey[800],
579
- },
580
- },
581
- cancel: {
582
- // variant
583
- default: {
584
- backgroundColor: semanticColors.teal[200],
585
- textColor: semanticColors.red[400],
586
- borderColor: semanticColors.teal[500],
587
- },
588
- hover: {
589
- backgroundColor: semanticColors.red[700],
590
- textColor: semanticColors.red[700],
591
- borderColor: semanticColors.teal[400],
592
- },
593
- active: {
594
- backgroundColor: semanticColors.red[600],
595
- textColor: semanticColors.red[200],
596
- borderColor: semanticColors.teal[300],
597
- },
598
- disabled: {
599
- textColor: semanticColors.grey[600],
600
- backgroundColor: semanticColors.grey[500],
601
- borderColor: semanticColors.grey[800],
602
- },
603
- },
604
- },
605
- ghost: {
606
- // type
607
- main: {
608
- // variant: this is the default variant
609
- default: {
610
- backgroundColor: 'transparent',
611
- textColor: semanticColors.purple[50],
612
- borderColor: '',
613
- },
614
- hover: {
615
- backgroundColor: semanticColors.teal[600],
616
- textColor: semanticColors.purple[50],
617
- borderColor: '',
618
- },
619
- active: {
620
- backgroundColor: semanticColors.teal[700],
621
- textColor: semanticColors.purple[50],
622
- borderColor: '',
623
- },
624
- disabled: {
625
- textColor: semanticColors.grey[600],
626
- backgroundColor: semanticColors.grey[500],
627
- borderColor: '',
628
- },
629
- },
630
- cancel: {
631
- // variant
632
- default: {
633
- backgroundColor: semanticColors.teal[200],
634
- textColor: semanticColors.red[400],
635
- borderColor: '',
636
- },
637
- hover: {
638
- backgroundColor: semanticColors.red[700],
639
- textColor: semanticColors.red[300],
640
- borderColor: '',
641
- },
642
- active: {
643
- backgroundColor: semanticColors.red[600],
644
- textColor: semanticColors.red[200],
645
- borderColor: '',
646
- },
647
- disabled: {
648
- textColor: semanticColors.grey[600],
649
- backgroundColor: semanticColors.grey[500],
650
- borderColor: '',
651
- },
652
- },
653
- },
654
- filter: {
655
- main: {
656
- default: {
657
- backgroundColor: colors.white,
658
- textColor: semanticColors.teal[800],
659
- borderColor: semanticColors.teal[100],
660
- },
661
- hover: {
662
- backgroundColor: semanticColors.teal[100],
663
- textColor: semanticColors.teal[800],
664
- borderColor: semanticColors.teal[100],
665
- },
666
- active: {
667
- backgroundColor: semanticColors.teal[100],
668
- textColor: semanticColors.teal[800],
669
- borderColor: semanticColors.teal[100],
670
- },
671
- disabled: {
672
- textColor: semanticColors.grey[600],
673
- backgroundColor: semanticColors.grey[300],
674
- borderColor: '',
675
- },
676
- },
677
- },
678
- },
679
- size: {
680
- large: {
681
- padding: '10px 20px',
682
- fontSize: '14px',
683
- iconWidth: '34px',
684
- },
685
- medium: {
686
- padding: '8px 16px',
687
- fontSize: '14px',
688
- iconWidth: '30px',
689
- },
690
- small: {
691
- padding: '6px 12px',
692
- fontSize: '14px',
693
- iconWidth: '26px',
694
- },
695
- },
696
- },
697
- }
698
- })()
699
-
700
- export default theme
1
+ const theme = (() => {
2
+ const colors = {
3
+ primary: '#5900CC',
4
+ secondary: '#FAF5FF',
5
+ tertiary: '#d5d5d5',
6
+ black: '#263238',
7
+ black2: '#151B1E',
8
+ yellow: '#fdb813',
9
+ yellow2: '#FFEFB7',
10
+ yellow3: '#FFFBEE',
11
+ yellow4: '#FFE066',
12
+ darkGray: '#818181',
13
+ mediumGray: '#d5d5d5',
14
+ lightGray: '#f2f2f2',
15
+ white: '#ffffff',
16
+ blue: '#48a2d0',
17
+ blue1: '#e4efff',
18
+ blue2: '#f6faff',
19
+ blue3: '#6CD4D4',
20
+ blue4: '#66D0F3',
21
+ blue5: '#00B0EB',
22
+ brightBlue: '#0068DE',
23
+ ballBlue: '#2CC0EB',
24
+ red: '#FF5656',
25
+ red1: '#f5a2a2',
26
+ red2: '#de5959',
27
+ red3: '#FFCCCC',
28
+ red4: '#FF9A9A',
29
+ pureRed: '#ff0000',
30
+ darkRed: '#d00000',
31
+ cornellRed: '#a52019',
32
+ transparentRed10: '#ff000016',
33
+ transparentRed20: '#ff000032',
34
+ transparentRed40: '#ff000064',
35
+ transparentRed50: '#ff000080',
36
+ grey1: '#666',
37
+ grey2: '#c4c4c4',
38
+ grey3: '#b2b9c5',
39
+ grey4: '#dee2eb',
40
+ grey5: '#fafafa',
41
+ grey6: '#555d61',
42
+ grey7: '#f2f1f7',
43
+ grey8: '#393939',
44
+ grey9: '#607466',
45
+ grey10: '#4a5861',
46
+ grey11: '#656d70',
47
+ grey12: '#787d81',
48
+ grey13: '#CCCCCC',
49
+ grey14: '#D1DBE0',
50
+ grey15: '#E1E7EA',
51
+ grey16: '#F0F3F5',
52
+ grey17: '#394E58',
53
+ grey18: '#3E5C6A',
54
+ grey19: '#6E8E9E',
55
+ grey20: '#D9DEE9',
56
+ grey21: '#3E464B',
57
+ turquoise: '#20A4CA',
58
+ green: '#99db0c',
59
+ green2: '#e5fcb4',
60
+ green3: '#C2E96D',
61
+ seaGreen: '#008351',
62
+ purple: '#505ca6', // Keeping this as a standalone purple, but nested purple object below takes precedence for purple[500]
63
+ purple1: '#F1E5FF',
64
+ purple2: '#C739E4',
65
+ purple3: '#E9CEFE',
66
+ purple4: '#D0D6F5',
67
+ purple5: '#533181',
68
+ purple6: '#6F20DC',
69
+ orange: '#ffc338',
70
+ disabled: '#dfe1e1',
71
+ transparentWhite2: '#ffffff32',
72
+ transparentWhite1: '#ffffff16',
73
+ transparentBlack1: '#263238e6',
74
+ transparentBlack2: '#263238e5',
75
+ transparentBlue1: '#20a4cae6',
76
+ blueElectric: '#66dffa',
77
+ eturnityGrey: '#263238',
78
+ teal: '#018b7d',
79
+ slateGrey: '#495257',
80
+ cornflower: '#6276DF',
81
+ lavender: '#8392EE',
82
+ }
83
+
84
+ const semanticColors = {
85
+ purple: {
86
+ 50: '#F5EEFF',
87
+ 100: '#EEE4FC',
88
+ 200: '#E8D8FE',
89
+ 300: '#D3BBF5',
90
+ 400: '#B17BFA',
91
+ 500: '#6F20DC',
92
+ 600: '#5C1FAF',
93
+ 700: '#411083',
94
+ 800: '#33165A',
95
+ 900: '#190B2D',
96
+ },
97
+ beige: {
98
+ 50: '#F9F5F2',
99
+ 100: '#F2EBE7',
100
+ 200: '#E6D6D0',
101
+ 300: '#D9C2B8',
102
+ 400: '#CDADA1',
103
+ 500: '#C09989',
104
+ 600: '#9A7A6E',
105
+ 700: '#6A5247',
106
+ 800: '#4D3D37',
107
+ 900: '#261F1B',
108
+ },
109
+ grey: {
110
+ 50: '#FDFDFD',
111
+ 100: '#F8F9FB',
112
+ 200: '#F2F3F7',
113
+ 300: '#EBEEF3',
114
+ 400: '#E5E8EF',
115
+ 500: '#D9DEE9',
116
+ 600: '#B2B5BC',
117
+ 700: '#85888D',
118
+ 800: '#595A5E',
119
+ 900: '#2C2D2F',
120
+ },
121
+ teal: {
122
+ 50: '#F0F3F5',
123
+ 100: '#E1E7EA',
124
+ 200: '#D1DBE0',
125
+ 300: '#ADC0C8',
126
+ 400: '#8CA6B3',
127
+ 500: '#6E8E9E',
128
+ 600: '#3E5C6A',
129
+ 700: '#394E58',
130
+ 800: '#263238',
131
+ 900: '#151B1E',
132
+ },
133
+ blue: {
134
+ 50: '#E0F6FD',
135
+ 100: '#CCEFFB',
136
+ 200: '#99DFF7',
137
+ 300: '#66D0F3',
138
+ 400: '#33C0EF',
139
+ 500: '#00B0EB',
140
+ 600: '#008DBC',
141
+ 700: '#006A8D',
142
+ 800: '#00465E',
143
+ 900: '#00232F',
144
+ },
145
+ green: {
146
+ 50: '#F8FFE9',
147
+ 100: '#F2FFD6',
148
+ 200: '#D6F19E',
149
+ 300: '#C2E96D',
150
+ 400: '#ADE23D',
151
+ 500: '#99DB0C',
152
+ 600: '#7AAF0A',
153
+ 700: '#5C8307',
154
+ 800: '#3D5805',
155
+ 900: '#1F2C02',
156
+ },
157
+ yellow: {
158
+ 50: '#FFFBEC',
159
+ 100: '#FFF5CC',
160
+ 200: '#FFEB99',
161
+ 300: '#FFE066',
162
+ 400: '#FFD633',
163
+ 500: '#FFCC00',
164
+ 600: '#CCA300',
165
+ 700: '#997A00',
166
+ 800: '#665200',
167
+ 900: '#332900',
168
+ },
169
+ red: {
170
+ 50: '#FFEBEB',
171
+ 100: '#FFDDDD',
172
+ 200: '#FFBBBB',
173
+ 300: '#FF9A9A',
174
+ 400: '#FF7F7F',
175
+ 500: '#FF6565',
176
+ 600: '#CC4545',
177
+ 700: '#993434',
178
+ 800: '#662222',
179
+ 900: '#331111',
180
+ },
181
+ }
182
+
183
+ const chartGradients = {
184
+ simple: {
185
+ from: semanticColors.purple[500],
186
+ to: semanticColors.purple[400],
187
+ },
188
+ stacked: [
189
+ { from: '#F5EDFF', to: '#DEC5FF' },
190
+ { from: '#CAA2FF', to: '#F2E8FF' },
191
+ { from: '#B987FC', to: '#904AEF' },
192
+ { from: '#8B40F2', to: '#4A1394' },
193
+ { from: '#6A05F2', to: '#4905A5' },
194
+ { from: '#5402C3', to: '#2B0362' },
195
+ ],
196
+ }
197
+
198
+ return {
199
+ colors,
200
+ semanticColors,
201
+ chartGradients,
202
+ fonts: {
203
+ mainFont: '"Figtree", sans-serif',
204
+ },
205
+ screen: {
206
+ mobileSmall: '345px',
207
+ mobile: '425px',
208
+ mobileLarge: '530px',
209
+ tablet: '768px',
210
+ tabletLarge: '950px',
211
+ tabletLandscape: '1024px',
212
+ tabletLandscapeLarge: '1280px',
213
+ laptopSmall: '1440px',
214
+ laptopMiddle: '1680px',
215
+ },
216
+ borderRadius: '4px',
217
+ boxShadow: {
218
+ card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
219
+ },
220
+ mainButton: {
221
+ light: {
222
+ // theme
223
+ primary: {
224
+ // type
225
+ main: {
226
+ // variant: this is the default variant
227
+ default: {
228
+ backgroundColor: semanticColors.purple[500],
229
+ textColor: colors.white,
230
+ borderColor: '',
231
+ },
232
+ hover: {
233
+ backgroundColor: semanticColors.purple[700],
234
+ textColor: colors.white,
235
+ borderColor: '',
236
+ },
237
+ active: {
238
+ backgroundColor: semanticColors.purple[600],
239
+ textColor: colors.white,
240
+ borderColor: '',
241
+ },
242
+ disabled: {
243
+ textColor: colors.white,
244
+ backgroundColor: semanticColors.grey[500],
245
+ borderColor: '',
246
+ },
247
+ },
248
+ cancel: {
249
+ // variant
250
+ default: {
251
+ backgroundColor: semanticColors.red[600],
252
+ textColor: colors.white,
253
+ borderColor: '',
254
+ },
255
+ hover: {
256
+ backgroundColor: semanticColors.red[800],
257
+ textColor: colors.white,
258
+ borderColor: '',
259
+ },
260
+ active: {
261
+ backgroundColor: semanticColors.red[700],
262
+ textColor: colors.white,
263
+ borderColor: '',
264
+ },
265
+ disabled: {
266
+ textColor: colors.white,
267
+ backgroundColor: semanticColors.grey[500],
268
+ borderColor: '',
269
+ },
270
+ },
271
+ },
272
+ secondary: {
273
+ // type
274
+ main: {
275
+ // variant: this is the default variant
276
+ default: {
277
+ backgroundColor: semanticColors.purple[50],
278
+ textColor: semanticColors.purple[500],
279
+ borderColor: '',
280
+ },
281
+ hover: {
282
+ backgroundColor: semanticColors.purple[100],
283
+ textColor: semanticColors.purple[700],
284
+ borderColor: '',
285
+ },
286
+ active: {
287
+ backgroundColor: semanticColors.purple[50],
288
+ textColor: semanticColors.purple[600],
289
+ borderColor: '',
290
+ },
291
+ disabled: {
292
+ textColor: semanticColors.grey[600],
293
+ backgroundColor: semanticColors.grey[300],
294
+ borderColor: '',
295
+ },
296
+ },
297
+ cancel: {
298
+ // variant
299
+ default: {
300
+ backgroundColor: semanticColors.red[50],
301
+ textColor: semanticColors.red[600],
302
+ borderColor: '',
303
+ },
304
+ hover: {
305
+ backgroundColor: semanticColors.red[100],
306
+ textColor: semanticColors.red[700],
307
+ borderColor: '',
308
+ },
309
+ active: {
310
+ backgroundColor: semanticColors.red[200],
311
+ textColor: semanticColors.red[800],
312
+ borderColor: '',
313
+ },
314
+ disabled: {
315
+ textColor: semanticColors.grey[600],
316
+ backgroundColor: semanticColors.grey[300],
317
+ borderColor: '',
318
+ },
319
+ },
320
+ },
321
+ tertiary: {
322
+ // type
323
+ main: {
324
+ // variant: this is the default variant
325
+ default: {
326
+ backgroundColor: colors.white,
327
+ textColor: semanticColors.purple[500],
328
+ borderColor: semanticColors.grey[300],
329
+ },
330
+ hover: {
331
+ backgroundColor: semanticColors.purple[100],
332
+ textColor: semanticColors.purple[700],
333
+ borderColor: semanticColors.grey[300],
334
+ },
335
+ active: {
336
+ backgroundColor: semanticColors.purple[100],
337
+ textColor: semanticColors.purple[600],
338
+ borderColor: semanticColors.grey[600],
339
+ },
340
+ disabled: {
341
+ textColor: semanticColors.grey[600],
342
+ backgroundColor: semanticColors.grey[300],
343
+ borderColor: semanticColors.grey[300],
344
+ },
345
+ },
346
+ cancel: {
347
+ // variant
348
+ default: {
349
+ backgroundColor: colors.white,
350
+ textColor: semanticColors.red[600],
351
+ borderColor: semanticColors.grey[300],
352
+ },
353
+ hover: {
354
+ backgroundColor: semanticColors.red[100],
355
+ textColor: semanticColors.red[700],
356
+ borderColor: semanticColors.grey[300],
357
+ },
358
+ active: {
359
+ backgroundColor: semanticColors.red[200],
360
+ textColor: semanticColors.red[800],
361
+ borderColor: semanticColors.grey[300],
362
+ },
363
+ disabled: {
364
+ textColor: semanticColors.grey[600],
365
+ backgroundColor: semanticColors.grey[300],
366
+ borderColor: semanticColors.grey[300],
367
+ },
368
+ },
369
+ },
370
+ ghost: {
371
+ // type
372
+ main: {
373
+ // variant: this is the default variant
374
+ default: {
375
+ backgroundColor: colors.white,
376
+ textColor: semanticColors.purple[500],
377
+ borderColor: '',
378
+ },
379
+ hover: {
380
+ backgroundColor: semanticColors.purple[200],
381
+ textColor: semanticColors.purple[700],
382
+ borderColor: '',
383
+ },
384
+ active: {
385
+ backgroundColor: semanticColors.purple[100],
386
+ textColor: semanticColors.purple[600],
387
+ borderColor: '',
388
+ },
389
+ disabled: {
390
+ textColor: semanticColors.grey[600],
391
+ backgroundColor: semanticColors.grey[300],
392
+ borderColor: '',
393
+ },
394
+ },
395
+ cancel: {
396
+ // variant
397
+ default: {
398
+ backgroundColor: colors.white,
399
+ textColor: semanticColors.red[600],
400
+ borderColor: '',
401
+ },
402
+ hover: {
403
+ backgroundColor: semanticColors.red[100],
404
+ textColor: semanticColors.red[700],
405
+ borderColor: '',
406
+ },
407
+ active: {
408
+ backgroundColor: semanticColors.red[200],
409
+ textColor: semanticColors.red[800],
410
+ borderColor: '',
411
+ },
412
+ disabled: {
413
+ textColor: semanticColors.grey[600],
414
+ backgroundColor: semanticColors.grey[300],
415
+ borderColor: '',
416
+ },
417
+ },
418
+ },
419
+ filter: {
420
+ main: {
421
+ default: {
422
+ backgroundColor: colors.white,
423
+ textColor: semanticColors.teal[800],
424
+ borderColor: semanticColors.teal[100],
425
+ },
426
+ hover: {
427
+ backgroundColor: semanticColors.teal[50],
428
+ textColor: semanticColors.teal[800],
429
+ borderColor: semanticColors.teal[100],
430
+ },
431
+ active: {
432
+ backgroundColor: semanticColors.teal[100],
433
+ textColor: semanticColors.teal[800],
434
+ borderColor: semanticColors.teal[100],
435
+ },
436
+ disabled: {
437
+ textColor: semanticColors.grey[600],
438
+ backgroundColor: semanticColors.grey[300],
439
+ borderColor: '',
440
+ },
441
+ },
442
+ },
443
+ },
444
+ dark: {
445
+ // theme
446
+ primary: {
447
+ // type
448
+ main: {
449
+ // variant: this is the default variant
450
+ default: {
451
+ backgroundColor: colors.white,
452
+ textColor: semanticColors.teal[800],
453
+ borderColor: '',
454
+ },
455
+ hover: {
456
+ backgroundColor: semanticColors.purple[100],
457
+ textColor: semanticColors.teal[800],
458
+ borderColor: '',
459
+ },
460
+ active: {
461
+ backgroundColor: semanticColors.purple[100],
462
+ textColor: semanticColors.teal[800],
463
+ borderColor: '',
464
+ },
465
+ disabled: {
466
+ textColor: semanticColors.grey[800],
467
+ backgroundColor: semanticColors.grey[400],
468
+ borderColor: '',
469
+ },
470
+ },
471
+ cancel: {
472
+ // variant
473
+ default: {
474
+ backgroundColor: semanticColors.red[400],
475
+ textColor: semanticColors.teal[800],
476
+ borderColor: '',
477
+ },
478
+ hover: {
479
+ backgroundColor: semanticColors.red[100],
480
+ textColor: semanticColors.teal[800],
481
+ borderColor: '',
482
+ },
483
+ active: {
484
+ backgroundColor: semanticColors.red[200],
485
+ textColor: semanticColors.teal[800],
486
+ borderColor: '',
487
+ },
488
+ disabled: {
489
+ backgroundColor: semanticColors.grey[300],
490
+ textColor: semanticColors.grey[800],
491
+ borderColor: '',
492
+ },
493
+ },
494
+ },
495
+ secondary: {
496
+ // type
497
+ main: {
498
+ // variant: this is the default variant
499
+ default: {
500
+ backgroundColor: semanticColors.teal[800],
501
+ textColor: semanticColors.purple[50],
502
+ borderColor: '',
503
+ },
504
+ hover: {
505
+ backgroundColor: semanticColors.teal[600],
506
+ textColor: semanticColors.purple[50],
507
+ borderColor: '',
508
+ },
509
+ active: {
510
+ backgroundColor: semanticColors.teal[700],
511
+ textColor: semanticColors.purple[50],
512
+ borderColor: '',
513
+ },
514
+ disabled: {
515
+ textColor: semanticColors.grey[600],
516
+ backgroundColor: semanticColors.grey[500],
517
+ borderColor: '',
518
+ },
519
+ },
520
+ cancel: {
521
+ // variant
522
+ default: {
523
+ backgroundColor: semanticColors.red[800],
524
+ textColor: semanticColors.red[400],
525
+ borderColor: '',
526
+ },
527
+ hover: {
528
+ backgroundColor: semanticColors.red[700],
529
+ textColor: semanticColors.red[300],
530
+ borderColor: '',
531
+ },
532
+ active: {
533
+ backgroundColor: semanticColors.red[600],
534
+ textColor: semanticColors.red[200],
535
+ borderColor: '',
536
+ },
537
+ disabled: {
538
+ textColor: semanticColors.grey[600],
539
+ backgroundColor: semanticColors.grey[500],
540
+ borderColor: '',
541
+ },
542
+ },
543
+ },
544
+ tertiary: {
545
+ // type
546
+ main: {
547
+ // variant: this is the default variant
548
+ default: {
549
+ backgroundColor: 'transparent',
550
+ textColor: semanticColors.purple[50],
551
+ borderColor: semanticColors.teal[500],
552
+ },
553
+ hover: {
554
+ backgroundColor: semanticColors.teal[600],
555
+ textColor: semanticColors.purple[50],
556
+ borderColor: semanticColors.teal[400],
557
+ },
558
+ active: {
559
+ backgroundColor: semanticColors.teal[700],
560
+ textColor: semanticColors.purple[50],
561
+ borderColor: semanticColors.teal[300],
562
+ },
563
+ disabled: {
564
+ textColor: semanticColors.grey[600],
565
+ backgroundColor: semanticColors.grey[500],
566
+ borderColor: semanticColors.grey[800],
567
+ },
568
+ },
569
+ cancel: {
570
+ // variant
571
+ default: {
572
+ backgroundColor: semanticColors.teal[200],
573
+ textColor: semanticColors.red[400],
574
+ borderColor: semanticColors.teal[500],
575
+ },
576
+ hover: {
577
+ backgroundColor: semanticColors.red[700],
578
+ textColor: semanticColors.red[700],
579
+ borderColor: semanticColors.teal[400],
580
+ },
581
+ active: {
582
+ backgroundColor: semanticColors.red[600],
583
+ textColor: semanticColors.red[200],
584
+ borderColor: semanticColors.teal[300],
585
+ },
586
+ disabled: {
587
+ textColor: semanticColors.grey[600],
588
+ backgroundColor: semanticColors.grey[500],
589
+ borderColor: semanticColors.grey[800],
590
+ },
591
+ },
592
+ },
593
+ ghost: {
594
+ // type
595
+ main: {
596
+ // variant: this is the default variant
597
+ default: {
598
+ backgroundColor: 'transparent',
599
+ textColor: semanticColors.purple[50],
600
+ borderColor: '',
601
+ },
602
+ hover: {
603
+ backgroundColor: semanticColors.teal[600],
604
+ textColor: semanticColors.purple[50],
605
+ borderColor: '',
606
+ },
607
+ active: {
608
+ backgroundColor: semanticColors.teal[700],
609
+ textColor: semanticColors.purple[50],
610
+ borderColor: '',
611
+ },
612
+ disabled: {
613
+ textColor: semanticColors.grey[600],
614
+ backgroundColor: semanticColors.grey[500],
615
+ borderColor: '',
616
+ },
617
+ },
618
+ cancel: {
619
+ // variant
620
+ default: {
621
+ backgroundColor: semanticColors.teal[200],
622
+ textColor: semanticColors.red[400],
623
+ borderColor: '',
624
+ },
625
+ hover: {
626
+ backgroundColor: semanticColors.red[700],
627
+ textColor: semanticColors.red[300],
628
+ borderColor: '',
629
+ },
630
+ active: {
631
+ backgroundColor: semanticColors.red[600],
632
+ textColor: semanticColors.red[200],
633
+ borderColor: '',
634
+ },
635
+ disabled: {
636
+ textColor: semanticColors.grey[600],
637
+ backgroundColor: semanticColors.grey[500],
638
+ borderColor: '',
639
+ },
640
+ },
641
+ },
642
+ filter: {
643
+ main: {
644
+ default: {
645
+ backgroundColor: colors.white,
646
+ textColor: semanticColors.teal[800],
647
+ borderColor: semanticColors.teal[100],
648
+ },
649
+ hover: {
650
+ backgroundColor: semanticColors.teal[100],
651
+ textColor: semanticColors.teal[800],
652
+ borderColor: semanticColors.teal[100],
653
+ },
654
+ active: {
655
+ backgroundColor: semanticColors.teal[100],
656
+ textColor: semanticColors.teal[800],
657
+ borderColor: semanticColors.teal[100],
658
+ },
659
+ disabled: {
660
+ textColor: semanticColors.grey[600],
661
+ backgroundColor: semanticColors.grey[300],
662
+ borderColor: '',
663
+ },
664
+ },
665
+ },
666
+ },
667
+ size: {
668
+ large: {
669
+ padding: '10px 20px',
670
+ fontSize: '14px',
671
+ iconWidth: '34px',
672
+ },
673
+ medium: {
674
+ padding: '8px 16px',
675
+ fontSize: '14px',
676
+ iconWidth: '30px',
677
+ },
678
+ small: {
679
+ padding: '6px 12px',
680
+ fontSize: '14px',
681
+ iconWidth: '26px',
682
+ },
683
+ },
684
+ },
685
+ }
686
+ })()
687
+
688
+ export default theme