@transferwise/neptune-css 0.0.0-experimental-7cfec48 → 0.0.0-experimental-1ed1574

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/css/accordion.css +21 -6
  2. package/dist/css/alerts.css +159 -14
  3. package/dist/css/background.css +6 -2
  4. package/dist/css/badge.css +11 -1
  5. package/dist/css/breadcrumbs.css +2 -1
  6. package/dist/css/button-groups.css +8 -2
  7. package/dist/css/buttons.css +212 -142
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +22 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +4 -0
  12. package/dist/css/currency-flags.css +5 -1
  13. package/dist/css/decision.css +14 -5
  14. package/dist/css/dropdowns.css +28 -8
  15. package/dist/css/droppable.css +18 -11
  16. package/dist/css/flex.css +32 -0
  17. package/dist/css/footer.css +46 -8
  18. package/dist/css/grid.css +6 -0
  19. package/dist/css/input-groups.css +188 -142
  20. package/dist/css/link-callout.css +2 -0
  21. package/dist/css/list-group.css +39 -8
  22. package/dist/css/media.css +6 -0
  23. package/dist/css/modals.css +13 -3
  24. package/dist/css/navbar-base.css +107 -19
  25. package/dist/css/navbar.css +175 -37
  26. package/dist/css/navs.css +33 -8
  27. package/dist/css/neptune-addons.css +466 -4
  28. package/dist/css/neptune-core.css +196 -32
  29. package/dist/css/neptune.css +2204 -655
  30. package/dist/css/panels.css +3 -0
  31. package/dist/css/popovers.css +30 -6
  32. package/dist/css/process.css +8 -8
  33. package/dist/css/progress-bars.css +11 -2
  34. package/dist/css/ring.css +2 -2
  35. package/dist/css/select.css +12 -2
  36. package/dist/css/sequences.css +173 -25
  37. package/dist/css/table.css +65 -18
  38. package/dist/css/tick.css +2 -0
  39. package/dist/css/tooltip.css +7 -1
  40. package/dist/css/wells.css +25 -5
  41. package/dist/less/neptune-tokens.less +264 -153
  42. package/dist/props/neptune-tokens.css +132 -145
  43. package/package.json +2 -2
  44. package/src/less/addons/_background-utilities.less +33 -33
  45. package/src/less/alerts.less +28 -28
  46. package/src/less/background.less +3 -0
  47. package/src/less/buttons.less +19 -19
  48. package/src/less/column-layout.less +1 -1
  49. package/src/less/core/_scaffolding.less +13 -13
  50. package/src/less/core/_typography-utilities.less +18 -18
  51. package/src/less/dropdowns.less +7 -7
  52. package/src/less/footer.less +26 -26
  53. package/src/less/modals.less +1 -1
  54. package/src/less/navbar-base.less +25 -25
  55. package/src/less/navbar.less +3 -3
  56. package/src/less/navs.less +9 -9
  57. package/src/less/sequences.less +13 -13
  58. package/src/less/table.less +31 -31
  59. package/src/variables/neptune-tokens.less +8 -8
package/dist/css/buttons.css CHANGED
@@ -18,9 +18,12 @@
18
18
  border: 1px solid transparent;
19
19
  white-space: nowrap;
20
20
  padding-bottom: 10px;
21
+ font-weight: 600;
21
22
  font-weight: var(--font-weight-semi-bold);
22
23
  padding: var(--btn-padding);
24
+ font-size: 1rem;
23
25
  font-size: var(--font-size-16);
26
+ line-height: 1.5rem;
24
27
  line-height: var(--line-height-24);
25
28
  border-radius: var(--btn-radius-base);
26
29
  min-height: var(--btn-height);
@@ -29,7 +32,9 @@
29
32
  user-select: none;
30
33
  }
31
34
  .btn .dropdown-menu > li > a {
35
+ font-size: 1rem;
32
36
  font-size: var(--font-size-16);
37
+ line-height: 1.5rem;
33
38
  line-height: var(--line-height-24);
34
39
  }
35
40
  .np-theme-personal .btn {
@@ -38,7 +43,6 @@
38
43
  }
39
44
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
40
45
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus.btn-negative {
41
- outline-color: #a8200d;
42
46
  outline-color: var(--color-sentiment-negative);
43
47
  }
44
48
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
@@ -50,11 +54,10 @@
50
54
  }
51
55
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus,
52
56
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus {
53
- outline-color: #a8200d;
54
57
  outline-color: var(--color-sentiment-negative);
55
58
  }
56
59
  .btn:not(.disabled):not(:disabled):hover {
57
- color: #80e142;
60
+ color: #008fc9;
58
61
  color: var(--color-interactive-accent-hover);
59
62
  -webkit-text-decoration: none;
60
63
  text-decoration: none;
@@ -71,35 +74,36 @@ fieldset[disabled] a.btn {
71
74
  pointer-events: none;
72
75
  }
73
76
  .btn-default {
77
+ color: #0097c7;
74
78
  color: var(--color-content-accent);
75
79
  background-color: transparent;
76
- border-color: #9fe870;
80
+ border-color: #00a2dd;
77
81
  border-color: var(--color-interactive-accent);
78
82
  transition: color, background-color 0.15s ease-in-out;
79
83
  }
80
84
  .btn-default:not(.disabled):not(:disabled):hover {
81
85
  color: #FFF;
82
- background-color: #80e142;
86
+ background-color: #008fc9;
83
87
  background-color: var(--color-interactive-accent-hover);
84
- border-color: #80e142;
88
+ border-color: #008fc9;
85
89
  border-color: var(--color-interactive-accent-hover);
86
90
  }
87
91
  .btn-default:not(.disabled):not(:disabled):active,
88
92
  .btn-default:not(.disabled):not(:disabled).active,
89
93
  .open > .dropdown-toggle.btn-default {
90
94
  color: #FFF;
91
- background-color: #65cf21;
95
+ background-color: #0081ba;
92
96
  background-color: var(--color-interactive-accent-active);
93
- border-color: #65cf21;
97
+ border-color: #0081ba;
94
98
  border-color: var(--color-interactive-accent-active);
95
99
  }
96
100
  .btn-default:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
97
101
  .btn-default:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
98
102
  .open > .dropdown-toggle.btn-default:not(.disabled):not(:disabled):hover {
99
103
  color: #FFF;
100
- background-color: #65cf21;
104
+ background-color: #0081ba;
101
105
  background-color: var(--color-interactive-accent-active);
102
- border-color: #65cf21;
106
+ border-color: #0081ba;
103
107
  border-color: var(--color-interactive-accent-active);
104
108
  }
105
109
  .btn-default:not(.disabled):not(:disabled).active,
@@ -108,43 +112,40 @@ fieldset[disabled] a.btn {
108
112
  }
109
113
  .btn-default .badge {
110
114
  color: transparent;
115
+ background-color: #0097c7;
111
116
  background-color: var(--color-content-accent);
112
117
  }
113
118
  .np-theme-personal .btn-default {
114
- color: #163300;
115
119
  color: var(--color-interactive-control);
116
- background-color: #9fe870;
120
+ background-color: #00a2dd;
117
121
  background-color: var(--color-interactive-accent);
118
- border-color: #9fe870;
122
+ border-color: #00a2dd;
119
123
  border-color: var(--color-interactive-accent);
120
124
  transition: color, background-color 0.15s ease-in-out;
121
125
  }
122
126
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):hover {
123
- color: #163300;
124
127
  color: var(--color-interactive-control);
125
- background-color: #80e142;
128
+ background-color: #008fc9;
126
129
  background-color: var(--color-interactive-accent-hover);
127
- border-color: #80e142;
130
+ border-color: #008fc9;
128
131
  border-color: var(--color-interactive-accent-hover);
129
132
  }
