@transferwise/neptune-css 0.0.0-experimental-bca35d9 → 0.0.0-experimental-e674a91

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 (53) hide show
  1. package/dist/css/accordion.css +7 -10
  2. package/dist/css/alerts.css +142 -14
  3. package/dist/css/background.css +2 -2
  4. package/dist/css/badge.css +3 -1
  5. package/dist/css/breadcrumbs.css +1 -1
  6. package/dist/css/button-groups.css +6 -2
  7. package/dist/css/buttons.css +176 -151
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +11 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +1 -0
  12. package/dist/css/currency-flags.css +1 -1
  13. package/dist/css/decision.css +6 -9
  14. package/dist/css/dropdowns.css +20 -12
  15. package/dist/css/droppable.css +9 -12
  16. package/dist/css/footer.css +43 -8
  17. package/dist/css/input-groups.css +139 -146
  18. package/dist/css/list-group.css +33 -12
  19. package/dist/css/modals.css +4 -3
  20. package/dist/css/navbar.css +133 -41
  21. package/dist/css/navs.css +20 -8
  22. package/dist/css/neptune-addons.css +85 -8
  23. package/dist/css/neptune-core.css +94 -42
  24. package/dist/css/neptune.css +1187 -640
  25. package/dist/css/popovers.css +12 -10
  26. package/dist/css/process.css +8 -8
  27. package/dist/css/progress-bars.css +7 -2
  28. package/dist/css/ring.css +2 -2
  29. package/dist/css/select.css +2 -2
  30. package/dist/css/sequences.css +95 -39
  31. package/dist/css/table.css +48 -14
  32. package/dist/css/tick.css +1 -0
  33. package/dist/css/tooltip.css +2 -1
  34. package/dist/css/wells.css +5 -5
  35. package/dist/less/neptune-tokens.less +175 -81
  36. package/dist/props/neptune-tokens.css +40 -80
  37. package/package.json +2 -2
  38. package/src/less/addons/_background-utilities.less +37 -0
  39. package/src/less/alerts.less +36 -0
  40. package/src/less/background.less +1 -0
  41. package/src/less/buttons.less +22 -0
  42. package/src/less/column-layout.less +1 -0
  43. package/src/less/core/_scaffolding.less +22 -3
  44. package/src/less/core/_typography-utilities.less +29 -0
  45. package/src/less/dropdowns.less +8 -0
  46. package/src/less/footer.less +33 -0
  47. package/src/less/mixins/_sequence.less +2 -2
  48. package/src/less/modals.less +1 -0
  49. package/src/less/navbar.less +31 -0
  50. package/src/less/navs.less +10 -0
  51. package/src/less/sequences.less +26 -0
  52. package/src/less/table.less +8 -0
  53. package/src/variables/neptune-tokens.less +10 -1
package/dist/css/buttons.css CHANGED
@@ -39,12 +39,10 @@
39
39
  }
40
40
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
41
41
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus.btn-negative {
42
- outline-color: #cb272f;
43
42
  outline-color: var(--color-sentiment-negative);
44
43
  }
45
44
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
46
45
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus.btn-negative {
47
- outline-color: #ffffff;
48
46
  outline-color: var(--color-contrast);
49
47
  }
50
48
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).btn-negative {
@@ -52,11 +50,10 @@
52
50
  }
53
51
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus,
54
52
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus {
55
- outline-color: #cb272f;
56
53
  outline-color: var(--color-sentiment-negative);
57
54
  }
58
55
  .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
59
- color: #80e142;
56
+ color: #008fc9;
60
57
  color: var(--color-interactive-accent-hover);
61
58
  -webkit-text-decoration: none;
62
59
  text-decoration: none;
@@ -75,35 +72,36 @@ fieldset[disabled] a.btn {
75
72
  pointer-events: none;
76
73
  }
77
74
  .btn-default {
75
+ color: #0097c7;
78
76
  color: var(--color-content-accent);
79
77
  background-color: transparent;
80
- border-color: #9fe870;
78
+ border-color: #00a2dd;
81
79
  border-color: var(--color-interactive-accent);
82
80
  transition: color, background-color 0.15s ease-in-out;
83
81
  }
84
82
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover {
85
83
  color: #FFF;
86
- background-color: #80e142;
84
+ background-color: #008fc9;
87
85
  background-color: var(--color-interactive-accent-hover);
88
- border-color: #80e142;
86
+ border-color: #008fc9;
89
87
  border-color: var(--color-interactive-accent-hover);
90
88
  }
91
89
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
92
90
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
93
91
  .open > .dropdown-toggle.btn-default {
94
92
  color: #FFF;
95
- background-color: #65cf21;
93
+ background-color: #0081ba;
96
94
  background-color: var(--color-interactive-accent-active);
97
- border-color: #65cf21;
95
+ border-color: #0081ba;
98
96
  border-color: var(--color-interactive-accent-active);
99
97
  }
100
98
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
101
99
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
102
100
  .open > .dropdown-toggle.btn-default:not(.disabled):not(:disabled):hover {
103
101
  color: #FFF;
104
- background-color: #65cf21;
102
+ background-color: #0081ba;
105
103
  background-color: var(--color-interactive-accent-active);
106
- border-color: #65cf21;
104
+ border-color: #0081ba;
107
105
  border-color: var(--color-interactive-accent-active);
108
106
  }
109
107
  .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -112,43 +110,40 @@ fieldset[disabled] a.btn {
112
110
  }
113
111
  .btn-default .badge {
114
112
  color: transparent;
113
+ background-color: #0097c7;
115
114
  background-color: var(--color-content-accent);
116
115
  }
