@transferwise/neptune-css 0.0.0-experimental-234dc9e → 0.0.0-experimental-0af3d6e

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.
@@ -1,395 +1,3 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 15 Oct 2025 12:29:55 GMT
4
- */
5
-
6
- :root {
7
- --color-content-primary: #37517e;
8
- --color-content-secondary: #5d7079;
9
- --color-content-tertiary: #768e9c;
10
- --color-content-accent: #0097c7;
11
- --color-content-accent-hover: #0084b3;
12
- --color-content-accent-active: #0077a5;
13
- --color-content-positive: #008026;
14
- --color-content-positive-hover: #006d13;
15
- --color-content-positive-active: #006002;
16
- --color-content-negative: #cf2929;
17
- --color-content-negative-hover: #b80419;
18
- --color-content-negative-active: #a7000d;
19
- --color-content-warning: #9a6500;
20
- --color-content-warning-hover: #855400;
21
- --color-content-warning-active: #764700;
22
- --color-interactive-accent: #00a2dd;
23
- --color-interactive-accent-hover: #008fc9;
24
- --color-interactive-accent-active: #0081ba;
25
- --color-interactive-positive: #2ead4b;
26
- --color-interactive-positive-hover: #069939;
27
- --color-interactive-positive-active: #008b2b;
28
- --color-interactive-negative: #e74848;
29
- --color-interactive-negative-hover: #d03238;
30
- --color-interactive-negative-active: #bf1e2c;
31
- --color-interactive-warning: #df8700;
32
- --color-interactive-warning-hover: #c97500;
33
- --color-interactive-warning-active: #b86700;
34
- --color-interactive-secondary: #c9cbce;
35
- --color-interactive-secondary-hover: #b5b7ba;
36
- --color-interactive-secondary-active: #a7a9ab;
37
- --color-background-screen: #ffffff;
38
- --color-background-elevated: #ffffff;
39
- --color-background-neutral: rgba(134,167,189,0.10196);
40
- --color-background-accent: rgba(56,200,255,0.10196);
41
- --color-background-positive: rgba(54,199,151,0.10196);
42
- --color-background-negative: rgba(255,135,135,0.10196);
43
- --color-background-warning: rgba(255,172,0,0.10196);
44
- --color-background-overlay: rgba(0,0,0,0.10196);
45
- --color-border-neutral: rgba(0,0,0,0.10196);
46
- --color-border-overlay: rgba(0,0,0,0.10196);
47
- --color-core-contrast: #000000;
48
- --padding-x-small: 8px;
49
- --padding-small: 16px;
50
- --padding-medium: 24px;
51
- --padding-large: 32px;
52
- --radius-full: 9999px;
53
- --radius-small: 10px;
54
- --radius-medium: 16px;
55
- --radius-large: 24px;
56
- --size-4: 4px;
57
- --size-5: 5px;
58
- --size-8: 8px;
59
- --size-10: 10px;
60
- --size-12: 12px;
61
- --size-14: 14px;
62
- --size-16: 16px;
63
- --size-24: 24px;
64
- --size-32: 32px;
65
- --size-40: 40px;
66
- --size-48: 48px;
67
- --size-52: 52px;
68
- --size-56: 56px;
69
- --size-60: 60px;
70
- --size-64: 64px;
71
- --size-72: 72px;
72
- --size-80: 80px;
73
- --size-88: 88px;
74
- --size-96: 96px;
75
- --size-104: 104px;
76
- --size-112: 112px;
77
- --size-120: 120px;
78
- --size-126: 126px;
79
- --size-128: 128px;
80
- --size-146: 146px;
81
- --size-154: 154px;
82
- --size-160: 160px;
83
- --size-x-small: 24px;
84
- --size-small: 32px;
85
- --size-medium: 40px;
86
- --size-large: 48px;
87
- --size-x-large: 56px;
88
- --size-2x-large: 72px;
89
- --space-content-horizontal: 16px;
90
- --space-small: 16px;
91
- --space-medium: 32px;
92
- --space-large: 40px;
93
- --space-x-large: 56px;
94
- --font-size-12: 0.75rem;
95
- --font-size-14: 0.875rem;
96
- --font-size-16: 1rem;
97
- --font-size-18: 1.125rem;
98
- --font-size-20: 1.25rem;
99
- --font-size-22: 1.375rem;
100
- --font-size-24: 1.5rem;
101
- --font-size-26: 1.625rem;
102
- --font-size-28: 1.75rem;
103
- --font-size-30: 1.875rem;
104
- --font-size-32: 2rem;
105
- --letter-spacing-xxs: 0.005em;
106
- --letter-spacing-xs: 0.01em;
107
- --letter-spacing-sm: 0.0125em;
108
- --letter-spacing-md: 0.015em;
109
- --letter-spacing-lg: 0.02em;
110
- --letter-spacing-xl: 0.025em;
111
- --letter-spacing-negative-xxs: -0.005em;
112
- --letter-spacing-negative-xs: -0.01em;
113
- --letter-spacing-negative-sm: -0.0125em;
114
- --letter-spacing-negative-md: -0.015em;
115
- --letter-spacing-negative-lg: -0.02em;
116
- --letter-spacing-negative-xl: -0.025em;
117
- --letter-spacing-negative-xxl: -0.03em;
118
- --letter-spacing-negative-xxxl: -0.04em;
119
- --letter-spacing-negative-xxxxl: -0.05em;
120
- --line-height-18: 1.125rem;
121
- --line-height-20: 1.25rem;
122
- --line-height-22: 1.375rem;
123
- --line-height-24: 1.5rem;
124
- --line-height-28: 1.75rem;
125
- --line-height-30: 1.875rem;
126
- --line-height-32: 2rem;
127
- --line-height-34: 2.125rem;
128
- --line-height-36: 2.25rem;
129
- --line-height-42: 2.625rem;
130
- --line-height-48: 3rem;
131
- --line-height-title: 1.2;
132
- --line-height-body: 1.5;
133
- --line-height-control: 1.2;
134
- --font-weight-light: 300;
135
- --font-weight-regular: 400;
136
- --font-weight-medium: 500;
137
- --font-weight-semi-bold: 600;
138
- --font-weight-bold: 700;
139
- --font-weight-black: 900;
140
- --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
141
- --font-family-display: 'Wise Sans', 'Inter', sans-serif;
142
- }
143
-
144
- /**
145
- * Do not edit directly
146
- * Generated on Wed, 15 Oct 2025 12:29:55 GMT
147
- */
148
-
149
- .np-theme-personal {
150
- --color-bright-yellow: #ffeb69;
151
- --color-bright-orange: #ffc091;
152
- --color-dark-purple: #260a2f;
153
- --color-dark-gold: #3a341c;
154
- --color-bright-blue: #a0e1e1;
155
- --color-dark-charcoal: #21231d;
156
- --color-white: #ffffff;
157
- --color-black: #000000;
158
- --color-bright-green: #9fe870;
159
- --color-forest-green: #163300;
160
- --color-bright-pink: #ffd7ef;
161
- --color-dark-maroon: #320707;
162
- --color-content-primary: #0e0f0c;
163
- --color-content-secondary: #454745;
164
- --color-content-tertiary: #6a6c6a;
165
- --color-content-link: #163300;
166
- --color-content-link-hover: #0d1f00;
167
- --color-content-link-active: #0e0f0c;
168
- --color-interactive-primary: #163300;
169
- --color-interactive-primary-hover: #0d1f00;
170
- --color-interactive-primary-active: #0e0f0c;
171
- --color-interactive-secondary: #868685;
172
- --color-interactive-secondary-hover: #6c6c6b;
173
- --color-interactive-secondary-active: #525251;
174
- --color-interactive-accent: #9fe870;
175
- --color-interactive-accent-hover: #80e142;
176
- --color-interactive-accent-active: #65cf21;
177
- --color-interactive-control: #163300;
178
- --color-interactive-control-hover: #0d1f00;
179
- --color-interactive-control-active: #0e0f0c;
180
- --color-interactive-contrast: #9fe870;
181
- --color-interactive-contrast-hover: #cdffad;
182
- --color-interactive-contrast-active: #ecffe0;
183
- --color-interactive-neutral: #e2f6d5;
184
- --color-interactive-neutral-hover: #d3f2c0;
185
- --color-interactive-neutral-active: #c5edab;
186
- --color-border-neutral: rgba(14,15,12,0.12157);
187
- --color-border-overlay: rgba(14,15,12,0.12157);
188
- --color-background-screen: #ffffff;
189
- --color-background-screen-hover: rgba(22,51,0,0.07843);
190
- --color-background-screen-active: rgba(22,51,0,0.12941);
191
- --color-background-elevated: #ffffff;
192
- --color-background-neutral: rgba(22,51,0,0.07843);
193
- --color-background-neutral-hover: rgba(22,51,0,0.12941);
194
- --color-background-neutral-active: rgba(22,51,0,0.18039);
195
- --color-background-overlay: rgba(22,51,0,0.07843);
196
- --color-sentiment-negative: #cb272f;
197
- --color-sentiment-negative-hover: #b8232b;
198
- --color-sentiment-negative-active: #a72027;
199
- --color-sentiment-negative-primary: #cb272f;
200
- --color-sentiment-negative-primary-hover: #b8232b;
201
- --color-sentiment-negative-primary-active: #a72027;
202
- --color-sentiment-negative-secondary: #fbeaea;
203
- --color-sentiment-negative-secondary-hover: #f9e1e1;
204
- --color-sentiment-negative-secondary-active: #f8d8d8;
205
- --color-sentiment-positive: #054d28;
206
- --color-sentiment-positive-hover: #043a1e;
207
- --color-sentiment-positive-active: #022614;
208
- --color-sentiment-positive-primary: #054d28;
209
- --color-sentiment-positive-primary-hover: #043a1e;
210
- --color-sentiment-positive-primary-active: #022614;
211
- --color-sentiment-positive-secondary: #e2f6d5;
212
- --color-sentiment-positive-secondary-hover: #d3f2c0;
213
- --color-sentiment-positive-secondary-active: #c5edab;
214
- --color-sentiment-warning: #ffd11a;
215
- --color-sentiment-warning-hover: #ffd11a;
216
- --color-sentiment-warning-active: #ffd11a;
217
- --color-sentiment-warning-primary: #ffd11a;
218
- --color-sentiment-warning-primary-hover: #ffd11a;
219
- --color-sentiment-warning-primary-active: #ffd11a;
220
- --color-sentiment-warning-secondary: #fff7d7;
221
- --color-sentiment-warning-secondary-hover: #fff7d7;
222
- --color-sentiment-warning-secondary-active: #fff7d7;
223
- --color-sentiment-warning-content: #4a3b1c;
224
- --color-sentiment-warning-content-hover: #3b2f16;
225
- --color-sentiment-warning-content-active: #2c2311;
226
- --color-contrast: #ffffff;
227
- --color-light: #ffffff;
228
- --color-dark: #121511;
229
- --color-contrast-overlay: #ffffff;
230
- --color-contrast-theme: #121511;
231
- --padding-x-small: 8px;
232
- --padding-small: 16px;
233
- --padding-medium: 24px;
234
- --padding-large: 32px;
235
- --radius-full: 9999px;
236
- --radius-small: 10px;
237
- --radius-medium: 16px;
238
- --radius-large: 24px;
239
- --size-4: 4px;
240
- --size-5: 5px;
241
- --size-8: 8px;
242
- --size-10: 10px;
243
- --size-12: 12px;
244
- --size-14: 14px;
245
- --size-16: 16px;
246
- --size-24: 24px;
247
- --size-32: 32px;
248
- --size-40: 40px;
249
- --size-48: 48px;
250
- --size-52: 52px;
251
- --size-56: 56px;
252
- --size-60: 60px;
253
- --size-64: 64px;
254
- --size-72: 72px;
255
- --size-80: 80px;
256
- --size-88: 88px;
257
- --size-96: 96px;
258
- --size-104: 104px;
259
- --size-112: 112px;
260
- --size-120: 120px;
261
- --size-126: 126px;
262
- --size-128: 128px;
263
- --size-146: 146px;
264
- --size-154: 154px;
265
- --size-160: 160px;
266
- --size-x-small: 24px;
267
- --size-small: 32px;
268
- --size-medium: 40px;
269
- --size-large: 48px;
270
- --size-x-large: 56px;
271
- --size-2x-large: 72px;
272
- --space-content-horizontal: 16px;
273
- --space-small: 16px;
274
- --space-medium: 32px;
275
- --space-large: 40px;
276
- --space-x-large: 56px;
277
- --font-size-12: 0.75rem;
278
- --font-size-14: 0.875rem;
279
- --font-size-16: 1rem;
280
- --font-size-18: 1.125rem;
281
- --font-size-20: 1.25rem;
282
- --font-size-22: 1.375rem;
283
- --font-size-24: 1.5rem;
284
- --font-size-26: 1.625rem;
285
- --font-size-28: 1.75rem;
286
- --font-size-30: 1.875rem;
287
- --font-size-32: 2rem;
288
- --letter-spacing-xxs: 0.005em;
289
- --letter-spacing-xs: 0.01em;
290
- --letter-spacing-sm: 0.0125em;
291
- --letter-spacing-md: 0.015em;
292
- --letter-spacing-lg: 0.02em;
293
- --letter-spacing-xl: 0.025em;
294
- --letter-spacing-negative-xxs: -0.005em;
295
- --letter-spacing-negative-xs: -0.01em;
296
- --letter-spacing-negative-sm: -0.0125em;
297
- --letter-spacing-negative-md: -0.015em;
298
- --letter-spacing-negative-lg: -0.02em;
299
- --letter-spacing-negative-xl: -0.025em;
300
- --letter-spacing-negative-xxl: -0.03em;
301
- --letter-spacing-negative-xxxl: -0.04em;
302
- --letter-spacing-negative-xxxxl: -0.05em;
303
- --line-height-18: 1.125rem;
304
- --line-height-20: 1.25rem;
305
- --line-height-22: 1.375rem;
306
- --line-height-24: 1.5rem;
307
- --line-height-28: 1.75rem;
308
- --line-height-30: 1.875rem;
309
- --line-height-32: 2rem;
310
- --line-height-34: 2.125rem;
311
- --line-height-36: 2.25rem;
312
- --line-height-42: 2.625rem;
313
- --line-height-48: 3rem;
314
- --line-height-title: 1.2;
315
- --line-height-body: 1.5;
316
- --line-height-control: 1.2;
317
- --font-weight-light: 300;
318
- --font-weight-regular: 400;
319
- --font-weight-medium: 500;
320
- --font-weight-semi-bold: 600;
321
- --font-weight-bold: 700;
322
- --font-weight-black: 900;
323
- --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
324
- --font-family-display: 'Wise Sans', 'Inter', sans-serif;
325
- }
326
-
327
- /**
328
- * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
329
- *
330
- * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
331
- */
332
-
333
- @media (max-width: 320px) {
334
- .np-theme-personal {
335
- --delta: 2;
336
- --size-4: calc(4px / var(--delta));
337
- --size-5: calc(5px / var(--delta));
338
- --size-8: calc(8px / var(--delta));
339
- --size-10: calc(10px / var(--delta));
340
- --size-12: calc(12px / var(--delta));
341
- --size-14: calc(14px / var(--delta));
342
- --size-16: calc(16px / var(--delta));
343
- --size-24: calc(24px / var(--delta));
344
- --size-32: calc(32px / var(--delta));
345
- --size-40: calc(40px / var(--delta));
346
- --size-48: calc(48px / var(--delta));
347
- --size-52: calc(52px / var(--delta));
348
- --size-56: calc(56px / var(--delta));
349
- --size-60: calc(60px / var(--delta));
350
- --size-64: calc(64px / var(--delta));
351
- --size-72: calc(72px / var(--delta));
352
- --size-80: calc(80px / var(--delta));
353
- --size-88: calc(88px / var(--delta));
354
- --size-96: calc(96px / var(--delta));
355
- --size-104: calc(104px / var(--delta));
356
- --size-112: calc(112px / var(--delta));
357
- --size-120: calc(120px / var(--delta));
358
- --size-126: calc(126px / var(--delta));
359
- --size-128: calc(128px / var(--delta));
360
- --size-146: calc(146px / var(--delta));
361
- --size-154: calc(154px / var(--delta));
362
- --size-x-small: calc(24px / var(--delta));
363
- --size-small: calc(32px / var(--delta));
364
- --size-medium: calc(40px / var(--delta));
365
- --size-large: calc(48px / var(--delta));
366
- --size-x-large: calc(56px / var(--delta));
367
- --size-2x-large: calc(72px / var(--delta));
368
- --space-content-horizontal: calc(16px / var(--delta));
369
- --space-small: calc(16px / var(--delta));
370
- --space-medium: calc(32px / var(--delta));
371
- --space-large: calc(40px / var(--delta));
372
- --space-x-large: calc(56px / var(--delta));
373
- --padding-x-small: var(--size-8);
374
- --padding-small: var(--size-16);
375
- --padding-medium: var(--size-24);
376
- --padding-large: var(--size-32);
377
- --input-height-base: var(--size-32);
378
- --input-height-large: var(--input-height-small);
379
- --input-padding: var(--input-padding-small);
380
- --input-padding-large: var(--input-padding-small);
381
- --input-group-addon-padding: var(--input-group-addon-sm-padding);
382
- --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
383
- --btn-height: var(--input-height-base);
384
- --btn-lg-height: var(--btn-height);
385
- --btn-sm-height: var(--btn-height);
386
- --btn-padding: var(--input-padding);
387
- --btn-sm-padding: var(--btn-padding);
388
- --btn-lg-padding: var(--btn-padding);
389
- --dropdown-link-padding: var(--size-12) var(--size-16);
390
- }
391
- }
392
-
393
1
  /**
394
2
  * Do not edit directly
395
3
  * Generated on Wed, 15 Oct 2025 12:29:55 GMT
@@ -2239,6 +1847,252 @@
2239
1847
  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
2240
1848
  }
2241
1849
 
1850
+ :root,
1851
+ .np-theme-personal {
1852
+ --color-bright-yellow: #ffeb69;
1853
+ --color-bright-orange: #ffc091;
1854
+ --color-dark-purple: #260a2f;
1855
+ --color-dark-gold: #3a341c;
1856
+ --color-bright-blue: #a0e1e1;
1857
+ --color-dark-charcoal: #21231d;
1858
+ --color-white: #ffffff;
1859
+ --color-black: #000000;
1860
+ --color-bright-green: #9fe870;
1861
+ --color-forest-green: #163300;
1862
+ --color-bright-pink: #ffd7ef;
1863
+ --color-dark-maroon: #320707;
1864
+ --color-content-primary: #0e0f0c;
1865
+ --color-content-secondary: #454745;
1866
+ --color-content-tertiary: #6a6c6a;
1867
+ --color-content-link: #163300;
1868
+ --color-content-link-hover: #0d1f00;
1869
+ --color-content-link-active: #0e0f0c;
1870
+ --color-interactive-primary: #163300;
1871
+ --color-interactive-primary-hover: #0d1f00;
1872
+ --color-interactive-primary-active: #0e0f0c;
1873
+ --color-interactive-secondary: #868685;
1874
+ --color-interactive-secondary-hover: #6c6c6b;
1875
+ --color-interactive-secondary-active: #525251;
1876
+ --color-interactive-accent: #9fe870;
1877
+ --color-interactive-accent-hover: #80e142;
1878
+ --color-interactive-accent-active: #65cf21;
1879
+ --color-interactive-control: #163300;
1880
+ --color-interactive-control-hover: #0d1f00;
1881
+ --color-interactive-control-active: #0e0f0c;
1882
+ --color-interactive-contrast: #9fe870;
1883
+ --color-interactive-contrast-hover: #cdffad;
1884
+ --color-interactive-contrast-active: #ecffe0;
1885
+ --color-interactive-neutral: #e2f6d5;
1886
+ --color-interactive-neutral-hover: #d3f2c0;
1887
+ --color-interactive-neutral-active: #c5edab;
1888
+ --color-border-neutral: rgba(14,15,12,0.12157);
1889
+ --color-border-overlay: rgba(14,15,12,0.12157);
1890
+ --color-background-screen: #ffffff;
1891
+ --color-background-screen-hover: rgba(22,51,0,0.07843);
1892
+ --color-background-screen-active: rgba(22,51,0,0.12941);
1893
+ --color-background-elevated: #ffffff;
1894
+ --color-background-neutral: rgba(22,51,0,0.07843);
1895
+ --color-background-neutral-hover: rgba(22,51,0,0.12941);
1896
+ --color-background-neutral-active: rgba(22,51,0,0.18039);
1897
+ --color-background-overlay: rgba(22,51,0,0.07843);
1898
+ --color-sentiment-negative: #cb272f;
1899
+ --color-sentiment-negative-hover: #b8232b;
1900
+ --color-sentiment-negative-active: #a72027;
1901
+ --color-sentiment-negative-primary: #cb272f;
1902
+ --color-sentiment-negative-primary-hover: #b8232b;
1903
+ --color-sentiment-negative-primary-active: #a72027;
1904
+ --color-sentiment-negative-secondary: #fbeaea;
1905
+ --color-sentiment-negative-secondary-hover: #f9e1e1;
1906
+ --color-sentiment-negative-secondary-active: #f8d8d8;
1907
+ --color-sentiment-positive: #054d28;
1908
+ --color-sentiment-positive-hover: #043a1e;
1909
+ --color-sentiment-positive-active: #022614;
1910
+ --color-sentiment-positive-primary: #054d28;
1911
+ --color-sentiment-positive-primary-hover: #043a1e;
1912
+ --color-sentiment-positive-primary-active: #022614;
1913
+ --color-sentiment-positive-secondary: #e2f6d5;
1914
+ --color-sentiment-positive-secondary-hover: #d3f2c0;
1915
+ --color-sentiment-positive-secondary-active: #c5edab;
1916
+ --color-sentiment-warning: #ffd11a;
1917
+ --color-sentiment-warning-hover: #ffd11a;
1918
+ --color-sentiment-warning-active: #ffd11a;
1919
+ --color-sentiment-warning-primary: #ffd11a;
1920
+ --color-sentiment-warning-primary-hover: #ffd11a;
1921
+ --color-sentiment-warning-primary-active: #ffd11a;
1922
+ --color-sentiment-warning-secondary: #fff7d7;
1923
+ --color-sentiment-warning-secondary-hover: #fff7d7;
1924
+ --color-sentiment-warning-secondary-active: #fff7d7;
1925
+ --color-sentiment-warning-content: #4a3b1c;
1926
+ --color-sentiment-warning-content-hover: #3b2f16;
1927
+ --color-sentiment-warning-content-active: #2c2311;
1928
+ --color-contrast: #ffffff;
1929
+ --color-light: #ffffff;
1930
+ --color-dark: #121511;
1931
+ --color-contrast-overlay: #ffffff;
1932
+ --color-contrast-theme: #121511;
1933
+ --padding-x-small: 8px;
1934
+ --padding-small: 16px;
1935
+ --padding-medium: 24px;
1936
+ --padding-large: 32px;
1937
+ --radius-full: 9999px;
1938
+ --radius-small: 10px;
1939
+ --radius-medium: 16px;
1940
+ --radius-large: 24px;
1941
+ --size-4: 4px;
1942
+ --size-5: 5px;
1943
+ --size-8: 8px;
1944
+ --size-10: 10px;
1945
+ --size-12: 12px;
1946
+ --size-14: 14px;
1947
+ --size-16: 16px;
1948
+ --size-24: 24px;
1949
+ --size-32: 32px;
1950
+ --size-40: 40px;
1951
+ --size-48: 48px;
1952
+ --size-52: 52px;
1953
+ --size-56: 56px;
1954
+ --size-60: 60px;
1955
+ --size-64: 64px;
1956
+ --size-72: 72px;
1957
+ --size-80: 80px;
1958
+ --size-88: 88px;
1959
+ --size-96: 96px;
1960
+ --size-104: 104px;
1961
+ --size-112: 112px;
1962
+ --size-120: 120px;
1963
+ --size-126: 126px;
1964
+ --size-128: 128px;
1965
+ --size-146: 146px;
1966
+ --size-154: 154px;
1967
+ --size-160: 160px;
1968
+ --size-x-small: 24px;
1969
+ --size-small: 32px;
1970
+ --size-medium: 40px;
1971
+ --size-large: 48px;
1972
+ --size-x-large: 56px;
1973
+ --size-2x-large: 72px;
1974
+ --space-content-horizontal: 16px;
1975
+ --space-small: 16px;
1976
+ --space-medium: 32px;
1977
+ --space-large: 40px;
1978
+ --space-x-large: 56px;
1979
+ --font-size-12: 0.75rem;
1980
+ --font-size-14: 0.875rem;
1981
+ --font-size-16: 1rem;
1982
+ --font-size-18: 1.125rem;
1983
+ --font-size-20: 1.25rem;
1984
+ --font-size-22: 1.375rem;
1985
+ --font-size-24: 1.5rem;
1986
+ --font-size-26: 1.625rem;
1987
+ --font-size-28: 1.75rem;
1988
+ --font-size-30: 1.875rem;
1989
+ --font-size-32: 2rem;
1990
+ --letter-spacing-xxs: 0.005em;
1991
+ --letter-spacing-xs: 0.01em;
1992
+ --letter-spacing-sm: 0.0125em;
1993
+ --letter-spacing-md: 0.015em;
1994
+ --letter-spacing-lg: 0.02em;
1995
+ --letter-spacing-xl: 0.025em;
1996
+ --letter-spacing-negative-xxs: -0.005em;
1997
+ --letter-spacing-negative-xs: -0.01em;
1998
+ --letter-spacing-negative-sm: -0.0125em;
1999
+ --letter-spacing-negative-md: -0.015em;
2000
+ --letter-spacing-negative-lg: -0.02em;
2001
+ --letter-spacing-negative-xl: -0.025em;
2002
+ --letter-spacing-negative-xxl: -0.03em;
2003
+ --letter-spacing-negative-xxxl: -0.04em;
2004
+ --letter-spacing-negative-xxxxl: -0.05em;
2005
+ --line-height-18: 1.125rem;
2006
+ --line-height-20: 1.25rem;
2007
+ --line-height-22: 1.375rem;
2008
+ --line-height-24: 1.5rem;
2009
+ --line-height-28: 1.75rem;
2010
+ --line-height-30: 1.875rem;
2011
+ --line-height-32: 2rem;
2012
+ --line-height-34: 2.125rem;
2013
+ --line-height-36: 2.25rem;
2014
+ --line-height-42: 2.625rem;
2015
+ --line-height-48: 3rem;
2016
+ --line-height-title: 1.2;
2017
+ --line-height-body: 1.5;
2018
+ --line-height-control: 1.2;
2019
+ --font-weight-light: 300;
2020
+ --font-weight-regular: 400;
2021
+ --font-weight-medium: 500;
2022
+ --font-weight-semi-bold: 600;
2023
+ --font-weight-bold: 700;
2024
+ --font-weight-black: 900;
2025
+ --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
2026
+ --font-family-display: 'Wise Sans', 'Inter', sans-serif;
2027
+ }
2028
+
2029
+ /**
2030
+ * We added new shape theme into tokens to prevent breaking changes. This is a temporary measure.
2031
+ *
2032
+ * We delete this hack once all consumers no longer import tokens in their projects (e.g Next.js app.tsx or Storybook's preivew.tsx)
2033
+ */
2034
+
2035
+ @media (max-width: 320px) {
2036
+ :root,
2037
+ .np-theme-personal {
2038
+ --delta: 2;
2039
+ --size-4: calc(4px / var(--delta));
2040
+ --size-5: calc(5px / var(--delta));
2041
+ --size-8: calc(8px / var(--delta));
2042
+ --size-10: calc(10px / var(--delta));
2043
+ --size-12: calc(12px / var(--delta));
2044
+ --size-14: calc(14px / var(--delta));
2045
+ --size-16: calc(16px / var(--delta));
2046
+ --size-24: calc(24px / var(--delta));
2047
+ --size-32: calc(32px / var(--delta));
2048
+ --size-40: calc(40px / var(--delta));
2049
+ --size-48: calc(48px / var(--delta));
2050
+ --size-52: calc(52px / var(--delta));
2051
+ --size-56: calc(56px / var(--delta));
2052
+ --size-60: calc(60px / var(--delta));
2053
+ --size-64: calc(64px / var(--delta));
2054
+ --size-72: calc(72px / var(--delta));
2055
+ --size-80: calc(80px / var(--delta));
2056
+ --size-88: calc(88px / var(--delta));
2057
+ --size-96: calc(96px / var(--delta));
2058
+ --size-104: calc(104px / var(--delta));
2059
+ --size-112: calc(112px / var(--delta));
2060
+ --size-120: calc(120px / var(--delta));
2061
+ --size-126: calc(126px / var(--delta));
2062
+ --size-128: calc(128px / var(--delta));
2063
+ --size-146: calc(146px / var(--delta));
2064
+ --size-154: calc(154px / var(--delta));
2065
+ --size-x-small: calc(24px / var(--delta));
2066
+ --size-small: calc(32px / var(--delta));
2067
+ --size-medium: calc(40px / var(--delta));
2068
+ --size-large: calc(48px / var(--delta));
2069
+ --size-x-large: calc(56px / var(--delta));
2070
+ --size-2x-large: calc(72px / var(--delta));
2071
+ --space-content-horizontal: calc(16px / var(--delta));
2072
+ --space-small: calc(16px / var(--delta));
2073
+ --space-medium: calc(32px / var(--delta));
2074
+ --space-large: calc(40px / var(--delta));
2075
+ --space-x-large: calc(56px / var(--delta));
2076
+ --padding-x-small: var(--size-8);
2077
+ --padding-small: var(--size-16);
2078
+ --padding-medium: var(--size-24);
2079
+ --padding-large: var(--size-32);
2080
+ --input-height-base: var(--size-32);
2081
+ --input-height-large: var(--input-height-small);
2082
+ --input-padding: var(--input-padding-small);
2083
+ --input-padding-large: var(--input-padding-small);
2084
+ --input-group-addon-padding: var(--input-group-addon-sm-padding);
2085
+ --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
2086
+ --btn-height: var(--input-height-base);
2087
+ --btn-lg-height: var(--btn-height);
2088
+ --btn-sm-height: var(--btn-height);
2089
+ --btn-padding: var(--input-padding);
2090
+ --btn-sm-padding: var(--btn-padding);
2091
+ --btn-lg-padding: var(--btn-padding);
2092
+ --dropdown-link-padding: var(--size-12) var(--size-16);
2093
+ }
2094
+ }
2095
+
2242
2096
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
2243
2097
 