130
133
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):active,
131
134
  .np-theme-personal .btn-default:not(.disabled):not(:disabled).active,
132
135
  .open > .dropdown-toggle.np-theme-personal .btn-default {
133
- color: #163300;
134
136
  color: var(--color-interactive-control);
135
- background-color: #65cf21;
137
+ background-color: #0081ba;
136
138
  background-color: var(--color-interactive-accent-active);
137
- border-color: #65cf21;
139
+ border-color: #0081ba;
138
140
  border-color: var(--color-interactive-accent-active);
139
141
  }
140
142
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
141
143
  .np-theme-personal .btn-default:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
142
144
  .open > .dropdown-toggle.np-theme-personal .btn-default:not(.disabled):not(:disabled):hover {
143
- color: #163300;
144
145
  color: var(--color-interactive-control);
145
- background-color: #65cf21;
146
+ background-color: #0081ba;
146
147
  background-color: var(--color-interactive-accent-active);
147
- border-color: #65cf21;
148
+ border-color: #0081ba;
148
149
  border-color: var(--color-interactive-accent-active);
149
150
  }
150
151
  .np-theme-personal .btn-default:not(.disabled):not(:disabled).active,
@@ -152,45 +153,39 @@ fieldset[disabled] a.btn {
152
153
  background-image: none;
153
154
  }
154
155
  .np-theme-personal .btn-default .badge {
155
- color: #9fe870;
156
+ color: #00a2dd;
156
157
  color: var(--color-interactive-accent);
157
- background-color: #163300;
158
158
  background-color: var(--color-interactive-control);
159
159
  }
160
160
  .np-theme-personal .btn-default.btn-priority-2 {
161
- color: #163300;
162
161
  color: var(--color-interactive-primary);
163
162
  background-color: transparent;
164
- border-color: #163300;
165
163
  border-color: var(--color-interactive-primary);
166
164
  transition: color, background-color 0.15s ease-in-out;
167
165
  }
168
166
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):hover {
169
- color: #163300;
170
167
  color: var(--color-interactive-control);
171
- background-color: #80e142;
168
+ background-color: #008fc9;
172
169
  background-color: var(--color-interactive-accent-hover);
173
- border-color: #80e142;
170
+ border-color: #008fc9;
174
171
  border-color: var(--color-interactive-accent-hover);
175
172
  }
176
173
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):active,
177
174
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled).active,
178
175
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2 {
179
- color: #163300;
180
176
  color: var(--color-interactive-control);
181
- background-color: #65cf21;
177
+ background-color: #0081ba;
182
178
  background-color: var(--color-interactive-accent-active);
183
- border-color: #65cf21;
179
+ border-color: #0081ba;
184
180
  border-color: var(--color-interactive-accent-active);
185
181
  }
186
182
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
187
183
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
188
184
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):hover {
189
- color: #163300;
190
185
  color: var(--color-interactive-control);
191
- background-color: #65cf21;
186
+ background-color: #0081ba;
192
187
  background-color: var(--color-interactive-accent-active);
193
- border-color: #65cf21;
188
+ border-color: #0081ba;
194
189
  border-color: var(--color-interactive-accent-active);
195
190
  }
196
191
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -199,24 +194,23 @@ fieldset[disabled] a.btn {
199
194
  }
200
195
  .np-theme-personal .btn-default.btn-priority-2 .badge {
201
196
  color: transparent;
202
- background-color: #163300;
203
197
  background-color: var(--color-interactive-primary);
204
198
  }
205
199
  .btn-accent,
206
200
  .btn-primary {
207
201
  color: #fff;
208
- background-color: #9fe870;
202
+ background-color: #00a2dd;
209
203
  background-color: var(--color-interactive-accent);
210
- border-color: #9fe870;
204
+ border-color: #00a2dd;
211
205
  border-color: var(--color-interactive-accent);
212
206
  transition: color, background-color 0.15s ease-in-out;
213
207
  }
214
208
  .btn-accent:not(.disabled):not(:disabled):hover,
215
209
  .btn-primary:not(.disabled):not(:disabled):hover {
216
210
  color: #fff;
217
- background-color: #80e142;
211
+ background-color: #008fc9;
218
212
  background-color: var(--color-interactive-accent-hover);
219
- border-color: #80e142;
213
+ border-color: #008fc9;
220
214
  border-color: var(--color-interactive-accent-hover);
221
215
  }
222
216
  .btn-accent:not(.disabled):not(:disabled):active,