117
116
  .np-theme-personal .btn-default {
118
- color: #163300;
119
117
  color: var(--color-interactive-control);
120
- background-color: #9fe870;
118
+ background-color: #00a2dd;
121
119
  background-color: var(--color-interactive-accent);
122
- border-color: #9fe870;
120
+ border-color: #00a2dd;
123
121
  border-color: var(--color-interactive-accent);
124
122
  transition: color, background-color 0.15s ease-in-out;
125
123
  }
126
124
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover {
127
- color: #163300;
128
125
  color: var(--color-interactive-control);
129
- background-color: #80e142;
126
+ background-color: #008fc9;
130
127
  background-color: var(--color-interactive-accent-hover);
131
- border-color: #80e142;
128
+ border-color: #008fc9;
132
129
  border-color: var(--color-interactive-accent-hover);
133
130
  }
134
131
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
135
132
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
136
133
  .open > .dropdown-toggle.np-theme-personal .btn-default {
137
- color: #163300;
138
134
  color: var(--color-interactive-control);
139
- background-color: #65cf21;
135
+ background-color: #0081ba;
140
136
  background-color: var(--color-interactive-accent-active);
141
- border-color: #65cf21;
137
+ border-color: #0081ba;
142
138
  border-color: var(--color-interactive-accent-active);
143
139
  }
144
140
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
145
141
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
146
142
  .open > .dropdown-toggle.np-theme-personal .btn-default:not(.disabled):not(:disabled):hover {
147
- color: #163300;
148
143
  color: var(--color-interactive-control);
149
- background-color: #65cf21;
144
+ background-color: #0081ba;
150
145
  background-color: var(--color-interactive-accent-active);
151
- border-color: #65cf21;
146
+ border-color: #0081ba;
152
147
  border-color: var(--color-interactive-accent-active);
153
148
  }
154
149
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -156,45 +151,39 @@ fieldset[disabled] a.btn {
156
151
  background-image: none;
157
152
  }
158
153
  .np-theme-personal .btn-default .badge {
159
- color: #9fe870;
154
+ color: #00a2dd;
160
155
  color: var(--color-interactive-accent);
161
- background-color: #163300;
162
156
  background-color: var(--color-interactive-control);
163
157
  }
164
158
  .np-theme-personal .btn-default.btn-priority-2 {
165
- color: #163300;
166
159
  color: var(--color-interactive-primary);
167
160
  background-color: transparent;
168
- border-color: #163300;
169
161
  border-color: var(--color-interactive-primary);
170
162
  transition: color, background-color 0.15s ease-in-out;
171
163
  }
172
164
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
173
- color: #163300;
174
165
  color: var(--color-interactive-control);
175
- background-color: #80e142;
166
+ background-color: #008fc9;
176
167
  background-color: var(--color-interactive-accent-hover);
177
- border-color: #80e142;
168
+ border-color: #008fc9;
178
169
  border-color: var(--color-interactive-accent-hover);
179
170
  }
180
171
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
181
172
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
182
173
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2 {
183
- color: #163300;
184
174
  color: var(--color-interactive-control);
185
- background-color: #65cf21;
175
+ background-color: #0081ba;
186
176
  background-color: var(--color-interactive-accent-active);
187
- border-color: #65cf21;
177
+ border-color: #0081ba;
188
178
  border-color: var(--color-interactive-accent-active);
189
179
  }
190
180
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
191
181
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
192
182
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):hover {
193
- color: #163300;
194
183
  color: var(--color-interactive-control);
195
- background-color: #65cf21;
184
+ background-color: #0081ba;
196
185
  background-color: var(--color-interactive-accent-active);
197
- border-color: #65cf21;
186
+ border-color: #0081ba;
198
187
  border-color: var(--color-interactive-accent-active);
199
188
  }
200
189
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -203,24 +192,23 @@ fieldset[disabled] a.btn {
203
192
  }
204
193
  .np-theme-personal .btn-default.btn-priority-2 .badge {
205
194
  color: transparent;
206
- background-color: #163300;
207
195
  background-color: var(--color-interactive-primary);
208
196
  }
209
197
  .btn-accent,
210
198
  .btn-primary {
211
199
  color: #fff;
212
- background-color: #9fe870;
200
+ background-color: #00a2dd;
213
201
  background-color: var(--color-interactive-accent);
214
- border-color: #9fe870;
202
+ border-color: #00a2dd;
215
203
  border-color: var(--color-interactive-accent);
216
204
  transition: color, background-color 0.15s ease-in-out;
217
205
  }
218
206
  .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):hover,
219
207
  .btn-primary:not(.disabled):not(:disabled):not(.btn-loading):hover {
220
208
  color: #fff;
221
- background-color: #80e142;
209
+ background-color: #008fc9;
222
210
  background-color: var(--color-interactive-accent-hover);
223
- border-color: #80e142;
211
+ border-color: #008fc9;
224
212
  border-color: var(--color-interactive-accent-hover);
225
213
  }
