mapping.json 92 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970
  1. {
  2. "strict": {
  3. "text-heading-1-font-size": 32,
  4. "text-heading-2-font-size": 30,
  5. "text-heading-3-font-size": 26,
  6. "text-heading-4-font-size": 22,
  7. "text-heading-5-font-size": 18,
  8. "text-heading-6-font-size": 16,
  9. "text-subtitle-1-font-weight": "400",
  10. "text-subtitle-2-font-weight": "400",
  11. "text-label-font-size": 10,
  12. "text-label-font-weight": "400",
  13. "text-label-font-family": "$text-font-family",
  14. "border-radius": 3
  15. },
  16. "components": {
  17. "Avatar": {
  18. "meta": {
  19. "scope": "all",
  20. "parameters": {
  21. "roundCoefficient": {
  22. "type": "number"
  23. },
  24. "width": {
  25. "type": "number"
  26. },
  27. "height": {
  28. "type": "number"
  29. }
  30. },
  31. "appearances": {
  32. "default": {
  33. "default": true
  34. }
  35. },
  36. "variantGroups": {
  37. "shape": {
  38. "round": {
  39. "default": true
  40. },
  41. "rounded": {
  42. "default": false
  43. },
  44. "square": {
  45. "default": false
  46. }
  47. },
  48. "size": {
  49. "tiny": {
  50. "default": false
  51. },
  52. "small": {
  53. "default": false
  54. },
  55. "medium": {
  56. "default": true
  57. },
  58. "large": {
  59. "default": false
  60. },
  61. "giant": {
  62. "default": false
  63. }
  64. }
  65. },
  66. "states": {}
  67. },
  68. "appearances": {
  69. "default": {
  70. "mapping": {},
  71. "variantGroups": {
  72. "shape": {
  73. "round": {
  74. "roundCoefficient": 0.5
  75. },
  76. "rounded": {
  77. "roundCoefficient": 0.03
  78. },
  79. "square": {
  80. "roundCoefficient": 0.0
  81. }
  82. },
  83. "size": {
  84. "tiny": {
  85. "width": "size-tiny",
  86. "height": "size-tiny"
  87. },
  88. "small": {
  89. "width": "size-small",
  90. "height": "size-small"
  91. },
  92. "medium": {
  93. "width": "size-medium",
  94. "height": "size-medium"
  95. },
  96. "large": {
  97. "width": "size-large",
  98. "height": "size-large"
  99. },
  100. "giant": {
  101. "width": "size-giant",
  102. "height": "size-giant"
  103. }
  104. }
  105. }
  106. }
  107. }
  108. },
  109. "Input": {
  110. "appearances": {
  111. "default": {
  112. "mapping": {
  113. "paddingHorizontal": 8,
  114. "textMarginHorizontal": 8,
  115. "iconWidth": 24,
  116. "iconHeight": 24,
  117. "iconMarginHorizontal": 8,
  118. "labelMarginBottom": 4,
  119. "labelFontSize": "text-label-font-size",
  120. "labelFontWeight": "text-label-font-weight",
  121. "captionMarginTop": 0,
  122. "captionFontSize": "text-caption-1-font-size",
  123. "captionFontWeight": "text-caption-1-font-weight",
  124. "captionFontFamily": "text-caption-1-font-family",
  125. "captionIconWidth": 10,
  126. "captionIconHeight": 10,
  127. "captionIconMarginRight": 8
  128. },
  129. "variantGroups": {
  130. "status": {
  131. "basic": {
  132. "backgroundColor": "#F0F0F0",
  133. "labelColor": "text-basic-color",
  134. "captionColor": "color-danger-500",
  135. "state": {
  136. "focused": {
  137. "backgroundColor": "#F0F0F0"
  138. },
  139. "active": {
  140. "backgroundColor": "#F0F0F0"
  141. },
  142. "hover": {
  143. "backgroundColor": "#F0F0F0"
  144. },
  145. "disabled": {
  146. "backgroundColor": "#F0F0F0"
  147. }
  148. }
  149. }
  150. },
  151. "size": {
  152. "small": {
  153. "minHeight": "size-small",
  154. "borderRadius": "border-radius",
  155. "borderWidth": "border-width",
  156. "paddingVertical": 3,
  157. "textFontSize": "text-subtitle-2-font-size",
  158. "textFontWeight": "normal"
  159. }
  160. }
  161. }
  162. }
  163. }
  164. },
  165. "Button": {
  166. "appearances": {
  167. "filled": {
  168. "variantGroups": {
  169. "size": {
  170. "tiny": {
  171. "minWidth": 0,
  172. "minHeight": 0,
  173. "borderRadius": "border-radius",
  174. "borderWidth": 0,
  175. "paddingHorizontal": 6,
  176. "paddingVertical": 3,
  177. "textMarginHorizontal": 0,
  178. "textFontSize": 12,
  179. "textFontWeight": "bold",
  180. "iconWidth": 12,
  181. "iconHeight": 12,
  182. "iconMarginHorizontal": 6
  183. },
  184. "small": {
  185. "minWidth": "size-small",
  186. "minHeight": "size-small",
  187. "borderRadius": "border-radius",
  188. "borderWidth": "border-width",
  189. "paddingHorizontal": 8,
  190. "paddingVertical": 8,
  191. "textMarginHorizontal": 8,
  192. "textFontSize": 12,
  193. "textFontWeight": "bold",
  194. "iconWidth": 16,
  195. "iconHeight": 16,
  196. "iconMarginHorizontal": 8
  197. },
  198. "medium": {
  199. "minWidth": 112,
  200. "minHeight": 11,
  201. "borderRadius": "border-radius",
  202. "borderWidth": "border-width",
  203. "paddingHorizontal": 10,
  204. "paddingVertical": 6,
  205. "textMarginHorizontal": 10,
  206. "textFontSize": 12,
  207. "textFontWeight": "bold",
  208. "iconWidth": 20,
  209. "iconHeight": 20,
  210. "iconMarginHorizontal": 10
  211. },
  212. "large": {
  213. "minWidth": "size-large",
  214. "minHeight": "size-large",
  215. "borderRadius": "border-radius",
  216. "borderWidth": "border-width",
  217. "paddingHorizontal": 10,
  218. "paddingVertical": 14,
  219. "textMarginHorizontal": 10,
  220. "textFontSize": 16,
  221. "textFontWeight": "bold",
  222. "iconWidth": 24,
  223. "iconHeight": 24,
  224. "iconMarginHorizontal": 10
  225. },
  226. "giant": {
  227. "minWidth": "size-giant",
  228. "minHeight": "size-giant",
  229. "borderRadius": "border-radius",
  230. "borderWidth": "border-width",
  231. "paddingHorizontal": 12,
  232. "paddingVertical": 16,
  233. "textMarginHorizontal": 12,
  234. "textFontSize": 18,
  235. "textFontWeight": "bold",
  236. "iconWidth": 24,
  237. "iconHeight": 24,
  238. "iconMarginHorizontal": 12
  239. }
  240. }
  241. }
  242. },
  243. "outline": {
  244. "mapping": {},
  245. "variantGroups": {
  246. "status": {
  247. "basic": {
  248. "borderColor": "color-basic-transparent-default-border",
  249. "backgroundColor": "color-basic-transparent-default",
  250. "textColor": "text-hint-color",
  251. "iconTintColor": "text-hint-color",
  252. "state": {
  253. "focused": {
  254. "borderColor": "color-basic-transparent-focus-border",
  255. "backgroundColor": "color-basic-transparent-focus",
  256. "textColor": "text-hint-color",
  257. "iconTintColor": "text-hint-color"
  258. },
  259. "hover": {
  260. "borderColor": "color-basic-transparent-hover-border",
  261. "backgroundColor": "color-basic-transparent-hover",
  262. "textColor": "text-hint-color",
  263. "iconTintColor": "text-hint-color"
  264. },
  265. "active": {
  266. "borderColor": "color-basic-transparent-active-border",
  267. "backgroundColor": "color-basic-transparent-active",
  268. "textColor": "text-hint-color",
  269. "iconTintColor": "text-hint-color"
  270. },
  271. "disabled": {
  272. "borderColor": "color-basic-transparent-disabled-border",
  273. "backgroundColor": "color-basic-transparent-disabled",
  274. "textColor": "text-disabled-color",
  275. "iconTintColor": "text-disabled-color"
  276. }
  277. }
  278. },
  279. "primary": {
  280. "borderColor": "color-primary-transparent-default-border",
  281. "backgroundColor": "#fff",
  282. "textColor": "text-primary-color",
  283. "iconTintColor": "text-primary-color",
  284. "state": {
  285. "focused": {
  286. "borderColor": "color-primary-transparent-focus-border",
  287. "backgroundColor": "color-primary-transparent-focus",
  288. "textColor": "text-primary-color",
  289. "iconTintColor": "text-primary-color"
  290. },
  291. "hover": {
  292. "borderColor": "color-primary-transparent-hover-border",
  293. "backgroundColor": "color-primary-transparent-hover",
  294. "textColor": "text-primary-color",
  295. "iconTintColor": "text-primary-color"
  296. },
  297. "active": {
  298. "borderColor": "color-primary-transparent-active-border",
  299. "backgroundColor": "color-primary-transparent-active",
  300. "textColor": "text-primary-color",
  301. "iconTintColor": "text-primary-color"
  302. },
  303. "disabled": {
  304. "borderColor": "color-primary-transparent-disabled-border",
  305. "backgroundColor": "color-primary-transparent-disabled",
  306. "textColor": "text-disabled-color",
  307. "iconTintColor": "text-disabled-color"
  308. }
  309. }
  310. },
  311. "success": {
  312. "borderColor": "color-success-transparent-default-border",
  313. "backgroundColor": "color-success-transparent-default",
  314. "textColor": "text-success-color",
  315. "iconTintColor": "text-success-color",
  316. "state": {
  317. "focused": {
  318. "borderColor": "color-success-transparent-focus-border",
  319. "backgroundColor": "color-success-transparent-focus",
  320. "textColor": "text-success-color",
  321. "iconTintColor": "text-success-color"
  322. },
  323. "hover": {
  324. "borderColor": "color-success-transparent-hover-border",
  325. "backgroundColor": "color-success-transparent-hover",
  326. "textColor": "text-success-color",
  327. "iconTintColor": "text-success-color"
  328. },
  329. "active": {
  330. "borderColor": "color-success-transparent-active-border",
  331. "backgroundColor": "color-success-transparent-active",
  332. "textColor": "text-success-color",
  333. "iconTintColor": "text-success-color"
  334. },
  335. "disabled": {
  336. "borderColor": "color-success-transparent-disabled-border",
  337. "backgroundColor": "color-success-transparent-disabled",
  338. "textColor": "text-disabled-color",
  339. "iconTintColor": "text-disabled-color"
  340. }
  341. }
  342. },
  343. "info": {
  344. "borderColor": "color-info-transparent-default-border",
  345. "backgroundColor": "color-info-transparent-default",
  346. "textColor": "text-info-color",
  347. "iconTintColor": "text-info-color",
  348. "state": {
  349. "focused": {
  350. "borderColor": "color-info-transparent-focus-border",
  351. "backgroundColor": "color-info-transparent-focus",
  352. "textColor": "text-info-color",
  353. "iconTintColor": "text-info-color"
  354. },
  355. "hover": {
  356. "borderColor": "color-info-transparent-hover-border",
  357. "backgroundColor": "color-info-transparent-hover",
  358. "textColor": "text-info-color",
  359. "iconTintColor": "text-info-color"
  360. },
  361. "active": {
  362. "borderColor": "color-info-transparent-active-border",
  363. "backgroundColor": "color-info-transparent-active",
  364. "textColor": "text-info-color",
  365. "iconTintColor": "text-info-color"
  366. },
  367. "disabled": {
  368. "borderColor": "color-info-transparent-disabled-border",
  369. "backgroundColor": "color-info-transparent-disabled",
  370. "textColor": "text-disabled-color",
  371. "iconTintColor": "text-disabled-color"
  372. }
  373. }
  374. },
  375. "warning": {
  376. "borderColor": "color-warning-transparent-default-border",
  377. "backgroundColor": "color-warning-transparent-default",
  378. "textColor": "text-warning-color",
  379. "iconTintColor": "text-warning-color",
  380. "state": {
  381. "focused": {
  382. "borderColor": "color-warning-transparent-focus-border",
  383. "backgroundColor": "color-warning-transparent-focus",
  384. "textColor": "text-warning-color",
  385. "iconTintColor": "text-warning-color"
  386. },
  387. "hover": {
  388. "borderColor": "color-warning-transparent-hover-border",
  389. "backgroundColor": "color-warning-transparent-hover",
  390. "textColor": "text-warning-color",
  391. "iconTintColor": "text-warning-color"
  392. },
  393. "active": {
  394. "borderColor": "color-warning-transparent-active-border",
  395. "backgroundColor": "color-warning-transparent-active",
  396. "textColor": "text-warning-color",
  397. "iconTintColor": "text-warning-color"
  398. },
  399. "disabled": {
  400. "borderColor": "color-warning-transparent-disabled-border",
  401. "backgroundColor": "color-warning-transparent-disabled",
  402. "textColor": "text-disabled-color",
  403. "iconTintColor": "text-disabled-color"
  404. }
  405. }
  406. },
  407. "danger": {
  408. "borderColor": "color-danger-transparent-default-border",
  409. "backgroundColor": "color-danger-transparent-default",
  410. "textColor": "text-danger-color",
  411. "iconTintColor": "text-danger-color",
  412. "state": {
  413. "focused": {
  414. "borderColor": "color-danger-transparent-focus-border",
  415. "backgroundColor": "color-danger-transparent-focus",
  416. "textColor": "text-danger-color",
  417. "iconTintColor": "text-danger-color"
  418. },
  419. "hover": {
  420. "borderColor": "color-danger-transparent-hover-border",
  421. "backgroundColor": "color-danger-transparent-hover",
  422. "textColor": "text-danger-color",
  423. "iconTintColor": "text-danger-color"
  424. },
  425. "active": {
  426. "borderColor": "color-danger-transparent-active-border",
  427. "backgroundColor": "color-danger-transparent-active",
  428. "textColor": "text-danger-color",
  429. "iconTintColor": "text-danger-color"
  430. },
  431. "disabled": {
  432. "borderColor": "color-danger-transparent-disabled-border",
  433. "backgroundColor": "color-danger-transparent-disabled",
  434. "textColor": "text-disabled-color",
  435. "iconTintColor": "text-disabled-color"
  436. }
  437. }
  438. },
  439. "control": {
  440. "borderColor": "color-control-transparent-default-border",
  441. "backgroundColor": "color-control-transparent-default",
  442. "textColor": "text-control-color",
  443. "iconTintColor": "text-control-color",
  444. "state": {
  445. "focused": {
  446. "borderColor": "color-control-transparent-focus-border",
  447. "backgroundColor": "color-control-transparent-focus",
  448. "textColor": "text-control-color",
  449. "iconTintColor": "text-control-color"
  450. },
  451. "hover": {
  452. "borderColor": "color-control-transparent-hover-border",
  453. "backgroundColor": "color-control-transparent-hover",
  454. "textColor": "text-control-color",
  455. "iconTintColor": "text-control-color"
  456. },
  457. "active": {
  458. "borderColor": "color-control-transparent-active-border",
  459. "backgroundColor": "color-control-transparent-active",
  460. "textColor": "text-control-color",
  461. "iconTintColor": "text-control-color"
  462. },
  463. "disabled": {
  464. "borderColor": "color-control-transparent-disabled-border",
  465. "backgroundColor": "color-control-transparent-disabled",
  466. "textColor": "text-disabled-color",
  467. "iconTintColor": "text-disabled-color"
  468. }
  469. }
  470. }
  471. }
  472. }
  473. },
  474. "ghost": {
  475. "mapping": {},
  476. "variantGroups": {
  477. "status": {
  478. "basic": {
  479. "borderColor": "transparent",
  480. "backgroundColor": "transparent",
  481. "textColor": "text-hint-color",
  482. "iconTintColor": "text-hint-color",
  483. "state": {
  484. "focused": {
  485. "borderColor": "transparent",
  486. "backgroundColor": "transparent",
  487. "textColor": "text-hint-color",
  488. "iconTintColor": "text-hint-color"
  489. },
  490. "hover": {
  491. "borderColor": "transparent",
  492. "backgroundColor": "color-basic-transparent-100",
  493. "textColor": "text-hint-color",
  494. "iconTintColor": "text-hint-color"
  495. },
  496. "active": {
  497. "borderColor": "transparent",
  498. "backgroundColor": "color-basic-transparent-200",
  499. "textColor": "text-hint-color",
  500. "iconTintColor": "text-hint-color"
  501. },
  502. "disabled": {
  503. "borderColor": "transparent",
  504. "backgroundColor": "color-basic-transparent-200",
  505. "textColor": "text-disabled-color",
  506. "iconTintColor": "text-disabled-color"
  507. }
  508. }
  509. },
  510. "primary": {
  511. "borderColor": "transparent",
  512. "backgroundColor": "transparent",
  513. "textColor": "text-primary-color",
  514. "iconTintColor": "text-primary-color",
  515. "state": {
  516. "focused": {
  517. "borderColor": "color-basic-transparent-500",
  518. "backgroundColor": "color-basic-transparent-200",
  519. "textColor": "text-primary-color",
  520. "iconTintColor": "text-primary-color"
  521. },
  522. "hover": {
  523. "borderColor": "transparent",
  524. "backgroundColor": "color-basic-transparent-100",
  525. "textColor": "text-primary-color",
  526. "iconTintColor": "text-primary-color"
  527. },
  528. "active": {
  529. "borderColor": "transparent",
  530. "backgroundColor": "color-basic-transparent-200",
  531. "textColor": "text-primary-color",
  532. "iconTintColor": "text-primary-color"
  533. },
  534. "disabled": {
  535. "borderColor": "transparent",
  536. "backgroundColor": "color-basic-transparent-200",
  537. "textColor": "text-disabled-color",
  538. "iconTintColor": "text-disabled-color"
  539. }
  540. }
  541. },
  542. "success": {
  543. "borderColor": "transparent",
  544. "backgroundColor": "transparent",
  545. "textColor": "text-success-color",
  546. "iconTintColor": "text-success-color",
  547. "state": {
  548. "focused": {
  549. "borderColor": "color-basic-transparent-500",
  550. "backgroundColor": "color-basic-transparent-200",
  551. "textColor": "text-success-color",
  552. "iconTintColor": "text-success-color"
  553. },
  554. "hover": {
  555. "borderColor": "transparent",
  556. "backgroundColor": "color-basic-transparent-100",
  557. "textColor": "text-success-color",
  558. "iconTintColor": "text-success-color"
  559. },
  560. "active": {
  561. "borderColor": "transparent",
  562. "backgroundColor": "color-basic-transparent-200",
  563. "textColor": "text-success-color",
  564. "iconTintColor": "text-success-color"
  565. },
  566. "disabled": {
  567. "borderColor": "transparent",
  568. "backgroundColor": "color-basic-transparent-200",
  569. "textColor": "text-disabled-color",
  570. "iconTintColor": "text-disabled-color"
  571. }
  572. }
  573. },
  574. "info": {
  575. "borderColor": "transparent",
  576. "backgroundColor": "transparent",
  577. "textColor": "text-info-color",
  578. "iconTintColor": "text-info-color",
  579. "state": {
  580. "focused": {
  581. "borderColor": "color-basic-transparent-500",
  582. "backgroundColor": "color-basic-transparent-200",
  583. "textColor": "text-info-color",
  584. "iconTintColor": "text-info-color"
  585. },
  586. "hover": {
  587. "borderColor": "transparent",
  588. "backgroundColor": "color-basic-transparent-100",
  589. "textColor": "text-info-color",
  590. "iconTintColor": "text-info-color"
  591. },
  592. "active": {
  593. "borderColor": "transparent",
  594. "backgroundColor": "color-basic-transparent-200",
  595. "textColor": "text-info-color",
  596. "iconTintColor": "text-info-color"
  597. },
  598. "disabled": {
  599. "borderColor": "transparent",
  600. "backgroundColor": "color-basic-transparent-200",
  601. "textColor": "text-disabled-color",
  602. "iconTintColor": "text-disabled-color"
  603. }
  604. }
  605. },
  606. "warning": {
  607. "borderColor": "transparent",
  608. "backgroundColor": "transparent",
  609. "textColor": "text-warning-color",
  610. "iconTintColor": "text-warning-color",
  611. "state": {
  612. "focused": {
  613. "borderColor": "color-basic-transparent-500",
  614. "backgroundColor": "color-basic-transparent-200",
  615. "textColor": "text-info-color",
  616. "iconTintColor": "text-info-color"
  617. },
  618. "hover": {
  619. "borderColor": "transparent",
  620. "backgroundColor": "color-basic-transparent-100",
  621. "textColor": "text-warning-color",
  622. "iconTintColor": "text-warning-color"
  623. },
  624. "active": {
  625. "borderColor": "transparent",
  626. "backgroundColor": "color-basic-transparent-200",
  627. "textColor": "text-warning-color",
  628. "iconTintColor": "text-warning-color"
  629. },
  630. "disabled": {
  631. "borderColor": "transparent",
  632. "backgroundColor": "color-basic-transparent-200",
  633. "textColor": "text-disabled-color",
  634. "iconTintColor": "text-disabled-color"
  635. }
  636. }
  637. },
  638. "danger": {
  639. "borderColor": "transparent",
  640. "backgroundColor": "transparent",
  641. "textColor": "text-danger-color",
  642. "iconTintColor": "text-danger-color",
  643. "state": {
  644. "focused": {
  645. "borderColor": "color-basic-transparent-500",
  646. "backgroundColor": "color-basic-transparent-200",
  647. "textColor": "text-danger-color",
  648. "iconTintColor": "text-danger-color"
  649. },
  650. "hover": {
  651. "borderColor": "transparent",
  652. "backgroundColor": "color-basic-transparent-100",
  653. "textColor": "text-danger-color",
  654. "iconTintColor": "text-danger-color"
  655. },
  656. "active": {
  657. "borderColor": "transparent",
  658. "backgroundColor": "color-basic-transparent-200",
  659. "textColor": "text-danger-color",
  660. "iconTintColor": "text-danger-color"
  661. },
  662. "disabled": {
  663. "borderColor": "transparent",
  664. "backgroundColor": "color-basic-transparent-200",
  665. "textColor": "text-disabled-color",
  666. "iconTintColor": "text-disabled-color"
  667. }
  668. }
  669. },
  670. "control": {
  671. "borderColor": "transparent",
  672. "backgroundColor": "transparent",
  673. "textColor": "text-control-color",
  674. "iconTintColor": "text-control-color",
  675. "state": {
  676. "focused": {
  677. "borderColor": "color-basic-transparent-500",
  678. "backgroundColor": "color-basic-transparent-200",
  679. "textColor": "text-control-color",
  680. "iconTintColor": "text-control-color"
  681. },
  682. "hover": {
  683. "borderColor": "transparent",
  684. "backgroundColor": "color-basic-transparent-100",
  685. "textColor": "text-control-color",
  686. "iconTintColor": "text-control-color"
  687. },
  688. "active": {
  689. "borderColor": "transparent",
  690. "backgroundColor": "color-basic-transparent-200",
  691. "textColor": "text-control-color",
  692. "iconTintColor": "text-control-color"
  693. },
  694. "disabled": {
  695. "borderColor": "transparent",
  696. "backgroundColor": "color-basic-transparent-200",
  697. "textColor": "text-disabled-color",
  698. "iconTintColor": "text-disabled-color"
  699. }
  700. }
  701. }
  702. }
  703. }
  704. },
  705. "imageButton": {
  706. "mapping": {
  707. "textFontFamily": "text-font-family",
  708. "iconMarginHorizontal": 4
  709. },
  710. "variantGroups": {
  711. "status": {
  712. "primary": {
  713. "borderColor": "#FFF5D8",
  714. "backgroundColor": "#FFF5D8"
  715. }
  716. },
  717. "size": {
  718. "medium": {
  719. "minWidth": 67,
  720. "minHeight": 67,
  721. "iconWidth": 50,
  722. "iconHeight": 50,
  723. "paddingHorizontal": 0,
  724. "paddingVertical": 0
  725. }
  726. }
  727. }
  728. },
  729. "bannerButton": {
  730. "mapping": {
  731. "textFontFamily": "text-font-family",
  732. "iconMarginHorizontal": 4
  733. },
  734. "variantGroups": {
  735. "status": {
  736. "primary": {
  737. "borderColor": "transparent",
  738. "backgroundColor": "transparent",
  739. "state": {
  740. "focused": {
  741. "borderColor": "transparent",
  742. "backgroundColor": "transparent"
  743. },
  744. "hover": {
  745. "borderColor": "transparent",
  746. "backgroundColor": "transparent"
  747. },
  748. "active": {
  749. "borderColor": "transparent",
  750. "backgroundColor": "transparent"
  751. },
  752. "disabled": {
  753. "borderColor": "transparent",
  754. "backgroundColor": "transparent",
  755. "textColor": "text-disabled-color",
  756. "iconTintColor": "text-disabled-color"
  757. }
  758. }
  759. }
  760. },
  761. "size": {
  762. "medium": {
  763. "minWidth": "100%",
  764. "minHeight": 66
  765. }
  766. }
  767. }
  768. },
  769. "labelButton": {
  770. "mapping": {
  771. "textFontFamily": "text-font-family",
  772. "iconMarginHorizontal": 4
  773. },
  774. "variantGroups": {
  775. "status": {
  776. "primary": {
  777. "borderColor": "transparent",
  778. "backgroundColor": "transparent",
  779. "textColor": "#787878",
  780. "iconTintColor": "#787878",
  781. "state": {
  782. "focused": {
  783. "borderColor": "transparent",
  784. "backgroundColor": "transparent"
  785. },
  786. "hover": {
  787. "borderColor": "transparent",
  788. "backgroundColor": "transparent"
  789. },
  790. "active": {
  791. "borderColor": "transparent",
  792. "backgroundColor": "transparent"
  793. },
  794. "disabled": {
  795. "borderColor": "transparent",
  796. "backgroundColor": "transparent",
  797. "textColor": "text-disabled-color",
  798. "iconTintColor": "text-disabled-color"
  799. }
  800. }
  801. }
  802. },
  803. "size": {
  804. "medium": {
  805. "minWidth": "100%",
  806. "minHeight": "100%",
  807. "textFontSize": 10
  808. }
  809. }
  810. }
  811. },
  812. "classification": {
  813. "mapping": {
  814. "textFontFamily": "text-font-family",
  815. "iconMarginHorizontal": 4
  816. },
  817. "variantGroups": {
  818. "size": {
  819. "medium": {
  820. "minWidth": 33,
  821. "minHeight": 33,
  822. "textFontSize": 10,
  823. "paddingHorizontal": 6,
  824. "paddingVertical": 6,
  825. "textMarginHorizontal": 0
  826. }
  827. }
  828. }
  829. }
  830. }
  831. },
  832. "Card": {
  833. "meta": {
  834. "scope": "all",
  835. "parameters": {
  836. "backgroundColor": {
  837. "type": "string"
  838. },
  839. "borderRadius": {
  840. "type": "number"
  841. },
  842. "borderColor": {
  843. "type": "string"
  844. },
  845. "borderWidth": {
  846. "type": "number"
  847. },
  848. "bodyPaddingHorizontal": {
  849. "type": "number"
  850. },
  851. "bodyPaddingVertical": {
  852. "type": "number"
  853. },
  854. "headerPaddingHorizontal": {
  855. "type": "number"
  856. },
  857. "headerPaddingVertical": {
  858. "type": "number"
  859. },
  860. "footerPaddingHorizontal": {
  861. "type": "number"
  862. },
  863. "footerPaddingVertical": {
  864. "type": "number"
  865. },
  866. "accentBackgroundColor": {
  867. "type": "string"
  868. },
  869. "accentHeight": {
  870. "type": "number"
  871. }
  872. },
  873. "appearances": {
  874. "filled": {
  875. "default": false
  876. },
  877. "outline": {
  878. "default": true
  879. }
  880. },
  881. "variantGroups": {
  882. "status": {
  883. "basic": {
  884. "default": false
  885. },
  886. "primary": {
  887. "default": false
  888. },
  889. "success": {
  890. "default": false
  891. },
  892. "info": {
  893. "default": false
  894. },
  895. "warning": {
  896. "default": false
  897. },
  898. "danger": {
  899. "default": false
  900. },
  901. "control": {
  902. "default": false
  903. }
  904. },
  905. "direction": {
  906. "horizontal": {
  907. "default": true
  908. },
  909. "vertical": {
  910. "default": false
  911. }
  912. }
  913. },
  914. "states": {
  915. "active": {
  916. "default": false,
  917. "priority": 0,
  918. "scope": "all"
  919. }
  920. }
  921. },
  922. "appearances": {
  923. "outline": {
  924. "mapping": {
  925. "backgroundColor": "background-basic-color-1",
  926. "borderRadius": "border-radius",
  927. "borderColor": "border-basic-color-4",
  928. "borderWidth": 1,
  929. "accentHeight": 0,
  930. "bodyPaddingHorizontal": 24,
  931. "bodyPaddingVertical": 16,
  932. "headerPaddingHorizontal": 24,
  933. "headerPaddingVertical": 16,
  934. "footerPaddingHorizontal": 24,
  935. "footerPaddingVertical": 16,
  936. "state": {
  937. "active": {
  938. "backgroundColor": "background-basic-color-2"
  939. }
  940. }
  941. },
  942. "variantGroups": {
  943. "status": {
  944. "basic": {
  945. "accentHeight": 4,
  946. "accentBackgroundColor": "color-basic-default"
  947. },
  948. "primary": {
  949. "accentHeight": 4,
  950. "accentBackgroundColor": "color-primary-default"
  951. },
  952. "success": {
  953. "accentHeight": 4,
  954. "accentBackgroundColor": "color-success-default"
  955. },
  956. "info": {
  957. "accentHeight": 4,
  958. "accentBackgroundColor": "color-info-default"
  959. },
  960. "warning": {
  961. "accentHeight": 4,
  962. "accentBackgroundColor": "color-warning-default"
  963. },
  964. "danger": {
  965. "accentHeight": 4,
  966. "accentBackgroundColor": "color-danger-default"
  967. },
  968. "control": {
  969. "accentHeight": 4,
  970. "accentBackgroundColor": "color-control-default"
  971. }
  972. }
  973. }
  974. },
  975. "filled": {
  976. "mapping": {
  977. "backgroundColor": "transparent",
  978. "borderWidth": 0,
  979. "accentBackgroundColor": "#eee",
  980. "accentHeight": 7,
  981. "state": {
  982. "active": {
  983. "backgroundColor": "transparent"
  984. }
  985. }
  986. }
  987. },
  988. "headFilled": {
  989. "mapping": {
  990. "backgroundColor": "transparent",
  991. "borderWidth": 0,
  992. "accentBackgroundColor": "#eee",
  993. "accentHeight": 7,
  994. "bodyPaddingHorizontal": 50,
  995. "bodyPaddingVertical": 20,
  996. "headerPaddingHorizontal": 50,
  997. "headerPaddingVertical": 20,
  998. "footerPaddingHorizontal": 50,
  999. "footerPaddingVertical": 20,
  1000. "state": {
  1001. "active": {
  1002. "backgroundColor": "transparent"
  1003. }
  1004. }
  1005. }
  1006. },
  1007. "formFilled": {
  1008. "mapping": {
  1009. "backgroundColor": "transparent",
  1010. "borderWidth": 0,
  1011. "accentBackgroundColor": "#eee",
  1012. "accentHeight": 7,
  1013. "bodyPaddingHorizontal": 15,
  1014. "bodyPaddingVertical": 10,
  1015. "headerPaddingHorizontal": 15,
  1016. "headerPaddingVertical": 10,
  1017. "footerPaddingHorizontal": 15,
  1018. "footerPaddingVertical": 10,
  1019. "state": {
  1020. "active": {
  1021. "backgroundColor": "transparent"
  1022. }
  1023. }
  1024. }
  1025. },
  1026. "modalCrad": {
  1027. "mapping": {
  1028. "bodyPaddingHorizontal": 10,
  1029. "bodyPaddingVertical": 10,
  1030. "headerPaddingHorizontal": 10,
  1031. "headerPaddingVertical": 10,
  1032. "footerPaddingHorizontal": 10,
  1033. "footerPaddingVertical": 10
  1034. }
  1035. },
  1036. "diaogOutline": {
  1037. "mapping": {
  1038. "accentHeight": 0,
  1039. "bodyPaddingHorizontal": 24,
  1040. "bodyPaddingVertical": 10,
  1041. "headerPaddingHorizontal": 24,
  1042. "headerPaddingVertical": 20,
  1043. "footerPaddingHorizontal": 24,
  1044. "footerPaddingVertical": 15,
  1045. "state": {
  1046. "active": {
  1047. "backgroundColor": "background-basic-color-2"
  1048. }
  1049. }
  1050. },
  1051. "variantGroups": {
  1052. "status": {
  1053. "basic": {
  1054. "accentHeight": 4,
  1055. "accentBackgroundColor": "color-basic-default"
  1056. },
  1057. "primary": {
  1058. "accentHeight": 4,
  1059. "accentBackgroundColor": "color-primary-default"
  1060. },
  1061. "success": {
  1062. "accentHeight": 4,
  1063. "accentBackgroundColor": "color-success-default"
  1064. },
  1065. "info": {
  1066. "accentHeight": 4,
  1067. "accentBackgroundColor": "color-info-default"
  1068. },
  1069. "warning": {
  1070. "accentHeight": 4,
  1071. "accentBackgroundColor": "color-warning-default"
  1072. },
  1073. "danger": {
  1074. "accentHeight": 4,
  1075. "accentBackgroundColor": "color-danger-default"
  1076. },
  1077. "control": {
  1078. "accentHeight": 4,
  1079. "accentBackgroundColor": "color-control-default"
  1080. }
  1081. }
  1082. }
  1083. },
  1084. "headerList": {
  1085. "mapping": {
  1086. "backgroundColor": "transparent",
  1087. "accentHeight": 0,
  1088. "bodyPaddingHorizontal": 15,
  1089. "bodyPaddingVertical": 10,
  1090. "headerPaddingHorizontal": 15,
  1091. "headerPaddingVertical": 0,
  1092. "footerPaddingHorizontal": 15,
  1093. "footerPaddingVertical": 0,
  1094. "borderColor": "transparent",
  1095. "state": {
  1096. "active": {
  1097. "backgroundColor": "background-basic-color-2"
  1098. }
  1099. }
  1100. },
  1101. "variantGroups": {
  1102. "status": {
  1103. "basic": {
  1104. "accentHeight": 4,
  1105. "accentBackgroundColor": "color-basic-default"
  1106. },
  1107. "primary": {
  1108. "accentHeight": 4,
  1109. "accentBackgroundColor": "color-primary-default"
  1110. },
  1111. "success": {
  1112. "accentHeight": 4,
  1113. "accentBackgroundColor": "color-success-default"
  1114. },
  1115. "info": {
  1116. "accentHeight": 4,
  1117. "accentBackgroundColor": "color-info-default"
  1118. },
  1119. "warning": {
  1120. "accentHeight": 4,
  1121. "accentBackgroundColor": "color-warning-default"
  1122. },
  1123. "danger": {
  1124. "accentHeight": 4,
  1125. "accentBackgroundColor": "color-danger-default"
  1126. },
  1127. "control": {
  1128. "accentHeight": 4,
  1129. "accentBackgroundColor": "color-control-default"
  1130. }
  1131. }
  1132. }
  1133. },
  1134. "goodsCard": {
  1135. "mapping": {
  1136. "accentHeight": 0,
  1137. "bodyPaddingHorizontal": 13,
  1138. "bodyPaddingVertical": 20,
  1139. "borderColor": "transparent",
  1140. "borderRadius": 3,
  1141. "state": {
  1142. "active": {
  1143. "backgroundColor": "background-basic-color-2"
  1144. }
  1145. }
  1146. },
  1147. "variantGroups": {
  1148. "status": {
  1149. "basic": {
  1150. "accentHeight": 4,
  1151. "accentBackgroundColor": "color-basic-default"
  1152. },
  1153. "primary": {
  1154. "accentHeight": 4,
  1155. "accentBackgroundColor": "color-primary-default"
  1156. },
  1157. "success": {
  1158. "accentHeight": 4,
  1159. "accentBackgroundColor": "color-success-default"
  1160. },
  1161. "info": {
  1162. "accentHeight": 4,
  1163. "accentBackgroundColor": "color-info-default"
  1164. },
  1165. "warning": {
  1166. "accentHeight": 4,
  1167. "accentBackgroundColor": "color-warning-default"
  1168. },
  1169. "danger": {
  1170. "accentHeight": 4,
  1171. "accentBackgroundColor": "color-danger-default"
  1172. },
  1173. "control": {
  1174. "accentHeight": 4,
  1175. "accentBackgroundColor": "color-control-default"
  1176. }
  1177. },
  1178. "direction": {
  1179. "vertical": {
  1180. "bodyPaddingHorizontal": 0,
  1181. "bodyPaddingVertical": 0
  1182. }
  1183. }
  1184. }
  1185. },
  1186. "classification": {
  1187. "mapping": {
  1188. "accentHeight": 0,
  1189. "bodyPaddingHorizontal": 10,
  1190. "bodyPaddingVertical": 5,
  1191. "borderColor": "transparent",
  1192. "borderRadius": 3,
  1193. "state": {
  1194. "active": {
  1195. "backgroundColor": "background-basic-color-2"
  1196. }
  1197. }
  1198. },
  1199. "variantGroups": {
  1200. "status": {
  1201. "basic": {
  1202. "accentHeight": 4,
  1203. "accentBackgroundColor": "color-basic-default"
  1204. },
  1205. "primary": {
  1206. "accentHeight": 4,
  1207. "accentBackgroundColor": "color-primary-default"
  1208. },
  1209. "success": {
  1210. "accentHeight": 4,
  1211. "accentBackgroundColor": "color-success-default"
  1212. },
  1213. "info": {
  1214. "accentHeight": 4,
  1215. "accentBackgroundColor": "color-info-default"
  1216. },
  1217. "warning": {
  1218. "accentHeight": 4,
  1219. "accentBackgroundColor": "color-warning-default"
  1220. },
  1221. "danger": {
  1222. "accentHeight": 4,
  1223. "accentBackgroundColor": "color-danger-default"
  1224. },
  1225. "control": {
  1226. "accentHeight": 4,
  1227. "accentBackgroundColor": "color-control-default"
  1228. }
  1229. },
  1230. "direction": {
  1231. "vertical": {
  1232. "bodyPaddingHorizontal": 0,
  1233. "bodyPaddingVertical": 0
  1234. }
  1235. }
  1236. }
  1237. },
  1238. "homeCard": {
  1239. "mapping": {
  1240. "accentHeight": 0,
  1241. "bodyPaddingHorizontal": 10,
  1242. "bodyPaddingVertical": 10,
  1243. "borderRadius": 3,
  1244. "headerPaddingVertical": 0,
  1245. "footerPaddingVertical": 0
  1246. }
  1247. },
  1248. "homePage1Card": {
  1249. "mapping": {
  1250. "accentHeight": 0,
  1251. "bodyPaddingHorizontal": 15,
  1252. "bodyPaddingVertical": 0,
  1253. "borderRadius": 3,
  1254. "headerPaddingVertical": 10,
  1255. "headerPaddingHorizontal": 15,
  1256. "footerPaddingVertical": 5,
  1257. "borderWidth": 0
  1258. }
  1259. }
  1260. }
  1261. },
  1262. "SelectOption": {
  1263. "appearances": {
  1264. "default": {
  1265. "mapping": {
  1266. "paddingHorizontal": 8,
  1267. "paddingVertical": 12,
  1268. "backgroundColor": "background-basic-color-1",
  1269. "textMarginHorizontal": 8,
  1270. "textFontSize": "text-subtitle-1-font-size",
  1271. "textFontWeight": "text-subtitle-1-font-weight",
  1272. "textFontFamily": "text-subtitle-1-font-family",
  1273. "textColor": "text-basic-color",
  1274. "iconWidth": 20,
  1275. "iconHeight": 20,
  1276. "iconMarginHorizontal": 8,
  1277. "iconTintColor": "text-hint-color",
  1278. "state": {
  1279. "hover": {
  1280. "iconTintColor": "text-primary-hover-color",
  1281. "backgroundColor": "color-basic-transparent-hover"
  1282. },
  1283. "active": {
  1284. "backgroundColor": "color-basic-transparent-active"
  1285. },
  1286. "selected": {
  1287. "backgroundColor": "color-primary-transparent-default",
  1288. "textColor": "text-basic-color",
  1289. "iconTintColor": "text-primary-color"
  1290. },
  1291. "selected.hover": {
  1292. "background-color": "color-primary-transparent-100",
  1293. "textColor": "text-basic-color"
  1294. },
  1295. "disabled": {
  1296. "backgroundColor": "background-basic-color-1",
  1297. "textColor": "text-disabled-color",
  1298. "iconTintColor": "text-disabled-color"
  1299. }
  1300. }
  1301. }
  1302. },
  1303. "grouped": {
  1304. "mapping": {
  1305. "paddingLeft": 16
  1306. }
  1307. },
  1308. "form": {
  1309. "mapping": {
  1310. "paddingVertical": 5,
  1311. "textFontSize": "text-subtitle-2-font-size"
  1312. }
  1313. }
  1314. }
  1315. },
  1316. "MenuItem": {
  1317. "appearances": {
  1318. "default": {
  1319. "mapping": {
  1320. "paddingHorizontal": 8,
  1321. "paddingVertical": 12,
  1322. "backgroundColor": "background-basic-color-1",
  1323. "indicatorWidth": 0,
  1324. "indicatorBackgroundColor": "transparent",
  1325. "titleMarginHorizontal": 8,
  1326. "titleFontSize": "text-subtitle-2-font-size",
  1327. "titleFontWeight": "text-subtitle-2-font-weight",
  1328. "titleFontFamily": "text-subtitle-2-font-family",
  1329. "titleColor": "text-basic-color",
  1330. "iconWidth": 20,
  1331. "iconHeight": 20,
  1332. "iconMarginHorizontal": 8,
  1333. "iconTintColor": "text-hint-color",
  1334. "state": {
  1335. "hover": {
  1336. "titleColor": "text-primary-hover-color",
  1337. "iconTintColor": "text-primary-hover-color"
  1338. },
  1339. "active": {
  1340. "backgroundColor": "color-basic-transparent-active"
  1341. },
  1342. "selected": {
  1343. "backgroundColor": "color-primary-transparent-default",
  1344. "indicatorWidth": 4,
  1345. "indicatorBackgroundColor": "color-primary-default",
  1346. "titleColor": "text-primary-color",
  1347. "iconTintColor": "text-primary-color"
  1348. },
  1349. "disabled": {
  1350. "titleColor": "text-disabled-color",
  1351. "iconTintColor": "text-disabled-color"
  1352. }
  1353. }
  1354. }
  1355. },
  1356. "grouped": {
  1357. "mapping": {
  1358. "paddingLeft": 16
  1359. }
  1360. },
  1361. "cardContent": {
  1362. "mapping": {
  1363. "paddingHorizontal": 0
  1364. }
  1365. }
  1366. }
  1367. },
  1368. "TopNavigation": {
  1369. "meta": {
  1370. "scope": "mobile",
  1371. "parameters": {
  1372. "minHeight": {
  1373. "type": "number"
  1374. },
  1375. "paddingVertical": {
  1376. "type": "number"
  1377. },
  1378. "paddingHorizontal": {
  1379. "type": "number"
  1380. },
  1381. "backgroundColor": {
  1382. "type": "string"
  1383. },
  1384. "titleTextAlign": {
  1385. "type": "string"
  1386. },
  1387. "titleFontFamily": {
  1388. "type": "string"
  1389. },
  1390. "titleFontSize": {
  1391. "type": "number"
  1392. },
  1393. "titleFontWeight": {
  1394. "type": "string"
  1395. },
  1396. "titleColor": {
  1397. "type": "string"
  1398. },
  1399. "subtitleTextAlign": {
  1400. "type": "string"
  1401. },
  1402. "subtitleFontFamily": {
  1403. "type": "string"
  1404. },
  1405. "subtitleFontSize": {
  1406. "type": "number"
  1407. },
  1408. "subtitleFontWeight": {
  1409. "type": "string"
  1410. },
  1411. "subtitleColor": {
  1412. "type": "string"
  1413. }
  1414. },
  1415. "appearances": {
  1416. "default": {
  1417. "default": true
  1418. },
  1419. "control": {
  1420. "default": false
  1421. }
  1422. },
  1423. "variantGroups": {
  1424. "alignment": {
  1425. "start": {
  1426. "default": true
  1427. },
  1428. "center": {
  1429. "default": false
  1430. }
  1431. }
  1432. },
  1433. "states": {}
  1434. },
  1435. "appearances": {
  1436. "default": {
  1437. "mapping": {
  1438. "minHeight": 56,
  1439. "paddingVertical": 8,
  1440. "paddingHorizontal": 8,
  1441. "backgroundColor": "color-primary-500",
  1442. "titleColor": "#fff",
  1443. "iconTintColor": "#fff"
  1444. },
  1445. "variantGroups": {
  1446. "alignment": {
  1447. "start": {
  1448. "titleTextAlign": "left",
  1449. "subtitleTextAlign": "left"
  1450. },
  1451. "center": {
  1452. "titleTextAlign": "center",
  1453. "subtitleTextAlign": "center"
  1454. }
  1455. }
  1456. }
  1457. },
  1458. "control": {
  1459. "mapping": {
  1460. "backgroundColor": "transparent"
  1461. }
  1462. },
  1463. "homeBar": {
  1464. "mapping": {
  1465. "minHeight": 56,
  1466. "paddingVertical": 8,
  1467. "paddingHorizontal": 8,
  1468. "backgroundColor": "#fff",
  1469. "titleColor": "#000000",
  1470. "iconTintColor": "#000000"
  1471. }
  1472. }
  1473. }
  1474. },
  1475. "Text": {
  1476. "meta": {
  1477. "scope": "all",
  1478. "parameters": {
  1479. "fontFamily": {
  1480. "type": "string"
  1481. },
  1482. "fontSize": {
  1483. "type": "number"
  1484. },
  1485. "fontWeight": {
  1486. "type": "string"
  1487. },
  1488. "color": {
  1489. "type": "string"
  1490. }
  1491. },
  1492. "appearances": {
  1493. "default": {
  1494. "default": true
  1495. },
  1496. "alternative": {
  1497. "default": false
  1498. },
  1499. "hint": {
  1500. "default": false
  1501. }
  1502. },
  1503. "variantGroups": {
  1504. "category": {
  1505. "h1": {
  1506. "default": false
  1507. },
  1508. "h2": {
  1509. "default": false
  1510. },
  1511. "h3": {
  1512. "default": false
  1513. },
  1514. "h4": {
  1515. "default": false
  1516. },
  1517. "h5": {
  1518. "default": false
  1519. },
  1520. "h6": {
  1521. "default": false
  1522. },
  1523. "s1": {
  1524. "default": false
  1525. },
  1526. "s2": {
  1527. "default": false
  1528. },
  1529. "p1": {
  1530. "default": true
  1531. },
  1532. "p2": {
  1533. "default": false
  1534. },
  1535. "c1": {
  1536. "default": false
  1537. },
  1538. "c2": {
  1539. "default": false
  1540. },
  1541. "label": {
  1542. "default": false
  1543. }
  1544. },
  1545. "status": {
  1546. "basic": {
  1547. "default": false
  1548. },
  1549. "primary": {
  1550. "default": false
  1551. },
  1552. "success": {
  1553. "default": false
  1554. },
  1555. "info": {
  1556. "default": false
  1557. },
  1558. "warning": {
  1559. "default": false
  1560. },
  1561. "danger": {
  1562. "default": false
  1563. },
  1564. "control": {
  1565. "default": false
  1566. }
  1567. }
  1568. },
  1569. "states": {}
  1570. },
  1571. "appearances": {
  1572. "default": {
  1573. "mapping": {
  1574. "color": "text-basic-color"
  1575. },
  1576. "variantGroups": {
  1577. "category": {
  1578. "h1": {
  1579. "fontSize": "text-heading-1-font-size",
  1580. "fontWeight": "text-heading-1-font-weight",
  1581. "fontFamily": "text-heading-1-font-family"
  1582. },
  1583. "h2": {
  1584. "fontSize": "text-heading-2-font-size",
  1585. "fontWeight": "text-heading-2-font-weight",
  1586. "fontFamily": "text-heading-2-font-family"
  1587. },
  1588. "h3": {
  1589. "fontSize": "text-heading-3-font-size",
  1590. "fontWeight": "text-heading-3-font-weight",
  1591. "fontFamily": "text-heading-3-font-family"
  1592. },
  1593. "h4": {
  1594. "fontSize": "text-heading-4-font-size",
  1595. "fontWeight": "text-heading-4-font-weight",
  1596. "fontFamily": "text-heading-4-font-family"
  1597. },
  1598. "h5": {
  1599. "fontSize": "text-heading-5-font-size",
  1600. "fontWeight": "text-heading-5-font-weight",
  1601. "fontFamily": "text-heading-5-font-family"
  1602. },
  1603. "h6": {
  1604. "fontSize": "text-heading-6-font-size",
  1605. "fontWeight": "text-heading-6-font-weight",
  1606. "fontFamily": "text-heading-6-font-family"
  1607. },
  1608. "s1": {
  1609. "fontSize": "text-subtitle-1-font-size",
  1610. "fontWeight": "text-subtitle-1-font-weight",
  1611. "fontFamily": "text-subtitle-1-font-family"
  1612. },
  1613. "s2": {
  1614. "fontSize": "text-subtitle-2-font-size",
  1615. "fontWeight": "text-subtitle-2-font-weight",
  1616. "fontFamily": "text-subtitle-2-font-family"
  1617. },
  1618. "p1": {
  1619. "fontSize": "text-paragraph-1-font-size",
  1620. "fontWeight": "text-paragraph-1-font-weight",
  1621. "fontFamily": "text-paragraph-1-font-family"
  1622. },
  1623. "p2": {
  1624. "fontSize": "text-paragraph-2-font-size",
  1625. "fontWeight": "text-paragraph-2-font-weight",
  1626. "fontFamily": "text-paragraph-2-font-family"
  1627. },
  1628. "c1": {
  1629. "fontSize": "text-caption-1-font-size",
  1630. "fontWeight": "text-caption-1-font-weight",
  1631. "fontFamily": "text-caption-1-font-family"
  1632. },
  1633. "c2": {
  1634. "fontSize": "text-caption-2-font-size",
  1635. "fontWeight": "text-caption-2-font-weight",
  1636. "fontFamily": "text-caption-2-font-family"
  1637. },
  1638. "label": {
  1639. "fontSize": "text-label-font-size",
  1640. "fontWeight": "text-label-font-weight",
  1641. "fontFamily": "text-label-font-family"
  1642. }
  1643. },
  1644. "status": {
  1645. "basic": {
  1646. "color": "text-basic-color"
  1647. },
  1648. "primary": {
  1649. "color": "text-primary-color"
  1650. },
  1651. "success": {
  1652. "color": "text-success-color"
  1653. },
  1654. "info": {
  1655. "color": "#B5B5B5"
  1656. },
  1657. "warning": {
  1658. "color": "text-warning-color"
  1659. },
  1660. "danger": {
  1661. "color": "text-danger-color"
  1662. },
  1663. "control": {
  1664. "color": "text-control-color"
  1665. }
  1666. }
  1667. }
  1668. },
  1669. "alternative": {
  1670. "mapping": {
  1671. "color": "text-alternate-color"
  1672. }
  1673. },
  1674. "hint": {
  1675. "mapping": {
  1676. "color": "text-hint-color"
  1677. }
  1678. }
  1679. }
  1680. },
  1681. "Tab": {
  1682. "meta": {
  1683. "scope": "all",
  1684. "parameters": {
  1685. "textFontFamily": {
  1686. "type": "string"
  1687. },
  1688. "textFontSize": {
  1689. "type": "number"
  1690. },
  1691. "textFontWeight": {
  1692. "type": "number"
  1693. },
  1694. "textMarginVertical": {
  1695. "type": "number"
  1696. },
  1697. "textColor": {
  1698. "type": "string"
  1699. },
  1700. "iconWidth": {
  1701. "type": "number"
  1702. },
  1703. "iconHeight": {
  1704. "type": "number"
  1705. },
  1706. "iconMarginVertical": {
  1707. "type": "number"
  1708. },
  1709. "iconTintColor": {
  1710. "type": "string"
  1711. }
  1712. },
  1713. "appearances": {
  1714. "default": {
  1715. "default": true
  1716. }
  1717. },
  1718. "variantGroups": {},
  1719. "states": {
  1720. "selected": {
  1721. "default": false,
  1722. "priority": 0,
  1723. "scope": "all"
  1724. },
  1725. "hover": {
  1726. "default": false,
  1727. "priority": 1,
  1728. "scope": "all"
  1729. },
  1730. "focused": {
  1731. "default": false,
  1732. "priority": 2,
  1733. "scope": "all"
  1734. }
  1735. }
  1736. },
  1737. "appearances": {
  1738. "default": {
  1739. "mapping": {
  1740. "textMarginVertical": 2,
  1741. "textFontSize": 14,
  1742. "textFontWeight": "bold",
  1743. "textFontFamily": "text-font-family",
  1744. "textColor": "text-hint-color",
  1745. "iconWidth": 24,
  1746. "iconHeight": 24,
  1747. "iconMarginVertical": 2,
  1748. "iconTintColor": "text-hint-color",
  1749. "state": {
  1750. "hover": {
  1751. "textColor": "text-primary-hover-color",
  1752. "iconTintColor": "text-primary-hover-color"
  1753. },
  1754. "selected": {
  1755. "textColor": "text-primary-color",
  1756. "iconTintColor": "text-primary-color"
  1757. }
  1758. }
  1759. }
  1760. },
  1761. "homeTab": {
  1762. "mapping": {
  1763. "textMarginVertical": 5,
  1764. "textFontSize": 15,
  1765. "textFontWeight": "blod",
  1766. "textFontFamily": "text-font-family",
  1767. "textColor": "#000",
  1768. "iconWidth": 24,
  1769. "iconHeight": 24,
  1770. "iconMarginVertical": 8,
  1771. "iconTintColor": "#000",
  1772. "state": {
  1773. "hover": {
  1774. "textColor": "#000",
  1775. "iconTintColor": "text-primary-hover-color"
  1776. },
  1777. "selected": {
  1778. "textColor": "#000",
  1779. "iconTintColor": "text-primary-color"
  1780. }
  1781. }
  1782. }
  1783. }
  1784. }
  1785. },
  1786. "TabBar": {
  1787. "meta": {
  1788. "scope": "all",
  1789. "parameters": {
  1790. "paddingVertical": {
  1791. "type": "number"
  1792. },
  1793. "backgroundColor": {
  1794. "type": "string"
  1795. },
  1796. "indicatorHeight": {
  1797. "type": "number"
  1798. },
  1799. "indicatorBorderRadius": {
  1800. "type": "number"
  1801. },
  1802. "indicatorBackgroundColor": {
  1803. "type": "string"
  1804. }
  1805. },
  1806. "appearances": {
  1807. "default": {
  1808. "default": true
  1809. }
  1810. },
  1811. "variantGroups": {},
  1812. "states": {}
  1813. },
  1814. "appearances": {
  1815. "default": {
  1816. "mapping": {
  1817. "paddingVertical": 4,
  1818. "backgroundColor": "background-basic-color-1",
  1819. "indicatorHeight": 4,
  1820. "indicatorBorderRadius": 2,
  1821. "indicatorBackgroundColor": "color-primary-default"
  1822. }
  1823. },
  1824. "homeTab": {
  1825. "mapping": {
  1826. "paddingVertical": 4,
  1827. "backgroundColor": "transparent",
  1828. "indicatorHeight": 4,
  1829. "indicatorBorderRadius": 2,
  1830. "indicatorBackgroundColor": "transparent"
  1831. }
  1832. }
  1833. }
  1834. },
  1835. "ListItem": {
  1836. "meta": {
  1837. "scope": "all",
  1838. "parameters": {
  1839. "paddingVertical": {
  1840. "type": "number"
  1841. },
  1842. "paddingHorizontal": {
  1843. "type": "number"
  1844. },
  1845. "backgroundColor": {
  1846. "type": "string"
  1847. },
  1848. "iconWidth": {
  1849. "type": "number"
  1850. },
  1851. "iconHeight": {
  1852. "type": "number"
  1853. },
  1854. "iconMarginHorizontal": {
  1855. "type": "number"
  1856. },
  1857. "iconTintColor": {
  1858. "type": "string"
  1859. },
  1860. "titleMarginHorizontal": {
  1861. "type": "number"
  1862. },
  1863. "titleFontFamily": {
  1864. "type": "string"
  1865. },
  1866. "titleFontSize": {
  1867. "type": "number"
  1868. },
  1869. "titleFontWeight": {
  1870. "type": "string"
  1871. },
  1872. "titleColor": {
  1873. "type": "string"
  1874. },
  1875. "descriptionColor": {
  1876. "type": "string"
  1877. },
  1878. "descriptionFontFamily": {
  1879. "type": "string"
  1880. },
  1881. "descriptionFontSize": {
  1882. "type": "number"
  1883. },
  1884. "descriptionFontWeight": {
  1885. "type": "string"
  1886. },
  1887. "descriptionMarginHorizontal": {
  1888. "type": "number"
  1889. },
  1890. "accessoryMarginHorizontal": {
  1891. "type": "number"
  1892. },
  1893. "alignItems": {
  1894. "type": "String"
  1895. }
  1896. },
  1897. "appearances": {
  1898. "default": {
  1899. "default": true
  1900. }
  1901. },
  1902. "variantGroups": {},
  1903. "states": {
  1904. "active": {
  1905. "default": false,
  1906. "priority": 0,
  1907. "scope": "all"
  1908. }
  1909. }
  1910. },
  1911. "appearances": {
  1912. "default": {
  1913. "mapping": {
  1914. "paddingHorizontal": 8,
  1915. "paddingVertical": 12,
  1916. "backgroundColor": "background-basic-color-1",
  1917. "iconWidth": 24,
  1918. "iconHeight": 24,
  1919. "iconMarginHorizontal": 8,
  1920. "iconTintColor": "text-hint-color",
  1921. "titleMarginHorizontal": 8,
  1922. "titleFontSize": "text-subtitle-2-font-size",
  1923. "titleFontWeight": "text-subtitle-2-font-weight",
  1924. "titleFontFamily": "text-subtitle-2-font-family",
  1925. "titleColor": "text-basic-color",
  1926. "descriptionMarginHorizontal": 8,
  1927. "descriptionFontSize": "text-caption-1-font-size",
  1928. "descriptionFontWeight": "text-caption-1-font-weight",
  1929. "descriptionFontFamily": "text-caption-1-font-family",
  1930. "descriptionColor": "text-hint-color",
  1931. "accessoryMarginHorizontal": 8,
  1932. "state": {
  1933. "active": {
  1934. "backgroundColor": "color-basic-transparent-active"
  1935. }
  1936. }
  1937. }
  1938. },
  1939. "classification": {
  1940. "mapping": {
  1941. "paddingHorizontal": 8,
  1942. "paddingVertical": 12,
  1943. "backgroundColor": "transparent",
  1944. "iconWidth": 24,
  1945. "iconHeight": 24,
  1946. "iconMarginHorizontal": 8,
  1947. "iconTintColor": "text-hint-color",
  1948. "titleMarginHorizontal": 8,
  1949. "titleFontSize": "text-subtitle-2-font-size",
  1950. "titleFontWeight": "text-subtitle-2-font-weight",
  1951. "titleFontFamily": "text-subtitle-2-font-family",
  1952. "titleColor": "text-basic-color",
  1953. "descriptionMarginHorizontal": 8,
  1954. "descriptionFontSize": "text-caption-1-font-size",
  1955. "descriptionFontWeight": "text-caption-1-font-weight",
  1956. "descriptionFontFamily": "text-caption-1-font-family",
  1957. "descriptionColor": "text-hint-color",
  1958. "accessoryMarginHorizontal": 8,
  1959. "alignItems": "center",
  1960. "state": {
  1961. "active": {
  1962. "backgroundColor": "color-basic-transparent-active"
  1963. }
  1964. }
  1965. }
  1966. }
  1967. }
  1968. }
  1969. }
  1970. }