@@ -226,9 +220,9 @@ fieldset[disabled] a.btn {
226
220
  .open > .dropdown-toggle.btn-accent,
227
221
  .open > .dropdown-toggle.btn-primary {
228
222
  color: #fff;
229
- background-color: #65cf21;
223
+ background-color: #0081ba;
230
224
  background-color: var(--color-interactive-accent-active);
231
- border-color: #65cf21;
225
+ border-color: #0081ba;
232
226
  border-color: var(--color-interactive-accent-active);
233
227
  }
234
228
  .btn-accent:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -238,9 +232,9 @@ fieldset[disabled] a.btn {
238
232
  .open > .dropdown-toggle.btn-accent:not(.disabled):not(:disabled):hover,
239
233
  .open > .dropdown-toggle.btn-primary:not(.disabled):not(:disabled):hover {
240
234
  color: #fff;
241
- background-color: #65cf21;
235
+ background-color: #0081ba;
242
236
  background-color: var(--color-interactive-accent-active);
243
- border-color: #65cf21;
237
+ border-color: #0081ba;
244
238
  border-color: var(--color-interactive-accent-active);
245
239
  }
246
240
  .btn-accent:not(.disabled):not(:disabled).active,
@@ -251,25 +245,25 @@ fieldset[disabled] a.btn {
251
245
  }
252
246
  .btn-accent .badge,
253
247
  .btn-primary .badge {
254
- color: #9fe870;
248
+ color: #00a2dd;
255
249
  color: var(--color-interactive-accent);
256
250
  background-color: #fff;
257
251
  }
258
252
  .btn-accent.btn-priority-2,
259
253
  .btn-primary.btn-priority-2 {
260
- color: #9fe870;
254
+ color: #00a2dd;
261
255
  color: var(--color-interactive-accent);
262
256
  background-color: transparent;
263
- border-color: #9fe870;
257
+ border-color: #00a2dd;
264
258
  border-color: var(--color-interactive-accent);
265
259
  transition: color, background-color 0.15s ease-in-out;
266
260
  }
267
261
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
268
262
  .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
269
263
  color: #fff;
270
- background-color: #80e142;
264
+ background-color: #008fc9;
271
265
  background-color: var(--color-interactive-accent-hover);
272
- border-color: #80e142;
266
+ border-color: #008fc9;
273
267
  border-color: var(--color-interactive-accent-hover);
274
268
  }
275
269
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -279,9 +273,9 @@ fieldset[disabled] a.btn {
279
273
  .open > .dropdown-toggle.btn-accent.btn-priority-2,
280
274
  .open > .dropdown-toggle.btn-primary.btn-priority-2 {
281
275
  color: #fff;
282
- background-color: #65cf21;
276
+ background-color: #0081ba;
283
277
  background-color: var(--color-interactive-accent-active);
284
- border-color: #65cf21;
278
+ border-color: #0081ba;
285
279
  border-color: var(--color-interactive-accent-active);
286
280
  }
287
281
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -291,9 +285,9 @@ fieldset[disabled] a.btn {
291
285
  .open > .dropdown-toggle.btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
292
286
  .open > .dropdown-toggle.btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
293
287
  color: #fff;
294
- background-color: #65cf21;
288
+ background-color: #0081ba;
295
289
  background-color: var(--color-interactive-accent-active);
296
- border-color: #65cf21;
290
+ border-color: #0081ba;
297
291
  border-color: var(--color-interactive-accent-active);
298
292
  }
299
293
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -305,26 +299,24 @@ fieldset[disabled] a.btn {
305
299
  .btn-accent.btn-priority-2 .badge,
306
300
  .btn-primary.btn-priority-2 .badge {
307
301
  color: transparent;
308
- background-color: #9fe870;
302
+ background-color: #00a2dd;
309
303
  background-color: var(--color-interactive-accent);
310
304
  }
311
305
  .np-theme-personal .btn-accent,
312
306
  .np-theme-personal .btn-primary {
313
- color: #163300;
314
307
  color: var(--color-interactive-control);
315
- background-color: #9fe870;
308
+ background-color: #00a2dd;
316
309
  background-color: var(--color-interactive-accent);
317
- border-color: #9fe870;
310
+ border-color: #00a2dd;
318
311
  border-color: var(--color-interactive-accent);
319
312
  transition: color, background-color 0.15s ease-in-out;
320
313
  }
321
314
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):hover,
322
315
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):hover {
323
- color: #163300;
324
316
  color: var(--color-interactive-control);
325
- background-color: #80e142;
317
+ background-color: #008fc9;
326
318
  background-color: var(--color-interactive-accent-hover);
327
- border-color: #80e142;
319
+ border-color: #008fc9;
328
320
  border-color: var(--color-interactive-accent-hover);
329
321
  }
330
322
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):active,
@@ -333,11 +325,10 @@ fieldset[disabled] a.btn {
333
325
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled).active,
334
326
  .open > .dropdown-toggle.np-theme-personal .btn-accent,
335
327
  .open > .dropdown-toggle.np-theme-personal .btn-primary {
336
- color: #163300;
337
328
  color: var(--color-interactive-control);
338
- background-color: #65cf21;
329
+ background-color: #0081ba;
339
330
  background-color: var(--color-interactive-accent-active);
340
- border-color: #65cf21;
331
+ border-color: #0081ba;
341
332
  border-color: var(--color-interactive-accent-active);
342
333
  }
343
334
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -346,11 +337,10 @@ fieldset[disabled] a.btn {
346
337
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
347
338
  .open > .dropdown-toggle.np-theme-personal .btn-accent:not(.disabled):not(:disabled):hover,
348
339
  .open > .dropdown-toggle.np-theme-personal .btn-primary:not(.disabled):not(:disabled):hover {
349
- color: #163300;
350
340
  color: var(--color-interactive-control);
351
- background-color: #65cf21;
341
+ background-color: #0081ba;
352
342
  background-color: var(--color-interactive-accent-active);
353
- border-color: #65cf21;
343
+ border-color: #0081ba;
354
344
  border-color: var(--color-interactive-accent-active);
355
345
  }
356
346
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).active,
@@ -361,27 +351,23 @@ fieldset[disabled] a.btn {
361
351
  }
362
352
  .np-theme-personal .btn-accent .badge,
363
353
  .np-theme-personal .btn-primary .badge {
364
- color: #9fe870;
354
+ color: #00a2dd;
365
355
  color: var(--color-interactive-accent);
366
- background-color: #163300;
367
356
  background-color: var(--color-interactive-control);
368
357
  }
369
358
  .np-theme-personal .btn-accent.btn-priority-2,
370
359
  .np-theme-personal .btn-primary.btn-priority-2 {
371
- color: #163300;
372
360
  color: var(--color-interactive-primary);
373
361
  background-color: transparent;
374
- border-color: #163300;
375
362
  border-color: var(--color-interactive-primary);
376
363
  transition: color, background-color 0.15s ease-in-out;
377
364
  }
378
365
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
379
366
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
380
- color: #163300;
381
367
  color: var(--color-interactive-control);
382
- background-color: #80e142;
368
+ background-color: #008fc9;
383
369
  background-color: var(--color-interactive-accent-hover);
384
- border-color: #80e142;
370
+ border-color: #008fc9;
385
371
  border-color: var(--color-interactive-accent-hover);
386
372
  }
387
373
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -390,11 +376,10 @@ fieldset[disabled] a.btn {
390
376
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled).active,
391
377
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2,
392
378
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2 {
393
- color: #163300;
394
379
  color: var(--color-interactive-control);
395
- background-color: #65cf21;
380
+ background-color: #0081ba;
396
381
  background-color: var(--color-interactive-accent-active);
397
- border-color: #65cf21;
382
+ border-color: #0081ba;
398
383
  border-color: var(--color-interactive-accent-active);
399
384
  }
400
385
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -403,11 +388,10 @@ fieldset[disabled] a.btn {
403
388
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
404
389
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
405
390
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
406
- color: #163300;
407
391
  color: var(--color-interactive-control);
408
- background-color: #65cf21;
392
+ background-color: #0081ba;
409
393
  background-color: var(--color-interactive-accent-active);
410
- border-color: #65cf21;
394
+ border-color: #0081ba;
411
395
  border-color: var(--color-interactive-accent-active);
412
396
  }
