react-native-stylekit - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "react-native-stylekit",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "a stylekit for react native",
@@ -5,0 +5,0 @@ "main": "./lib",

README.md

@@ -30,9 +30,26 @@ # React Native 样式工具箱
 
+#### 边框类型
 下面的对象默认都有 `borderStyle` 和 `borderColor` 的样式
-- b0, bh, b1 borderWidth 分别为 0, 1px, 2px, 3px，
-- bt0, bth, bt1 上边框 borderWidth 分别为 0, 0.5, 1
-- br0, brh, br1 右边框 borderWidth 分别为 0, 0.5, 1
-- bb0, bbh, bb1 下边框 borderWidth 分别为 0, 0.5, 1
-- bl0, blh, bl1 左边框 borderWidth 分别为 0, 0.5, 1
+```js
+b0: { borderWidth: 0 },
+bh: { borderWidth: 0.5, borderColor, borderStyle },
+b1: { borderWidth: 1, borderColor, borderStyle },
 
+bt0: { borderTopWidth: 0 },
+bth: { borderTopWidth: 0.5, borderColor, borderStyle },
+bt1: { borderTopWidth: 1, borderColor, borderStyle },
+
+br0: { borderRightWidth: 0 },
+brh: { borderRightWidth: 0.5, borderColor, borderStyle },
+br1: { borderRightWidth: 1, borderColor, borderStyle },
+
+bb0: { borderBottomWidth: 0 },
+bbh: { borderBottomWidth: 0.5, borderColor, borderStyle },
+bb1: { borderBottomWidth: 1, borderColor, borderStyle },
+
+bl0: { borderLeftWidth: 0 },
+blh: { borderLeftWidth: 0.5, borderColor, borderStyle },
+bl1: { borderLeftWidth: 1, borderColor, borderStyle },
+```
+#### 边框其他样式
 - .rounded     { borderRadius: $borderRadius }
@@ -61,3 +78,3 @@ - .not-rounded { borderRadius: 0 }
 
-文字颜色、背景颜色、边框颜色，分别使用 `colorXxx`、`bgXxx`、`borderXxx`（eg. colorSuccess、bgWhite、borderBlack）
+**文字颜色、背景颜色、边框颜色，分别使用 `colorXxx`、`bgXxx`、`borderXxx`（eg. colorSuccess、bgWhite、borderBlack）**
 
@@ -68,3 +85,2 @@ > 提供 `textXxx` 作为 `colorXxx` 的别名
 ```js
-...
 c0: { color: #000 },
@@ -86,3 +102,2 @@ c1: { color: #111 },
 cf: { color: #fff },
-...
 ```
@@ -93,6 +108,4 @@
 ```js
-...
 column: { flexDirection: 'column', flexWrap: 'nowrap' },
 row: { flexDirection: 'row', flexWrap: 'wrap' },
-...
 ```
@@ -102,3 +115,2 @@
 ```js
-...
 center: { alignItems: 'center', justifyContent: 'center' },
@@ -108,2 +120,3 @@ topLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },
 
+// row 和 column 定位不同，所以要分开写
 columnTopCenter: { alignItems: 'center', justifyContent: 'flex-start' },
@@ -122,3 +135,2 @@ columnTopRight: { alignItems: 'flex-end', justifyContent: 'flex-start' },
 rowBottomCenter: { alignItems: 'flex-end', justifyContent: 'center' },
-...
 ```
@@ -128,3 +140,2 @@
 ```js
-...
 spaceAround: { justifyContent: 'space-around' },
@@ -137,3 +148,2 @@ spaceBetween: { justifyContent: 'space-between' },
 alignStretch: { alignSelf: 'stretch' },
-...
 ```
@@ -143,3 +153,2 @@
 ```js
-...
 flex1: { flex: 1 },
@@ -150,3 +159,2 @@ flex2: { flex: 2 },
 flex5: { flex: 5 },
-...
 ```
@@ -157,7 +165,5 @@
 ```js
-...
 textCenter: { textAlign: 'center' },
 textLeft: { textAlign: 'left' },
 textRight: { textAlign: 'right' },
-...
 ```
@@ -168,3 +174,2 @@ > `tc`、`tl`、`tr` 分别作为 `textCenter`、`textLeft`、`textRight` 的别名
 ```js
-...
 fs12: { fontSize: 12 },
@@ -175,23 +180,5 @@ fs13: { fontSize: 13 },
 fs16: { fontSize: 16 },
-fs17: { fontSize: 17 },
-fs18: { fontSize: 18 },
-fs19: { fontSize: 19 },
-fs20: { fontSize: 20 },
-fs21: { fontSize: 21 },
-fs22: { fontSize: 22 },
-fs23: { fontSize: 23 },
-fs24: { fontSize: 24 },
-fs25: { fontSize: 25 },
-fs26: { fontSize: 26 },
-fs27: { fontSize: 27 },
-fs28: { fontSize: 28 },
-fs29: { fontSize: 29 },
-fs30: { fontSize: 30 },
-fs31: { fontSize: 31 },
-fs32: { fontSize: 32 },
-fs33: { fontSize: 33 },
-fs34: { fontSize: 34 },
+...
 fs35: { fontSize: 35 },
 fs36: { fontSize: 36 },
-...
 ```