226
214
  .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -230,9 +218,9 @@ fieldset[disabled] a.btn {
230
218
  .open > .dropdown-toggle.btn-accent,
231
219
  .open > .dropdown-toggle.btn-primary {
232
220
  color: #fff;
233
- background-color: #65cf21;
221
+ background-color: #0081ba;
234
222
  background-color: var(--color-interactive-accent-active);
235
- border-color: #65cf21;
223
+ border-color: #0081ba;
236
224
  border-color: var(--color-interactive-accent-active);
237
225
  }
238
226
  .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -242,9 +230,9 @@ fieldset[disabled] a.btn {
242
230
  .open > .dropdown-toggle.btn-accent:not(.disabled):not(:disabled):hover,
243
231
  .open > .dropdown-toggle.btn-primary:not(.disabled):not(:disabled):hover {
244
232
  color: #fff;
245
- background-color: #65cf21;
233
+ background-color: #0081ba;
246
234
  background-color: var(--color-interactive-accent-active);
247
- border-color: #65cf21;
235
+ border-color: #0081ba;
248
236
  border-color: var(--color-interactive-accent-active);
249
237
  }
250
238
  .btn-accent:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -255,25 +243,25 @@ fieldset[disabled] a.btn {
255
243
  }
256
244
  .btn-accent .badge,
257
245
  .btn-primary .badge {
258
- color: #9fe870;
246
+ color: #00a2dd;
259
247
  color: var(--color-interactive-accent);
260
248
  background-color: #fff;
261
249
  }
262
250
  .btn-accent.btn-priority-2,
263
251
  .btn-primary.btn-priority-2 {
264
- color: #9fe870;
252
+ color: #00a2dd;
265
253
  color: var(--color-interactive-accent);
266
254
  background-color: transparent;
267
- border-color: #9fe870;
255
+ border-color: #00a2dd;
268
256
  border-color: var(--color-interactive-accent);
269
257
  transition: color, background-color 0.15s ease-in-out;
270
258
  }
271
259
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
272
260
  .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
273
261
  color: #fff;
274
- background-color: #80e142;
262
+ background-color: #008fc9;
275
263
  background-color: var(--color-interactive-accent-hover);
276
- border-color: #80e142;
264
+ border-color: #008fc9;
277
265
  border-color: var(--color-interactive-accent-hover);
278
266
  }
279
267
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -283,9 +271,9 @@ fieldset[disabled] a.btn {
283
271
  .open > .dropdown-toggle.btn-accent.btn-priority-2,
284
272
  .open > .dropdown-toggle.btn-primary.btn-priority-2 {
285
273
  color: #fff;
286
- background-color: #65cf21;
274
+ background-color: #0081ba;
287
275
  background-color: var(--color-interactive-accent-active);
288
- border-color: #65cf21;
276
+ border-color: #0081ba;
289
277
  border-color: var(--color-interactive-accent-active);
290
278
  }
291
279
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -295,9 +283,9 @@ fieldset[disabled] a.btn {
295
283
  .open > .dropdown-toggle.btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
296
284
  .open > .dropdown-toggle.btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
297
285
  color: #fff;
298
- background-color: #65cf21;
286
+ background-color: #0081ba;
299
287
  background-color: var(--color-interactive-accent-active);
300
- border-color: #65cf21;
288
+ border-color: #0081ba;
301
289
  border-color: var(--color-interactive-accent-active);
302
290
  }
303
291
  .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -309,26 +297,24 @@ fieldset[disabled] a.btn {
309
297
  .btn-accent.btn-priority-2 .badge,
310
298
  .btn-primary.btn-priority-2 .badge {
311
299
  color: transparent;
312
- background-color: #9fe870;
300
+ background-color: #00a2dd;
313
301
  background-color: var(--color-interactive-accent);
314
302
  }
315
303
  .np-theme-personal .btn-accent,
316
304
  .np-theme-personal .btn-primary {
317
- color: #163300;
318
305
  color: var(--color-interactive-control);
319
- background-color: #9fe870;
306
+ background-color: #00a2dd;
320
307
  background-color: var(--color-interactive-accent);
321
- border-color: #9fe870;
308
+ border-color: #00a2dd;
322
309
  border-color: var(--color-interactive-accent);
323
310
  transition: color, background-color 0.15s ease-in-out;
324
311
  }
325
312
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):hover,
326
313
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading):hover {
327
- color: #163300;
328
314
  color: var(--color-interactive-control);
329
- background-color: #80e142;
315
+ background-color: #008fc9;
330
316
  background-color: var(--color-interactive-accent-hover);
331
- border-color: #80e142;
317
+ border-color: #008fc9;
332
318
  border-color: var(--color-interactive-accent-hover);
333
319
  }
334
320
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -337,11 +323,10 @@ fieldset[disabled] a.btn {
337
323
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading).active,
338
324
  .open > .dropdown-toggle.np-theme-personal .btn-accent,
339
325
  .open > .dropdown-toggle.np-theme-personal .btn-primary {
340
- color: #163300;
341
326
  color: var(--color-interactive-control);
342
- background-color: #65cf21;
327
+ background-color: #0081ba;
343
328
  background-color: var(--color-interactive-accent-active);
344
- border-color: #65cf21;
329
+ border-color: #0081ba;
345
330
  border-color: var(--color-interactive-accent-active);
346
331
  }
347
332
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -350,11 +335,10 @@ fieldset[disabled] a.btn {
350
335
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
351
336
  .open > .dropdown-toggle.np-theme-personal .btn-accent:not(.disabled):not(:disabled):hover,
352
337
  .open > .dropdown-toggle.np-theme-personal .btn-primary:not(.disabled):not(:disabled):hover {
353
- color: #163300;
354
338
  color: var(--color-interactive-control);
355
- background-color: #65cf21;
339
+ background-color: #0081ba;
356
340
  background-color: var(--color-interactive-accent-active);
357
- border-color: #65cf21;
341
+ border-color: #0081ba;
358
342
  border-color: var(--color-interactive-accent-active);
359
343
  }
360
344
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -365,27 +349,23 @@ fieldset[disabled] a.btn {
365
349
  }
366
350
  .np-theme-personal .btn-accent .badge,
367
351
  .np-theme-personal .btn-primary .badge {
368
- color: #9fe870;
352
+ color: #00a2dd;
369
353
  color: var(--color-interactive-accent);
370
- background-color: #163300;
371
354
  background-color: var(--color-interactive-control);
372
355
  }
373
356
  .np-theme-personal .btn-accent.btn-priority-2,
374
357
  .np-theme-personal .btn-primary.btn-priority-2 {
375
- color: #163300;
376
358
  color: var(--color-interactive-primary);
377
359
  background-color: transparent;
378
- border-color: #163300;
379
360
  border-color: var(--color-interactive-primary);
380
361
  transition: color, background-color 0.15s ease-in-out;
381
362
  }
382
363
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
383
364
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
384
- color: #163300;
385
365
  color: var(--color-interactive-control);
386
- background-color: #80e142;
366
+ background-color: #008fc9;
387
367
  background-color: var(--color-interactive-accent-hover);
388
- border-color: #80e142;
368
+ border-color: #008fc9;
389
369
  border-color: var(--color-interactive-accent-hover);
390
370
  }
391
371
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -394,11 +374,10 @@ fieldset[disabled] a.btn {
394
374
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
395
375
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2,
396
376
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2 {
397
- color: #163300;
398
377
  color: var(--color-interactive-control);
399
- background-color: #65cf21;
378
+ background-color: #0081ba;
400
379
  background-color: var(--color-interactive-accent-active);
401
- border-color: #65cf21;
380
+ border-color: #0081ba;
402
381
  border-color: var(--color-interactive-accent-active);
403
382
  }
404
383
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -407,11 +386,10 @@ fieldset[disabled] a.btn {
407
386
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
408
387
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
409
388
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
410
- color: #163300;
411
389
  color: var(--color-interactive-control);
412
- background-color: #65cf21;
390
+ background-color: #0081ba;
413
391
  background-color: var(--color-interactive-accent-active);
414
- border-color: #65cf21;
392
+ border-color: #0081ba;
415
393
  border-color: var(--color-interactive-accent-active);
416
394
  }
417
395
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -423,11 +401,11 @@ fieldset[disabled] a.btn {
423
401
  .np-theme-personal .btn-accent.btn-priority-2 .badge,
424
402
  .np-theme-personal .btn-primary.btn-priority-2 .badge {
425
403
  color: transparent;
426
- background-color: #163300;
427
404
  background-color: var(--color-interactive-primary);
428
405
  }
429
406
  .btn-link,
430
407
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
408
+ color: #0097c7;
431
409
  color: var(--color-content-accent);
432
410
  -webkit-text-decoration: underline;
433
411
  text-decoration: underline;
@@ -449,6 +427,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
449
427
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):hover,
450
428
  .btn-link:not(.disabled):not(:disabled):focus-visible,
451
429
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
430
+ color: #0084b3;
452
431
  color: var(--color-content-accent-hover);
453
432
  -webkit-text-decoration: underline;
454
433
  text-decoration: underline;
@@ -457,11 +436,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
457
436
  }
458
437
  .btn-link:not(.disabled):not(:disabled):not(.btn-loading):active,
459
438
  .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):active {
439
+ color: #0077a5;
460
440
  color: var(--color-content-accent-active);
461
441
  }