413
397
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -419,11 +403,11 @@ fieldset[disabled] a.btn {
419
403
  .np-theme-personal .btn-accent.btn-priority-2 .badge,
420
404
  .np-theme-personal .btn-primary.btn-priority-2 .badge {
421
405
  color: transparent;
422
- background-color: #163300;
423
406
  background-color: var(--color-interactive-primary);
424
407
  }
425
408
  .btn-link,
426
409
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
410
+ color: #0097c7;
427
411
  color: var(--color-content-accent);
428
412
  -webkit-text-decoration: underline;
429
413
  text-decoration: underline;
@@ -445,6 +429,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
445
429
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):hover,
446
430
  .btn-link:not(.disabled):not(:disabled):focus-visible,
447
431
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
432
+ color: #0084b3;
448
433
  color: var(--color-content-accent-hover);
449
434
  -webkit-text-decoration: underline;
450
435
  text-decoration: underline;
@@ -453,11 +438,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
453
438
  }
454
439
  .btn-link:not(.disabled):not(:disabled):active,
455
440
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):active {
441
+ color: #0077a5;
456
442
  color: var(--color-content-accent-active);
457
443
  }
458
444
  .np-theme-personal .btn-link,
459
445
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
460
- color: #163300;
461
446
  color: var(--color-interactive-primary);
462
447
  border-color: transparent;
463
448
  -webkit-text-decoration: underline;
@@ -468,21 +453,19 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
468
453
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):hover,
469
454
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):focus-visible,
470
455
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
471
- color: #0d1f00;
472
456
  color: var(--color-interactive-primary-hover);
473
457
  border-color: transparent;
474
458
  }
475
459
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):active,
476
460
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):active {
477
- color: #0e0f0c;
478
461
  color: var(--color-interactive-primary-active);
479
- background-color: rgba(22,51,0,0.12941) !important;
480
462
  background-color: var(--color-background-screen-active) !important;
481
463
  }
482
464
  .btn-accent.disabled.btn-priority-3,
483
465
  .btn-accent.btn-priority-3:disabled {
484
466
  background: transparent;
485
467
  border-color: transparent;
468
+ color: #0097c7;
486
469
  color: var(--color-content-accent);
487
470
  -webkit-text-decoration: underline;
488
471
  text-decoration: underline;
@@ -496,14 +479,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
496
479
  .btn-positive,
497
480
  .btn-success {
498
481
  color: #fff;
482
+ background-color: #2ead4b;
499
483
  background-color: var(--color-interactive-positive);
484
+ border-color: #2ead4b;
500
485
  border-color: var(--color-interactive-positive);
501
486
  transition: color, background-color 0.15s ease-in-out;
502
487
  }
503
488
  .btn-positive:not(.disabled):not(:disabled):hover,
504
489
  .btn-success:not(.disabled):not(:disabled):hover {
505
490
  color: #fff;
491
+ background-color: #069939;
506
492
  background-color: var(--color-interactive-positive-hover);
493
+ border-color: #069939;
507
494
  border-color: var(--color-interactive-positive-hover);
508
495
  }
509
496
  .btn-positive:not(.disabled):not(:disabled):active,
@@ -513,7 +500,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
513
500
  .open > .dropdown-toggle.btn-positive,
514
501
  .open > .dropdown-toggle.btn-success {
515
502
  color: #fff;
503
+ background-color: #008b2b;
516
504
  background-color: var(--color-interactive-positive-active);
505
+ border-color: #008b2b;
517
506
  border-color: var(--color-interactive-positive-active);
518
507
  }
519
508
  .btn-positive:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -523,7 +512,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
523
512
  .open > .dropdown-toggle.btn-positive:not(.disabled):not(:disabled):hover,
524
513
  .open > .dropdown-toggle.btn-success:not(.disabled):not(:disabled):hover {
525
514
  color: #fff;
515
+ background-color: #008b2b;
526
516
  background-color: var(--color-interactive-positive-active);
517
+ border-color: #008b2b;
527
518
  border-color: var(--color-interactive-positive-active);
528
519
  }
529
520
  .btn-positive:not(.disabled):not(:disabled).active,
@@ -534,20 +525,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
534
525
  }
535
526
  .btn-positive .badge,
536
527
  .btn-success .badge {
528
+ color: #2ead4b;
537
529
  color: var(--color-interactive-positive);
538
530
  background-color: #fff;
539
531
  }
540
532
  .btn-positive.btn-priority-2,
541
533
  .btn-success.btn-priority-2 {
534
+ color: #2ead4b;
542
535
  color: var(--color-interactive-positive);
543
536
  background-color: transparent;
537
+ border-color: #2ead4b;
544
538
  border-color: var(--color-interactive-positive);
545
539
  transition: color, background-color 0.15s ease-in-out;
546
540
  }
547
541
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
548
542
  .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
549
543
  color: #fff;
544
+ background-color: #069939;
550
545
  background-color: var(--color-interactive-positive-hover);
546
+ border-color: #069939;
551
547
  border-color: var(--color-interactive-positive-hover);
552
548
  }
553
549
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -557,7 +553,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
557
553
  .open > .dropdown-toggle.btn-positive.btn-priority-2,
558
554
  .open > .dropdown-toggle.btn-success.btn-priority-2 {
559
555
  color: #fff;
556
+ background-color: #008b2b;
560
557
  background-color: var(--color-interactive-positive-active);
558
+ border-color: #008b2b;
561
559
  border-color: var(--color-interactive-positive-active);
562
560
  }
563
561
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -567,7 +565,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
567
565
  .open > .dropdown-toggle.btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
568
566
  .open > .dropdown-toggle.btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
569
567
  color: #fff;
568
+ background-color: #008b2b;
570
569
  background-color: var(--color-interactive-positive-active);
570
+ border-color: #008b2b;
571
571
  border-color: var(--color-interactive-positive-active);
572
572
  }
573
573
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -579,25 +579,24 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
579
579
  .btn-positive.btn-priority-2 .badge,
580
580
  .btn-success.btn-priority-2 .badge {
581
581
  color: transparent;
582
+ background-color: #2ead4b;
582
583
  background-color: var(--color-interactive-positive);
583
584
  }
584
585
  .np-theme-personal .btn-positive,
585
586
  .np-theme-personal .btn-success {
586
- color: #163300;
587
587
  color: var(--color-interactive-control);
588
- background-color: #9fe870;
588
+ background-color: #00a2dd;
589
589
  background-color: var(--color-interactive-accent);
590
- border-color: #9fe870;
590
+ border-color: #00a2dd;
591
591
  border-color: var(--color-interactive-accent);
592
592
  transition: color, background-color 0.15s ease-in-out;
593
593
  }
