Skip to content

Commit 4166f77

Browse files
wegisweswegiswes
authored
Merge pull request #94 from mendix/feat/tabcontainer-vars
Add vars for tabcontainer badge
2 parents e30a4bd + 698172c commit 4166f77

File tree

7 files changed

+199
-148
lines changed

7 files changed

+199
-148
lines changed

‎styles/native/js/app/custom-variables.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export const input = {
152152
labelColorDisabled: font.labelColorDisabled,
153153
borderColor: contrast.lower,
154154
backgroundColor: background.primary,
155-
backgroundColorDisabled: background.secondary,
155+
backgroundColorDisabled: contrast.lowest,
156156
selectionColor: contrast.lower,
157157
placeholderTextColor: contrast.regular,
158158
underlineColorAndroid: "transparent",
@@ -197,6 +197,34 @@ export const navigation = {
197197
},
198198
};
199199
//
200+
// Badge Styles
201+
export const badge = {
202+
fontWeight: font.weightBold,
203+
borderRadius: 30,
204+
paddingVertical: 3,
205+
paddingHorizontal: spacing.smaller,
206+
default: {
207+
color: contrast.higher,
208+
backgroundColor: contrast.lower,
209+
},
210+
primary: {
211+
color: brand.primary,
212+
backgroundColor: brand.primaryLight,
213+
},
214+
success: {
215+
color: brand.success,
216+
backgroundColor: brand.successLight,
217+
},
218+
warning: {
219+
color: brand.warning,
220+
backgroundColor: brand.warningLight,
221+
},
222+
danger: {
223+
color: brand.danger,
224+
backgroundColor: brand.dangerLight,
225+
},
226+
};
227+
//
200228
// Tabcontainer Styles
201229
export const tabContainer = {
202230
tabBar: {
@@ -217,6 +245,18 @@ export const tabContainer = {
217245
fontWeight: font.weightBold,
218246
textTransform: "uppercase",
219247
},
248+
badgeContainer: {
249+
borderRadius: badge.borderRadius,
250+
backgroundColor: badge.default.backgroundColor,
251+
paddingVertical: badge.paddingVertical,
252+
paddingHorizontal: badge.paddingHorizontal,
253+
marginLeft: 8
254+
},
255+
badgeCaption: {
256+
fontSize: font.size,
257+
color: badge.default.color,
258+
fontWeight: badge.fontWeight,
259+
}
220260
};
221261
//
222262
// ListView Styles
@@ -231,34 +271,3 @@ export const listView = {
231271
export const layoutGrid = {
232272
gutterSize: 15,
233273
};
234-
//
235-
//
236-
//== Pluggable Widgets
237-
//-------------------------------------------------------------------------------------------------------------------//
238-
// Badge Styles
239-
export const badge = {
240-
fontWeight: font.weightBold,
241-
borderRadius: 30,
242-
paddingVertical: 3,
243-
paddingHorizontal: spacing.smaller,
244-
default: {
245-
color: contrast.higher,
246-
backgroundColor: contrast.lower,
247-
},
248-
primary: {
249-
color: brand.primary,
250-
backgroundColor: brand.primaryLight,
251-
},
252-
success: {
253-
color: brand.success,
254-
backgroundColor: brand.successLight,
255-
},
256-
warning: {
257-
color: brand.warning,
258-
backgroundColor: brand.warningLight,
259-
},
260-
danger: {
261-
color: brand.danger,
262-
backgroundColor: brand.dangerLight,
263-
},
264-
};

‎styles/native/js/core/variables.js‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,35 @@ let navigation = {
199199
};
200200
navigation = merge(navigation, custom.navigation || {});
201201
//
202+
// Badge Styles
203+
let badge = {
204+
fontWeight: font.weightBold,
205+
borderRadius: 30,
206+
paddingVertical: 3,
207+
paddingHorizontal: spacing.smaller,
208+
default: {
209+
color: contrast.higher,
210+
backgroundColor: contrast.lower,
211+
},
212+
primary: {
213+
color: brand.primary,
214+
backgroundColor: brand.primaryLight,
215+
},
216+
success: {
217+
color: brand.success,
218+
backgroundColor: brand.successLight,
219+
},
220+
warning: {
221+
color: brand.warning,
222+
backgroundColor: brand.warningLight,
223+
},
224+
danger: {
225+
color: brand.danger,
226+
backgroundColor: brand.dangerLight,
227+
},
228+
};
229+
badge = merge(badge, custom.badge || {});
230+
//
202231
// Tabcontainer Styles
203232
let tabContainer = {
204233
tabBar: {
@@ -219,6 +248,18 @@ let tabContainer = {
219248
fontWeight: font.weightBold,
220249
textTransform: "uppercase",
221250
},
251+
badgeContainer: {
252+
borderRadius: badge.borderRadius,
253+
backgroundColor: badge.default.backgroundColor,
254+
paddingVertical: badge.paddingVertical,
255+
paddingHorizontal: badge.paddingHorizontal,
256+
marginLeft: 8
257+
},
258+
badgeCaption: {
259+
fontSize: font.size,
260+
color: badge.default.color,
261+
fontWeight: badge.fontWeight,
262+
}
222263
};
223264
tabContainer = merge(tabContainer, custom.tabContainer || {});
224265
//
@@ -237,35 +278,4 @@ let layoutGrid = {
237278
};
238279
layoutGrid = merge(layoutGrid, custom.layoutGrid || {});
239280
//
240-
//## Pluggable Widgets
241-
//-------------------------------------------------------------------------------------------------------------------//
242-
// Badge Styles
243-
let badge = {
244-
fontWeight: font.weightBold,
245-
borderRadius: 30,
246-
paddingVertical: 3,
247-
paddingHorizontal: spacing.smaller,
248-
default: {
249-
color: contrast.higher,
250-
backgroundColor: contrast.lower,
251-
},
252-
primary: {
253-
color: brand.primary,
254-
backgroundColor: brand.primaryLight,
255-
},
256-
success: {
257-
color: brand.success,
258-
backgroundColor: brand.successLight,
259-
},
260-
warning: {
261-
color: brand.warning,
262-
backgroundColor: brand.warningLight,
263-
},
264-
danger: {
265-
color: brand.danger,
266-
backgroundColor: brand.dangerLight,
267-
},
268-
};
269-
badge = merge(badge, custom.badge || {});
270-
//
271281
export { brand, background, border, contrast, font, spacing, button, input, navigation, tabContainer, listView, layoutGrid, badge, };

‎styles/native/js/core/widgets/tabcontainer.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { badge, font, spacing, tabContainer } from "../variables";
1+
import { font, spacing, tabContainer } from "../variables";
22
/*
33
44
DISCLAIMER:
@@ -50,18 +50,18 @@ export const TabContainer = {
5050
},
5151
badgeContainer: {
5252
// All ViewStyle properties are allowed
53-
borderRadius: badge.borderRadius,
54-
backgroundColor: badge.default.backgroundColor,
55-
paddingVertical: badge.paddingVertical,
56-
paddingHorizontal: badge.paddingHorizontal,
57-
marginLeft: 8
53+
borderRadius: tabContainer.badgeContainer.borderRadius,
54+
backgroundColor: tabContainer.badgeContainer.backgroundColor,
55+
paddingVertical: tabContainer.badgeContainer.paddingVertical,
56+
paddingHorizontal: tabContainer.badgeContainer.paddingHorizontal,
57+
marginLeft: tabContainer.badgeContainer.marginLeft
5858
},
5959
badgeCaption: {
6060
// All TextStyle properties are allowed
61-
fontSize: font.size,
62-
color: badge.default.color,
61+
fontSize: tabContainer.badgeCaption.fontSize,
62+
color: tabContainer.badgeCaption.color,
6363
fontFamily: font.family,
64-
fontWeight: badge.fontWeight,
64+
fontWeight: tabContainer.badgeCaption.fontWeight,
6565
marginTop: -1,
6666
}
6767
};

‎styles/native/ts/app/custom-variables.ts‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export const input: VariablesInput = {
171171
labelColorDisabled: font.labelColorDisabled,
172172
borderColor: contrast.lower,
173173
backgroundColor: background.primary,
174-
backgroundColorDisabled: background.secondary,
174+
backgroundColorDisabled: contrast.lowest,
175175
selectionColor: contrast.lower,
176176
placeholderTextColor: contrast.regular,
177177
underlineColorAndroid: "transparent",
@@ -217,6 +217,36 @@ export const navigation: VariablesNavigation = {
217217
fontSize: font.size,
218218
},
219219
};
220+
//
221+
// Badge Styles
222+
export const badge: VariablesBadge = {
223+
fontWeight: font.weightBold,
224+
borderRadius: 30,
225+
paddingVertical: 3,
226+
paddingHorizontal: spacing.smaller,
227+
228+
default: {
229+
color: contrast.higher,
230+
backgroundColor: contrast.lower,
231+
},
232+
primary: {
233+
color: brand.primary,
234+
backgroundColor: brand.primaryLight,
235+
},
236+
success: {
237+
color: brand.success,
238+
backgroundColor: brand.successLight,
239+
},
240+
warning: {
241+
color: brand.warning,
242+
backgroundColor: brand.warningLight,
243+
},
244+
danger: {
245+
color: brand.danger,
246+
backgroundColor: brand.dangerLight,
247+
},
248+
};
249+
220250
//
221251
// Tabcontainer Styles
222252
export const tabContainer: VariablesTabContainer = {
@@ -232,14 +262,24 @@ export const tabContainer: VariablesTabContainer = {
232262
color: contrast.highest,
233263
fontWeight: font.weightBold,
234264
textTransform: "uppercase",
235-
236265
},
237266
activeLabel: {
238267
color: brand.primary,
239268
fontWeight: font.weightBold,
240269
textTransform: "uppercase",
241-
242270
},
271+
badgeContainer: {
272+
borderRadius: badge.borderRadius,
273+
backgroundColor: badge.default.backgroundColor,
274+
paddingVertical: badge.paddingVertical,
275+
paddingHorizontal: badge.paddingHorizontal,
276+
marginLeft: 8
277+
},
278+
badgeCaption: {
279+
fontSize: font.size,
280+
color: badge.default.color,
281+
fontWeight: badge.fontWeight,
282+
}
243283
};
244284
//
245285
// ListView Styles
@@ -254,35 +294,3 @@ export const listView: VariablesListView = {
254294
export const layoutGrid = {
255295
gutterSize: 15,
256296
};
257-
//
258-
//
259-
//== Pluggable Widgets
260-
//-------------------------------------------------------------------------------------------------------------------//
261-
// Badge Styles
262-
export const badge: VariablesBadge = {
263-
fontWeight: font.weightBold,
264-
borderRadius: 30,
265-
paddingVertical: 3,
266-
paddingHorizontal: spacing.smaller,
267-
268-
default: {
269-
color: contrast.higher,
270-
backgroundColor: contrast.lower,
271-
},
272-
primary: {
273-
color: brand.primary,
274-
backgroundColor: brand.primaryLight,
275-
},
276-
success: {
277-
color: brand.success,
278-
backgroundColor: brand.successLight,
279-
},
280-
warning: {
281-
color: brand.warning,
282-
backgroundColor: brand.warningLight,
283-
},
284-
danger: {
285-
color: brand.danger,
286-
backgroundColor: brand.dangerLight,
287-
},
288-
};

0 commit comments

Comments
 (0)