@transferwise/neptune-css 14.9.6 → 14.10.0

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,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
3
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -141,7 +141,7 @@
141
141
 
142
142
  /**
143
143
  * Do not edit directly
144
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
144
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
145
145
  */
146
146
 
147
147
  .np-theme-personal {
@@ -359,7 +359,7 @@
359
359
 
360
360
  /**
361
361
  * Do not edit directly
362
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
362
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
363
363
  */
364
364
 
365
365
  .np-theme-personal--forest-green {
@@ -605,7 +605,7 @@
605
605
 
606
606
  /**
607
607
  * Do not edit directly
608
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
608
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
609
609
  */
610
610
 
611
611
  .np-theme-personal--bright-green {
@@ -851,7 +851,7 @@
851
851
 
852
852
  /**
853
853
  * Do not edit directly
854
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
854
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
855
855
  */
856
856
 
857
857
  .np-theme-personal--dark {
@@ -1095,6 +1095,368 @@
1095
1095
  }
1096
1096
  }
1097
1097
 
1098
+ /**
1099
+ * Do not edit directly
1100
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
1101
+ */
1102
+
1103
+ .np-theme-platform {
1104
+ --color-bright-yellow: #ffeb69;
1105
+ --color-bright-orange: #ffc091;
1106
+ --color-dark-purple: #260a2f;
1107
+ --color-dark-gold: #3a341c;
1108
+ --color-bright-blue: #a0e1e1;
1109
+ --color-dark-charcoal: #21231d;
1110
+ --color-white: #ffffff;
1111
+ --color-black: #000000;
1112
+ --color-bright-green: #9fe870;
1113
+ --color-forest-green: #163300;
1114
+ --color-bright-pink: #ffd7ef;
1115
+ --color-dark-maroon: #320707;
1116
+ --color-content-primary: #163300;
1117
+ --color-content-secondary: #163300;
1118
+ --color-content-tertiary: #6a6c6a;
1119
+ --color-content-link: #163300;
1120
+ --color-content-link-hover: #0d1f00;
1121
+ --color-content-link-active: #0e0f0c;
1122
+ --color-interactive-primary: #163300;
1123
+ --color-interactive-primary-hover: #0c2300;
1124
+ --color-interactive-primary-active: #001a00;
1125
+ --color-interactive-primary-hover: #0d1f00;
1126
+ --color-interactive-primary-hover-hover: #001100;
1127
+ --color-interactive-primary-hover-active: #000000;
1128
+ --color-interactive-primary-active: #0e0f0c;
1129
+ --color-interactive-primary-active-hover: #000000;
1130
+ --color-interactive-primary-active-active: #000000;
1131
+ --color-interactive-secondary: #868685;
1132
+ --color-interactive-secondary-hover: #747473;
1133
+ --color-interactive-secondary-active: #666665;
1134
+ --color-interactive-secondary-hover: #6c6c6b;
1135
+ --color-interactive-secondary-hover-hover: #5a5a59;
1136
+ --color-interactive-secondary-hover-active: #4e4e4d;
1137
+ --color-interactive-secondary-active: #525251;
1138
+ --color-interactive-secondary-active-hover: #414140;
1139
+ --color-interactive-secondary-active-active: #353534;
1140
+ --color-interactive-accent: #163300;
1141
+ --color-interactive-accent-hover: #0c2300;
1142
+ --color-interactive-accent-active: #001a00;
1143
+ --color-interactive-accent-hover: #0f2400;
1144
+ --color-interactive-accent-hover-hover: #001700;
1145
+ --color-interactive-accent-hover-active: #000800;
1146
+ --color-interactive-accent-active: #091400;
1147
+ --color-interactive-accent-active-hover: #000000;
1148
+ --color-interactive-accent-active-active: #000000;
1149
+ --color-interactive-control: #ffffff;
1150
+ --color-interactive-control-hover: #eaeaea;
1151
+ --color-interactive-control-active: #dbdbdb;
1152
+ --color-interactive-control-hover: #ffffff;
1153
+ --color-interactive-control-hover-hover: #eaeaea;
1154
+ --color-interactive-control-hover-active: #dbdbdb;
1155
+ --color-interactive-control-active: #ffffff;
1156
+ --color-interactive-control-active-hover: #eaeaea;
1157
+ --color-interactive-control-active-active: #dbdbdb;
1158
+ --color-interactive-contrast: #ffffff;
1159
+ --color-interactive-contrast-hover: #cdffad;
1160
+ --color-interactive-contrast-hover-hover: #b9ea9a;
1161
+ --color-interactive-contrast-hover-active: #aadb8b;
1162
+ --color-interactive-contrast-active: #ecffe0;
1163
+ --color-interactive-contrast-active-hover: #d8eacc;
1164
+ --color-interactive-contrast-active-active: #c8dbbd;
1165
+ --color-border-neutral: rgba(14,15,12,0.12157);
1166
+ --color-border-overlay: rgba(14,15,12,0.12157);
1167
+ --color-background-screen: #ffffff;
1168
+ --color-background-screen-hover: rgba(22,51,0,0.07843);
1169
+ --color-background-screen-active: rgba(22,51,0,0.12941);
1170
+ --color-background-elevated: #ffffff;
1171
+ --color-background-neutral: rgba(22,51,0,0.07843);
1172
+ --color-background-neutral-hover: rgba(22,51,0,0.12941);
1173
+ --color-background-neutral-active: rgba(22,51,0,0.18039);
1174
+ --color-background-overlay: rgba(22,51,0,0.07843);
1175
+ --color-sentiment-negative: #a8200d;
1176
+ --color-sentiment-negative-hover: #8e1b0b;
1177
+ --color-sentiment-negative-active: #761709;
1178
+ --color-sentiment-positive: #2f5711;
1179
+ --color-sentiment-warning: #edc843;
1180
+ --color-contrast: #ffffff;
1181
+ --color-light: #ffffff;
1182
+ --color-dark: #121511;
1183
+ --color-contrast-overlay: #ffffff;
1184
+ --color-contrast-theme: #121511;
1185
+ --padding-x-small: 8px;
1186
+ --padding-small: 16px;
1187
+ --padding-medium: 24px;
1188
+ --padding-large: 32px;
1189
+ --radius-full: 9999px;
1190
+ --radius-small: 10px;
1191
+ --radius-medium: 16px;
1192
+ --radius-large: 24px;
1193
+ --size-4: 4px;
1194
+ --size-8: 8px;
1195
+ --size-10: 10px;
1196
+ --size-12: 12px;
1197
+ --size-14: 14px;
1198
+ --size-16: 16px;
1199
+ --size-24: 24px;
1200
+ --size-32: 32px;
1201
+ --size-40: 40px;
1202
+ --size-48: 48px;
1203
+ --size-52: 52px;
1204
+ --size-56: 56px;
1205
+ --size-60: 60px;
1206
+ --size-64: 64px;
1207
+ --size-72: 72px;
1208
+ --size-80: 80px;
1209
+ --size-88: 88px;
1210
+ --size-96: 96px;
1211
+ --size-104: 104px;
1212
+ --size-112: 112px;
1213
+ --size-120: 120px;
1214
+ --size-126: 126px;
1215
+ --size-128: 128px;
1216
+ --size-146: 146px;
1217
+ --size-154: 154px;
1218
+ --size-x-small: 24px;
1219
+ --size-small: 32px;
1220
+ --size-medium: 40px;
1221
+ --size-large: 48px;
1222
+ --size-x-large: 56px;
1223
+ --size-2x-large: 72px;
1224
+ --space-content-horizontal: 16px;
1225
+ --space-small: 16px;
1226
+ --space-medium: 32px;
1227
+ --space-large: 40px;
1228
+ --space-x-large: 56px;
1229
+ --font-size-12: 0.75rem;
1230
+ --font-size-14: 0.875rem;
1231
+ --font-size-16: 1rem;
1232
+ --font-size-18: 1.125rem;
1233
+ --font-size-20: 1.25rem;
1234
+ --font-size-22: 1.375rem;
1235
+ --font-size-24: 1.5rem;
1236
+ --font-size-26: 1.625rem;
1237
+ --font-size-28: 1.75rem;
1238
+ --font-size-30: 1.875rem;
1239
+ --font-size-32: 2rem;
1240
+ --letter-spacing-xxs: 0.005em;
1241
+ --letter-spacing-xs: 0.01em;
1242
+ --letter-spacing-sm: 0.0125em;
1243
+ --letter-spacing-md: 0.015em;
1244
+ --letter-spacing-lg: 0.02em;
1245
+ --letter-spacing-xl: 0.025em;
1246
+ --letter-spacing-negative-xxs: -0.005em;
1247
+ --letter-spacing-negative-xs: -0.01em;
1248
+ --letter-spacing-negative-sm: -0.0125em;
1249
+ --letter-spacing-negative-md: -0.015em;
1250
+ --letter-spacing-negative-lg: -0.02em;
1251
+ --letter-spacing-negative-xl: -0.025em;
1252
+ --letter-spacing-negative-xxl: -0.03em;
1253
+ --letter-spacing-negative-xxxl: -0.04em;
1254
+ --letter-spacing-negative-xxxxl: -0.05em;
1255
+ --line-height-18: 1.125rem;
1256
+ --line-height-20: 1.25rem;
1257
+ --line-height-22: 1.375rem;
1258
+ --line-height-24: 1.5rem;
1259
+ --line-height-28: 1.75rem;
1260
+ --line-height-30: 1.875rem;
1261
+ --line-height-32: 2rem;
1262
+ --line-height-34: 2.125rem;
1263
+ --line-height-36: 2.25rem;
1264
+ --line-height-42: 2.625rem;
1265
+ --line-height-48: 3rem;
1266
+ --line-height-title: 1.2;
1267
+ --line-height-body: 1.5;
1268
+ --line-height-control: 1.2;
1269
+ --font-weight-light: 300;
1270
+ --font-weight-regular: 400;
1271
+ --font-weight-medium: 500;
1272
+ --font-weight-semi-bold: 600;
1273
+ --font-weight-bold: 700;
1274
+ --font-weight-black: 900;
1275
+ --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1276
+ --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1277
+ }
1278
+
1279
+ /**
1280
+ * Do not edit directly
1281
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
1282
+ */
1283
+
1284
+ .np-theme-platform--forest-green {
1285
+ --color-bright-yellow: #ffeb69;
1286
+ --color-bright-orange: #ffc091;
1287
+ --color-dark-purple: #260a2f;
1288
+ --color-dark-gold: #3a341c;
1289
+ --color-bright-blue: #a0e1e1;
1290
+ --color-dark-charcoal: #21231d;
1291
+ --color-white: #ffffff;
1292
+ --color-black: #000000;
1293
+ --color-bright-green: #9fe870;
1294
+ --color-forest-green: #163300;
1295
+ --color-bright-pink: #ffd7ef;
1296
+ --color-dark-maroon: #320707;
1297
+ --color-content-primary: #ffffff;
1298
+ --color-content-secondary: #ffffff;
1299
+ --color-content-tertiary: #cacfc7;
1300
+ --color-content-link: #ffffff;
1301
+ --color-content-link-hover: #b9c2b2;
1302
+ --color-content-link-active: #8a9980;
1303
+ --color-interactive-primary: #ffffff;
1304
+ --color-interactive-primary-hover: #eaeaea;
1305
+ --color-interactive-primary-active: #dbdbdb;
1306
+ --color-interactive-primary-hover: #b9c2b2;
1307
+ --color-interactive-primary-hover-hover: #a6ae9f;
1308
+ --color-interactive-primary-hover-active: #97a090;
1309
+ --color-interactive-primary-active: #8a9980;
1310
+ --color-interactive-primary-active-hover: #78866e;
1311
+ --color-interactive-primary-active-active: #6a7861;
1312
+ --color-interactive-secondary: #cacfc7;
1313
+ --color-interactive-secondary-hover: #b6bbb3;
1314
+ --color-interactive-secondary-active: #a8aca5;
1315
+ --color-interactive-secondary-hover: #d9e3d3;
1316
+ --color-interactive-secondary-hover-hover: #c5cfbf;
1317
+ --color-interactive-secondary-hover-active: #b6c0b0;
1318
+ --color-interactive-secondary-active: #e7ede3;
1319
+ --color-interactive-secondary-active-hover: #d3d9cf;
1320
+ --color-interactive-secondary-active-active: #c4cac0;
1321
+ --color-interactive-accent: #ffffff;
1322
+ --color-interactive-accent-hover: #eaeaea;
1323
+ --color-interactive-accent-active: #dbdbdb;
1324
+ --color-interactive-accent-hover: #b9c2b2;
1325
+ --color-interactive-accent-hover-hover: #a6ae9f;
1326
+ --color-interactive-accent-hover-active: #97a090;
1327
+ --color-interactive-accent-active: #8a9980;
1328
+ --color-interactive-accent-active-hover: #78866e;
1329
+ --color-interactive-accent-active-active: #6a7861;
1330
+ --color-interactive-control: #163300;
1331
+ --color-interactive-control-hover: #0c2300;
1332
+ --color-interactive-control-active: #001a00;
1333
+ --color-interactive-control-hover: #122900;
1334
+ --color-interactive-control-hover-hover: #011b00;
1335
+ --color-interactive-control-hover-active: #001000;
1336
+ --color-interactive-control-active: #0d1f00;
1337
+ --color-interactive-control-active-hover: #001100;
1338
+ --color-interactive-control-active-active: #000000;
1339
+ --color-interactive-contrast: #163300;
1340
+ --color-interactive-contrast-hover: #214d00;
1341
+ --color-interactive-contrast-hover-hover: #103c00;
1342
+ --color-interactive-contrast-hover-active: #093000;
1343
+ --color-interactive-contrast-active: #2c6600;
1344
+ --color-interactive-contrast-active-hover: #175400;
1345
+ --color-interactive-contrast-active-active: #064700;
1346
+ --color-border-neutral: rgba(255,255,255,0.2);
1347
+ --color-border-overlay: #ffffff;
1348
+ --color-background-screen: #163300;
1349
+ --color-background-screen-hover: rgba(255,255,255,0.10196);
1350
+ --color-background-screen-active: rgba(255,255,255,0.2);
1351
+ --color-background-elevated: #111f06;
1352
+ --color-background-neutral: #000000;
1353
+ --color-background-neutral-hover: rgba(255,255,255,0.2);
1354
+ --color-background-neutral-active: rgba(255,255,255,0.30196);
1355
+ --color-background-overlay: #000000;
1356
+ --color-sentiment-negative: #ffbfbd;
1357
+ --color-sentiment-negative-hover: #ffdcdb;
1358
+ --color-sentiment-negative-active: #ffebeb;
1359
+ --color-sentiment-positive: #a0e5ae;
1360
+ --color-sentiment-warning: #edd272;
1361
+ --color-contrast: #163300;
1362
+ --color-light: #000000;
1363
+ --color-dark: #163300;
1364
+ --color-contrast-overlay: #163300;
1365
+ --color-contrast-theme: #ffffff;
1366
+ --padding-x-small: 8px;
1367
+ --padding-small: 16px;
1368
+ --padding-medium: 24px;
1369
+ --padding-large: 32px;
1370
+ --radius-full: 9999px;
1371
+ --radius-small: 10px;
1372
+ --radius-medium: 16px;
1373
+ --radius-large: 24px;
1374
+ --size-4: 4px;
1375
+ --size-8: 8px;
1376
+ --size-10: 10px;
1377
+ --size-12: 12px;
1378
+ --size-14: 14px;
1379
+ --size-16: 16px;
1380
+ --size-24: 24px;
1381
+ --size-32: 32px;
1382
+ --size-40: 40px;
1383
+ --size-48: 48px;
1384
+ --size-52: 52px;
1385
+ --size-56: 56px;
1386
+ --size-60: 60px;
1387
+ --size-64: 64px;
1388
+ --size-72: 72px;
1389
+ --size-80: 80px;
1390
+ --size-88: 88px;
1391
+ --size-96: 96px;
1392
+ --size-104: 104px;
1393
+ --size-112: 112px;
1394
+ --size-120: 120px;
1395
+ --size-126: 126px;
1396
+ --size-128: 128px;
1397
+ --size-146: 146px;
1398
+ --size-154: 154px;
1399
+ --size-x-small: 24px;
1400
+ --size-small: 32px;
1401
+ --size-medium: 40px;
1402
+ --size-large: 48px;
1403
+ --size-x-large: 56px;
1404
+ --size-2x-large: 72px;
1405
+ --space-content-horizontal: 16px;
1406
+ --space-small: 16px;
1407
+ --space-medium: 32px;
1408
+ --space-large: 40px;
1409
+ --space-x-large: 56px;
1410
+ --font-size-12: 0.75rem;
1411
+ --font-size-14: 0.875rem;
1412
+ --font-size-16: 1rem;
1413
+ --font-size-18: 1.125rem;
1414
+ --font-size-20: 1.25rem;
1415
+ --font-size-22: 1.375rem;
1416
+ --font-size-24: 1.5rem;
1417
+ --font-size-26: 1.625rem;
1418
+ --font-size-28: 1.75rem;
1419
+ --font-size-30: 1.875rem;
1420
+ --font-size-32: 2rem;
1421
+ --letter-spacing-xxs: 0.005em;
1422
+ --letter-spacing-xs: 0.01em;
1423
+ --letter-spacing-sm: 0.0125em;
1424
+ --letter-spacing-md: 0.015em;
1425
+ --letter-spacing-lg: 0.02em;
1426
+ --letter-spacing-xl: 0.025em;
1427
+ --letter-spacing-negative-xxs: -0.005em;
1428
+ --letter-spacing-negative-xs: -0.01em;
1429
+ --letter-spacing-negative-sm: -0.0125em;
1430
+ --letter-spacing-negative-md: -0.015em;
1431
+ --letter-spacing-negative-lg: -0.02em;
1432
+ --letter-spacing-negative-xl: -0.025em;
1433
+ --letter-spacing-negative-xxl: -0.03em;
1434
+ --letter-spacing-negative-xxxl: -0.04em;
1435
+ --letter-spacing-negative-xxxxl: -0.05em;
1436
+ --line-height-18: 1.125rem;
1437
+ --line-height-20: 1.25rem;
1438
+ --line-height-22: 1.375rem;
1439
+ --line-height-24: 1.5rem;
1440
+ --line-height-28: 1.75rem;
1441
+ --line-height-30: 1.875rem;
1442
+ --line-height-32: 2rem;
1443
+ --line-height-34: 2.125rem;
1444
+ --line-height-36: 2.25rem;
1445
+ --line-height-42: 2.625rem;
1446
+ --line-height-48: 3rem;
1447
+ --line-height-title: 1.2;
1448
+ --line-height-body: 1.5;
1449
+ --line-height-control: 1.2;
1450
+ --font-weight-light: 300;
1451
+ --font-weight-regular: 400;
1452
+ --font-weight-medium: 500;
1453
+ --font-weight-semi-bold: 600;
1454
+ --font-weight-bold: 700;
1455
+ --font-weight-black: 900;
1456
+ --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
1457
+ --font-family-display: 'Wise Sans', 'Inter', sans-serif;
1458
+ }
1459
+
1098
1460
  /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
1099
1461
 
1100
1462
  @font-face {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 17 Jan 2024 13:14:10 GMT
3
+ // Generated on Tue, 07 May 2024 15:39:58 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
@@ -219,7 +219,7 @@
219
219
  @font-family-display: 'Wise Sans', 'Inter', sans-serif;
220
220
 
221
221
  // Do not edit directly
222
- // Generated on Wed, 17 Jan 2024 13:14:10 GMT
222
+ // Generated on Tue, 07 May 2024 15:39:58 GMT
223
223
 
224
224
  @color-base-blue-light: #00b9ff;
225
225
  @color-base-blue-mid: #00a2dd;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 17 Jan 2024 13:14:10 GMT
3
+ * Generated on Tue, 07 May 2024 15:39:58 GMT
4
4
  */
5
5
 
6
6
  :root {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "14.9.6",
4
+ "version": "14.10.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -23,7 +23,7 @@
23
23
  "scripts"
24
24
  ],
25
25
  "dependencies": {
26
- "@transferwise/neptune-tokens": "^8.8.1"
26
+ "@transferwise/neptune-tokens": "^8.9.2"
27
27
  },
28
28
  "devDependencies": {
29
29
  "modern-normalize": "^2.0.0",
@@ -3,6 +3,8 @@
3
3
  @import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
4
4
  @import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
5
5
  @import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
6
+ @import '@transferwise/neptune-tokens/themes/platform/tokens.css';
7
+ @import '@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css';
6
8
  @import "./neptune-core.less";
7
9
  @import './core/viewport-themes.less';
8
10
  @import "./neptune-addons.less";