462
442
  .np-theme-personal .btn-link,
463
443
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
464
- color: #163300;
465
444
  color: var(--color-interactive-primary);
466
445
  border-color: transparent;
467
446
  -webkit-text-decoration: underline;
@@ -472,21 +451,19 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
472
451
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):hover,
473
452
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):focus-visible,
474
453
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
475
- color: #0d1f00;
476
454
  color: var(--color-interactive-primary-hover);
477
455
  border-color: transparent;
478
456
  }
479
457
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):not(.btn-loading):active,
480
458
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):active {
481
- color: #0e0f0c;
482
459
  color: var(--color-interactive-primary-active);
483
- background-color: rgba(22,51,0,0.12941) !important;
484
460
  background-color: var(--color-background-screen-active) !important;
485
461
  }
486
462
  .btn-accent.disabled.btn-priority-3,
487
463
  .btn-accent.btn-priority-3:disabled {
488
464
  background: transparent;
489
465
  border-color: transparent;
466
+ color: #0097c7;
490
467
  color: var(--color-content-accent);
491
468
  -webkit-text-decoration: underline;
492
469
  text-decoration: underline;
@@ -500,14 +477,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
500
477
  .btn-positive,
501
478
  .btn-success {
502
479
  color: #fff;
480
+ background-color: #2ead4b;
503
481
  background-color: var(--color-interactive-positive);
482
+ border-color: #2ead4b;
504
483
  border-color: var(--color-interactive-positive);
505
484
  transition: color, background-color 0.15s ease-in-out;
506
485
  }
507
486
  .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):hover,
508
487
  .btn-success:not(.disabled):not(:disabled):not(.btn-loading):hover {
509
488
  color: #fff;
489
+ background-color: #069939;
510
490
  background-color: var(--color-interactive-positive-hover);
491
+ border-color: #069939;
511
492
  border-color: var(--color-interactive-positive-hover);
512
493
  }
513
494
  .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -517,7 +498,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
517
498
  .open > .dropdown-toggle.btn-positive,
518
499
  .open > .dropdown-toggle.btn-success {
519
500
  color: #fff;
501
+ background-color: #008b2b;
520
502
  background-color: var(--color-interactive-positive-active);
503
+ border-color: #008b2b;
521
504
  border-color: var(--color-interactive-positive-active);
522
505
  }
