@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -3,27 +3,45 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports["default"] = void 0;
6
+ exports["default"] = exports.objectToFontValue = void 0;
7
7
 
8
- var _hexRgba = _interopRequireDefault(require("hex-rgba"));
8
+ var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
9
9
 
10
- var _colors = _interopRequireDefault(require("../subatomic/colors"));
10
+ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
11
11
 
12
- var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
12
+ var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
13
+
14
+ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
13
15
 
14
- var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
16
+ var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
17
+
18
+ var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
15
19
 
16
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
21
 
18
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
22
+ var placeholder = _fonts2["default"]['text-field-placeholder'];
23
+ var label = _fonts2["default"]['text-field-label'];
24
+ var assistiveText = _fonts2["default"]['text-field-assistive-text'];
25
+ var TRANSITION = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
26
+ var border = {
27
+ DEFAULT: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border["default"]),
28
+ HOVER: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.hover),
29
+ FOCUS: "inset 0 0 0 2px ".concat(_colors["default"]['text-field'].border.focus),
30
+ ERROR: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.error)
31
+ };
19
32
 
33
+ var objectToFontValue = function objectToFontValue(font) {
34
+ return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
35
+ };
36
+
37
+ exports.objectToFontValue = objectToFontValue;
20
38
  var _default = {
21
39
  container: {
22
- position: 'relative',
23
- marginBottom: _spacing["default"].tiny
40
+ position: 'relative'
24
41
  },
25
42
  top: {
26
- height: _spacing["default"].base,
43
+ display: 'flex',
44
+ marginBottom: _spacing["default"]['size-2'],
27
45
  '&:after': {
28
46
  content: '""',
29
47
  clear: 'both'
@@ -32,75 +50,27 @@ var _default = {
32
50
  "default": {},
33
51
  disabled: {
34
52
  '& $input': {
35
- borderColor: _colors["default"].inkLightest,
36
- color: _colors["default"].inkLightest,
37
- paddingTop: 9
38
- },
39
- '& $label': {
40
- color: _colors["default"].inkLightest
41
- },
42
- '& $passIcon': {
43
- cursor: 'auto'
53
+ background: _colors["default"]['text-field'].bg.disabled,
54
+ color: _colors["default"].text.corp.disabled
44
55
  }
45
56
  },
46
57
  focus: {
47
58
  '& $input': {
48
- borderColor: _colors["default"].prim
49
- },
50
- '& $searchField': {
51
- borderWidth: 2,
52
- paddingLeft: _spacing["default"].tiny - 1
53
- },
54
- '& $searchFieldHasIcon': {
55
- paddingLeft: 41
59
+ boxShadow: "".concat(border.FOCUS, ", ").concat(_shadows["default"]['focus-bright-blue'], " !important")
56
60
  }
57
61
  },
58
62
  error: {
59
63
  '& $input': {
60
- borderColor: _colors["default"].error,
61
- color: _colors["default"].errorText,
62
- background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
63
- },
64
- '& $searchField': {
65
- borderWidth: 2,
66
- color: _colors["default"].ink,
67
- paddingLeft: _spacing["default"].tiny - 1
68
- },
69
- '& $searchFieldHasIcon': {
70
- paddingLeft: 41
71
- }
72
- },
73
- filled: {
74
- '& $input': {
75
- borderColor: _colors["default"].grey900,
76
- borderWidth: 2,
77
- paddingLeft: _spacing["default"].tiny - 1
78
- },
79
- '& $searchFieldHasIcon': {
80
- paddingLeft: 41
64
+ boxShadow: border.ERROR
81
65
  }
82
66
  },
83
67
  label: {
84
- fontWeight: 300,
85
- fontFamily: _fonts["default"].body,
86
- fontSize: 14,
87
- lineHeight: 1.5,
88
- color: _colors["default"].ink,
89
- transition: '0.3s all',
90
- '& a': {
91
- color: _colors["default"].blue,
92
- textDecoration: 'none',
93
- outline: 'none'
94
- }
95
- },
96
- left: {
97
- "float": 'left'
98
- },
99
- right: {
100
- "float": 'right'
68
+ font: objectToFontValue(label),
69
+ color: _colors["default"].text.corp.primary
101
70
  },
102
71
  counter: {
103
- color: _colors["default"].inkLighter
72
+ font: objectToFontValue(assistiveText),
73
+ color: _colors["default"].text.corp.secondary
104
74
  },
105
75
  inputWrap: {
106
76
  boxSizing: 'border-box',
@@ -111,24 +81,21 @@ var _default = {
111
81
  display: 'flex',
112
82
  alignItems: 'center',
113
83
  width: '100%',
114
- height: 40,
115
- color: _colors["default"].ink,
116
- fontFamily: _fonts["default"].body,
117
- fontWeight: 300,
118
- fontSize: 16,
119
- lineHeight: 1.5,
120
- background: _colors["default"].bgWhite,
121
- border: "1px solid ".concat(_colors["default"].grey200),
122
- borderRadius: 4,
123
- padding: [_spacing["default"].tiny, _spacing["default"].small],
124
- boxShadow: 'none',
84
+ height: 48,
85
+ color: _colors["default"].text.corp.primary,
86
+ font: objectToFontValue(placeholder),
87
+ background: _colors["default"]['text-field'].bg["default"],
88
+ border: 'none',
89
+ borderRadius: _borderRadius["default"]['br-xs'],
90
+ padding: [_spacing["default"]['size-1'], _spacing["default"]['size-4']],
91
+ boxShadow: border.DEFAULT,
125
92
  outline: 'none',
126
- transition: '0.3s all',
93
+ transition: TRANSITION,
127
94
  appearance: 'none',
128
95
  '-webkit-appearance': 'none',
129
- caretColor: _colors["default"].prim,
96
+ caretColor: _colors["default"].border.brand["default"],
130
97
  '&::placeholder': {
131
- color: _colors["default"].inkLighter
98
+ color: _colors["default"].text.corp.secondary
132
99
  },
133
100
  '&::-webkit-outer-spin-button': {
134
101
  '-webkit-appearance': 'none',
@@ -140,6 +107,9 @@ var _default = {
140
107
  },
141
108
  '&[type=number]': {
142
109
  '-moz-appearance': 'textfield'
110
+ },
111
+ '&:hover': {
112
+ boxShadow: border.HOVER
143
113
  }
144
114
  },
145
115
  inputDisabled: {
@@ -147,118 +117,80 @@ var _default = {
147
117
  whiteSpace: 'nowrap'
148
118
  },
149
119
  hasRightIcon: {
150
- marginRight: _spacing["default"].small
120
+ marginRight: _spacing["default"]['size-8']
151
121
  },
152
122
  select: {
153
123
  '&::-ms-expand': {
154
124
  display: 'none'
155
125
  },
156
- paddingRight: 32,
126
+ paddingRight: _spacing["default"]['size-8'],
157
127
  '& optgroup': {
158
- fontSize: 14,
159
- fontWeight: 'normal',
160
- lineHeight: 1.5,
161
- color: _colors["default"].inkLight
128
+ font: objectToFontValue(label),
129
+ color: _colors["default"].text.corp.secondary
162
130
  },
163
131
  '& option': {
164
- fontSize: 16,
165
- lineHeight: 1.5,
166
- color: _colors["default"].ink,
132
+ font: objectToFontValue(placeholder),
133
+ color: _colors["default"].text.corp.primary,
167
134
  '&:disabled': {
168
- color: _colors["default"].inkLighter
135
+ color: _colors["default"].text.corp.disabled
169
136
  }
170
137
  },
171
138
  '&:invalid, & option[value=""]': {
172
- color: _colors["default"].inkLighter
139
+ color: _colors["default"].text.corp.disabled
173
140
  }
174
141
  },
175
142
  textarea: {
176
143
  resize: 'none',
144
+ paddingg: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
177
145
  height: 120,
178
146
  alignItems: 'flex-start'
179
147
  },
180
148
  hasIcon: {
181
- paddingLeft: 42
149
+ paddingLeft: _spacing["default"]['size-8']
182
150
  },
183
151
  hasPass: {
184
- paddingRight: 42
152
+ paddingRight: _spacing["default"]['size-8']
185
153
  },
186
154
  icon: {
187
155
  position: 'absolute',
188
- left: _spacing["default"].small,
156
+ left: _spacing["default"]['size-4'],
189
157
  top: '50%',
190
158
  transform: 'translateY(-50%)'
191
159
  },
192
- passIcon: {
193
- width: 24,
194
- height: 24,
195
- background: 'none',
196
- border: 0,
197
- padding: 3,
198
- margin: 0,
160
+ rightButton: {
199
161
  position: 'absolute',
200
- right: 12,
201
- top: 8,
202
- zIndex: 1,
203
- outline: 0,
204
- cursor: 'pointer'
162
+ right: _spacing["default"]['size-1'],
163
+ top: '50%',
164
+ transform: 'translateY(-50%)',
165
+ zIndex: 1
205
166
  },
206
167
  selectIcon: {
207
- width: 18,
208
- height: 24,
209
- background: 'none',
210
- border: 0,
211
- padding: '3px 0',
212
- margin: 0,
213
168
  position: 'absolute',
214
- right: 12,
215
- top: 8,
216
- zIndex: 1,
217
- outline: 0,
169
+ right: _spacing["default"]['size-4'],
170
+ top: '50%',
171
+ transform: 'translateY(-50%)',
218
172
  pointerEvents: 'none'
219
173
  },
220
174
  hasClear: {
221
- paddingRight: 42
175
+ paddingRight: _spacing["default"]['size-8']
222
176
  },
223
- clear: _defineProperty({
224
- width: 24,
225
- height: 24,
226
- background: 'none',
227
- border: 0,
228
- padding: 0,
229
- margin: 0,
230
- position: 'absolute',
231
- right: 12,
232
- top: '50%',
233
- transform: 'translateY(-50%)',
234
- zIndex: 1,
235
- outline: 0,
236
- cursor: 'pointer'
237
- }, "padding", 3),
238
177
  alignRight: {
239
178
  textAlign: 'right'
240
179
  },
241
- assistiveText: {
242
- color: _colors["default"].inkLighter,
243
- fontSize: 12,
244
- fontWeight: 300
180
+ assistiveTextWrap: {
181
+ display: 'flex'
245
182
  },
246
- errorAssistiveText: {
247
- color: _colors["default"].errorText
183
+ assistiveText: {
184
+ font: objectToFontValue(assistiveText),
185
+ color: _colors["default"].text.corp.secondary
248
186
  },
249
- errorIcon: {
250
- marginBottom: -2
187
+ assistiveError: {
188
+ color: _colors["default"].text.error
251
189
  },
252
190
  bottom: {
253
- height: 20,
254
- marginTop: 4
255
- },
256
- searchField: {
257
- height: _spacing["default"].large,
258
- borderRadius: _spacing["default"].base,
259
- borderColor: _colors["default"].grey600,
260
- background: [_colors["default"].bgWhite, '!important']
261
- },
262
- searchFieldHasIcon: {}
191
+ display: 'flex',
192
+ justifyContent: 'space-between',
193
+ marginTop: _spacing["default"]['size-2']
194
+ }
263
195
  };
264
196
  exports["default"] = _default;
@@ -257,7 +257,7 @@
257
257
  "selected": {
258
258
  "bg": {
259
259
  "default": "#0059CD",
260
- "hover": "#0047A5"
260
+ "hover": "#083CAE"
261
261
  }
262
262
  },
263
263
  "bg": {
@@ -279,7 +279,7 @@
279
279
  "selected": {
280
280
  "bg": {
281
281
  "default": "#0059CD",
282
- "hover": "#0047A5",
282
+ "hover": "#083CAE",
283
283
  "disabled": "#8DA5DA"
284
284
  },
285
285
  "border": {
@@ -310,7 +310,7 @@
310
310
  "selected": {
311
311
  "bg": {
312
312
  "default": "#0059CD",
313
- "hover": "#0047A5",
313
+ "hover": "#083CAE",
314
314
  "disabled": "hsl(221 91.2% 35.7% / 0.1)"
315
315
  },
316
316
  "border": {
@@ -342,7 +342,7 @@
342
342
  "border": "#d7f6e3"
343
343
  },
344
344
  "info": {
345
- "bg": "#f7faff",
345
+ "bg": "#e3efff",
346
346
  "border": "#e3efff"
347
347
  },
348
348
  "neutral": {
@@ -354,7 +354,7 @@
354
354
  "track": {
355
355
  "bg": {
356
356
  "default": "#0059CD",
357
- "hover": "#0047A5",
357
+ "hover": "#083CAE",
358
358
  "disabled": "#8DA5DA"
359
359
  }
360
360
  },
@@ -379,7 +379,7 @@
379
379
  "selected": {
380
380
  "bg": {
381
381
  "default": "#0059CD",
382
- "hover": "#0047A5",
382
+ "hover": "#083CAE",
383
383
  "disabled": "#8DA5DA"
384
384
  },
385
385
  "border": {
@@ -401,7 +401,7 @@
401
401
  "border": "#fff1d3"
402
402
  },
403
403
  "info": {
404
- "bg": "#f7faff",
404
+ "bg": "#e3efff",
405
405
  "border": "#e3efff"
406
406
  },
407
407
  "featured": {
@@ -439,6 +439,30 @@
439
439
  }
440
440
  }
441
441
  },
442
+ "nav": {
443
+ "bg": {
444
+ "inverse": "#083CAE",
445
+ "default": "#fff"
446
+ }
447
+ },
448
+ "pill": {
449
+ "selected": {
450
+ "bg": {
451
+ "default": "#0059CD",
452
+ "hover": "#083CAE",
453
+ "active": "#06308A",
454
+ "disabled": "#8DA5DA"
455
+ }
456
+ },
457
+ "unselected": {
458
+ "bg": {
459
+ "default": "hsl(221 91.2% 35.7% / 0.05)",
460
+ "hover": "hsl(221 91.2% 35.7% / 0.1)",
461
+ "active": "hsl(221 91.2% 35.7% / 0.2)",
462
+ "disabled": "hsl(221 91.2% 35.7% / 0.1)"
463
+ }
464
+ }
465
+ },
442
466
  "bg": {
443
467
  "action": {
444
468
  "primary": {
@@ -469,11 +493,13 @@
469
493
  },
470
494
  "brand": {
471
495
  "default": "#0059CD",
472
- "hover": "#0047A5",
496
+ "hover": "#083CAE",
497
+ "active": "#06308A",
473
498
  "disabled": "#8DA5DA",
474
499
  "subtle": {
475
500
  "default": "#E9EEF8",
476
- "hover": "#CAD5EE"
501
+ "hover": "#CAD5EE",
502
+ "active": "#ABBDE4"
477
503
  }
478
504
  },
479
505
  "ghost": {
@@ -490,7 +516,7 @@
490
516
  "warning": "#fff8e9",
491
517
  "error": "#fce8e8",
492
518
  "success": "#ebfbf1",
493
- "info": "#f7faff",
519
+ "info": "#e3efff",
494
520
  "overlay": "rgba(0,0,0,0.8)",
495
521
  "neutral": "#000"
496
522
  },
@@ -515,7 +541,8 @@
515
541
  },
516
542
  "border": {
517
543
  "inverse": {
518
- "default": "#fff",
544
+ "bold": "#fff",
545
+ "default": "rgba(255,255,255,0.5)",
519
546
  "subtle": "rgba(255,255,255,0.2)"
520
547
  },
521
548
  "default": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "2.0.0",
3
+ "version": "3.0.0-beta.2",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",