2244
2098
  @font-face {
@@ -2637,12 +2491,14 @@ pre {
2637
2491
  }
2638
2492
 
2639
2493
  .np-theme-personal::-moz-selection {
2494
+ background-color: rgba(22,51,0,0.18039);
2640
2495
  background-color: var(--color-background-neutral-active);
2641
2496
  color: #37517e;
2642
2497
  color: var(--color-content-primary);
2643
2498
  }
2644
2499
 
2645
2500
  .np-theme-personal::selection {
2501
+ background-color: rgba(22,51,0,0.18039);
2646
2502
  background-color: var(--color-background-neutral-active);
2647
2503
  color: #37517e;
2648
2504
  color: var(--color-content-primary);
@@ -2656,6 +2512,7 @@ pre {
2656
2512
  a,
2657
2513
  .np-text-link-default,
2658
2514
  .np-text-link-large {
2515
+ color: #163300;
2659
2516
  color: var(--color-content-link);
2660
2517
  }
2661
2518
 
@@ -2692,6 +2549,7 @@ a:hover,
2692
2549
  a:focus,
2693
2550
  .np-text-link-default:focus,
2694
2551
  .np-text-link-large:focus {
2552
+ color: #0d1f00;
2695
2553
  color: var(--color-content-link-hover);
2696
2554
  -webkit-text-decoration: underline;
2697
2555
  text-decoration: underline;
@@ -2701,6 +2559,7 @@ a:focus,
2701
2559
  a:active,
2702
2560
  .np-text-link-default:active,
2703
2561
  .np-text-link-large:active {
2562
+ color: #0e0f0c;
2704
2563
  color: var(--color-content-link-active);
2705
2564
  }
2706
2565
 
@@ -4496,6 +4355,7 @@ a.text-success:focus {
4496
4355
  .text-info {
4497
4356
  color: #0097c7 !important;
4498
4357
  color: var(--color-content-accent) !important;
4358
+ color: #163300 !important;
4499
4359
  color: var(--color-interactive-primary) !important;
4500
4360
  }
4501
4361
 
@@ -4529,6 +4389,7 @@ a.text-warning:focus {
4529
4389
 
4530
4390
  .text-negative,
4531
4391
  .text-danger {
4392
+ color: #cb272f !important;
4532
4393
  color: var(--color-sentiment-negative) !important;
4533
4394
  }
4534
4395
 
@@ -4536,6 +4397,7 @@ a.text-negative:hover,
4536
4397
  a.text-danger:hover,
4537
4398
  a.text-negative:focus,
4538
4399
  a.text-danger:focus {
4400
+ color: #b8232b !important;
4539
4401
  color: var(--color-sentiment-negative-hover) !important;
4540
4402
  }
4541
4403
 
@@ -6883,6 +6745,7 @@ tbody.collapse.in {
6883
6745
  }
6884
6746
 
6885
6747
  .np-theme-personal .chevron-color {
6748
+ color: #163300;
6886
6749
  color: var(--color-interactive-primary);
6887
6750
  }
6888
6751
 
@@ -7693,6 +7556,7 @@ input:focus ~ .alert-focus,
7693
7556
  .bg-primary .np-theme-personal .alert-warning .close:focus,
7694
7557
  .bg-primary .np-theme-personal .alert-danger .close:focus,
7695
7558
  .bg-primary .np-theme-personal .alert-negative .close:focus {
7559
+ color: #0d1f00;
7696
7560
  color: var(--color-content-link-hover);
7697
7561
  }
7698
7562
 
@@ -7703,6 +7567,7 @@ input:focus ~ .alert-focus,
7703
7567
  .np-theme-personal .alert-warning .np-link,
7704
7568
  .np-theme-personal .alert-danger .np-link,
7705
7569
  .np-theme-personal .alert-negative .np-link {
7570
+ color: #163300;
7706
7571
  color: var(--color-content-link);
7707
7572
  }
7708
7573
 
@@ -7720,6 +7585,7 @@ input:focus ~ .alert-focus,
7720
7585
  .np-theme-personal .alert-warning .np-link:focus,
7721
7586
  .np-theme-personal .alert-danger .np-link:focus,
7722
7587
  .np-theme-personal .alert-negative .np-link:focus {
7588
+ color: #0d1f00;
7723
7589
  color: var(--color-content-link-hover);
7724
7590
  }
7725
7591
 
@@ -7736,6 +7602,7 @@ input:focus ~ .alert-focus,
7736
7602
  }
7737
7603
 
7738
7604
  .np-theme-personal .bg--dark {
7605
+ background-color: #163300;
7739
7606
  background-color: var(--color-forest-green);
7740
7607
  background-image: none;
7741
7608
  color: #daffc0;
@@ -7848,6 +7715,7 @@ a.badge:focus {
7848
7715
  }
7849
7716
 
7850
7717
  .np-theme-personal .badge-success {
7718
+ background: #054d28;
7851
7719
  background: var(--color-sentiment-positive);
7852
7720
  }
7853
7721
 
@@ -7927,11 +7795,13 @@ a.badge:focus {
7927
7795
 
7928
7796
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
7929
7797
  .np-theme-personal .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus.btn-negative {
7798
+ outline-color: #cb272f;
7930
7799
  outline-color: var(--color-sentiment-negative);
7931
7800
  }
7932
7801
 
7933
7802
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus-visible.btn-negative,
7934
7803
  .np-theme-personal .critical-comms--cta .btn:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus.btn-negative {
7804
+ outline-color: #ffffff;
7935
7805
  outline-color: var(--color-contrast);
7936
7806
  }
7937
7807
 
@@ -7941,6 +7811,7 @@ a.badge:focus {
7941
7811
 
7942
7812
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle):focus,
7943
7813
  .np-theme-personal .btn.btn-negative:not(.disabled):not(:disabled):not(.np-dropdown-toggle).focus {
7814
+ outline-color: #cb272f;
7944
7815
  outline-color: var(--color-sentiment-negative);
7945
7816
  }
7946
7817
 
@@ -8015,6 +7886,7 @@ fieldset[disabled] a.btn {
8015
7886
  }
8016
7887
 
8017
7888
  .np-theme-personal .btn-default {
7889
+ color: #163300;
8018
7890
  color: var(--color-interactive-control);
8019
7891
  background-color: #00a2dd;
8020
7892
  background-color: var(--color-interactive-accent);
@@ -8024,6 +7896,7 @@ fieldset[disabled] a.btn {
8024
7896
  }
8025
7897
 
8026
7898
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover {
7899
+ color: #163300;
8027
7900
  color: var(--color-interactive-control);
8028
7901
  background-color: #008fc9;
8029
7902
  background-color: var(--color-interactive-accent-hover);
@@ -8034,6 +7907,7 @@ fieldset[disabled] a.btn {
8034
7907
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
8035
7908
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
8036
7909
  .open > .dropdown-toggle.np-theme-personal .btn-default {
7910
+ color: #163300;
8037
7911
  color: var(--color-interactive-control);
8038
7912
  background-color: #0081ba;
8039
7913
  background-color: var(--color-interactive-accent-active);
@@ -8044,6 +7918,7 @@ fieldset[disabled] a.btn {
8044
7918
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
8045
7919
  .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8046
7920
  .open > .dropdown-toggle.np-theme-personal .btn-default:not(.disabled):not(:disabled):hover {
7921
+ color: #163300;
8047
7922
  color: var(--color-interactive-control);
8048
7923
  background-color: #0081ba;
8049
7924
  background-color: var(--color-interactive-accent-active);
@@ -8059,17 +7934,21 @@ fieldset[disabled] a.btn {
8059
7934
  .np-theme-personal .btn-default .badge {
8060
7935
  color: #00a2dd;
8061
7936
  color: var(--color-interactive-accent);
7937
+ background-color: #163300;
8062
7938
  background-color: var(--color-interactive-control);
8063
7939
  }
8064
7940
 
8065
7941
  .np-theme-personal .btn-default.btn-priority-2 {
7942
+ color: #163300;
8066
7943
  color: var(--color-interactive-primary);
8067
7944
  background-color: transparent;
7945
+ border-color: #163300;
8068
7946
  border-color: var(--color-interactive-primary);
8069
7947
  transition: color, background-color 0.15s ease-in-out;
8070
7948
  }
8071
7949
 
8072
7950
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
7951
+ color: #163300;
8073
7952
  color: var(--color-interactive-control);
8074
7953
  background-color: #008fc9;
8075
7954
  background-color: var(--color-interactive-accent-hover);
@@ -8080,6 +7959,7 @@ fieldset[disabled] a.btn {
8080
7959
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
8081
7960
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
8082
7961
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2 {
7962
+ color: #163300;
8083
7963
  color: var(--color-interactive-control);
8084
7964
  background-color: #0081ba;
8085
7965
  background-color: var(--color-interactive-accent-active);
@@ -8090,6 +7970,7 @@ fieldset[disabled] a.btn {
8090
7970
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
8091
7971
  .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8092
7972
  .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):hover {
7973
+ color: #163300;
8093
7974
  color: var(--color-interactive-control);
8094
7975
  background-color: #0081ba;
8095
7976
  background-color: var(--color-interactive-accent-active);
@@ -8104,6 +7985,7 @@ fieldset[disabled] a.btn {
8104
7985
 
8105
7986
  .np-theme-personal .btn-default.btn-priority-2 .badge {
8106
7987
  color: transparent;
7988
+ background-color: #163300;
8107
7989
  background-color: var(--color-interactive-primary);
8108
7990
  }
8109
7991
 
@@ -8227,6 +8109,7 @@ fieldset[disabled] a.btn {
8227
8109
 
8228
8110
  .np-theme-personal .btn-accent,
8229
8111
  .np-theme-personal .btn-primary {
8112
+ color: #163300;
8230
8113
  color: var(--color-interactive-control);
8231
8114
  background-color: #00a2dd;
8232
8115
  background-color: var(--color-interactive-accent);
@@ -8237,6 +8120,7 @@ fieldset[disabled] a.btn {
8237
8120
 
8238
8121
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):hover,
8239
8122
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading):hover {
8123
+ color: #163300;
8240
8124
  color: var(--color-interactive-control);
8241
8125
  background-color: #008fc9;
8242
8126
  background-color: var(--color-interactive-accent-hover);
@@ -8250,6 +8134,7 @@ fieldset[disabled] a.btn {
8250
8134
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading).active,
8251
8135
  .open > .dropdown-toggle.np-theme-personal .btn-accent,
8252
8136
  .open > .dropdown-toggle.np-theme-personal .btn-primary {
8137
+ color: #163300;
8253
8138
  color: var(--color-interactive-control);
8254
8139
  background-color: #0081ba;
8255
8140
  background-color: var(--color-interactive-accent-active);
@@ -8263,6 +8148,7 @@ fieldset[disabled] a.btn {
8263
8148
  .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8264
8149
  .open > .dropdown-toggle.np-theme-personal .btn-accent:not(.disabled):not(:disabled):hover,
8265
8150
  .open > .dropdown-toggle.np-theme-personal .btn-primary:not(.disabled):not(:disabled):hover {
8151
+ color: #163300;
8266
8152
  color: var(--color-interactive-control);
8267
8153
  background-color: #0081ba;
8268
8154
  background-color: var(--color-interactive-accent-active);
@@ -8281,19 +8167,23 @@ fieldset[disabled] a.btn {
8281
8167
  .np-theme-personal .btn-primary .badge {
8282
8168
  color: #00a2dd;
8283
8169
  color: var(--color-interactive-accent);
8170
+ background-color: #163300;
8284
8171
  background-color: var(--color-interactive-control);
8285
8172
  }
8286
8173
 
8287
8174
  .np-theme-personal .btn-accent.btn-priority-2,
8288
8175
  .np-theme-personal .btn-primary.btn-priority-2 {
8176
+ color: #163300;
8289
8177
  color: var(--color-interactive-primary);
8290
8178
  background-color: transparent;
8179
+ border-color: #163300;
8291
8180
  border-color: var(--color-interactive-primary);
8292
8181
  transition: color, background-color 0.15s ease-in-out;
8293
8182
  }
8294
8183
 
8295
8184
  .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
8296
8185
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
8186
+ color: #163300;
8297
8187
  color: var(--color-interactive-control);
8298
8188
  background-color: #008fc9;
8299
8189
  background-color: var(--color-interactive-accent-hover);
@@ -8307,6 +8197,7 @@ fieldset[disabled] a.btn {
8307
8197
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
8308
8198
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2,
8309
8199
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2 {
8200
+ color: #163300;
8310
8201
  color: var(--color-interactive-control);
8311
8202
  background-color: #0081ba;
8312
8203
  background-color: var(--color-interactive-accent-active);
@@ -8320,6 +8211,7 @@ fieldset[disabled] a.btn {
8320
8211
  .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8321
8212
  .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
8322
8213
  .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
8214
+ color: #163300;
8323
8215
  color: var(--color-interactive-control);
8324
8216
  background-color: #0081ba;
8325
8217
  background-color: var(--color-interactive-accent-active);
@@ -8337,6 +8229,7 @@ fieldset[disabled] a.btn {
8337
8229
  .np-theme-personal .btn-accent.btn-priority-2 .badge,
8338
8230
  .np-theme-personal .btn-primary.btn-priority-2 .badge {
8339
8231
  color: transparent;
8232
+ background-color: #163300;
8340
8233
  background-color: var(--color-interactive-primary);
8341
8234
  }
8342
8235
 
@@ -8382,6 +8275,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8382
8275
 
8383
8276
  .np-theme-personal .btn-link,
8384
8277
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8278
+ color: #163300;
8385
8279
  color: var(--color-interactive-primary);
8386
8280
  border-color: transparent;
8387
8281
  -webkit-text-decoration: underline;
@@ -8393,13 +8287,16 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8393
8287
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):hover,
8394
8288
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):focus-visible,
8395
8289
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
8290
+ color: #0d1f00;
8396
8291
  color: var(--color-interactive-primary-hover);
8397
8292
  border-color: transparent;
8398
8293
  }
8399
8294
 
8400
8295
  .np-theme-personal .btn-link:not(.disabled):not(:disabled):not(.btn-loading):active,
8401
8296
  .np-theme-personal .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):active {
8297
+ color: #0e0f0c;
8402
8298
  color: var(--color-interactive-primary-active);
8299
+ background-color: rgba(22,51,0,0.12941) !important;
8403
8300
  background-color: var(--color-background-screen-active) !important;
8404
8301
  }
8405
8302
 
@@ -8540,6 +8437,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8540
8437
 
8541
8438
  .np-theme-personal .btn-positive,
8542
8439
  .np-theme-personal .btn-success {
8440
+ color: #163300;
8543
8441
  color: var(--color-interactive-control);
8544
8442
  background-color: #00a2dd;
8545
8443
  background-color: var(--color-interactive-accent);
@@ -8550,6 +8448,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8550
8448
 
8551
8449
  .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):hover,
8552
8450
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading):hover {
8451
+ color: #163300;
8553
8452
  color: var(--color-interactive-control);
8554
8453
  background-color: #008fc9;
8555
8454
  background-color: var(--color-interactive-accent-hover);
@@ -8563,6 +8462,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8563
8462
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading).active,
8564
8463
  .open > .dropdown-toggle.np-theme-personal .btn-positive,
8565
8464
  .open > .dropdown-toggle.np-theme-personal .btn-success {
8465
+ color: #163300;
8566
8466
  color: var(--color-interactive-control);
8567
8467
  background-color: #0081ba;
8568
8468
  background-color: var(--color-interactive-accent-active);
@@ -8576,6 +8476,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8576
8476
  .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8577
8477
  .open > .dropdown-toggle.np-theme-personal .btn-positive:not(.disabled):not(:disabled):hover,
8578
8478
  .open > .dropdown-toggle.np-theme-personal .btn-success:not(.disabled):not(:disabled):hover {
8479
+ color: #163300;
8579
8480
  color: var(--color-interactive-control);
8580
8481
  background-color: #0081ba;
8581
8482
  background-color: var(--color-interactive-accent-active);
@@ -8594,19 +8495,23 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8594
8495
  .np-theme-personal .btn-success .badge {
8595
8496
  color: #00a2dd;
8596
8497
  color: var(--color-interactive-accent);
8498
+ background-color: #163300;
8597
8499
  background-color: var(--color-interactive-control);
8598
8500
  }
8599
8501
 
8600
8502
  .np-theme-personal .btn-positive.btn-priority-2,
8601
8503
  .np-theme-personal .btn-success.btn-priority-2 {
8504
+ color: #163300;
8602
8505
  color: var(--color-interactive-primary);
8603
8506
  background-color: transparent;
8507
+ border-color: #163300;
8604
8508
  border-color: var(--color-interactive-primary);
8605
8509
  transition: color, background-color 0.15s ease-in-out;
8606
8510
  }
8607
8511
 
8608
8512
  .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
8609
8513
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
8514
+ color: #163300;
8610
8515
  color: var(--color-interactive-control);
8611
8516
  background-color: #008fc9;
8612
8517
  background-color: var(--color-interactive-accent-hover);
@@ -8620,6 +8525,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8620
8525
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
8621
8526
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2,
8622
8527
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2 {
8528
+ color: #163300;
8623
8529
  color: var(--color-interactive-control);
8624
8530
  background-color: #0081ba;
8625
8531
  background-color: var(--color-interactive-accent-active);
@@ -8633,6 +8539,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8633
8539
  .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8634
8540
  .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
8635
8541
  .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
8542
+ color: #163300;
8636
8543
  color: var(--color-interactive-control);
8637
8544
  background-color: #0081ba;
8638
8545
  background-color: var(--color-interactive-accent-active);
@@ -8650,6 +8557,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8650
8557
  .np-theme-personal .btn-positive.btn-priority-2 .badge,
8651
8558
  .np-theme-personal .btn-success.btn-priority-2 .badge {
8652
8559
  color: transparent;
8560
+ background-color: #163300;
8653
8561
  background-color: var(--color-interactive-primary);
8654
8562
  }
8655
8563
 
@@ -8851,16 +8759,22 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8851
8759
 
8852
8760
  .np-theme-personal .btn-danger,
8853
8761
  .np-theme-personal .btn-negative {
8762
+ color: #ffffff;
8854
8763
  color: var(--color-contrast);
8764
+ background-color: #cb272f;
8855
8765
  background-color: var(--color-sentiment-negative);
8766
+ border-color: #cb272f;
8856
8767
  border-color: var(--color-sentiment-negative);
8857
8768
  transition: color, background-color 0.15s ease-in-out;
8858
8769
  }
8859
8770
 
8860
8771
  .np-theme-personal .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):hover,
8861
8772
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading):hover {
8773
+ color: #ffffff;
8862
8774
  color: var(--color-contrast);
8775
+ background-color: #b8232b;
8863
8776
  background-color: var(--color-sentiment-negative-hover);
8777
+ border-color: #b8232b;
8864
8778
  border-color: var(--color-sentiment-negative-hover);
8865
8779
  }
8866
8780
 
@@ -8870,8 +8784,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8870
8784
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading).active,
8871
8785
  .open > .dropdown-toggle.np-theme-personal .btn-danger,
8872
8786
  .open > .dropdown-toggle.np-theme-personal .btn-negative {
8787
+ color: #ffffff;
8873
8788
  color: var(--color-contrast);
8789
+ background-color: #a72027;
8874
8790
  background-color: var(--color-sentiment-negative-active);
8791
+ border-color: #a72027;
8875
8792
  border-color: var(--color-sentiment-negative-active);
8876
8793
  }
8877
8794
 
@@ -8881,8 +8798,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8881
8798
  .np-theme-personal .btn-negative:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8882
8799
  .open > .dropdown-toggle.np-theme-personal .btn-danger:not(.disabled):not(:disabled):hover,
8883
8800
  .open > .dropdown-toggle.np-theme-personal .btn-negative:not(.disabled):not(:disabled):hover {
8801
+ color: #ffffff;
8884
8802
  color: var(--color-contrast);
8803
+ background-color: #a72027;
8885
8804
  background-color: var(--color-sentiment-negative-active);
8805
+ border-color: #a72027;
8886
8806
  border-color: var(--color-sentiment-negative-active);
8887
8807
  }
8888
8808
 
@@ -8895,22 +8815,29 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8895
8815
 
8896
8816
  .np-theme-personal .btn-danger .badge,
8897
8817
  .np-theme-personal .btn-negative .badge {
8818
+ color: #cb272f;
8898
8819
  color: var(--color-sentiment-negative);
8820
+ background-color: #ffffff;
8899
8821
  background-color: var(--color-contrast);
8900
8822
  }
8901
8823
 
8902
8824
  .np-theme-personal .btn-danger.btn-priority-2,
8903
8825
  .np-theme-personal .btn-negative.btn-priority-2 {
8826
+ color: #cb272f;
8904
8827
  color: var(--color-sentiment-negative);
8905
8828
  background-color: transparent;
8829
+ border-color: #cb272f;
8906
8830
  border-color: var(--color-sentiment-negative);
8907
8831
  transition: color, background-color 0.15s ease-in-out;
8908
8832
  }
8909
8833
 
8910
8834
  .np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
8911
8835
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
8836
+ color: #ffffff;
8912
8837
  color: var(--color-contrast);
8838
+ background-color: #b8232b;
8913
8839
  background-color: var(--color-sentiment-negative-hover);
8840
+ border-color: #b8232b;
8914
8841
  border-color: var(--color-sentiment-negative-hover);
8915
8842
  }
8916
8843
 
@@ -8920,8 +8847,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8920
8847
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
8921
8848
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2,
8922
8849
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2 {
8850
+ color: #ffffff;
8923
8851
  color: var(--color-contrast);
8852
+ background-color: #a72027;
8924
8853
  background-color: var(--color-sentiment-negative-active);
8854
+ border-color: #a72027;
8925
8855
  border-color: var(--color-sentiment-negative-active);
8926
8856
  }
8927
8857
 
@@ -8931,8 +8861,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8931
8861
  .np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
8932
8862
  .open > .dropdown-toggle.np-theme-personal .btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
8933
8863
  .open > .dropdown-toggle.np-theme-personal .btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
8864
+ color: #ffffff;
8934
8865
  color: var(--color-contrast);
8866
+ background-color: #a72027;
8935
8867
  background-color: var(--color-sentiment-negative-active);
8868
+ border-color: #a72027;
8936
8869
  border-color: var(--color-sentiment-negative-active);
8937
8870
  }
8938
8871
 
@@ -8946,6 +8879,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
8946
8879
  .np-theme-personal .btn-danger.btn-priority-2 .badge,
8947
8880
  .np-theme-personal .btn-negative.btn-priority-2 .badge {
8948
8881
  color: transparent;
8882
+ background-color: #cb272f;
8949
8883
  background-color: var(--color-sentiment-negative);
8950
8884
  }
8951
8885
 
@@ -10305,6 +10239,7 @@ textarea.form-control {
10305
10239
  }
10306
10240
 
10307
10241
  .np-theme-personal .form-control:not(.disabled):not(:disabled):focus {
10242
+ border-color: #163300;
10308
10243
  border-color: var(--color-interactive-primary);
10309
10244
  outline: 0;
10310
10245
  }
@@ -10315,6 +10250,7 @@ textarea.form-control {
10315
10250
  }
10316
10251
 
10317
10252
  .np-theme-personal .form-control:focus {
10253
+ border-color: #163300;
10318
10254
  border-color: var(--color-interactive-primary);
10319
10255
  }
10320
10256
 
@@ -10918,6 +10854,7 @@ select[multiple].input-lg {
10918
10854
  }
10919
10855
 
10920
10856
  .np-theme-personal .has-success {
10857
+ border-color: #054d28 !important;
10921
10858
  border-color: var(--color-sentiment-positive) !important;
10922
10859
  }
10923
10860
 
@@ -10937,6 +10874,7 @@ select[multiple].input-lg {
10937
10874
  .np-theme-personal .has-success .input-group-addon {
10938
10875
  color: #37517e !important;
10939
10876
  color: var(--color-content-primary) !important;
10877
+ border-color: #054d28 !important;
10940
10878
  border-color: var(--color-sentiment-positive) !important;
10941
10879
  }
10942
10880
 
@@ -10946,6 +10884,7 @@ select[multiple].input-lg {
10946
10884
  .np-theme-personal .has-success .btn-input:not(.disabled):not(:disabled):hover,
10947
10885
  .np-theme-personal .has-success .input-group-addon,
10948
10886
  .np-theme-personal .has-success .alert {
10887
+ border-color: #054d28 !important;
10949
10888
  border-color: var(--color-sentiment-positive) !important;
10950
10889
  }
10951
10890
 
@@ -10970,6 +10909,7 @@ select[multiple].input-lg {
10970
10909
  .np-theme-personal .has-success:active .alert,
10971
10910
  .np-theme-personal .has-success:focus .alert,
10972
10911
  .np-theme-personal .has-success:focus-within .alert {
10912
+ border-color: #054d28 !important;
10973
10913
  border-color: var(--color-sentiment-positive) !important;
10974
10914
  }
10975
10915
 
@@ -10977,6 +10917,7 @@ select[multiple].input-lg {
10977
10917
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover.checkbox label,
10978
10918
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .btn-input,
10979
10919
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .alert {
10920
+ border-color: #054d28 !important;
10980
10921
  border-color: var(--color-sentiment-positive) !important;
10981
10922
  }
10982
10923
 
@@ -10987,6 +10928,7 @@ select[multiple].input-lg {
10987
10928
 
10988
10929
  .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
10989
10930
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
10931
+ border-color: #054d28;
10990
10932
  border-color: var(--color-sentiment-positive);
10991
10933
  color: #37517e;
10992
10934
  color: var(--color-content-primary);
@@ -10996,6 +10938,7 @@ select[multiple].input-lg {
10996
10938
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
10997
10939
  .np-theme-personal .has-success .radio > label:focus-within,
10998
10940
  .np-theme-personal .has-success.checkbox > label:focus-within {
10941
+ border-color: #054d28 !important;
10999
10942
  border-color: var(--color-sentiment-positive) !important;
11000
10943
  }
11001
10944
 
@@ -11007,6 +10950,7 @@ select[multiple].input-lg {
11007
10950
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
11008
10951
  .np-theme-personal .has-success .radio > label:focus-within .tw-radio-button,
11009
10952
  .np-theme-personal .has-success.checkbox > label:focus-within .tw-radio-button {
10953
+ border-color: #054d28 !important;
11010
10954
  border-color: var(--color-sentiment-positive) !important;
11011
10955
  }
11012
10956
 
@@ -11014,6 +10958,7 @@ select[multiple].input-lg {
11014
10958
  .np-theme-personal .has-success.checkbox .tw-checkbox-button,
11015
10959
  .np-theme-personal .has-success .radio .tw-radio-button,
11016
10960
  .np-theme-personal .has-success.checkbox .tw-radio-button {
10961
+ border-color: #054d28;
11017
10962
  border-color: var(--color-sentiment-positive);
11018
10963
  }
11019
10964
 
@@ -11336,6 +11281,7 @@ select[multiple].input-lg {
11336
11281
  }
11337
11282
 
11338
11283
  .np-theme-personal .has-warning {
11284
+ border-color: #ffd11a !important;
11339
11285
  border-color: var(--color-sentiment-warning) !important;
11340
11286
  }
11341
11287
 
@@ -11355,6 +11301,7 @@ select[multiple].input-lg {
11355
11301
  .np-theme-personal .has-warning .input-group-addon {
11356
11302
  color: #37517e !important;
11357
11303
  color: var(--color-content-primary) !important;
11304
+ border-color: #ffd11a !important;
11358
11305
  border-color: var(--color-sentiment-warning) !important;
11359
11306
  }
11360
11307
 
@@ -11364,6 +11311,7 @@ select[multiple].input-lg {
11364
11311
  .np-theme-personal .has-warning .btn-input:not(.disabled):not(:disabled):hover,
11365
11312
  .np-theme-personal .has-warning .input-group-addon,
11366
11313
  .np-theme-personal .has-warning .alert {
11314
+ border-color: #ffd11a !important;
11367
11315
  border-color: var(--color-sentiment-warning) !important;
11368
11316
  }
11369
11317
 
@@ -11388,6 +11336,7 @@ select[multiple].input-lg {
11388
11336
  .np-theme-personal .has-warning:active .alert,
11389
11337
  .np-theme-personal .has-warning:focus .alert,
11390
11338
  .np-theme-personal .has-warning:focus-within .alert {
11339
+ border-color: #ffd11a !important;
11391
11340
  border-color: var(--color-sentiment-warning) !important;
11392
11341
  }
11393
11342
 
@@ -11395,6 +11344,7 @@ select[multiple].input-lg {
11395
11344
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
11396
11345
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .btn-input,
11397
11346
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .alert {
11347
+ border-color: #ffd11a !important;
11398
11348
  border-color: var(--color-sentiment-warning) !important;
11399
11349
  }
11400
11350
 
@@ -11405,6 +11355,7 @@ select[multiple].input-lg {
11405
11355
 
11406
11356
  .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
11407
11357
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
11358
+ border-color: #ffd11a;
11408
11359
  border-color: var(--color-sentiment-warning);
11409
11360
  color: #37517e;
11410
11361
  color: var(--color-content-primary);
@@ -11414,6 +11365,7 @@ select[multiple].input-lg {
11414
11365
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
11415
11366
  .np-theme-personal .has-warning .radio > label:focus-within,
11416
11367
  .np-theme-personal .has-warning.checkbox > label:focus-within {
11368
+ border-color: #ffd11a !important;
11417
11369
  border-color: var(--color-sentiment-warning) !important;
11418
11370
  }
11419
11371
 
@@ -11425,6 +11377,7 @@ select[multiple].input-lg {
11425
11377
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
11426
11378
  .np-theme-personal .has-warning .radio > label:focus-within .tw-radio-button,
11427
11379
  .np-theme-personal .has-warning.checkbox > label:focus-within .tw-radio-button {
11380
+ border-color: #ffd11a !important;
11428
11381
  border-color: var(--color-sentiment-warning) !important;
11429
11382
  }
11430
11383
 
@@ -11432,6 +11385,7 @@ select[multiple].input-lg {
11432
11385
  .np-theme-personal .has-warning.checkbox .tw-checkbox-button,
11433
11386
  .np-theme-personal .has-warning .radio .tw-radio-button,
11434
11387
  .np-theme-personal .has-warning.checkbox .tw-radio-button {
11388
+ border-color: #ffd11a;
11435
11389
  border-color: var(--color-sentiment-warning);
11436
11390
  }
11437
11391
 
@@ -11545,6 +11499,7 @@ select[multiple].input-lg {
11545
11499
  }
11546
11500
 
11547
11501
  .np-theme-personal .has-error {
11502
+ border-color: #cb272f !important;
11548
11503
  border-color: var(--color-sentiment-negative) !important;
11549
11504
  }
11550
11505
 
@@ -11564,6 +11519,7 @@ select[multiple].input-lg {
11564
11519
  .np-theme-personal .has-error .input-group-addon {
11565
11520
  color: #37517e !important;
11566
11521
  color: var(--color-content-primary) !important;
11522
+ border-color: #cb272f !important;
11567
11523
  border-color: var(--color-sentiment-negative) !important;
11568
11524
  }
11569
11525
 
@@ -11573,6 +11529,7 @@ select[multiple].input-lg {
11573
11529
  .np-theme-personal .has-error .btn-input:not(.disabled):not(:disabled):hover,
11574
11530
  .np-theme-personal .has-error .input-group-addon,
11575
11531
  .np-theme-personal .has-error .alert {
11532
+ border-color: #cb272f !important;
11576
11533
  border-color: var(--color-sentiment-negative) !important;
11577
11534
  }
11578
11535
 
@@ -11597,6 +11554,7 @@ select[multiple].input-lg {
11597
11554
  .np-theme-personal .has-error:active .alert,
11598
11555
  .np-theme-personal .has-error:focus .alert,
11599
11556
  .np-theme-personal .has-error:focus-within .alert {
11557
+ border-color: #b8232b !important;
11600
11558
  border-color: var(--color-sentiment-negative-hover) !important;
11601
11559
  }
11602
11560
 
@@ -11604,6 +11562,7 @@ select[multiple].input-lg {
11604
11562
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover.checkbox label,
11605
11563
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .btn-input,
11606
11564
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .alert {
11565
+ border-color: #b8232b !important;
11607
11566
  border-color: var(--color-sentiment-negative-hover) !important;
11608
11567
  }
11609
11568
 
@@ -11614,6 +11573,7 @@ select[multiple].input-lg {
11614
11573
 
11615
11574
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
11616
11575
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
11576
+ border-color: #cb272f;
11617
11577
  border-color: var(--color-sentiment-negative);
11618
11578
  color: #37517e;
11619
11579
  color: var(--color-content-primary);
@@ -11623,6 +11583,7 @@ select[multiple].input-lg {
11623
11583
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
11624
11584
  .np-theme-personal .has-error .radio > label:focus-within,
11625
11585
  .np-theme-personal .has-error.checkbox > label:focus-within {
11586
+ border-color: #b8232b !important;
11626
11587
  border-color: var(--color-sentiment-negative-hover) !important;
11627
11588
  }
11628
11589
 
@@ -11634,6 +11595,7 @@ select[multiple].input-lg {
11634
11595
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
11635
11596
  .np-theme-personal .has-error .radio > label:focus-within .tw-radio-button,
11636
11597
  .np-theme-personal .has-error.checkbox > label:focus-within .tw-radio-button {
11598
+ border-color: #b8232b !important;
11637
11599
  border-color: var(--color-sentiment-negative-hover) !important;
11638
11600
  }
11639
11601
 
@@ -11641,6 +11603,7 @@ select[multiple].input-lg {
11641
11603
  .np-theme-personal .has-error.checkbox .tw-checkbox-button,
11642
11604
  .np-theme-personal .has-error .radio .tw-radio-button,
11643
11605
  .np-theme-personal .has-error.checkbox .tw-radio-button {
11606
+ border-color: #cb272f;
11644
11607
  border-color: var(--color-sentiment-negative);
11645
11608
  }
11646
11609
 
@@ -11904,7 +11867,9 @@ input[type="checkbox"]:indeterminate + .tw-checkbox-button {
11904
11867
  .np-theme-personal .tw-checkbox-button.checked,
11905
11868
  .np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
11906
11869
  .np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
11870
+ background-color: #163300;
11907
11871
  background-color: var(--color-interactive-primary);
11872
+ box-shadow: inset 0 0 0 1px #163300;
11908
11873
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
11909
11874
  }
11910
11875
 
@@ -11932,8 +11897,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-c
11932
11897
  .np-theme-personal .tw-checkbox-button.checked:hover,
11933
11898
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
11934
11899
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
11900
+ border-color: #0d1f00 !important;
11935
11901
  border-color: var(--color-interactive-primary-hover) !important;
11902
+ background-color: #0d1f00;
11936
11903
  background-color: var(--color-interactive-primary-hover);
11904
+ box-shadow: inset 0 0 0 1px #0d1f00;
11937
11905
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
11938
11906
  }
11939
11907
 
@@ -11951,8 +11919,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
11951
11919
  .np-theme-personal .tw-checkbox-button.checked:active,
11952
11920
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
11953
11921
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
11922
+ border-color: #0e0f0c !important;
11954
11923
  border-color: var(--color-interactive-primary-active) !important;
11924
+ background-color: #0e0f0c;
11955
11925
  background-color: var(--color-interactive-primary-active);
11926
+ box-shadow: inset 0 0 0 1px #0e0f0c;
11956
11927
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
11957
11928
  }
11958
11929
 
@@ -12045,6 +12016,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
12045
12016
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
12046
12017
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
12047
12018
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
12019
+ box-shadow: inset 0 0 0 1px #163300;
12048
12020
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
12049
12021
  }
12050
12022
 
@@ -12052,6 +12024,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
12052
12024
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
12053
12025
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
12054
12026
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
12027
+ background-color: #0d1f00;
12055
12028
  background-color: var(--color-interactive-primary-hover);
12056
12029
  }
12057
12030
 
@@ -12080,11 +12053,13 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
12080
12053
  .np-theme-personal .tw-radio-button:checked,
12081
12054
  .np-theme-personal .tw-radio-button.checked {
12082
12055
  border-color: transparent !important;
12056
+ box-shadow: inset 0 0 0 1px #163300;
12083
12057
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
12084
12058
  }
12085
12059
 
12086
12060
  .np-theme-personal .tw-radio-button:checked .tw-radio-check,
12087
12061
  .np-theme-personal .tw-radio-button.checked .tw-radio-check {
12062
+ background-color: #163300;
12088
12063
  background-color: var(--color-interactive-primary);
12089
12064
  max-height: 12px;
12090
12065
  max-width: 12px;
@@ -12585,6 +12560,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12585
12560
  .np-theme-personal .form-control:not(.disabled):not(:disabled):hover:has(:checked, .checked),
12586
12561
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover:has(:checked, .checked),
12587
12562
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover:has(:checked, .checked) {
12563
+ box-shadow: inset 0 0 0 2px #0d1f00;
12588
12564
  box-shadow: inset 0 0 0 2px var(--color-interactive-primary-hover);
12589
12565
  }
12590
12566
 
@@ -12598,6 +12574,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12598
12574
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):has(:focus-visible),
12599
12575
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-visible,
12600
12576
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
12577
+ box-shadow: inset 0 0 0 3px #163300;
12601
12578
  box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
12602
12579
  }
12603
12580
 
@@ -12606,6 +12583,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12606
12583
  .np-theme-personal .has-error .form-control,
12607
12584
  .np-theme-personal .has-error .radio > label,
12608
12585
  .np-theme-personal .has-error .checkbox > label {
12586
+ box-shadow: inset 0 0 0 2px #cb272f;
12609
12587
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
12610
12588
  }
12611
12589
 
@@ -12613,6 +12591,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12613
12591
  .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):hover,
12614
12592
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
12615
12593
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):hover {
12594
+ box-shadow: inset 0 0 0 2px #b8232b;
12616
12595
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
12617
12596
  }
12618
12597
 
@@ -12628,18 +12607,22 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12628
12607
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active,
12629
12608
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible,
12630
12609
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
12610
+ box-shadow: inset 0 0 0 3px #cb272f;
12631
12611
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
12632
12612
  }
12633
12613
 
12634
12614
  .np-theme-personal .has-error .tw-radio-button {
12615
+ border-color: #cb272f !important;
12635
12616
  border-color: var(--color-sentiment-negative) !important;
12636
12617
  }
12637
12618
 
12638
12619
  .np-theme-personal .has-error .tw-radio-button.checked {
12620
+ box-shadow: inset 0 0 0 1px #cb272f;
12639
12621
  box-shadow: inset 0 0 0 1px var(--color-sentiment-negative);
12640
12622
  }
12641
12623
 
12642
12624
  .np-theme-personal .has-error .tw-radio-button.checked .tw-radio-check {
12625
+ background: #cb272f !important;
12643
12626
  background: var(--color-sentiment-negative) !important;
12644
12627
  }
12645
12628
 
@@ -12649,6 +12632,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12649
12632
  .np-theme-personal .has-error input[type=checkbox]:hover + .tw-checkbox-button,
12650
12633
  .np-theme-personal .has-error input[type=radio]:not(.disabled):not(:disabled):hover + .tw-radio-button,
12651
12634
  .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):hover + .tw-checkbox-button {
12635
+ box-shadow: inset 0 0 0 2px #b8232b;
12652
12636
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
12653
12637
  }
12654
12638
 
@@ -12658,13 +12642,16 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12658
12642
  .np-theme-personal .has-error .tw-checkbox-button.checked:hover,
12659
12643
  .np-theme-personal .has-error .tw-checkbox-button:checked:hover,
12660
12644
  .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
12645
+ box-shadow: inset 0 0 0 3px #cb272f;
12661
12646
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
12647
+ background: #cb272f;
12662
12648
  background: var(--color-sentiment-negative);
12663
12649
  }
12664
12650
 
12665
12651
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active input[type=checkbox] + .tw-checkbox-button,
12666
12652
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible input[type=checkbox] + .tw-checkbox-button,
12667
12653
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) input[type=checkbox] + .tw-checkbox-button {
12654
+ box-shadow: inset 0 0 0 2px #a72027;
12668
12655
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
12669
12656
  }
12670
12657
 
@@ -12719,6 +12706,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12719
12706
 
12720
12707
  .np-theme-personal .has-error .error-messages,
12721
12708
  .np-theme-personal .has-error .alert-detach.alert-danger {
12709
+ color: #cb272f;
12722
12710
  color: var(--color-sentiment-negative);
12723
12711
  }
12724
12712
 
@@ -12735,6 +12723,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
12735
12723
  }
12736
12724
 
12737
12725
  .np-theme-personal .has-required::after {
12726
+ color: #cb272f;
12738
12727
  color: var(--color-sentiment-negative);
12739
12728
  }
12740
12729
 
@@ -13999,6 +13988,7 @@ li > a > .currency-flag:first-child {
13999
13988
  }
14000
13989
 
14001
13990
  .np-theme-personal .decision:not(.disabled):hover {
13991
+ background-color: rgba(22,51,0,0.07843);
14002
13992
  background-color: var(--color-background-screen-hover);
14003
13993
  }
14004
13994
 
@@ -14598,6 +14588,7 @@ li > a > .currency-flag:first-child {
14598
14588
  }
14599
14589
 
14600
14590
  .np-theme-personal .droppable-area.droppable-negative {
14591
+ border: 2px solid #cb272f !important;
14601
14592
  border: 2px solid var(--color-sentiment-negative) !important;
14602
14593
  background-color: #ffffff;
14603
14594
  background-color: var(--color-background-screen);
@@ -14615,6 +14606,7 @@ li > a > .currency-flag:first-child {
14615
14606
  }
14616
14607
 
14617
14608
  .np-theme-personal .droppable-area .droppable-dropping-card {
14609
+ background-color: rgba(22,51,0,0.12941);
14618
14610
  background-color: var(--color-background-neutral-hover);
14619
14611
  }
14620
14612
 
@@ -14623,6 +14615,7 @@ li > a > .currency-flag:first-child {
14623
14615
  }
14624
14616
 
14625
14617
  .np-theme-personal .droppable-area .circle {
14618
+ background-color: #ffffff;
14626
14619
  background-color: var(--color-contrast);
14627
14620
  color: #37517e !important;
14628
14621
  color: var(--color-content-primary) !important;
@@ -14660,6 +14653,7 @@ li > a > .currency-flag:first-child {
14660
14653
  }
14661
14654
 
14662
14655
  .np-theme-personal .droppable-dropping {
14656
+ border-color: rgba(22,51,0,0.12941) !important;
14663
14657
  border-color: var(--color-background-neutral-hover) !important;
14664
14658
  border-style: solid;
14665
14659
  }
@@ -21012,6 +21006,7 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
21012
21006
  }
21013
21007
 
21014
21008
  .np-theme-personal .close {
21009
+ color: #163300;
21015
21010
  color: var(--color-interactive-primary);
21016
21011
  }
21017
21012
 
@@ -21024,6 +21019,7 @@ html:not([dir="rtl"]) .nav-stacked > li.active > a:focus {
21024
21019
  }
21025
21020
 
21026
21021
  .np-theme-personal .close:hover {
21022
+ color: #0d1f00;
21027
21023
  color: var(--color-interactive-primary-hover);
21028
21024
  }
21029
21025
 
@@ -22577,6 +22573,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
22577
22573
  }
22578
22574
 
22579
22575
  .np-theme-personal .popover-close {
22576
+ color: #163300;
22580
22577
  color: var(--color-interactive-primary);
22581
22578
  }
22582
22579
 
@@ -22589,6 +22586,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
22589
22586
  }
22590
22587
 
22591
22588
  .np-theme-personal .popover-close:hover {
22589
+ color: #0d1f00;
22592
22590
  color: var(--color-interactive-primary-hover);
22593
22591
  }
22594
22592
 
@@ -22835,6 +22833,7 @@ button.popover-close {
22835
22833
  .np-theme-personal--forest-green .process-circle,
22836
22834
  .np-theme-personal--bright-green .process-circle,
22837
22835
  .np-theme-personal--dark .process-circle {
22836
+ stroke: #163300;
22838
22837
  stroke: var(--color-interactive-primary);
22839
22838
  }
22840
22839
 
@@ -22869,6 +22868,7 @@ button.popover-close {
22869
22868
  }
22870
22869
 
22871
22870
  .np-theme-personal .process-success .process-icon-horizontal {
22871
+ background-color: #054d28;
22872
22872
  background-color: var(--color-sentiment-positive);
22873
22873
  }
22874
22874
 
@@ -22880,6 +22880,7 @@ button.popover-close {
22880
22880
  }
22881
22881
 
22882
22882
  .np-theme-personal .process-success .process-icon-vertical {
22883
+ background-color: #054d28;
22883
22884
  background-color: var(--color-sentiment-positive);
22884
22885
  }
22885
22886
 
@@ -22889,6 +22890,7 @@ button.popover-close {
22889
22890
  }
22890
22891
 
22891
22892
  .np-theme-personal .process-success .process-circle {
22893
+ stroke: #054d28;
22892
22894
  stroke: var(--color-sentiment-positive);
22893
22895
  }
22894
22896
 
@@ -22899,6 +22901,7 @@ button.popover-close {
22899
22901
  }
22900
22902
 
22901
22903
  .np-theme-personal .process-danger .process-icon-horizontal {
22904
+ background-color: #cb272f;
22902
22905
  background-color: var(--color-sentiment-negative);
22903
22906
  }
22904
22907
 
@@ -22909,6 +22912,7 @@ button.popover-close {
22909
22912
  }
22910
22913
 
22911
22914
  .np-theme-personal .process-danger .process-icon-vertical {
22915
+ background-color: #cb272f;
22912
22916
  background-color: var(--color-sentiment-negative);
22913
22917
  }
22914
22918
 
@@ -22918,6 +22922,7 @@ button.popover-close {
22918
22922
  }
22919
22923
 
22920
22924
  .np-theme-personal .process-danger .process-circle {
22925
+ stroke: #cb272f;
22921
22926
  stroke: var(--color-sentiment-negative);
22922
22927
  }
22923
22928