523
506
  .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -527,7 +510,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
527
510
  .open > .dropdown-toggle.btn-positive:not(.disabled):not(:disabled):hover,
528
511
  .open > .dropdown-toggle.btn-success:not(.disabled):not(:disabled):hover {
529
512
  color: #fff;
513
+ background-color: #008b2b;
530
514
  background-color: var(--color-interactive-positive-active);
515
+ border-color: #008b2b;
531
516
  border-color: var(--color-interactive-positive-active);
532
517
  }
533
518
  .btn-positive:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -538,20 +523,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
538
523
  }
539
524
  .btn-positive .badge,
540
525
  .btn-success .badge {
526
+ color: #2ead4b;
541
527
  color: var(--color-interactive-positive);
542
528
  background-color: #fff;
543
529
  }
544
530
  .btn-positive.btn-priority-2,
545
531
  .btn-success.btn-priority-2 {
532
+ color: #2ead4b;
546
533
  color: var(--color-interactive-positive);
547
534
  background-color: transparent;
535
+ border-color: #2ead4b;
548
536
  border-color: var(--color-interactive-positive);
549
537
  transition: color, background-color 0.15s ease-in-out;
550
538
  }
551
539
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
552
540
  .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
553
541
  color: #fff;
542
+ background-color: #069939;
554
543
  background-color: var(--color-interactive-positive-hover);
544
+ border-color: #069939;
555
545
  border-color: var(--color-interactive-positive-hover);
556
546
  }
557
547
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -561,7 +551,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
561
551
  .open > .dropdown-toggle.btn-positive.btn-priority-2,
562
552
  .open > .dropdown-toggle.btn-success.btn-priority-2 {
563
553
  color: #fff;
554
+ background-color: #008b2b;
564
555
  background-color: var(--color-interactive-positive-active);
556
+ border-color: #008b2b;
565
557
  border-color: var(--color-interactive-positive-active);
566
558
  }
567
559
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -571,7 +563,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
571
563
  .open > .dropdown-toggle.btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
572
564
  .open > .dropdown-toggle.btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
573
565
  color: #fff;
566
+ background-color: #008b2b;
574
567
  background-color: var(--color-interactive-positive-active);
568
+ border-color: #008b2b;
575
569
  border-color: var(--color-interactive-positive-active);
576
570
  }
577
571
  .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -583,25 +577,24 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
583
577
  .btn-positive.btn-priority-2 .badge,
584
578
  .btn-success.btn-priority-2 .badge {
585
579
  color: transparent;
580
+ background-color: #2ead4b;
586
581
  background-color: var(--color-interactive-positive);
587
582
  }
588
583
  .np-theme-personal .btn-positive,
589
584
  .np-theme-personal .btn-success {
590
- color: #163300;
591
585
  color: var(--color-interactive-control);
592
- background-color: #9fe870;
586
+ background-color: #00a2dd;
593
587
  background-color: var(--color-interactive-accent);
594
- border-color: #9fe870;
588
+ border-color: #00a2dd;
595
589
  border-color: var(--color-interactive-accent);
596
590
  transition: color, background-color 0.15s ease-in-out;
597
591
  }
598
592
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):hover,
599
593
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading):hover {
600
- color: #163300;
601
594
  color: var(--color-interactive-control);
602
- background-color: #80e142;
595
+ background-color: #008fc9;
603
596
  background-color: var(--color-interactive-accent-hover);
604
- border-color: #9fe870;
597
+ border-color: #00a2dd;
605
598
  border-color: var(--color-interactive-accent);
606
599
  }
607
600
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -610,11 +603,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
610
603
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading).active,
611
604
  .open > .dropdown-toggle.np-theme-personal .btn-positive,
612
605
  .open > .dropdown-toggle.np-theme-personal .btn-success {
613
- color: #163300;
614
606
  color: var(--color-interactive-control);
615
- background-color: #65cf21;
607
+ background-color: #0081ba;
616
608
  background-color: var(--color-interactive-accent-active);
617
- border-color: #9fe870;
609
+ border-color: #00a2dd;
618
610
  border-color: var(--color-interactive-accent);
619
611
  }
620
612
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -623,11 +615,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
623
615
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
624
616
  .open > .dropdown-toggle.np-theme-personal .btn-positive:not(.disabled):not(:disabled):hover,
625
617
  .open > .dropdown-toggle.np-theme-personal .btn-success:not(.disabled):not(:disabled):hover {
626
- color: #163300;
627
618
  color: var(--color-interactive-control);
628
- background-color: #65cf21;
619
+ background-color: #0081ba;
629
620
  background-color: var(--color-interactive-accent-active);
630
- border-color: #9fe870;
621
+ border-color: #00a2dd;
631
622
  border-color: var(--color-interactive-accent);
632
623
  }
633
624
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -638,27 +629,23 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
638
629
  }
639
630
  .np-theme-personal .btn-positive .badge,
640
631
  .np-theme-personal .btn-success .badge {
641
- color: #9fe870;
632
+ color: #00a2dd;
642
633
  color: var(--color-interactive-accent);
643
- background-color: #163300;
644
634
  background-color: var(--color-interactive-control);
645
635
  }
646
636
  .np-theme-personal .btn-positive.btn-priority-2,
647
637
  .np-theme-personal .btn-success.btn-priority-2 {
648
- color: #163300;
649
638
  color: var(--color-interactive-primary);
650
639
  background-color: transparent;
651
- border-color: #163300;
652
640
  border-color: var(--color-interactive-primary);
653
641
  transition: color, background-color 0.15s ease-in-out;
654
642
  }