594
594
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):hover,
595
595
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):hover {
596
- color: #163300;
597
596
  color: var(--color-interactive-control);
598
- background-color: #80e142;
597
+ background-color: #008fc9;
599
598
  background-color: var(--color-interactive-accent-hover);
600
- border-color: #9fe870;
599
+ border-color: #00a2dd;
601
600
  border-color: var(--color-interactive-accent);
602
601
  }
603
602
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):active,
@@ -606,11 +605,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
606
605
  .np-theme-personal .btn-success:not(.disabled):not(:disabled).active,
607
606
  .open > .dropdown-toggle.np-theme-personal .btn-positive,
608
607
  .open > .dropdown-toggle.np-theme-personal .btn-success {
609
- color: #163300;
610
608
  color: var(--color-interactive-control);
611
- background-color: #65cf21;
609
+ background-color: #0081ba;
612
610
  background-color: var(--color-interactive-accent-active);
613
- border-color: #9fe870;
611
+ border-color: #00a2dd;
614
612
  border-color: var(--color-interactive-accent);
615
613
  }
616
614
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -619,11 +617,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
619
617
  .np-theme-personal .btn-success:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
620
618
  .open > .dropdown-toggle.np-theme-personal .btn-positive:not(.disabled):not(:disabled):hover,
621
619
  .open > .dropdown-toggle.np-theme-personal .btn-success:not(.disabled):not(:disabled):hover {
622
- color: #163300;
623
620
  color: var(--color-interactive-control);
624
- background-color: #65cf21;
621
+ background-color: #0081ba;
625
622
  background-color: var(--color-interactive-accent-active);
626
- border-color: #9fe870;
623
+ border-color: #00a2dd;
627
624
  border-color: var(--color-interactive-accent);
628
625
  }
629
626
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled).active,
@@ -634,27 +631,23 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
634
631
  }
635
632
  .np-theme-personal .btn-positive .badge,
636
633
  .np-theme-personal .btn-success .badge {
637
- color: #9fe870;
634
+ color: #00a2dd;
638
635
  color: var(--color-interactive-accent);
639
- background-color: #163300;
640
636
  background-color: var(--color-interactive-control);
641
637
  }
642
638
  .np-theme-personal .btn-positive.btn-priority-2,
643
639
  .np-theme-personal .btn-success.btn-priority-2 {
644
- color: #163300;
645
640
  color: var(--color-interactive-primary);
646
641
  background-color: transparent;
647
- border-color: #163300;
648
642
  border-color: var(--color-interactive-primary);
649
643
  transition: color, background-color 0.15s ease-in-out;
650
644
  }
651
645
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
652
646
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
653
- color: #163300;
654
647
  color: var(--color-interactive-control);
655
- background-color: #80e142;
648
+ background-color: #008fc9;
656
649
  background-color: var(--color-interactive-accent-hover);
657
- border-color: #80e142;
650
+ border-color: #008fc9;
658
651
  border-color: var(--color-interactive-accent-hover);
659
652
  }
660
653
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -663,11 +656,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
663
656
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled).active,
664
657
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2,
665
658
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2 {
666
- color: #163300;
667
659
  color: var(--color-interactive-control);
668
- background-color: #65cf21;
660
+ background-color: #0081ba;
669
661
  background-color: var(--color-interactive-accent-active);
670
- border-color: #65cf21;
662
+ border-color: #0081ba;
671
663
  border-color: var(--color-interactive-accent-active);
672
664
  }
673
665
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -676,11 +668,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
676
668
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
677
669
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
678
670
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
679
- color: #163300;
680
671
  color: var(--color-interactive-control);
681
- background-color: #65cf21;
672
+ background-color: #0081ba;
682
673
  background-color: var(--color-interactive-accent-active);
683
- border-color: #65cf21;
674
+ border-color: #0081ba;
684
675
  border-color: var(--color-interactive-accent-active);
685
676
  }
686
677
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -692,7 +683,6 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
692
683
  .np-theme-personal .btn-positive.btn-priority-2 .badge,
693
684
  .np-theme-personal .btn-success.btn-priority-2 .badge {
694
685
  color: transparent;
695
- background-color: #163300;
696
686
  background-color: var(--color-interactive-primary);
697
687
  }
698
688
  .btn-info {
@@ -764,14 +754,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
764
754
  .btn-danger,
765
755
  .btn-negative {
766
756
  color: #fff;
757
+ background-color: #e74848;
767
758
  background-color: var(--color-interactive-negative);
759
+ border-color: #e74848;
768
760
  border-color: var(--color-interactive-negative);
769
761
  transition: color, background-color 0.15s ease-in-out;
770
762
  }
771
763
  .btn-danger:not(.disabled):not(:disabled):hover,
772
764
  .btn-negative:not(.disabled):not(:disabled):hover {
773
765
  color: #fff;
766
+ background-color: #d03238;
774
767
  background-color: var(--color-interactive-negative-hover);
768
+ border-color: #d03238;
775
769
  border-color: var(--color-interactive-negative-hover);
776
770
  }
777
771
  .btn-danger:not(.disabled):not(:disabled):active,
@@ -781,7 +775,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
781
775
  .open > .dropdown-toggle.btn-danger,
782
776
  .open > .dropdown-toggle.btn-negative {
783
777
  color: #fff;
778
+ background-color: #bf1e2c;
784
779
  background-color: var(--color-interactive-negative-active);
780
+ border-color: #bf1e2c;
785
781
  border-color: var(--color-interactive-negative-active);
786
782
  }
787
783
  .btn-danger:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -791,7 +787,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
791
787
  .open > .dropdown-toggle.btn-danger:not(.disabled):not(:disabled):hover,
792
788
  .open > .dropdown-toggle.btn-negative:not(.disabled):not(:disabled):hover {
793
789
  color: #fff;
790
+ background-color: #bf1e2c;
794
791
  background-color: var(--color-interactive-negative-active);
792
+ border-color: #bf1e2c;
795
793
  border-color: var(--color-interactive-negative-active);
796
794
  }
797
795
  .btn-danger:not(.disabled):not(:disabled).active,
@@ -802,20 +800,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
802
800
  }
803
801
  .btn-danger .badge,
804
802
  .btn-negative .badge {
803
+ color: #e74848;
805
804
  color: var(--color-interactive-negative);
806
805
  background-color: #fff;
807
806
  }
808
807
  .btn-danger.btn-priority-2,
809
808
  .btn-negative.btn-priority-2 {
809
+ color: #e74848;
810
810
  color: var(--color-interactive-negative);
811
811
  background-color: transparent;
812
+ border-color: #e74848;
812
813
  border-color: var(--color-interactive-negative);
813
814
  transition: color, background-color 0.15s ease-in-out;
814
815
  }
