platform.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. import color from "color";
  2. import { Platform, Dimensions, PixelRatio } from "react-native";
  3. const deviceHeight = Dimensions.get("window").height;
  4. const deviceWidth = Dimensions.get("window").width;
  5. const platform = Platform.OS;
  6. const platformStyle = undefined;
  7. export default {
  8. platformStyle,
  9. platform,
  10. // AndroidRipple
  11. androidRipple: true,
  12. androidRippleColor: "rgba(256, 256, 256, 0.3)",
  13. androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
  14. // Badge
  15. badgeBg: "#ED1727",
  16. badgeColor: "#fff",
  17. // New Variable
  18. badgePadding: platform === "ios" ? 3 : 0,
  19. // Button
  20. btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
  21. btnDisabledBg: "#b5b5b5",
  22. btnDisabledClr: "#f1f1f1",
  23. // CheckBox
  24. CheckboxRadius: platform === "ios" ? 13 : 0,
  25. CheckboxBorderWidth: platform === "ios" ? 1 : 2,
  26. CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
  27. CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
  28. CheckboxIconSize: platform === "ios" ? 21 : 14,
  29. CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
  30. CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 18,
  31. DefaultFontSize: 17,
  32. checkboxBgColor: "#039BE5",
  33. checkboxSize: 20,
  34. checkboxTickColor: "#fff",
  35. // Segment
  36. segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
  37. segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
  38. segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
  39. segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
  40. segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
  41. segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
  42. // New Variable
  43. get defaultTextColor() {
  44. return this.textColor;
  45. },
  46. get btnPrimaryBg() {
  47. return this.brandPrimary;
  48. },
  49. get btnPrimaryColor() {
  50. return this.inverseTextColor;
  51. },
  52. get btnInfoBg() {
  53. return this.brandInfo;
  54. },
  55. get btnInfoColor() {
  56. return this.inverseTextColor;
  57. },
  58. get btnSuccessBg() {
  59. return this.brandSuccess;
  60. },
  61. get btnSuccessColor() {
  62. return this.inverseTextColor;
  63. },
  64. get btnDangerBg() {
  65. return this.brandDanger;
  66. },
  67. get btnDangerColor() {
  68. return this.inverseTextColor;
  69. },
  70. get btnWarningBg() {
  71. return this.brandWarning;
  72. },
  73. get btnWarningColor() {
  74. return this.inverseTextColor;
  75. },
  76. get btnTextSize() {
  77. return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
  78. },
  79. get btnTextSizeLarge() {
  80. return this.fontSizeBase * 1.5;
  81. },
  82. get btnTextSizeSmall() {
  83. return this.fontSizeBase * 0.8;
  84. },
  85. get borderRadiusLarge() {
  86. return this.fontSizeBase * 3.8;
  87. },
  88. buttonPadding: 6,
  89. get iconSizeLarge() {
  90. return this.iconFontSize * 1.5;
  91. },
  92. get iconSizeSmall() {
  93. return this.iconFontSize * 0.6;
  94. },
  95. // Card
  96. cardDefaultBg: "#fff",
  97. // Color
  98. brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
  99. brandInfo: "#62B1F6",
  100. brandSuccess: "#5cb85c",
  101. brandDanger: "#d9534f",
  102. brandWarning: "#f0ad4e",
  103. brandSidebar: "#252932",
  104. // Font
  105. fontFamily: platform === "ios" ? "System" : "Roboto",
  106. fontSizeBase: 15,
  107. get fontSizeH1() {
  108. return this.fontSizeBase * 1.8;
  109. },
  110. get fontSizeH2() {
  111. return this.fontSizeBase * 1.6;
  112. },
  113. get fontSizeH3() {
  114. return this.fontSizeBase * 1.4;
  115. },
  116. // Footer
  117. footerHeight: 55,
  118. footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#4179F7",
  119. // FooterTab
  120. tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
  121. tabBarTextSize: platform === "ios" ? 14 : 11,
  122. activeTab: platform === "ios" ? "#007aff" : "#fff",
  123. sTabBarActiveTextColor: "#007aff",
  124. tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
  125. tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
  126. // Tab
  127. tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
  128. topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
  129. topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
  130. topTabActiveBgColor: platform === "ios" ? "#cde1f9" : undefined,
  131. topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
  132. topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
  133. // Header
  134. toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
  135. toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
  136. toolbarHeight: platform === "ios" ? 64 : 56,
  137. toolbarIconSize: platform === "ios" ? 20 : 22,
  138. toolbarSearchIconSize: platform === "ios" ? 20 : 23,
  139. toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
  140. searchBarHeight: platform === "ios" ? 30 : 40,
  141. toolbarInverseBg: "#222",
  142. toolbarTextColor: platform === "ios" ? "#000" : "#fff",
  143. toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
  144. iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
  145. get statusBarColor() {
  146. return color(this.toolbarDefaultBg).darken(0.2).hex();
  147. },
  148. // Icon
  149. iconFamily: "Ionicons",
  150. iconFontSize: platform === "ios" ? 30 : 28,
  151. iconMargin: 7,
  152. iconHeaderSize: platform === "ios" ? 33 : 24,
  153. // InputGroup
  154. inputFontSize: 17,
  155. inputBorderColor: "#D9D5DC",
  156. inputSuccessBorderColor: "#2b8339",
  157. inputErrorBorderColor: "#ed2f2f",
  158. get inputColor() {
  159. return this.textColor;
  160. },
  161. get inputColorPlaceholder() {
  162. return "#575757";
  163. },
  164. inputGroupMarginBottom: 10,
  165. inputHeightBase: 50,
  166. inputPaddingLeft: 5,
  167. get inputPaddingLeftIcon() {
  168. return this.inputPaddingLeft * 8;
  169. },
  170. // Line Height
  171. btnLineHeight: 19,
  172. lineHeightH1: 32,
  173. lineHeightH2: 27,
  174. lineHeightH3: 22,
  175. iconLineHeight: platform === "ios" ? 37 : 30,
  176. lineHeight: platform === "ios" ? 20 : 24,
  177. // List
  178. listBorderColor: "#c9c9c9",
  179. listDividerBg: "#f4f4f4",
  180. listItemHeight: 45,
  181. listBtnUnderlayColor: "#DDD",
  182. // Card
  183. cardBorderColor: "#ccc",
  184. // Changed Variable
  185. listItemPadding: platform === "ios" ? 10 : 12,
  186. listNoteColor: "#808080",
  187. listNoteSize: 13,
  188. // Progress Bar
  189. defaultProgressColor: "#E4202D",
  190. inverseProgressColor: "#1A191B",
  191. // Radio Button
  192. radioBtnSize: platform === "ios" ? 25 : 23,
  193. radioSelectedColorAndroid: "#3F51B5",
  194. // New Variable
  195. radioBtnLineHeight: platform === "ios" ? 29 : 24,
  196. radioColor: "#7e7e7e",
  197. get radioSelectedColor() {
  198. return color(this.radioColor).darken(0.2).hex();
  199. },
  200. // Spinner
  201. defaultSpinnerColor: "#45D56E",
  202. inverseSpinnerColor: "#1A191B",
  203. // Tabs
  204. tabBgColor: "#F8F8F8",
  205. tabFontSize: 15,
  206. tabTextColor: "#222222",
  207. // Text
  208. textColor: "#000",
  209. inverseTextColor: "#fff",
  210. noteFontSize: 14,
  211. // Title
  212. titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
  213. titleFontSize: platform === "ios" ? 17 : 19,
  214. subTitleFontSize: platform === "ios" ? 12 : 14,
  215. subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
  216. // New Variable
  217. titleFontColor: platform === "ios" ? "#000" : "#FFF",
  218. // Other
  219. borderRadiusBase: platform === "ios" ? 5 : 2,
  220. borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
  221. contentPadding: 10,
  222. get darkenHeader() {
  223. return color(this.tabBgColor).darken(0.03).hex();
  224. },
  225. dropdownBg: "#000",
  226. dropdownLinkColor: "#414142",
  227. inputLineHeight: 24,
  228. jumbotronBg: "#C9C9CE",
  229. jumbotronPadding: 30,
  230. deviceWidth,
  231. deviceHeight,
  232. // New Variable
  233. inputGroupRoundedBorderRadius: 30
  234. };