655
643
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
656
644
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
657
- color: #163300;
658
645
  color: var(--color-interactive-control);
659
- background-color: #80e142;
646
+ background-color: #008fc9;
660
647
  background-color: var(--color-interactive-accent-hover);
661
- border-color: #80e142;
648
+ border-color: #008fc9;
662
649
  border-color: var(--color-interactive-accent-hover);
663
650
  }
664
651
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -667,11 +654,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
667
654
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
668
655
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2,
669
656
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2 {
670
- color: #163300;
671
657
  color: var(--color-interactive-control);
672
- background-color: #65cf21;
658
+ background-color: #0081ba;
673
659
  background-color: var(--color-interactive-accent-active);
674
- border-color: #65cf21;
660
+ border-color: #0081ba;
675
661
  border-color: var(--color-interactive-accent-active);
676
662
  }
677
663
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -680,11 +666,10 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
680
666
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
681
667
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
682
668
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
683
- color: #163300;
684
669
  color: var(--color-interactive-control);
685
- background-color: #65cf21;
670
+ background-color: #0081ba;
686
671
  background-color: var(--color-interactive-accent-active);
687
- border-color: #65cf21;
672
+ border-color: #0081ba;
688
673
  border-color: var(--color-interactive-accent-active);
689
674
  }
690
675
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -696,7 +681,6 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
696
681
  .np-theme-personal .btn-positive.btn-priority-2 .badge,
697
682
  .np-theme-personal .btn-success.btn-priority-2 .badge {
698
683
  color: transparent;
699
- background-color: #163300;
700
684
  background-color: var(--color-interactive-primary);
701
685
  }
702
686
  .btn-info {
@@ -768,14 +752,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
768
752
  .btn-danger,
769
753
  .btn-negative {
770
754
  color: #fff;
755
+ background-color: #e74848;
771
756
  background-color: var(--color-interactive-negative);
757
+ border-color: #e74848;
772
758
  border-color: var(--color-interactive-negative);
773
759
  transition: color, background-color 0.15s ease-in-out;
774
760
  }
775
761
  .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):hover,
776
762
  .btn-negative:not(.disabled):not(:disabled):not(.btn-loading):hover {
777
763
  color: #fff;
764
+ background-color: #d03238;
778
765
  background-color: var(--color-interactive-negative-hover);
766
+ border-color: #d03238;
779
767
  border-color: var(--color-interactive-negative-hover);
780
768
  }
781
769
  .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -785,7 +773,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
785
773
  .open > .dropdown-toggle.btn-danger,
786
774
  .open > .dropdown-toggle.btn-negative {
787
775
  color: #fff;
776
+ background-color: #bf1e2c;
788
777
  background-color: var(--color-interactive-negative-active);
778
+ border-color: #bf1e2c;
789
779
  border-color: var(--color-interactive-negative-active);
790
780
  }
791
781
  .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -795,7 +785,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
795
785
  .open > .dropdown-toggle.btn-danger:not(.disabled):not(:disabled):hover,
796
786
  .open > .dropdown-toggle.btn-negative:not(.disabled):not(:disabled):hover {
797
787
  color: #fff;
788
+ background-color: #bf1e2c;
798
789
  background-color: var(--color-interactive-negative-active);
790
+ border-color: #bf1e2c;
799
791
  border-color: var(--color-interactive-negative-active);
800
792
  }
801
793
  .btn-danger:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -806,20 +798,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
806
798
  }
807
799
  .btn-danger .badge,
808
800
  .btn-negative .badge {
801
+ color: #e74848;
809
802
  color: var(--color-interactive-negative);
810
803
  background-color: #fff;
811
804
  }
812
805
  .btn-danger.btn-priority-2,
813
806
  .btn-negative.btn-priority-2 {
807
+ color: #e74848;
814
808
  color: var(--color-interactive-negative);
815
809
  background-color: transparent;
810
+ border-color: #e74848;
816
811
  border-color: var(--color-interactive-negative);
817
812
  transition: color, background-color 0.15s ease-in-out;
818
813
  }
819
814
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
820
815
  .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
821
816
  color: #fff;
817
+ background-color: #d03238;
822
818
  background-color: var(--color-interactive-negative-hover);
819
+ border-color: #d03238;
823
820
  border-color: var(--color-interactive-negative-hover);
824
821
  }
825
822
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -829,7 +826,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
829
826
  .open > .dropdown-toggle.btn-danger.btn-priority-2,
830
827
  .open > .dropdown-toggle.btn-negative.btn-priority-2 {
831
828
  color: #fff;
829
+ background-color: #bf1e2c;
832
830
  background-color: var(--color-interactive-negative-active);
831
+ border-color: #bf1e2c;
833
832
  border-color: var(--color-interactive-negative-active);
834
833
  }
835
834
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -839,7 +838,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
839
838
  .open > .dropdown-toggle.btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
840
839
  .open > .dropdown-toggle.btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
841
840
  color: #fff;
841
+ background-color: #bf1e2c;
842
842
  background-color: var(--color-interactive-negative-active);
843
+ border-color: #bf1e2c;
843
844
  border-color: var(--color-interactive-negative-active);
844
845
  }
845
846
  .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -851,25 +852,20 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
851
852
  .btn-danger.btn-priority-2 .badge,
852
853
  .btn-negative.btn-priority-2 .badge {
853
854
  color: transparent;
855
+ background-color: #e74848;
854
856
  background-color: var(--color-interactive-negative);
855
857
  }
856
858
  .np-theme-personal .btn-danger,