815
816
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
816
817
  .btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
817
818
  color: #fff;
819
+ background-color: #d03238;
818
820
  background-color: var(--color-interactive-negative-hover);
821
+ border-color: #d03238;
819
822
  border-color: var(--color-interactive-negative-hover);
820
823
  }
821
824
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -825,7 +828,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
825
828
  .open > .dropdown-toggle.btn-danger.btn-priority-2,
826
829
  .open > .dropdown-toggle.btn-negative.btn-priority-2 {
827
830
  color: #fff;
831
+ background-color: #bf1e2c;
828
832
  background-color: var(--color-interactive-negative-active);
833
+ border-color: #bf1e2c;
829
834
  border-color: var(--color-interactive-negative-active);
830
835
  }
831
836
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -835,7 +840,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
835
840
  .open > .dropdown-toggle.btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
836
841
  .open > .dropdown-toggle.btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
837
842
  color: #fff;
843
+ background-color: #bf1e2c;
838
844
  background-color: var(--color-interactive-negative-active);
845
+ border-color: #bf1e2c;
839
846
  border-color: var(--color-interactive-negative-active);
840
847
  }
841
848
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -847,23 +854,20 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
847
854
  .btn-danger.btn-priority-2 .badge,
848
855
  .btn-negative.btn-priority-2 .badge {
849
856
  color: transparent;
857
+ background-color: #e74848;
850
858
  background-color: var(--color-interactive-negative);
851
859
  }
852
860
  .np-theme-personal .btn-danger,
853
861
  .np-theme-personal .btn-negative {
854
862
  color: var(--color-contrast);
855
- background-color: #a8200d;
856
863
  background-color: var(--color-sentiment-negative);
857
- border-color: #a8200d;
858
864
  border-color: var(--color-sentiment-negative);
859
865
  transition: color, background-color 0.15s ease-in-out;
860
866
  }
861
867
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):hover,
862
868
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):hover {
863
869
  color: var(--color-contrast);
864
- background-color: #8e1b0b;
865
870
  background-color: var(--color-sentiment-negative-hover);
866
- border-color: #8e1b0b;
867
871
  border-color: var(--color-sentiment-negative-hover);
868
872
  }
869
873
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):active,
@@ -873,9 +877,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
873
877
  .open > .dropdown-toggle.np-theme-personal .btn-danger,
874
878
  .open > .dropdown-toggle.np-theme-personal .btn-negative {
875
879
  color: var(--color-contrast);
876
- background-color: #761709;
877
880
  background-color: var(--color-sentiment-negative-active);
878
- border-color: #761709;
879
881
  border-color: var(--color-sentiment-negative-active);
880
882
  }
881
883
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -885,9 +887,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
885
887
  .open > .dropdown-toggle.np-theme-personal .btn-danger:not(.disabled):not(:disabled):hover,
886
888
  .open > .dropdown-toggle.np-theme-personal .btn-negative:not(.disabled):not(:disabled):hover {
887
889
  color: var(--color-contrast);
888
- background-color: #761709;
889
890
  background-color: var(--color-sentiment-negative-active);
890
- border-color: #761709;
891
891
  border-color: var(--color-sentiment-negative-active);
892
892
  }
893
893
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled).active,
@@ -898,25 +898,20 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
898
898
  }
899
899
  .np-theme-personal .btn-danger .badge,
900
900
  .np-theme-personal .btn-negative .badge {
901
- color: #a8200d;
902
901
  color: var(--color-sentiment-negative);
903
902
  background-color: var(--color-contrast);
904
903
  }
905
904
  .np-theme-personal .btn-danger.btn-priority-2,
906
905
  .np-theme-personal .btn-negative.btn-priority-2 {
907
- color: #a8200d;
908
906
  color: var(--color-sentiment-negative);
909
907
  background-color: transparent;
910
- border-color: #a8200d;
911
908
  border-color: var(--color-sentiment-negative);
912
909
  transition: color, background-color 0.15s ease-in-out;
913
910
  }
914
911
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
915
912
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
916
913
  color: var(--color-contrast);
917
- background-color: #8e1b0b;
918
914
  background-color: var(--color-sentiment-negative-hover);
919
- border-color: #8e1b0b;
920
915
  border-color: var(--color-sentiment-negative-hover);
921
916
  }
922
917
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):active,
@@ -926,9 +921,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
926
921
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2,
927
922
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2 {
928
923
  color: var(--color-contrast);
929
- background-color: #761709;
930
924
  background-color: var(--color-sentiment-negative-active);
931
- border-color: #761709;
932
925
  border-color: var(--color-sentiment-negative-active);
933
926
  }
934
927
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -938,9 +931,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
938
931
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
939
932
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
940
933
  color: var(--color-contrast);
941
- background-color: #761709;
942
934
  background-color: var(--color-sentiment-negative-active);
943
- border-color: #761709;
944
935
  border-color: var(--color-sentiment-negative-active);
945
936
  }
946
937
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled).active,
@@ -952,26 +943,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
952
943
  .np-theme-personal .btn-danger.btn-priority-2 .badge,
953
944
  .np-theme-personal .btn-negative.btn-priority-2 .badge {
954
945
  color: transparent;
955
- background-color: #a8200d;
956
946
  background-color: var(--color-sentiment-negative);
957
947
  }
958
948
  .bootstrap-select .btn-default,
959
949
  .btn-input {
960
- color: #0e0f0c;
950
+ color: #37517e;
961
951
  color: var(--color-content-primary);
962
952
  background-color: #ffffff;
963
953
  background-color: var(--color-background-screen);
964
- border-color: #868685;
954
+ border-color: #c9cbce;
965
955
  border-color: var(--color-interactive-secondary);
966
956
  transition: color, background-color 0.15s ease-in-out;
967
957
  }
968
958
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):hover,
969
959
  .btn-input:not(.disabled):not(:disabled):hover {
970
- color: #0e0f0c;
960
+ color: #37517e;
971
961
  color: var(--color-content-primary);
972
962
  background-color: #ffffff;
973
963
  background-color: var(--color-background-screen);
974
- border-color: #6c6c6b;
964
+ border-color: #b5b7ba;
975
965
  border-color: var(--color-interactive-secondary-hover);
976
966
  }
977
967
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):active,
@@ -980,11 +970,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
980
970
  .btn-input:not(.disabled):not(:disabled).active,
981
971
  .open > .dropdown-toggle.bootstrap-select .btn-default,
982
972
  .open > .dropdown-toggle.btn-input {
983
- color: #0e0f0c;
973
+ color: #37517e;
984
974
  color: var(--color-content-primary);
985
975
  background-color: #ffffff;
986
976
  background-color: var(--color-background-screen);
987
- border-color: #525251;
977
+ border-color: #a7a9ab;
988
978
  border-color: var(--color-interactive-secondary-active);
989
979
  }
