New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-native-stylekit
Advanced tools
react-native-stylekit - npm Package Compare versions
Comparing version 0.0.3 to 1.0.0
@@ -10,30 +10,33 @@ 'use strict'; | ||
| var borderColor = '#D9D9D9'; | ||
| var borderStyle = 'solid'; | ||
| var borderRadius = 5; | ||
| exports.default = function (_ref) { | ||
| var _ref$borderColor = _ref.borderColor; | ||
| var borderColor = _ref$borderColor === undefined ? '#D9D9D9' : _ref$borderColor; | ||
| var _ref$borderStyle = _ref.borderStyle; | ||
| var borderStyle = _ref$borderStyle === undefined ? 'solid' : _ref$borderStyle; | ||
| var _ref$borderRadius = _ref.borderRadius; | ||
| var borderRadius = _ref$borderRadius === undefined ? 5 : _ref$borderRadius; | ||
| return { | ||
| b0: { borderWidth: 0 }, | ||
| bh: { borderWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| b1: { borderWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| exports.default = { | ||
| b0: { borderWidth: 0 }, | ||
| bh: { borderWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| b1: { borderWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bt0: { borderTopWidth: 0 }, | ||
| bth: { borderTopWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bt1: { borderTopWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bt0: { borderTopWidth: 0 }, | ||
| bth: { borderTopWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bt1: { borderTopWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| br0: { borderRightWidth: 0 }, | ||
| brh: { borderRightWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| br1: { borderRightWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| br0: { borderRightWidth: 0 }, | ||
| brh: { borderRightWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| br1: { borderRightWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bb0: { borderBottomWidth: 0 }, | ||
| bbh: { borderBottomWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bb1: { borderBottomWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bb0: { borderBottomWidth: 0 }, | ||
| bbh: { borderBottomWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bb1: { borderBottomWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bl0: { borderLeftWidth: 0 }, | ||
| blh: { borderLeftWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bl1: { borderLeftWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bl0: { borderLeftWidth: 0 }, | ||
| blh: { borderLeftWidth: 0.5, borderColor: borderColor, borderStyle: borderStyle }, | ||
| bl1: { borderLeftWidth: 1, borderColor: borderColor, borderStyle: borderStyle }, | ||
| rounded: { borderRadius: borderRadius }, | ||
| notRounded: { borderRadius: 0 }, | ||
| circle: { borderRadius: 50 } | ||
| rounded: { borderRadius: borderRadius }, | ||
| notRounded: { borderRadius: 0 } | ||
| }; | ||
| }; |
@@ -6,112 +6,109 @@ 'use strict'; | ||
| }); | ||
| var $primary = '#337ab7'; | ||
| var $success = '#5cb85c'; | ||
| var $info = '#5bc0de'; | ||
| var $warning = '#f0ad4e'; | ||
| var $danger = '#d9534f'; | ||
| var $white = '#fff'; | ||
| var $silver = '#F4F4F4'; | ||
| var $lightgrey = '#ececec'; | ||
| var $grey = '#ccc'; | ||
| var $midgrey = '#777'; | ||
| var $darkgrey = '#444'; | ||
| var $black = '#222'; | ||
| var $trueblack = '#000'; | ||
| exports.default = function (_ref) { | ||
| var _ref$primary = _ref.primary; | ||
| var primary = _ref$primary === undefined ? '#337ab7' : _ref$primary; | ||
| var _ref$success = _ref.success; | ||
| var success = _ref$success === undefined ? '#5cb85c' : _ref$success; | ||
| var _ref$info = _ref.info; | ||
| var info = _ref$info === undefined ? '#5bc0de' : _ref$info; | ||
| var _ref$warning = _ref.warning; | ||
| var warning = _ref$warning === undefined ? '#f0ad4e' : _ref$warning; | ||
| var _ref$danger = _ref.danger; | ||
| var danger = _ref$danger === undefined ? '#d9534f' : _ref$danger; | ||
| var _ref$white = _ref.white; | ||
| var white = _ref$white === undefined ? '#fff' : _ref$white; | ||
| var _ref$silver = _ref.silver; | ||
| var silver = _ref$silver === undefined ? '#F4F4F4' : _ref$silver; | ||
| var _ref$lightgrey = _ref.lightgrey; | ||
| var lightgrey = _ref$lightgrey === undefined ? '#ececec' : _ref$lightgrey; | ||
| var _ref$grey = _ref.grey; | ||
| var grey = _ref$grey === undefined ? '#ccc' : _ref$grey; | ||
| var _ref$midgrey = _ref.midgrey; | ||
| var midgrey = _ref$midgrey === undefined ? '#777' : _ref$midgrey; | ||
| var _ref$darkgrey = _ref.darkgrey; | ||
| var darkgrey = _ref$darkgrey === undefined ? '#444' : _ref$darkgrey; | ||
| var _ref$black = _ref.black; | ||
| var black = _ref$black === undefined ? '#222' : _ref$black; | ||
| var _ref$trueblack = _ref.trueblack; | ||
| var trueblack = _ref$trueblack === undefined ? '#000' : _ref$trueblack; | ||
| return { | ||
| // ==================================================== | ||
| // Text Colors | ||
| // ==================================================== | ||
| exports.default = { | ||
| // ==================================================== | ||
| // Text Colors | ||
| // ==================================================== | ||
| colorPrimary: { color: primary }, | ||
| colorSuccess: { color: success }, | ||
| colorInfo: { color: info }, | ||
| colorWarning: { color: warning }, | ||
| colorDanger: { color: danger }, | ||
| colorPrimary: { color: $primary }, | ||
| colorSuccess: { color: $success }, | ||
| colorInfo: { color: $info }, | ||
| colorWarning: { color: $warning }, | ||
| colorDanger: { color: $danger }, | ||
| colorWhite: { color: white }, | ||
| colorSilver: { color: silver }, | ||
| colorLightgrey: { color: lightgrey }, | ||
| colorGrey: { color: grey }, | ||
| colorMidgrey: { color: midgrey }, | ||
| colorDarkgrey: { color: darkgrey }, | ||
| colorBlack: { color: black }, | ||
| colorTrueblack: { color: trueblack }, | ||
| colorInherit: { color: 'inherit' }, | ||
| colorTransparent: { color: 'transparent' }, | ||
| textPrimary: { color: $primary }, | ||
| textSuccess: { color: $success }, | ||
| textInfo: { color: $info }, | ||
| textWarning: { color: $warning }, | ||
| textDanger: { color: $danger }, | ||
| c0: { color: '#000' }, | ||
| c1: { color: '#111' }, | ||
| c2: { color: '#222' }, | ||
| c3: { color: '#333' }, | ||
| c4: { color: '#444' }, | ||
| c5: { color: '#555' }, | ||
| c6: { color: '#666' }, | ||
| c7: { color: '#777' }, | ||
| c8: { color: '#888' }, | ||
| c9: { color: '#999' }, | ||
| ca: { color: '#aaa' }, | ||
| cb: { color: '#bbb' }, | ||
| cc: { color: '#ccc' }, | ||
| cd: { color: '#ddd' }, | ||
| ce: { color: '#eee' }, | ||
| cf: { color: '#fff' }, | ||
| colorWhite: { color: $white }, | ||
| colorSilver: { color: $silver }, | ||
| colorLightgrey: { color: $lightgrey }, | ||
| colorGrey: { color: $grey }, | ||
| colorMidgrey: { color: $midgrey }, | ||
| colorDarkgrey: { color: $darkgrey }, | ||
| colorBlack: { color: $black }, | ||
| colorTrueblack: { color: $trueblack }, | ||
| colorInherit: { color: 'inherit' }, | ||
| colorTransparent: { color: 'transparent' }, | ||
| // ==================================================== | ||
| // Background Colors | ||
| // ==================================================== | ||
| textWhite: { color: $white }, | ||
| textSilver: { color: $silver }, | ||
| textLightgrey: { color: $lightgrey }, | ||
| textGrey: { color: $grey }, | ||
| textMidgrey: { color: $midgrey }, | ||
| textDarkgrey: { color: $darkgrey }, | ||
| textBlack: { color: $black }, | ||
| textTrueblack: { color: $trueblack }, | ||
| textInherit: { color: 'inherit' }, | ||
| textTransparent: { color: 'transparent' }, | ||
| bgPrimary: { backgroundColor: primary }, | ||
| bgSuccess: { backgroundColor: success }, | ||
| bgInfo: { backgroundColor: info }, | ||
| bgWarning: { backgroundColor: warning }, | ||
| bgDanger: { backgroundColor: danger }, | ||
| c0: { color: '#000' }, | ||
| c1: { color: '#111' }, | ||
| c2: { color: '#222' }, | ||
| c3: { color: '#333' }, | ||
| c4: { color: '#444' }, | ||
| c5: { color: '#555' }, | ||
| c6: { color: '#666' }, | ||
| c7: { color: '#777' }, | ||
| c8: { color: '#888' }, | ||
| c9: { color: '#999' }, | ||
| ca: { color: '#aaa' }, | ||
| cb: { color: '#bbb' }, | ||
| cc: { color: '#ccc' }, | ||
| cd: { color: '#ddd' }, | ||
| ce: { color: '#eee' }, | ||
| cf: { color: '#fff' }, | ||
| bgWhite: { backgroundColor: white }, | ||
| bgSilver: { backgroundColor: silver }, | ||
| bgLightgrey: { backgroundColor: lightgrey }, | ||
| bgGrey: { backgroundColor: grey }, | ||
| bgMidgrey: { backgroundColor: midgrey }, | ||
| bgDarkgrey: { backgroundColor: darkgrey }, | ||
| bgBlack: { backgroundColor: black }, | ||
| bgTrueblack: { backgroundColor: trueblack }, | ||
| bgTransparent: { backgroundColor: 'transparent' }, | ||
| // ==================================================== | ||
| // Background Colors | ||
| // ==================================================== | ||
| // ==================================================== | ||
| // Border Colors | ||
| // ==================================================== | ||
| bgPrimary: { backgroundColor: $primary }, | ||
| bgSuccess: { backgroundColor: $success }, | ||
| bgInfo: { backgroundColor: $info }, | ||
| bgWarning: { backgroundColor: $warning }, | ||
| bgDanger: { backgroundColor: $danger }, | ||
| borderPrimary: { borderColor: primary }, | ||
| borderSuccess: { borderColor: success }, | ||
| borderInfo: { borderColor: info }, | ||
| borderWarning: { borderColor: warning }, | ||
| borderDanger: { borderColor: danger }, | ||
| bgWhite: { backgroundColor: $white }, | ||
| bgSilver: { backgroundColor: $silver }, | ||
| bgLightgrey: { backgroundColor: $lightgrey }, | ||
| bgGrey: { backgroundColor: $grey }, | ||
| bgMidgrey: { backgroundColor: $midgrey }, | ||
| bgDarkgrey: { backgroundColor: $darkgrey }, | ||
| bgBlack: { backgroundColor: $black }, | ||
| bgTrueblack: { backgroundColor: $trueblack }, | ||
| bgTransparent: { backgroundColor: 'transparent' }, | ||
| // ==================================================== | ||
| // Border Colors | ||
| // ==================================================== | ||
| borderPrimary: { borderColor: $primary }, | ||
| borderSuccess: { borderColor: $success }, | ||
| borderInfo: { borderColor: $info }, | ||
| borderWarning: { borderColor: $warning }, | ||
| borderDanger: { borderColor: $danger }, | ||
| borderWhite: { borderColor: $white }, | ||
| borderSilver: { borderColor: $silver }, | ||
| borderLightgrey: { borderColor: $lightgrey }, | ||
| borderGrey: { borderColor: $grey }, | ||
| borderMidgrey: { borderColor: $midgrey }, | ||
| borderDarkgrey: { borderColor: $darkgrey }, | ||
| borderBlack: { borderColor: $black }, | ||
| borderTrueblack: { borderColor: $trueblack }, | ||
| borderTransparent: { borderColor: 'transparent' } | ||
| borderWhite: { borderColor: white }, | ||
| borderSilver: { borderColor: silver }, | ||
| borderLightgrey: { borderColor: lightgrey }, | ||
| borderGrey: { borderColor: grey }, | ||
| borderMidgrey: { borderColor: midgrey }, | ||
| borderDarkgrey: { borderColor: darkgrey }, | ||
| borderBlack: { borderColor: black }, | ||
| borderTrueblack: { borderColor: trueblack }, | ||
| borderTransparent: { borderColor: 'transparent' } | ||
| }; | ||
| }; |
@@ -11,4 +11,6 @@ 'use strict'; | ||
| column: { flexDirection: 'column', flexWrap: 'nowrap' }, | ||
| row: { flexDirection: 'row', flexWrap: 'wrap' }, | ||
| column: { flexDirection: 'column' }, | ||
| row: { flexDirection: 'row' }, | ||
| wrap: { flexWrap: 'wrap' }, | ||
| nowrap: { flexWrap: 'nowrap' }, | ||
@@ -45,2 +47,5 @@ // ==================================================== | ||
| rowSpaceAround: { alignContent: 'space-around' }, | ||
| rowSpaceBetween: { alignContent: 'space-between' }, | ||
| alignStart: { alignSelf: 'flex-start' }, | ||
@@ -50,2 +55,3 @@ alignCenter: { alignSelf: 'center' }, | ||
| alignStretch: { alignSelf: 'stretch' }, | ||
| alignBaseline: { alignSelf: 'baseline' }, | ||
@@ -52,0 +58,0 @@ // ==================================================== |
@@ -47,2 +47,14 @@ 'use strict'; | ||
| fs36: { fontSize: 36 }, | ||
| fs37: { fontSize: 37 }, | ||
| fs38: { fontSize: 38 }, | ||
| fs39: { fontSize: 39 }, | ||
| fs40: { fontSize: 40 }, | ||
| fs41: { fontSize: 41 }, | ||
| fs42: { fontSize: 42 }, | ||
| fs43: { fontSize: 43 }, | ||
| fs44: { fontSize: 44 }, | ||
| fs45: { fontSize: 45 }, | ||
| fs46: { fontSize: 46 }, | ||
| fs47: { fontSize: 47 }, | ||
| fs48: { fontSize: 48 }, | ||
@@ -49,0 +61,0 @@ // ==================================================== |
@@ -8,6 +8,8 @@ 'use strict'; | ||
| // overflow | ||
| overflowVisible: { overflow: 'visible' }, | ||
| overflowHidden: { overflow: 'hidden' }, | ||
| overflowVisible: { overflow: 'visible' }, | ||
| overflowScroll: { overflow: 'scroll' }, | ||
| ofv: { overflow: 'visible' }, | ||
| ofh: { overflow: 'hidden' }, | ||
| ofv: { overflow: 'visible' }, | ||
| ofs: { overflow: 'scroll' }, | ||
@@ -14,0 +16,0 @@ // position |
@@ -6,5 +6,2 @@ "use strict"; | ||
| }); | ||
| var $padding = 10; | ||
| var $margin = 10; | ||
| exports.default = { | ||
@@ -16,63 +13,70 @@ // ==================================================== | ||
| // All | ||
| p5: { padding: $padding * 0.5 }, | ||
| p10: { padding: $padding }, | ||
| p15: { padding: $padding * 1.5 }, | ||
| p20: { padding: $padding * 2 }, | ||
| p30: { padding: $padding * 3 }, | ||
| p40: { padding: $padding * 4 }, | ||
| p50: { padding: $padding * 5 }, | ||
| p5: { padding: 5 }, | ||
| p10: { padding: 10 }, | ||
| p15: { padding: 15 }, | ||
| p20: { padding: 20 }, | ||
| p25: { padding: 25 }, | ||
| p30: { padding: 30 }, | ||
| p40: { padding: 40 }, | ||
| p50: { padding: 50 }, | ||
| // Top | ||
| pt5: { paddingTop: $padding * 0.5 }, | ||
| pt10: { paddingTop: $padding }, | ||
| pt15: { paddingTop: $padding * 1.5 }, | ||
| pt20: { paddingTop: $padding * 2 }, | ||
| pt30: { paddingTop: $padding * 3 }, | ||
| pt40: { paddingTop: $padding * 4 }, | ||
| pt50: { paddingTop: $padding * 5 }, | ||
| pt5: { paddingTop: 5 }, | ||
| pt10: { paddingTop: 10 }, | ||
| pt15: { paddingTop: 15 }, | ||
| pt20: { paddingTop: 20 }, | ||
| pt25: { paddingTop: 25 }, | ||
| pt30: { paddingTop: 30 }, | ||
| pt40: { paddingTop: 40 }, | ||
| pt50: { paddingTop: 50 }, | ||
| // Right | ||
| pr5: { paddingRight: $padding * 0.5 }, | ||
| pr10: { paddingRight: $padding }, | ||
| pr15: { paddingRight: $padding * 1.5 }, | ||
| pr20: { paddingRight: $padding * 2 }, | ||
| pr30: { paddingRight: $padding * 3 }, | ||
| pr40: { paddingRight: $padding * 4 }, | ||
| pr50: { paddingRight: $padding * 5 }, | ||
| pr5: { paddingRight: 5 }, | ||
| pr10: { paddingRight: 10 }, | ||
| pr15: { paddingRight: 15 }, | ||
| pr20: { paddingRight: 20 }, | ||
| pr25: { paddingRight: 25 }, | ||
| pr30: { paddingRight: 30 }, | ||
| pr40: { paddingRight: 40 }, | ||
| pr50: { paddingRight: 50 }, | ||
| // Bottom | ||
| pb5: { paddingBottom: $padding * 0.5 }, | ||
| pb10: { paddingBottom: $padding }, | ||
| pb15: { paddingBottom: $padding * 1.5 }, | ||
| pb20: { paddingBottom: $padding * 2 }, | ||
| pb30: { paddingBottom: $padding * 3 }, | ||
| pb40: { paddingBottom: $padding * 4 }, | ||
| pb50: { paddingBottom: $padding * 5 }, | ||
| pb5: { paddingBottom: 5 }, | ||
| pb10: { paddingBottom: 10 }, | ||
| pb15: { paddingBottom: 15 }, | ||
| pb20: { paddingBottom: 20 }, | ||
| pb25: { paddingBottom: 25 }, | ||
| pb30: { paddingBottom: 30 }, | ||
| pb40: { paddingBottom: 40 }, | ||
| pb50: { paddingBottom: 50 }, | ||
| // Left | ||
| pl5: { paddingLeft: $padding * 0.5 }, | ||
| pl10: { paddingLeft: $padding }, | ||
| pl15: { paddingLeft: $padding * 1.5 }, | ||
| pl20: { paddingLeft: $padding * 2 }, | ||
| pl30: { paddingLeft: $padding * 3 }, | ||
| pl40: { paddingLeft: $padding * 4 }, | ||
| pl50: { paddingLeft: $padding * 5 }, | ||
| pl5: { paddingLeft: 5 }, | ||
| pl10: { paddingLeft: 10 }, | ||
| pl15: { paddingLeft: 15 }, | ||
| pl20: { paddingLeft: 20 }, | ||
| pl25: { paddingLeft: 25 }, | ||
| pl30: { paddingLeft: 30 }, | ||
| pl40: { paddingLeft: 40 }, | ||
| pl50: { paddingLeft: 50 }, | ||
| // Top-Bottom | ||
| ptb5: { paddingTop: $padding * 0.5, paddingBottom: $padding * 0.5 }, | ||
| ptb10: { paddingTop: $padding, paddingBottom: $padding }, | ||
| ptb15: { paddingTop: $padding * 1.5, paddingBottom: $padding * 1.5 }, | ||
| ptb20: { paddingTop: $padding * 2, paddingBottom: $padding * 2 }, | ||
| ptb30: { paddingTop: $padding * 3, paddingBottom: $padding * 3 }, | ||
| ptb40: { paddingTop: $padding * 4, paddingBottom: $padding * 4 }, | ||
| ptb50: { paddingTop: $padding * 5, paddingBottom: $padding * 5 }, | ||
| ptb5: { paddingVertical: 5 }, | ||
| ptb10: { paddingVertical: 10 }, | ||
| ptb15: { paddingVertical: 15 }, | ||
| ptb20: { paddingVertical: 20 }, | ||
| ptb25: { paddingVertical: 25 }, | ||
| ptb30: { paddingVertical: 30 }, | ||
| ptb40: { paddingVertical: 40 }, | ||
| ptb50: { paddingVertical: 50 }, | ||
| // Left-Right | ||
| plr5: { paddingLeft: $padding * 0.5, paddingRight: $padding * 0.5 }, | ||
| plr10: { paddingLeft: $padding, paddingRight: $padding }, | ||
| plr15: { paddingLeft: $padding * 1.5, paddingRight: $padding * 1.5 }, | ||
| plr20: { paddingLeft: $padding * 2, paddingRight: $padding * 2 }, | ||
| plr30: { paddingLeft: $padding * 3, paddingRight: $padding * 3 }, | ||
| plr40: { paddingLeft: $padding * 4, paddingRight: $padding * 4 }, | ||
| plr50: { paddingLeft: $padding * 5, paddingRight: $padding * 5 }, | ||
| plr5: { paddingHorizontal: 5 }, | ||
| plr10: { paddingHorizontal: 10 }, | ||
| plr15: { paddingHorizontal: 15 }, | ||
| plr20: { paddingHorizontal: 20 }, | ||
| plr25: { paddingHorizontal: 25 }, | ||
| plr30: { paddingHorizontal: 30 }, | ||
| plr40: { paddingHorizontal: 40 }, | ||
| plr50: { paddingHorizontal: 50 }, | ||
@@ -83,63 +87,70 @@ // ==================================================== | ||
| // All | ||
| m5: { margin: $margin * 0.5 }, | ||
| m10: { margin: $margin }, | ||
| m15: { margin: $margin * 1.5 }, | ||
| m20: { margin: $margin * 2 }, | ||
| m30: { margin: $margin * 3 }, | ||
| m40: { margin: $margin * 4 }, | ||
| m50: { margin: $margin * 5 }, | ||
| m5: { margin: 5 }, | ||
| m10: { margin: 10 }, | ||
| m15: { margin: 15 }, | ||
| m20: { margin: 20 }, | ||
| m25: { margin: 25 }, | ||
| m30: { margin: 30 }, | ||
| m40: { margin: 40 }, | ||
| m50: { margin: 50 }, | ||
| // Top | ||
| mt5: { marginTop: $margin * 0.5 }, | ||
| mt10: { marginTop: $margin }, | ||
| mt15: { marginTop: $margin * 1.5 }, | ||
| mt20: { marginTop: $margin * 2 }, | ||
| mt30: { marginTop: $margin * 3 }, | ||
| mt40: { marginTop: $margin * 4 }, | ||
| mt50: { marginTop: $margin * 5 }, | ||
| mt5: { marginTop: 5 }, | ||
| mt10: { marginTop: 10 }, | ||
| mt15: { marginTop: 15 }, | ||
| mt20: { marginTop: 20 }, | ||
| mt25: { marginTop: 25 }, | ||
| mt30: { marginTop: 30 }, | ||
| mt40: { marginTop: 40 }, | ||
| mt50: { marginTop: 50 }, | ||
| // Right | ||
| mr5: { marginRight: $margin * 0.5 }, | ||
| mr10: { marginRight: $margin }, | ||
| mr15: { marginRight: $margin * 1.5 }, | ||
| mr20: { marginRight: $margin * 2 }, | ||
| mr30: { marginRight: $margin * 3 }, | ||
| mr40: { marginRight: $margin * 4 }, | ||
| mr50: { marginRight: $margin * 5 }, | ||
| mr5: { marginRight: 5 }, | ||
| mr10: { marginRight: 10 }, | ||
| mr15: { marginRight: 15 }, | ||
| mr20: { marginRight: 20 }, | ||
| mr25: { marginRight: 25 }, | ||
| mr30: { marginRight: 30 }, | ||
| mr40: { marginRight: 40 }, | ||
| mr50: { marginRight: 50 }, | ||
| // Bottom | ||
| mb5: { marginBottom: $margin * 0.5 }, | ||
| mb10: { marginBottom: $margin }, | ||
| mb15: { marginBottom: $margin * 1.5 }, | ||
| mb20: { marginBottom: $margin * 2 }, | ||
| mb30: { marginBottom: $margin * 3 }, | ||
| mb40: { marginBottom: $margin * 4 }, | ||
| mb50: { marginBottom: $margin * 5 }, | ||
| mb5: { marginBottom: 5 }, | ||
| mb10: { marginBottom: 10 }, | ||
| mb15: { marginBottom: 15 }, | ||
| mb20: { marginBottom: 20 }, | ||
| mb25: { marginBottom: 25 }, | ||
| mb30: { marginBottom: 30 }, | ||
| mb40: { marginBottom: 40 }, | ||
| mb50: { marginBottom: 50 }, | ||
| // Left | ||
| ml5: { marginLeft: $margin * 0.5 }, | ||
| ml10: { marginLeft: $margin }, | ||
| ml15: { marginLeft: $margin * 1.5 }, | ||
| ml20: { marginLeft: $margin * 2 }, | ||
| ml30: { marginLeft: $margin * 3 }, | ||
| ml40: { marginLeft: $margin * 4 }, | ||
| ml50: { marginLeft: $margin * 5 }, | ||
| ml5: { marginLeft: 5 }, | ||
| ml10: { marginLeft: 10 }, | ||
| ml15: { marginLeft: 15 }, | ||
| ml20: { marginLeft: 20 }, | ||
| ml25: { marginLeft: 25 }, | ||
| ml30: { marginLeft: 30 }, | ||
| ml40: { marginLeft: 40 }, | ||
| ml50: { marginLeft: 50 }, | ||
| // Top/Bottom | ||
| mtb5: { marginTop: $margin * 0.5, marginBottom: $margin * 0.5 }, | ||
| mtb10: { marginTop: $margin, marginBottom: $margin }, | ||
| mtb15: { marginTop: $margin * 1.5, marginBottom: $margin * 1.5 }, | ||
| mtb20: { marginTop: $margin * 2, marginBottom: $margin * 2 }, | ||
| mtb30: { marginTop: $margin * 3, marginBottom: $margin * 3 }, | ||
| mtb40: { marginTop: $margin * 4, marginBottom: $margin * 4 }, | ||
| mtb50: { marginTop: $margin * 5, marginBottom: $margin * 5 }, | ||
| mtb5: { marginVertical: 5 }, | ||
| mtb10: { marginVertical: 10 }, | ||
| mtb15: { marginVertical: 15 }, | ||
| mtb20: { marginVertical: 20 }, | ||
| mtb25: { marginVertical: 25 }, | ||
| mtb30: { marginVertical: 30 }, | ||
| mtb40: { marginVertical: 40 }, | ||
| mtb50: { marginVertical: 50 }, | ||
| // Left/Right | ||
| mlr5: { marginLeft: $margin * 0.5, marginRight: $margin * 0.5 }, | ||
| mlr10: { marginLeft: $margin, marginRight: $margin }, | ||
| mlr15: { marginLeft: $margin * 1.5, marginRight: $margin * 1.5 }, | ||
| mlr20: { marginLeft: $margin * 2, marginRight: $margin * 2 }, | ||
| mlr30: { marginLeft: $margin * 3, marginRight: $margin * 3 }, | ||
| mlr40: { marginLeft: $margin * 4, marginRight: $margin * 4 }, | ||
| mlr50: { marginLeft: $margin * 5, marginRight: $margin * 5 } | ||
| mlr5: { marginHorizontal: 5 }, | ||
| mlr10: { marginHorizontal: 10 }, | ||
| mlr15: { marginHorizontal: 15 }, | ||
| mlr20: { marginHorizontal: 20 }, | ||
| mlr25: { marginHorizontal: 25 }, | ||
| mlr30: { marginHorizontal: 30 }, | ||
| mlr40: { marginHorizontal: 40 }, | ||
| mlr50: { marginHorizontal: 50 } | ||
| }; |
@@ -33,2 +33,4 @@ 'use strict'; | ||
| exports.default = Object.assign({}, _borders3.default, _colors3.default, _flex3.default, _typography3.default, _whitespace3.default, _utilities3.default); | ||
| exports.default = function (variables) { | ||
| return Object.assign({}, (0, _borders3.default)(variables), (0, _colors3.default)(variables), _flex3.default, _typography3.default, _whitespace3.default, _utilities3.default); | ||
| }; |
| { | ||
| "name": "react-native-stylekit", | ||
| "version": "0.0.3", | ||
| "version": "1.0.0", | ||
| "description": "a stylekit for react native", | ||
@@ -5,0 +5,0 @@ "main": "./lib", |
@@ -1,2 +0,2 @@ | ||
| # React Native 样式工具箱 | ||
| # React Native 样式工具箱 [](https://travis-ci.org/maskzh/react-native-stylekit) [](https://www.npmjs.org/package/react-native-stylekit) | ||
| 一个用于快速构建界面的样式工具库 | ||
@@ -13,4 +13,6 @@ | ||
| import { View } from 'react-native' | ||
| import SK from 'react-native-stylekit' | ||
| import stylekit from 'react-native-stylekit' | ||
| const SK = stylekit({ borderColor: '#eee' }) | ||
| export default () => | ||
@@ -17,0 +19,0 @@ <View style={[SK.p1, SK.m1]}></View> |
@@ -5,7 +5,7 @@ // ==================================================== | ||
| const borderColor = '#D9D9D9' | ||
| const borderStyle = 'solid' | ||
| const borderRadius = 5 | ||
| export default { | ||
| export default ({ | ||
| borderColor = '#D9D9D9', | ||
| borderStyle = 'solid', | ||
| borderRadius = 5, | ||
| }) => ({ | ||
| b0: { borderWidth: 0 }, | ||
@@ -33,3 +33,2 @@ bh: { borderWidth: 0.5, borderColor, borderStyle }, | ||
| notRounded: { borderRadius: 0 }, | ||
| circle: { borderRadius: 50 } | ||
| } | ||
| }) |
@@ -1,17 +0,17 @@ | ||
| const $primary = '#337ab7' | ||
| const $success = '#5cb85c' | ||
| const $info = '#5bc0de' | ||
| const $warning = '#f0ad4e' | ||
| const $danger = '#d9534f' | ||
| export default ({ | ||
| primary = '#337ab7', | ||
| success = '#5cb85c', | ||
| info = '#5bc0de', | ||
| warning = '#f0ad4e', | ||
| danger = '#d9534f', | ||
| const $white = '#fff' | ||
| const $silver = '#F4F4F4' | ||
| const $lightgrey = '#ececec' | ||
| const $grey = '#ccc' | ||
| const $midgrey = '#777' | ||
| const $darkgrey = '#444' | ||
| const $black = '#222' | ||
| const $trueblack = '#000' | ||
| export default { | ||
| white = '#fff', | ||
| silver = '#F4F4F4', | ||
| lightgrey = '#ececec', | ||
| grey = '#ccc', | ||
| midgrey = '#777', | ||
| darkgrey = '#444', | ||
| black = '#222', | ||
| trueblack = '#000', | ||
| }) => ({ | ||
| // ==================================================== | ||
@@ -21,36 +21,19 @@ // Text Colors | ||
| colorPrimary: { color: $primary }, | ||
| colorSuccess: { color: $success }, | ||
| colorInfo: { color: $info }, | ||
| colorWarning: { color: $warning }, | ||
| colorDanger: { color: $danger }, | ||
| colorPrimary: { color: primary }, | ||
| colorSuccess: { color: success }, | ||
| colorInfo: { color: info }, | ||
| colorWarning: { color: warning }, | ||
| colorDanger: { color: danger }, | ||
| textPrimary: { color: $primary }, | ||
| textSuccess: { color: $success }, | ||
| textInfo: { color: $info }, | ||
| textWarning: { color: $warning }, | ||
| textDanger: { color: $danger }, | ||
| colorWhite: { color: $white }, | ||
| colorSilver: { color: $silver }, | ||
| colorLightgrey: { color: $lightgrey }, | ||
| colorGrey: { color: $grey }, | ||
| colorMidgrey: { color: $midgrey }, | ||
| colorDarkgrey: { color: $darkgrey }, | ||
| colorBlack: { color: $black }, | ||
| colorTrueblack: { color: $trueblack }, | ||
| colorWhite: { color: white }, | ||
| colorSilver: { color: silver }, | ||
| colorLightgrey: { color: lightgrey }, | ||
| colorGrey: { color: grey }, | ||
| colorMidgrey: { color: midgrey }, | ||
| colorDarkgrey: { color: darkgrey }, | ||
| colorBlack: { color: black }, | ||
| colorTrueblack: { color: trueblack }, | ||
| colorInherit: { color: 'inherit' }, | ||
| colorTransparent: { color: 'transparent' }, | ||
| textWhite: { color: $white }, | ||
| textSilver: { color: $silver }, | ||
| textLightgrey: { color: $lightgrey }, | ||
| textGrey: { color: $grey }, | ||
| textMidgrey: { color: $midgrey }, | ||
| textDarkgrey: { color: $darkgrey }, | ||
| textBlack: { color: $black }, | ||
| textTrueblack: { color: $trueblack }, | ||
| textInherit: { color: 'inherit' }, | ||
| textTransparent: { color: 'transparent' }, | ||
| c0: { color: '#000' }, | ||
@@ -77,16 +60,16 @@ c1: { color: '#111' }, | ||
| bgPrimary: { backgroundColor: $primary }, | ||
| bgSuccess: { backgroundColor: $success }, | ||
| bgInfo: { backgroundColor: $info }, | ||
| bgWarning: { backgroundColor: $warning }, | ||
| bgDanger: { backgroundColor: $danger }, | ||
| bgPrimary: { backgroundColor: primary }, | ||
| bgSuccess: { backgroundColor: success }, | ||
| bgInfo: { backgroundColor: info }, | ||
| bgWarning: { backgroundColor: warning }, | ||
| bgDanger: { backgroundColor: danger }, | ||
| bgWhite: { backgroundColor: $white }, | ||
| bgSilver: { backgroundColor: $silver }, | ||
| bgLightgrey: { backgroundColor: $lightgrey }, | ||
| bgGrey: { backgroundColor: $grey }, | ||
| bgMidgrey: { backgroundColor: $midgrey }, | ||
| bgDarkgrey: { backgroundColor: $darkgrey }, | ||
| bgBlack: { backgroundColor: $black }, | ||
| bgTrueblack: { backgroundColor: $trueblack }, | ||
| bgWhite: { backgroundColor: white }, | ||
| bgSilver: { backgroundColor: silver }, | ||
| bgLightgrey: { backgroundColor: lightgrey }, | ||
| bgGrey: { backgroundColor: grey }, | ||
| bgMidgrey: { backgroundColor: midgrey }, | ||
| bgDarkgrey: { backgroundColor: darkgrey }, | ||
| bgBlack: { backgroundColor: black }, | ||
| bgTrueblack: { backgroundColor: trueblack }, | ||
| bgTransparent: { backgroundColor: 'transparent' }, | ||
@@ -98,17 +81,17 @@ | ||
| borderPrimary: { borderColor: $primary }, | ||
| borderSuccess: { borderColor: $success }, | ||
| borderInfo: { borderColor: $info }, | ||
| borderWarning: { borderColor: $warning }, | ||
| borderDanger: { borderColor: $danger }, | ||
| borderPrimary: { borderColor: primary }, | ||
| borderSuccess: { borderColor: success }, | ||
| borderInfo: { borderColor: info }, | ||
| borderWarning: { borderColor: warning }, | ||
| borderDanger: { borderColor: danger }, | ||
| borderWhite: { borderColor: $white }, | ||
| borderSilver: { borderColor: $silver }, | ||
| borderLightgrey: { borderColor: $lightgrey }, | ||
| borderGrey: { borderColor: $grey }, | ||
| borderMidgrey: { borderColor: $midgrey }, | ||
| borderDarkgrey: { borderColor: $darkgrey }, | ||
| borderBlack: { borderColor: $black }, | ||
| borderTrueblack: { borderColor: $trueblack }, | ||
| borderWhite: { borderColor: white }, | ||
| borderSilver: { borderColor: silver }, | ||
| borderLightgrey: { borderColor: lightgrey }, | ||
| borderGrey: { borderColor: grey }, | ||
| borderMidgrey: { borderColor: midgrey }, | ||
| borderDarkgrey: { borderColor: darkgrey }, | ||
| borderBlack: { borderColor: black }, | ||
| borderTrueblack: { borderColor: trueblack }, | ||
| borderTransparent: { borderColor: 'transparent' }, | ||
| } | ||
| }) |
@@ -6,4 +6,6 @@ export default { | ||
| column: { flexDirection: 'column', flexWrap: 'nowrap' }, | ||
| row: { flexDirection: 'row', flexWrap: 'wrap' }, | ||
| column: { flexDirection: 'column' }, | ||
| row: { flexDirection: 'row' }, | ||
| wrap: { flexWrap: 'wrap' }, | ||
| nowrap: { flexWrap: 'nowrap' }, | ||
@@ -40,2 +42,5 @@ // ==================================================== | ||
| rowSpaceAround: { alignContent: 'space-around' }, | ||
| rowSpaceBetween: { alignContent: 'space-between' }, | ||
| alignStart: { alignSelf: 'flex-start' }, | ||
@@ -45,2 +50,3 @@ alignCenter: { alignSelf: 'center' }, | ||
| alignStretch: { alignSelf: 'stretch' }, | ||
| alignBaseline: { alignSelf: 'baseline' }, | ||
@@ -47,0 +53,0 @@ // ==================================================== |
@@ -42,2 +42,14 @@ // ==================================================== | ||
| fs36: { fontSize: 36 }, | ||
| fs37: { fontSize: 37 }, | ||
| fs38: { fontSize: 38 }, | ||
| fs39: { fontSize: 39 }, | ||
| fs40: { fontSize: 40 }, | ||
| fs41: { fontSize: 41 }, | ||
| fs42: { fontSize: 42 }, | ||
| fs43: { fontSize: 43 }, | ||
| fs44: { fontSize: 44 }, | ||
| fs45: { fontSize: 45 }, | ||
| fs46: { fontSize: 46 }, | ||
| fs47: { fontSize: 47 }, | ||
| fs48: { fontSize: 48 }, | ||
@@ -44,0 +56,0 @@ // ==================================================== |
| export default { | ||
| // overflow | ||
| overflowVisible: { overflow: 'visible' }, | ||
| overflowHidden: { overflow: 'hidden' }, | ||
| overflowVisible: { overflow: 'visible' }, | ||
| overflowScroll: { overflow: 'scroll' }, | ||
| ofv: { overflow: 'visible' }, | ||
| ofh: { overflow: 'hidden' }, | ||
| ofv: { overflow: 'visible' }, | ||
| ofs: { overflow: 'scroll' }, | ||
@@ -8,0 +10,0 @@ // position |
@@ -1,4 +0,1 @@ | ||
| const $padding = 10 | ||
| const $margin = 10 | ||
| export default { | ||
@@ -10,63 +7,70 @@ // ==================================================== | ||
| // All | ||
| p5: { padding: $padding * 0.5 }, | ||
| p10: { padding: $padding }, | ||
| p15: { padding: $padding * 1.5 }, | ||
| p20: { padding: $padding * 2 }, | ||
| p30: { padding: $padding * 3 }, | ||
| p40: { padding: $padding * 4 }, | ||
| p50: { padding: $padding * 5 }, | ||
| p5: { padding: 5 }, | ||
| p10: { padding: 10 }, | ||
| p15: { padding: 15 }, | ||
| p20: { padding: 20 }, | ||
| p25: { padding: 25 }, | ||
| p30: { padding: 30 }, | ||
| p40: { padding: 40 }, | ||
| p50: { padding: 50 }, | ||
| // Top | ||
| pt5: { paddingTop: $padding * 0.5 }, | ||
| pt10: { paddingTop: $padding }, | ||
| pt15: { paddingTop: $padding * 1.5 }, | ||
| pt20: { paddingTop: $padding * 2 }, | ||
| pt30: { paddingTop: $padding * 3 }, | ||
| pt40: { paddingTop: $padding * 4 }, | ||
| pt50: { paddingTop: $padding * 5 }, | ||
| pt5: { paddingTop: 5 }, | ||
| pt10: { paddingTop: 10 }, | ||
| pt15: { paddingTop: 15 }, | ||
| pt20: { paddingTop: 20 }, | ||
| pt25: { paddingTop: 25 }, | ||
| pt30: { paddingTop: 30 }, | ||
| pt40: { paddingTop: 40 }, | ||
| pt50: { paddingTop: 50 }, | ||
| // Right | ||
| pr5: { paddingRight: $padding * 0.5 }, | ||
| pr10: { paddingRight: $padding }, | ||
| pr15: { paddingRight: $padding * 1.5 }, | ||
| pr20: { paddingRight: $padding * 2 }, | ||
| pr30: { paddingRight: $padding * 3 }, | ||
| pr40: { paddingRight: $padding * 4 }, | ||
| pr50: { paddingRight: $padding * 5 }, | ||
| pr5: { paddingRight: 5 }, | ||
| pr10: { paddingRight: 10 }, | ||
| pr15: { paddingRight: 15 }, | ||
| pr20: { paddingRight: 20 }, | ||
| pr25: { paddingRight: 25 }, | ||
| pr30: { paddingRight: 30 }, | ||
| pr40: { paddingRight: 40 }, | ||
| pr50: { paddingRight: 50 }, | ||
| // Bottom | ||
| pb5: { paddingBottom: $padding * 0.5 }, | ||
| pb10: { paddingBottom: $padding }, | ||
| pb15: { paddingBottom: $padding * 1.5 }, | ||
| pb20: { paddingBottom: $padding * 2 }, | ||
| pb30: { paddingBottom: $padding * 3 }, | ||
| pb40: { paddingBottom: $padding * 4 }, | ||
| pb50: { paddingBottom: $padding * 5 }, | ||
| pb5: { paddingBottom: 5 }, | ||
| pb10: { paddingBottom: 10 }, | ||
| pb15: { paddingBottom: 15 }, | ||
| pb20: { paddingBottom: 20 }, | ||
| pb25: { paddingBottom: 25 }, | ||
| pb30: { paddingBottom: 30 }, | ||
| pb40: { paddingBottom: 40 }, | ||
| pb50: { paddingBottom: 50 }, | ||
| // Left | ||
| pl5: { paddingLeft: $padding * 0.5 }, | ||
| pl10: { paddingLeft: $padding }, | ||
| pl15: { paddingLeft: $padding * 1.5 }, | ||
| pl20: { paddingLeft: $padding * 2 }, | ||
| pl30: { paddingLeft: $padding * 3 }, | ||
| pl40: { paddingLeft: $padding * 4 }, | ||
| pl50: { paddingLeft: $padding * 5 }, | ||
| pl5: { paddingLeft: 5 }, | ||
| pl10: { paddingLeft: 10 }, | ||
| pl15: { paddingLeft: 15 }, | ||
| pl20: { paddingLeft: 20 }, | ||
| pl25: { paddingLeft: 25 }, | ||
| pl30: { paddingLeft: 30 }, | ||
| pl40: { paddingLeft: 40 }, | ||
| pl50: { paddingLeft: 50 }, | ||
| // Top-Bottom | ||
| ptb5: { paddingTop: $padding * 0.5, paddingBottom: $padding * 0.5 }, | ||
| ptb10: { paddingTop: $padding, paddingBottom: $padding }, | ||
| ptb15: { paddingTop: $padding * 1.5, paddingBottom: $padding * 1.5 }, | ||
| ptb20: { paddingTop: $padding * 2, paddingBottom: $padding * 2 }, | ||
| ptb30: { paddingTop: $padding * 3, paddingBottom: $padding * 3 }, | ||
| ptb40: { paddingTop: $padding * 4, paddingBottom: $padding * 4 }, | ||
| ptb50: { paddingTop: $padding * 5, paddingBottom: $padding * 5 }, | ||
| ptb5: { paddingVertical: 5 }, | ||
| ptb10: { paddingVertical: 10 }, | ||
| ptb15: { paddingVertical: 15 }, | ||
| ptb20: { paddingVertical: 20 }, | ||
| ptb25: { paddingVertical: 25 }, | ||
| ptb30: { paddingVertical: 30 }, | ||
| ptb40: { paddingVertical: 40 }, | ||
| ptb50: { paddingVertical: 50 }, | ||
| // Left-Right | ||
| plr5: { paddingLeft: $padding * 0.5, paddingRight: $padding * 0.5 }, | ||
| plr10: { paddingLeft: $padding, paddingRight: $padding }, | ||
| plr15: { paddingLeft: $padding * 1.5, paddingRight: $padding * 1.5 }, | ||
| plr20: { paddingLeft: $padding * 2, paddingRight: $padding * 2 }, | ||
| plr30: { paddingLeft: $padding * 3, paddingRight: $padding * 3 }, | ||
| plr40: { paddingLeft: $padding * 4, paddingRight: $padding * 4 }, | ||
| plr50: { paddingLeft: $padding * 5, paddingRight: $padding * 5 }, | ||
| plr5: { paddingHorizontal: 5 }, | ||
| plr10: { paddingHorizontal: 10 }, | ||
| plr15: { paddingHorizontal: 15 }, | ||
| plr20: { paddingHorizontal: 20 }, | ||
| plr25: { paddingHorizontal: 25 }, | ||
| plr30: { paddingHorizontal: 30 }, | ||
| plr40: { paddingHorizontal: 40 }, | ||
| plr50: { paddingHorizontal: 50 }, | ||
@@ -77,63 +81,70 @@ // ==================================================== | ||
| // All | ||
| m5: { margin: $margin * 0.5 }, | ||
| m10: { margin: $margin }, | ||
| m15: { margin: $margin * 1.5 }, | ||
| m20: { margin: $margin * 2 }, | ||
| m30: { margin: $margin * 3 }, | ||
| m40: { margin: $margin * 4 }, | ||
| m50: { margin: $margin * 5 }, | ||
| m5: { margin: 5 }, | ||
| m10: { margin: 10 }, | ||
| m15: { margin: 15 }, | ||
| m20: { margin: 20 }, | ||
| m25: { margin: 25 }, | ||
| m30: { margin: 30 }, | ||
| m40: { margin: 40 }, | ||
| m50: { margin: 50 }, | ||
| // Top | ||
| mt5: { marginTop: $margin * 0.5 }, | ||
| mt10: { marginTop: $margin }, | ||
| mt15: { marginTop: $margin * 1.5 }, | ||
| mt20: { marginTop: $margin * 2 }, | ||
| mt30: { marginTop: $margin * 3 }, | ||
| mt40: { marginTop: $margin * 4 }, | ||
| mt50: { marginTop: $margin * 5 }, | ||
| mt5: { marginTop: 5 }, | ||
| mt10: { marginTop: 10 }, | ||
| mt15: { marginTop: 15 }, | ||
| mt20: { marginTop: 20 }, | ||
| mt25: { marginTop: 25 }, | ||
| mt30: { marginTop: 30 }, | ||
| mt40: { marginTop: 40 }, | ||
| mt50: { marginTop: 50 }, | ||
| // Right | ||
| mr5: { marginRight: $margin * 0.5 }, | ||
| mr10: { marginRight: $margin }, | ||
| mr15: { marginRight: $margin * 1.5 }, | ||
| mr20: { marginRight: $margin * 2 }, | ||
| mr30: { marginRight: $margin * 3 }, | ||
| mr40: { marginRight: $margin * 4 }, | ||
| mr50: { marginRight: $margin * 5 }, | ||
| mr5: { marginRight: 5 }, | ||
| mr10: { marginRight: 10 }, | ||
| mr15: { marginRight: 15 }, | ||
| mr20: { marginRight: 20 }, | ||
| mr25: { marginRight: 25 }, | ||
| mr30: { marginRight: 30 }, | ||
| mr40: { marginRight: 40 }, | ||
| mr50: { marginRight: 50 }, | ||
| // Bottom | ||
| mb5: { marginBottom: $margin * 0.5 }, | ||
| mb10: { marginBottom: $margin }, | ||
| mb15: { marginBottom: $margin * 1.5 }, | ||
| mb20: { marginBottom: $margin * 2 }, | ||
| mb30: { marginBottom: $margin * 3 }, | ||
| mb40: { marginBottom: $margin * 4 }, | ||
| mb50: { marginBottom: $margin * 5 }, | ||
| mb5: { marginBottom: 5 }, | ||
| mb10: { marginBottom: 10 }, | ||
| mb15: { marginBottom: 15 }, | ||
| mb20: { marginBottom: 20 }, | ||
| mb25: { marginBottom: 25 }, | ||
| mb30: { marginBottom: 30 }, | ||
| mb40: { marginBottom: 40 }, | ||
| mb50: { marginBottom: 50 }, | ||
| // Left | ||
| ml5: { marginLeft: $margin * 0.5 }, | ||
| ml10: { marginLeft: $margin }, | ||
| ml15: { marginLeft: $margin * 1.5 }, | ||
| ml20: { marginLeft: $margin * 2 }, | ||
| ml30: { marginLeft: $margin * 3 }, | ||
| ml40: { marginLeft: $margin * 4 }, | ||
| ml50: { marginLeft: $margin * 5 }, | ||
| ml5: { marginLeft: 5 }, | ||
| ml10: { marginLeft: 10 }, | ||
| ml15: { marginLeft: 15 }, | ||
| ml20: { marginLeft: 20 }, | ||
| ml25: { marginLeft: 25 }, | ||
| ml30: { marginLeft: 30 }, | ||
| ml40: { marginLeft: 40 }, | ||
| ml50: { marginLeft: 50 }, | ||
| // Top/Bottom | ||
| mtb5: { marginTop: $margin * 0.5, marginBottom: $margin * 0.5 }, | ||
| mtb10: { marginTop: $margin, marginBottom: $margin }, | ||
| mtb15: { marginTop: $margin * 1.5, marginBottom: $margin * 1.5 }, | ||
| mtb20: { marginTop: $margin * 2, marginBottom: $margin * 2 }, | ||
| mtb30: { marginTop: $margin * 3, marginBottom: $margin * 3 }, | ||
| mtb40: { marginTop: $margin * 4, marginBottom: $margin * 4 }, | ||
| mtb50: { marginTop: $margin * 5, marginBottom: $margin * 5 }, | ||
| mtb5: { marginVertical: 5 }, | ||
| mtb10: { marginVertical: 10 }, | ||
| mtb15: { marginVertical: 15 }, | ||
| mtb20: { marginVertical: 20 }, | ||
| mtb25: { marginVertical: 25 }, | ||
| mtb30: { marginVertical: 30 }, | ||
| mtb40: { marginVertical: 40 }, | ||
| mtb50: { marginVertical: 50 }, | ||
| // Left/Right | ||
| mlr5: { marginLeft: $margin * 0.5, marginRight: $margin * 0.5 }, | ||
| mlr10: { marginLeft: $margin, marginRight: $margin }, | ||
| mlr15: { marginLeft: $margin * 1.5, marginRight: $margin * 1.5 }, | ||
| mlr20: { marginLeft: $margin * 2, marginRight: $margin * 2 }, | ||
| mlr30: { marginLeft: $margin * 3, marginRight: $margin * 3 }, | ||
| mlr40: { marginLeft: $margin * 4, marginRight: $margin * 4 }, | ||
| mlr50: { marginLeft: $margin * 5, marginRight: $margin * 5 }, | ||
| mlr5: { marginHorizontal: 5 }, | ||
| mlr10: { marginHorizontal: 10 }, | ||
| mlr15: { marginHorizontal: 15 }, | ||
| mlr20: { marginHorizontal: 20 }, | ||
| mlr25: { marginHorizontal: 25 }, | ||
| mlr30: { marginHorizontal: 30 }, | ||
| mlr40: { marginHorizontal: 40 }, | ||
| mlr50: { marginHorizontal: 50 }, | ||
| } |
@@ -8,2 +8,10 @@ import _borders from './_borders' | ||
| export default Object.assign({}, _borders, _colors, _flex, _typography, _whitespace, _utilities) | ||
| export default variables => Object.assign( | ||
| {}, | ||
| _borders(variables), | ||
| _colors(variables), | ||
| _flex, | ||
| _typography, | ||
| _whitespace, | ||
| _utilities, | ||
| ) |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by7.01%
946
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by0.77%
261
Worsened metrics
- Total package byte prevSize
- decreased by-1.29%
40148
No dependency changes