857
859
  .np-theme-personal .btn-negative {
858
- color: #ffffff;
859
860
  color: var(--color-contrast);
860
- background-color: #cb272f;
861
861
  background-color: var(--color-sentiment-negative);
862
- border-color: #cb272f;
863
862
  border-color: var(--color-sentiment-negative);
864
863
  transition: color, background-color 0.15s ease-in-out;
865
864
  }
866
865
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):hover,
867
866
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading):hover {
868
- color: #ffffff;
869
867
  color: var(--color-contrast);
870
- background-color: #b8232b;
871
868
  background-color: var(--color-sentiment-negative-hover);
872
- border-color: #b8232b;
873
869
  border-color: var(--color-sentiment-negative-hover);
874
870
  }
875
871
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -878,11 +874,8 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
878
874
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading).active,
879
875
  .open > .dropdown-toggle.np-theme-personal .btn-danger,
880
876
  .open > .dropdown-toggle.np-theme-personal .btn-negative {
881
- color: #ffffff;
882
877
  color: var(--color-contrast);
883
- background-color: #a72027;
884
878
  background-color: var(--color-sentiment-negative-active);
885
- border-color: #a72027;
886
879
  border-color: var(--color-sentiment-negative-active);
887
880
  }
888
881
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -891,11 +884,8 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
891
884
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
892
885
  .open > .dropdown-toggle.np-theme-personal .btn-danger:not(.disabled):not(:disabled):hover,
893
886
  .open > .dropdown-toggle.np-theme-personal .btn-negative:not(.disabled):not(:disabled):hover {
894
- color: #ffffff;
895
887
  color: var(--color-contrast);
896
- background-color: #a72027;
897
888
  background-color: var(--color-sentiment-negative-active);
898
- border-color: #a72027;
899
889
  border-color: var(--color-sentiment-negative-active);
900
890
  }
901
891
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -906,27 +896,20 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
906
896
  }
907
897
  .np-theme-personal .btn-danger .badge,
908
898
  .np-theme-personal .btn-negative .badge {
909
- color: #cb272f;
910
899
  color: var(--color-sentiment-negative);
911
- background-color: #ffffff;
912
900
  background-color: var(--color-contrast);
913
901
  }
914
902
  .np-theme-personal .btn-danger.btn-priority-2,
915
903
  .np-theme-personal .btn-negative.btn-priority-2 {
916
- color: #cb272f;
917
904
  color: var(--color-sentiment-negative);
918
905
  background-color: transparent;
919
- border-color: #cb272f;
920
906
  border-color: var(--color-sentiment-negative);
921
907
  transition: color, background-color 0.15s ease-in-out;
922
908
  }
923
909
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
924
910
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
925
- color: #ffffff;
926
911
  color: var(--color-contrast);
927
- background-color: #b8232b;
928
912
  background-color: var(--color-sentiment-negative-hover);
929
- border-color: #b8232b;
930
913
  border-color: var(--color-sentiment-negative-hover);
931
914
  }
932
915
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -935,11 +918,8 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
935
918
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
936
919
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2,
937
920
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2 {
938
- color: #ffffff;
939
921
  color: var(--color-contrast);
940
- background-color: #a72027;
941
922
  background-color: var(--color-sentiment-negative-active);
942
- border-color: #a72027;
943
923
  border-color: var(--color-sentiment-negative-active);
944
924
  }
945
925
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -948,11 +928,8 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
948
928
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
949
929
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
950
930
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
951
- color: #ffffff;
952
931
  color: var(--color-contrast);
953
- background-color: #a72027;
954
932
  background-color: var(--color-sentiment-negative-active);
955
- border-color: #a72027;
956
933
  border-color: var(--color-sentiment-negative-active);
957
934
  }
958
935
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -964,26 +941,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
964
941
  .np-theme-personal .btn-danger.btn-priority-2 .badge,
965
942
  .np-theme-personal .btn-negative.btn-priority-2 .badge {
966
943
  color: transparent;
967
- background-color: #cb272f;
968
944
  background-color: var(--color-sentiment-negative);
969
945
  }
970
946
  .bootstrap-select .btn-default,
971
947
  .btn-input {
972
- color: #0e0f0c;
948
+ color: #37517e;
973
949
  color: var(--color-content-primary);
974
950
  background-color: #ffffff;
975
951
  background-color: var(--color-background-screen);
976
- border-color: #868685;
952
+ border-color: #c9cbce;
977
953
  border-color: var(--color-interactive-secondary);
978
954
  transition: color, background-color 0.15s ease-in-out;
979
955
  }
980
956
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover,
981
957
  .btn-input:not(.disabled):not(:disabled):not(.btn-loading):hover {
982
- color: #0e0f0c;
958
+ color: #37517e;
983
959
  color: var(--color-content-primary);
984
960
  background-color: #ffffff;
985
961
  background-color: var(--color-background-screen);
986
- border-color: #6c6c6b;
962
+ border-color: #b5b7ba;
987
963
  border-color: var(--color-interactive-secondary-hover);
988
964
  }
989
965
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -992,11 +968,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
992
968
  .btn-input:not(.disabled):not(:disabled):not(.btn-loading).active,
993
969
  .open > .dropdown-toggle.bootstrap-select .btn-default,
994
970
  .open > .dropdown-toggle.btn-input {
995
- color: #0e0f0c;
971
+ color: #37517e;
996
972
  color: var(--color-content-primary);
997
973
  background-color: #ffffff;
998
974
  background-color: var(--color-background-screen);
999
- border-color: #525251;
975
+ border-color: #a7a9ab;
1000
976
  border-color: var(--color-interactive-secondary-active);
1001
977
  }