990
980
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
@@ -993,11 +983,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
993
983
  .btn-input:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
994
984
  .open > .dropdown-toggle.bootstrap-select .btn-default:not(.disabled):not(:disabled):hover,
995
985
  .open > .dropdown-toggle.btn-input:not(.disabled):not(:disabled):hover {
996
- color: #0e0f0c;
986
+ color: #37517e;
997
987
  color: var(--color-content-primary);
998
988
  background-color: #ffffff;
999
989
  background-color: var(--color-background-screen);
1000
- border-color: #525251;
990
+ border-color: #a7a9ab;
1001
991
  border-color: var(--color-interactive-secondary-active);
1002
992
  }
1003
993
  .bootstrap-select .btn-default:not(.disabled):not(:disabled).active,
@@ -1010,7 +1000,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1010
1000
  .btn-input .badge {
1011
1001
  color: #ffffff;
1012
1002
  color: var(--color-background-screen);
1013
- background-color: #0e0f0c;
1003
+ background-color: #37517e;
1014
1004
  background-color: var(--color-content-primary);
1015
1005
  }
1016
1006
  .btn-image {
@@ -1028,9 +1018,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1028
1018
  background: #384347;
1029
1019
  }
1030
1020
  .btn-input .caret {
1021
+ margin-left: 8px;
1031
1022
  margin-left: var(--size-8);
1032
1023
  }
1033
1024
  [dir="rtl"] .btn-input .caret {
1025
+ margin-right: 8px;
1034
1026
  margin-right: var(--size-8);
1035
1027
  margin-left: 0;
1036
1028
  margin-left: initial;
@@ -1070,13 +1062,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1070
1062
  }
1071
1063
  .btn-lg {
1072
1064
  padding: var(--btn-lg-padding);
1065
+ font-size: 1.125rem;
1073
1066
  font-size: var(--font-size-18);
1067
+ line-height: 1.75rem;
1074
1068
  line-height: var(--line-height-28);
1075
1069
  border-radius: var(--btn-lg-radius-base);
1076
1070
  min-height: var(--btn-lg-height);
1077
1071
  }
1078
1072
  .btn-lg .dropdown-menu > li > a {
1073
+ font-size: 1.125rem;
1079
1074
  font-size: var(--font-size-18);
1075
+ line-height: 1.75rem;
1080
1076
  line-height: var(--line-height-28);
1081
1077
  }
1082
1078
  .np-theme-personal .btn-lg {
@@ -1089,14 +1085,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1089
1085
  .btn-sm,
1090
1086
  .navbar .btn {
1091
1087
  padding: var(--btn-sm-padding);
1088
+ font-size: 0.875rem;
1092
1089
  font-size: var(--font-size-14);
1090
+ line-height: 1.375rem;
1093
1091
  line-height: var(--line-height-22);
1094
1092
  border-radius: var(--btn-sm-radius-base);
1095
1093
  min-height: var(--btn-sm-height);
1096
1094
  }
1097
1095
  .btn-sm .dropdown-menu > li > a,
1098
1096
  .navbar .btn .dropdown-menu > li > a {
1097
+ font-size: 0.875rem;
1099
1098
  font-size: var(--font-size-14);
1099
+ line-height: 1.375rem;
1100
1100
  line-height: var(--line-height-22);
1101
1101
  }
1102
1102
  .np-theme-personal .btn-sm,
@@ -1106,13 +1106,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1106
1106
  }
1107
1107
  .btn-xs {
1108
1108
  padding: var(--btn-xs-padding);
1109
+ font-size: 0.75rem;
1109
1110
  font-size: var(--font-size-12);
1111
+ line-height: 1.25rem;
1110
1112
  line-height: var(--line-height-20);
1111
1113
  border-radius: var(--btn-sm-radius-base);
1112
1114
  min-height: 22px;
1113
1115
  }
1114
1116
  .btn-xs .dropdown-menu > li > a {
1117
+ font-size: 0.75rem;
1115
1118
  font-size: var(--font-size-12);
1119
+ line-height: 1.25rem;
1116
1120
  line-height: var(--line-height-20);
1117
1121
  }
1118
1122
  .np-theme-personal .btn-xs {
@@ -1120,6 +1124,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1120
1124
  line-height: 18px;
1121
1125
  }