@@ -201,3 +188,2 @@
 ```js
-...
 lh12: { lineHeight: 12 },
@@ -208,59 +194,5 @@ lh13: { lineHeight: 13 },
 lh16: { lineHeight: 16 },
-lh17: { lineHeight: 17 },
-lh18: { lineHeight: 18 },
-lh19: { lineHeight: 19 },
-lh20: { lineHeight: 20 },
-lh21: { lineHeight: 21 },
-lh22: { lineHeight: 22 },
-lh23: { lineHeight: 23 },
-lh24: { lineHeight: 24 },
-lh25: { lineHeight: 25 },
-lh26: { lineHeight: 26 },
-lh27: { lineHeight: 27 },
-lh28: { lineHeight: 28 },
-lh29: { lineHeight: 29 },
-lh30: { lineHeight: 30 },
-lh31: { lineHeight: 31 },
-lh32: { lineHeight: 32 },
-lh33: { lineHeight: 33 },
-lh34: { lineHeight: 34 },
-lh35: { lineHeight: 35 },
-lh36: { lineHeight: 36 },
-lh37: { lineHeight: 37 },
-lh38: { lineHeight: 38 },
-lh39: { lineHeight: 39 },
-lh40: { lineHeight: 40 },
-lh41: { lineHeight: 41 },
-lh42: { lineHeight: 42 },
-lh43: { lineHeight: 43 },
-lh44: { lineHeight: 44 },
-lh45: { lineHeight: 45 },
-lh46: { lineHeight: 46 },
-lh47: { lineHeight: 47 },
-lh48: { lineHeight: 48 },
-lh49: { lineHeight: 49 },
-lh50: { lineHeight: 50 },
-lh51: { lineHeight: 51 },
-lh52: { lineHeight: 52 },
-lh53: { lineHeight: 53 },
-lh54: { lineHeight: 54 },
-lh55: { lineHeight: 55 },
-lh56: { lineHeight: 56 },
-lh57: { lineHeight: 57 },
-lh58: { lineHeight: 58 },
-lh59: { lineHeight: 59 },
-lh60: { lineHeight: 60 },
-lh61: { lineHeight: 61 },
-lh62: { lineHeight: 62 },
-lh63: { lineHeight: 63 },
-lh64: { lineHeight: 64 },
-lh65: { lineHeight: 65 },
-lh66: { lineHeight: 66 },
-lh67: { lineHeight: 67 },
-lh68: { lineHeight: 68 },
-lh69: { lineHeight: 69 },
-lh70: { lineHeight: 70 },
+...
 lh71: { lineHeight: 71 },
 lh72: { lineHeight: 72 },
-...
 ```
@@ -270,3 +202,2 @@
 ```js
-...
 italic: { fontStyle: 'italic' },
@@ -281,3 +212,2 @@ tracked: { letterSpacing: 4 },
 bold: { fontWeight: 700 },
-...
 ```
@@ -288,6 +218,4 @@
 ```js
-...
 overflowHidden: { overflow: 'hidden' },
 overflowVisible: { overflow: 'visible' },
-...
 ```
@@ -299,3 +227,2 @@
 ```js
-...
 relative: { position: 'relative' },
@@ -308,3 +235,2 @@ absolute: { position: 'absolute' },
 left: { left: 0 },
-...
 ```
@@ -314,7 +240,5 @@
 ```js
-...
 imgCover: { resizeMode: 'cover' },
 imgContain: { resizeMode: 'contain' },
 imgStretch: { resizeMode: 'stretch' },
-...
 ```
@@ -349,7 +273,7 @@
 */
-ptb0 { paddingTop: 0, padding-bottom: 0 },
-ptb5 { paddingTop: 5, padding-bottom: 5 },
-ptb10 { paddingTop: 10, padding-bottom: 10 },
+ptb0 { paddingTop: 0, paddingBottom: 0 },
+ptb5 { paddingTop: 5, paddingBottom: 5 },
+ptb10 { paddingTop: 10, paddingBottom: 10 },
 ...
-ptb5 { paddingTop: 50, padding-bottom: 50 },
+ptb5 { paddingTop: 50, paddingBottom: 50 },
 ```
@@ -356,0 +280,0 @@

src/index.js

@@ -1,8 +0,8 @@
-import _borders from './lib/_borders'
-import _colors from './lib/_colors'
-import _flex from './lib/_flex'
-import _typography from './lib/_typography'
-import _whitespace from './lib/_whitespace'
-import _utilities from './lib/_utilities'
+import _borders from './_borders'
+import _colors from './_colors'
+import _flex from './_flex'
+import _typography from './_typography'
+import _whitespace from './_whitespace'
+import _utilities from './_utilities'
 
 export default Object.assign({}, _borders, _colors, _flex, _typography, _whitespace, _utilities)

No alert changes

Worsened metrics

Total package byte prevSize

40696

decreased by-3.4%

Number of lines in readme file

259

decreased by-22.69%

No dependency changes