1002
978
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -1005,11 +981,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1005
981
  .btn-input:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
1006
982
  .open > .dropdown-toggle.bootstrap-select .btn-default:not(.disabled):not(:disabled):hover,
1007
983
  .open > .dropdown-toggle.btn-input:not(.disabled):not(:disabled):hover {
1008
- color: #0e0f0c;
984
+ color: #37517e;
1009
985
  color: var(--color-content-primary);
1010
986
  background-color: #ffffff;
1011
987
  background-color: var(--color-background-screen);
1012
- border-color: #525251;
988
+ border-color: #a7a9ab;
1013
989
  border-color: var(--color-interactive-secondary-active);
1014
990
  }
1015
991
  .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -1022,7 +998,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
1022
998
  .btn-input .badge {
1023
999
  color: #ffffff;
1024
1000
  color: var(--color-background-screen);
1025
- background-color: #0e0f0c;
1001
+ background-color: #37517e;
1026
1002
  background-color: var(--color-content-primary);
1027
1003
  }
1028
1004
  .btn-image {
@@ -1203,14 +1179,14 @@ input[type="button"].btn-block {
1203
1179
  padding-right: initial;
1204
1180
  }
1205
1181
  .btn-input:not(.disabled):not(:disabled):hover {
1206
- border-color: #6c6c6b;
1182
+ border-color: #b5b7ba;
1207
1183
  border-color: var(--color-interactive-secondary-hover);
1208
1184
  }
1209
1185
  .btn-input:not(.disabled):not(:disabled).active,
1210
1186
  .btn-input:not(.disabled):not(:disabled):active,
1211
1187
  .btn-input:not(.disabled):not(:disabled).focus,
1212
1188
  .btn-input:not(.disabled):not(:disabled):focus-visible {
1213
- border-color: #65cf21;
1189
+ border-color: #0081ba;
1214
1190
  border-color: var(--color-interactive-accent-active);
1215
1191
  outline: 0 none !important;
1216
1192
  }
@@ -1218,10 +1194,11 @@ input[type="button"].btn-block {
1218
1194
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):active,
1219
1195
  .np-theme-personal .btn-input:not(.disabled):not(:disabled).focus,
1220
1196
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):focus-visible {
1221
- border-color: #525251;
1197
+ border-color: #a7a9ab;
1222
1198
  border-color: var(--color-interactive-secondary-active);
1223
1199
  }
1224
1200
  .btn-input .caret {
1201
+ color: #0097c7;
1225
1202
  color: var(--color-content-accent);
1226
1203
  }
1227
1204
  .btn-input.btn-sm {
@@ -1247,6 +1224,54 @@ input[type="button"].btn-block {
1247
1224
  font-weight: 600;
1248
1225
  font-weight: var(--font-weight-semi-bold);
1249
1226
  }
1227
+ .btn-input-inverse {
1228
+ --color-content-primary: #ffffff;
1229
+ --color-content-accent: #00b9ff;
1230
+ }
1231
+ .btn-input-inverse,
1232
+ .btn-addon {
1233
+ color: #ffffff;
1234
+ background-color: #2e4369;
1235
+ border-color: #37517e;
1236
+ transition: color, background-color 0.15s ease-in-out;
1237
+ }
1238
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading):hover,
1239
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading):hover {
1240
+ color: #ffffff;
1241
+ background-color: #2e4369;
1242
+ border-color: #2e4369;
1243
+ }
1244
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading):active,
1245
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading):active,
1246
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading).active,
1247
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading).active,
1248
+ .open > .dropdown-toggle.btn-input-inverse,
1249
+ .open > .dropdown-toggle.btn-addon {
1250
+ color: #ffffff;
1251
+ background-color: #2e4369;
1252
+ border-color: #2e4369;
1253
+ }
1254
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
1255
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
1256
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
1257
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
1258
+ .open > .dropdown-toggle.btn-input-inverse:not(.disabled):not(:disabled):hover,
1259
+ .open > .dropdown-toggle.btn-addon:not(.disabled):not(:disabled):hover {
1260
+ color: #ffffff;
1261
+ background-color: #2e4369;
1262
+ border-color: #2e4369;
1263
+ }
1264
+ .btn-input-inverse:not(.disabled):not(:disabled):not(.btn-loading).active,
1265
+ .btn-addon:not(.disabled):not(:disabled):not(.btn-loading).active,
1266
+ .open > .dropdown-toggle.btn-input-inverse,
1267
+ .open > .dropdown-toggle.btn-addon {
1268
+ background-image: none;
1269
+ }
1270
+ .btn-input-inverse .badge,
1271
+ .btn-addon .badge {
1272
+ color: #2e4369;
1273
+ background-color: #ffffff;
1274
+ }
1250
1275
  .form-group-sm .bootstrap-select .btn-default {
1251
1276
  padding: 4px 12px;
1252
1277
  }
@@ -1254,11 +1279,11 @@ input[type="button"].btn-block {
1254
1279
  padding: 12px 16px;
1255
1280
  }
1256
1281
  .bootstrap-select.open > .dropdown-toggle.btn-default {
1257
- border-color: #9fe870;
1282
+ border-color: #00a2dd;
1258
1283
  border-color: var(--color-interactive-accent);
1259
1284
  background-color: #ffffff;
1260
1285
  background-color: var(--color-background-screen);
1261
- color: #0e0f0c;
1286
+ color: #37517e;
1262
1287
  color: var(--color-content-primary);
1263
1288
  }
1264
1289
  .btn-loader {