1122
1126
  .np-theme-personal .btn-xs .btn-loader {
1127
+ margin-left: calc(8px / 2) !important;
1123
1128
  margin-left: calc(var(--padding-x-small) / 2) !important;
1124
1129
  height: 18px;
1125
1130
  background-size: 12px 12px !important;
@@ -1127,13 +1132,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1127
1132
  @media (max-width: 767px) {
1128
1133
  .navbar-collapse .btn {
1129
1134
  padding: var(--btn-padding);
1135
+ font-size: 1rem;
1130
1136
  font-size: var(--font-size-16);
1137
+ line-height: 1.5rem;
1131
1138
  line-height: var(--line-height-24);
1132
1139
  border-radius: var(border-radius-base);
1133
1140
  min-height: var(--btn-height);
1134
1141
  }
1135
1142
  .navbar-collapse .btn .dropdown-menu > li > a {
1143
+ font-size: 1rem;
1136
1144
  font-size: var(--font-size-16);
1145
+ line-height: 1.5rem;
1137
1146
  line-height: var(--line-height-24);
1138
1147
  }
1139
1148
  .np-theme-personal .navbar-collapse .btn {
@@ -1147,6 +1156,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1147
1156
  width: 100%;
1148
1157
  }
1149
1158
  .btn-block + .btn-block {
1159
+ margin-top: 8px;
1150
1160
  margin-top: var(--size-8);
1151
1161
  }
1152
1162
  input[type="submit"].btn-block,
@@ -1155,6 +1165,7 @@ input[type="button"].btn-block {
1155
1165
  width: 100%;
1156
1166
  }
1157
1167
  .btn-input {
1168
+ font-weight: 400;
1158
1169
  font-weight: var(--font-weight-regular);
1159
1170
  padding-left: 16px;
1160
1171
  padding-right: 16px;
@@ -1170,14 +1181,14 @@ input[type="button"].btn-block {
1170
1181
  padding-right: initial;
1171
1182
  }
1172
1183
  .btn-input:not(.disabled):not(:disabled):hover {
1173
- border-color: #6c6c6b;
1184
+ border-color: #b5b7ba;
1174
1185
  border-color: var(--color-interactive-secondary-hover);
1175
1186
  }
1176
1187
  .btn-input:not(.disabled):not(:disabled).active,
1177
1188
  .btn-input:not(.disabled):not(:disabled):active,
1178
1189
  .btn-input:not(.disabled):not(:disabled).focus,
1179
1190
  .btn-input:not(.disabled):not(:disabled):focus-visible {
1180
- border-color: #65cf21;
1191
+ border-color: #0081ba;
1181
1192
  border-color: var(--color-interactive-accent-active);
1182
1193
  outline: 0 none !important;
1183
1194
  }
@@ -1185,10 +1196,11 @@ input[type="button"].btn-block {
1185
1196
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):active,
1186
1197
  .np-theme-personal .btn-input:not(.disabled):not(:disabled).focus,
1187
1198
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):focus-visible {
1188
- border-color: #525251;
1199
+ border-color: #a7a9ab;
1189
1200
  border-color: var(--color-interactive-secondary-active);
1190
1201
  }
1191
1202
  .btn-input .caret {
1203
+ color: #0097c7;
1192
1204
  color: var(--color-content-accent);
1193
1205
  }
1194
1206
  .btn-input.btn-sm {
@@ -1206,12 +1218,62 @@ input[type="button"].btn-block {
1206
1218
  padding-right: initial;
1207
1219
  }
1208
1220
  .btn-input.btn-lg {
1221
+ font-size: 1.25rem;
1209
1222
  font-size: var(--font-size-20);
1210
1223
  }
1211
1224
  .btn-input.btn-lg.btn-addon,
1212
1225
  .btn-input.btn-lg.btn-input-inverse {
1226
+ font-weight: 600;
1213
1227
  font-weight: var(--font-weight-semi-bold);
1214
1228
  }
1229
+ .btn-input-inverse {
1230
+ --color-content-primary: #ffffff;
1231
+ --color-content-accent: #00b9ff;
1232
+ }
1233
+ .btn-input-inverse,
1234
+ .btn-addon {
1235
+ color: #ffffff;
1236
+ background-color: #2e4369;
1237
+ border-color: #37517e;
1238
+ transition: color, background-color 0.15s ease-in-out;
1239
+ }
1240
+ .btn-input-inverse:not(.disabled):not(:disabled):hover,
1241
+ .btn-addon:not(.disabled):not(:disabled):hover {
1242
+ color: #ffffff;
1243
+ background-color: #2e4369;
1244
+ border-color: #2e4369;
1245
+ }
1246
+ .btn-input-inverse:not(.disabled):not(:disabled):active,
1247
+ .btn-addon:not(.disabled):not(:disabled):active,
1248
+ .btn-input-inverse:not(.disabled):not(:disabled).active,
1249
+ .btn-addon:not(.disabled):not(:disabled).active,
1250
+ .open > .dropdown-toggle.btn-input-inverse,
1251
+ .open > .dropdown-toggle.btn-addon {
1252
+ color: #ffffff;
1253
+ background-color: #2e4369;
1254
+ border-color: #2e4369;
1255
+ }
1256
+ .btn-input-inverse:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
1257
+ .btn-addon:not(.disabled):not(:disabled):active:not(.disabled):not(:disabled):hover,
1258
+ .btn-input-inverse:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
1259
+ .btn-addon:not(.disabled):not(:disabled).active:not(.disabled):not(:disabled):hover,
1260
+ .open > .dropdown-toggle.btn-input-inverse:not(.disabled):not(:disabled):hover,
1261
+ .open > .dropdown-toggle.btn-addon:not(.disabled):not(:disabled):hover {
1262
+ color: #ffffff;
1263
+ background-color: #2e4369;
1264
+ border-color: #2e4369;
1265
+ }
1266
+ .btn-input-inverse:not(.disabled):not(:disabled).active,
1267
+ .btn-addon:not(.disabled):not(:disabled).active,
1268
+ .open > .dropdown-toggle.btn-input-inverse,
1269
+ .open > .dropdown-toggle.btn-addon {
1270
+ background-image: none;
1271
+ }
1272
+ .btn-input-inverse .badge,
1273
+ .btn-addon .badge {
1274
+ color: #2e4369;
1275
+ background-color: #ffffff;
1276
+ }
1215
1277
  .form-group-sm .bootstrap-select .btn-default {
1216
1278
  padding: 4px 12px;
1217
1279
  }
@@ -1219,11 +1281,11 @@ input[type="button"].btn-block {
1219
1281
  padding: 12px 16px;
1220
1282
  }
1221
1283
  .bootstrap-select.open > .dropdown-toggle.btn-default {
1222
- border-color: #9fe870;
1284
+ border-color: #00a2dd;
1223
1285
  border-color: var(--color-interactive-accent);
1224
1286
  background-color: #ffffff;
1225
1287
  background-color: var(--color-background-screen);
1226
- color: #0e0f0c;
1288
+ color: #37517e;
1227
1289
  color: var(--color-content-primary);
1228
1290
  }
1229
1291
  .btn-loader {
@@ -1237,6 +1299,7 @@ input[type="button"].btn-block {
1237
1299
  .np-theme-personal--dark .btn-loader .process-circle,
1238
1300
  .np-theme-personal--bright-green .btn-loader .process-circle,
1239
1301
  .np-theme-personal--forest-green .btn-loader .process-circle {
1302
+ stroke: #e74848;
1240
1303
  stroke: var(--color-interactive-negative);
1241
1304
  }
1242
1305
  .btn-loading:not(.btn-block) {
@@ -1264,6 +1327,7 @@ input[type="button"].btn-block {
1264
1327
  background-size: 16px 16px;
1265
1328
  }
1266
1329
  .np-theme-personal .btn-sm .btn-loader {
1330
+ margin-left: calc(16px / 2) !important;
1267
1331
  margin-left: calc(var(--padding-small) / 2) !important;
1268
1332
  }
1269
1333
  @keyframes rotating {
@@ -1282,10 +1346,13 @@ input[type="button"].btn-block {
1282
1346
  }
1283
1347
  .btn-input.btn .tw-icon {
1284
1348
  position: absolute;
1349
+ right: 16px;
1285
1350
  right: var(--size-16);
1351
+ top: 16px;
1286
1352
  top: var(--size-16);
1287
1353
  }
1288
1354
  [dir="rtl"] .btn-input.btn .tw-icon {
1355
+ left: 16px;
1289
1356
  left: var(--size-16);
1290
1357
  right: auto;
1291
1358
  right: initial;
@@ -1295,10 +1362,13 @@ input[type="button"].btn-block {
1295
1362
  position: initial;
1296
1363
  }
1297
1364
  .btn-input.btn.btn-sm .tw-icon {
1365
+ right: 8px;
1298
1366
  right: var(--size-8);
1367
+ top: 8px;
1299
1368
  top: var(--size-8);
1300
1369
  }
1301
1370
  [dir="rtl"] .btn-input.btn.btn-sm .tw-icon {
1371
+ left: 8px;
1302
1372
  left: var(--size-8);
1303
1373
  right: auto;
1304
1374
  right: initial;