@transferwise/neptune-tokens 6.0.0 → 7.1.0-next.1

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.
@@ -0,0 +1,40 @@
1
+ {
2
+ "branches": [
3
+ {
4
+ "name": "main"
5
+ },
6
+ {
7
+ "name": "next",
8
+ "prerelease": true
9
+ }
10
+ ],
11
+ "debug": "true",
12
+ "plugins": [
13
+ "@semantic-release/commit-analyzer",
14
+ "@semantic-release/release-notes-generator",
15
+ [
16
+ "@semantic-release/changelog",
17
+ {
18
+ "changelogFile": "CHANGELOG.md",
19
+ "changelogTitle":
20
+ "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://conventionalcommits.org) for commit guidelines.\n"
21
+ }
22
+ ],
23
+ [
24
+ "@semantic-release/npm",
25
+ {
26
+ "publishConfig": {
27
+ "access": "restricted"
28
+ }
29
+ }
30
+ ],
31
+ [
32
+ "@semantic-release/git",
33
+ {
34
+ "assets": ["CHANGELOG.md", "package.json"],
35
+ "message": "chore(release): [skip ci]\n\n${nextRelease.version}\n\n${nextRelease.notes}"
36
+ }
37
+ ],
38
+ "@semantic-release/github"
39
+ ]
40
+ }
package/colors-base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ * Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -29,7 +29,7 @@
29
29
  --color-base-navy-dark: #253655;
30
30
  --color-base-navy-fade: #849cc51a;
31
31
  --color-base-grey-light: #829ca9;
32
- --color-base-grey-mid: #6f8691;
32
+ --color-base-grey-mid: #768e9c;
33
33
  --color-base-grey-dark: #5d7079;
34
34
  --color-base-grey-fade: #829ca91a;
35
35
  --color-base-white-light: #ffffff;
package/colors-base.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ // Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
 
5
5
  @color-base-blue-light: #00b9ff;
6
6
  @color-base-blue-mid: #00a2dd;
@@ -27,7 +27,7 @@
27
27
  @color-base-navy-dark: #253655;
28
28
  @color-base-navy-fade: #849cc51a;
29
29
  @color-base-grey-light: #829ca9;
30
- @color-base-grey-mid: #6f8691;
30
+ @color-base-grey-mid: #768e9c;
31
31
  @color-base-grey-dark: #5d7079;
32
32
  @color-base-grey-fade: #829ca91a;
33
33
  @color-base-white-light: #ffffff;
package/colors.json CHANGED
@@ -703,15 +703,15 @@
703
703
  },
704
704
  "mid": {
705
705
  "value": {
706
- "r": 0.43529411764705883,
707
- "g": 0.5254901960784314,
708
- "b": 0.5686274509803921
706
+ "r": 0.4627450980392157,
707
+ "g": 0.5568627450980392,
708
+ "b": 0.611764705882353
709
709
  },
710
710
  "filePath": "tokens/colors/base.json",
711
711
  "isSource": true,
712
712
  "original": {
713
713
  "value": {
714
- "hex": "#6f8691"
714
+ "hex": "#768e9c"
715
715
  }
716
716
  },
717
717
  "name": "baseGreyMid",
@@ -1145,6 +1145,31 @@
1145
1145
  "secondary"
1146
1146
  ]
1147
1147
  },
1148
+ "tertiary": {
1149
+ "value": {
1150
+ "r": 0.6588235294117647,
1151
+ "g": 0.6666666666666666,
1152
+ "b": 0.6745098039215687
1153
+ },
1154
+ "filePath": "tokens/colors/themes/dark.json",
1155
+ "isSource": true,
1156
+ "original": {
1157
+ "value": "{color.base.smoke.dark.value}"
1158
+ },
1159
+ "name": "darkContentTertiary",
1160
+ "attributes": {
1161
+ "category": "color",
1162
+ "type": "dark",
1163
+ "item": "content",
1164
+ "subitem": "tertiary"
1165
+ },
1166
+ "path": [
1167
+ "color",
1168
+ "dark",
1169
+ "content",
1170
+ "tertiary"
1171
+ ]
1172
+ },
1148
1173
  "accent": {
1149
1174
  "value": {
1150
1175
  "r": 0,
@@ -1244,31 +1269,6 @@
1244
1269
  "content",
1245
1270
  "warning"
1246
1271
  ]
1247
- },
1248
- "disabled": {
1249
- "value": {
1250
- "r": 0.6588235294117647,
1251
- "g": 0.6666666666666666,
1252
- "b": 0.6745098039215687
1253
- },
1254
- "filePath": "tokens/colors/themes/dark.json",
1255
- "isSource": true,
1256
- "original": {
1257
- "value": "{color.base.smoke.dark.value}"
1258
- },
1259
- "name": "darkContentDisabled",
1260
- "attributes": {
1261
- "category": "color",
1262
- "type": "dark",
1263
- "item": "content",
1264
- "subitem": "disabled"
1265
- },
1266
- "path": [
1267
- "color",
1268
- "dark",
1269
- "content",
1270
- "disabled"
1271
- ]
1272
1272
  }
1273
1273
  },
1274
1274
  "interactive": {
@@ -1396,31 +1396,6 @@
1396
1396
  "interactive",
1397
1397
  "secondary"
1398
1398
  ]
1399
- },
1400
- "disabled": {
1401
- "value": {
1402
- "r": 0.6588235294117647,
1403
- "g": 0.6666666666666666,
1404
- "b": 0.6745098039215687
1405
- },
1406
- "filePath": "tokens/colors/themes/dark.json",
1407
- "isSource": true,
1408
- "original": {
1409
- "value": "{color.base.smoke.dark.value}"
1410
- },
1411
- "name": "darkInteractiveDisabled",
1412
- "attributes": {
1413
- "category": "color",
1414
- "type": "dark",
1415
- "item": "interactive",
1416
- "subitem": "disabled"
1417
- },
1418
- "path": [
1419
- "color",
1420
- "dark",
1421
- "interactive",
1422
- "disabled"
1423
- ]
1424
1399
  }
1425
1400
  },
1426
1401
  "background": {
@@ -1765,6 +1740,31 @@
1765
1740
  "secondary"
1766
1741
  ]
1767
1742
  },
1743
+ "tertiary": {
1744
+ "value": {
1745
+ "r": 0.4627450980392157,
1746
+ "g": 0.5568627450980392,
1747
+ "b": 0.611764705882353
1748
+ },
1749
+ "filePath": "tokens/colors/themes/light.json",
1750
+ "isSource": true,
1751
+ "original": {
1752
+ "value": "{color.base.grey.mid.value}"
1753
+ },
1754
+ "name": "lightContentTertiary",
1755
+ "attributes": {
1756
+ "category": "color",
1757
+ "type": "light",
1758
+ "item": "content",
1759
+ "subitem": "tertiary"
1760
+ },
1761
+ "path": [
1762
+ "color",
1763
+ "light",
1764
+ "content",
1765
+ "tertiary"
1766
+ ]
1767
+ },
1768
1768
  "accent": {
1769
1769
  "value": {
1770
1770
  "r": 0,
@@ -1864,31 +1864,6 @@
1864
1864
  "content",
1865
1865
  "warning"
1866
1866
  ]
1867
- },
1868
- "disabled": {
1869
- "value": {
1870
- "r": 0.6588235294117647,
1871
- "g": 0.6666666666666666,
1872
- "b": 0.6745098039215687
1873
- },
1874
- "filePath": "tokens/colors/themes/light.json",
1875
- "isSource": true,
1876
- "original": {
1877
- "value": "{color.base.smoke.dark.value}"
1878
- },
1879
- "name": "lightContentDisabled",
1880
- "attributes": {
1881
- "category": "color",
1882
- "type": "light",
1883
- "item": "content",
1884
- "subitem": "disabled"
1885
- },
1886
- "path": [
1887
- "color",
1888
- "light",
1889
- "content",
1890
- "disabled"
1891
- ]
1892
1867
  }
1893
1868
  },
1894
1869
  "interactive": {
@@ -2016,31 +1991,6 @@
2016
1991
  "interactive",
2017
1992
  "secondary"
2018
1993
  ]
2019
- },
2020
- "disabled": {
2021
- "value": {
2022
- "r": 0.6588235294117647,
2023
- "g": 0.6666666666666666,
2024
- "b": 0.6745098039215687
2025
- },
2026
- "filePath": "tokens/colors/themes/light.json",
2027
- "isSource": true,
2028
- "original": {
2029
- "value": "{color.base.smoke.dark.value}"
2030
- },
2031
- "name": "lightInteractiveDisabled",
2032
- "attributes": {
2033
- "category": "color",
2034
- "type": "light",
2035
- "item": "interactive",
2036
- "subitem": "disabled"
2037
- },
2038
- "path": [
2039
- "color",
2040
- "light",
2041
- "interactive",
2042
- "disabled"
2043
- ]
2044
1994
  }
2045
1995
  },
2046
1996
  "background": {
@@ -2385,6 +2335,31 @@
2385
2335
  "secondary"
2386
2336
  ]
2387
2337
  },
2338
+ "tertiary": {
2339
+ "value": {
2340
+ "r": 0.6588235294117647,
2341
+ "g": 0.6666666666666666,
2342
+ "b": 0.6745098039215687
2343
+ },
2344
+ "filePath": "tokens/colors/themes/navy.json",
2345
+ "isSource": true,
2346
+ "original": {
2347
+ "value": "{color.base.smoke.dark.value}"
2348
+ },
2349
+ "name": "navyContentTertiary",
2350
+ "attributes": {
2351
+ "category": "color",
2352
+ "type": "navy",
2353
+ "item": "content",
2354
+ "subitem": "tertiary"
2355
+ },
2356
+ "path": [
2357
+ "color",
2358
+ "navy",
2359
+ "content",
2360
+ "tertiary"
2361
+ ]
2362
+ },
2388
2363
  "accent": {
2389
2364
  "value": {
2390
2365
  "r": 0,
@@ -2484,31 +2459,6 @@
2484
2459
  "content",
2485
2460
  "warning"
2486
2461
  ]
2487
- },
2488
- "disabled": {
2489
- "value": {
2490
- "r": 0.6588235294117647,
2491
- "g": 0.6666666666666666,
2492
- "b": 0.6745098039215687
2493
- },
2494
- "filePath": "tokens/colors/themes/navy.json",
2495
- "isSource": true,
2496
- "original": {
2497
- "value": "{color.base.smoke.dark.value}"
2498
- },
2499
- "name": "navyContentDisabled",
2500
- "attributes": {
2501
- "category": "color",
2502
- "type": "navy",
2503
- "item": "content",
2504
- "subitem": "disabled"
2505
- },
2506
- "path": [
2507
- "color",
2508
- "navy",
2509
- "content",
2510
- "disabled"
2511
- ]
2512
2462
  }
2513
2463
  },
2514
2464
  "interactive": {
@@ -2636,31 +2586,6 @@
2636
2586
  "interactive",
2637
2587
  "secondary"
2638
2588
  ]
2639
- },
2640
- "disabled": {
2641
- "value": {
2642
- "r": 0.6588235294117647,
2643
- "g": 0.6666666666666666,
2644
- "b": 0.6745098039215687
2645
- },
2646
- "filePath": "tokens/colors/themes/navy.json",
2647
- "isSource": true,
2648
- "original": {
2649
- "value": "{color.base.smoke.dark.value}"
2650
- },
2651
- "name": "navyInteractiveDisabled",
2652
- "attributes": {
2653
- "category": "color",
2654
- "type": "navy",
2655
- "item": "interactive",
2656
- "subitem": "disabled"
2657
- },
2658
- "path": [
2659
- "color",
2660
- "navy",
2661
- "interactive",
2662
- "disabled"
2663
- ]
2664
2589
  }
2665
2590
  },
2666
2591
  "background": {
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-tokens",
3
- "version": "6.0.0",
3
+ "version": "7.1.0-next.1",
4
4
  "description": "Design tokens for the Neptune Design System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
7
7
  "repository": {
8
+ "fullname": "transferwise/neptune-tokens",
8
9
  "type": "git",
9
10
  "url": "git+https://github.com/transferwise/neptune-tokens.git"
10
11
  },
@@ -21,9 +22,13 @@
21
22
  "postpublish": "git clean -fd"
22
23
  },
23
24
  "devDependencies": {
25
+ "@semantic-release/changelog": "^5.0.1",
26
+ "@semantic-release/git": "^9.0.1",
27
+ "@semantic-release/npm": "^7.1.3",
24
28
  "chroma-js": "^2.1.2",
25
29
  "prettier": "^2.3.2",
26
- "style-dictionary": "^3.0.1",
27
- "release-to-github-with-changelog": "^1.2.4"
30
+ "release-to-github-with-changelog": "^1.2.4",
31
+ "semantic-release": "^17.4.7",
32
+ "style-dictionary": "^3.0.1"
28
33
  }
29
34
  }
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ * Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
  */
5
5
 
6
6
  .np-theme-dark {
7
7
  --color-content-primary: #e2e6e8;
8
8
  --color-content-secondary: #c9cbce;
9
+ --color-content-tertiary: #a8aaac;
9
10
  --color-content-accent: #00b9ff;
10
11
  --color-content-accent-hover: #00a6ea;
11
12
  --color-content-accent-active: #0097db;
@@ -18,7 +19,6 @@
18
19
  --color-content-warning: #ffd184;
19
20
  --color-content-warning-hover: #e9bd71;
20
21
  --color-content-warning-active: #daae63;
21
- --color-content-disabled: #a8aaac;
22
22
  --color-interactive-accent: #00a2dd;
23
23
  --color-interactive-accent-hover: #008fc9;
24
24
  --color-interactive-accent-active: #0081ba;
@@ -34,7 +34,6 @@
34
34
  --color-interactive-secondary: #a8aaac;
35
35
  --color-interactive-secondary-hover: #959799;
36
36
  --color-interactive-secondary-active: #87898b;
37
- --color-interactive-disabled: #a8aaac;
38
37
  --color-background-screen: #181818;
39
38
  --color-background-elevated: #202020;
40
39
  --color-background-neutral: #86a7bd1a;
@@ -71,13 +70,29 @@
71
70
  --font-size-14: 0.875rem;
72
71
  --font-size-16: 1rem;
73
72
  --font-size-20: 1.25rem;
73
+ --font-size-22: 1.375rem;
74
74
  --font-size-26: 1.625rem;
75
+ --font-size-30: 1.75rem;
75
76
  --font-size-32: 2rem;
77
+ --letter-spacing-size-1: 0.01;
78
+ --letter-spacing-size-2: 0.02;
79
+ --letter-spacing-size-0.5: 0.005;
80
+ --letter-spacing-size-1.25: 0.0125;
81
+ --letter-spacing-size-1.5: 0.015;
82
+ --letter-spacing-size-2.5: 0.025;
83
+ --letter-spacing-size-1: -0.01;
84
+ --letter-spacing-size-2: -0.02;
85
+ --letter-spacing-size-0.5: -0.005;
86
+ --letter-spacing-size-1.25: -0.0125;
87
+ --letter-spacing-size-1.5: -0.015;
88
+ --letter-spacing-size-2.5: -0.025;
76
89
  --line-height-title: 1.2;
77
90
  --line-height-body: 1.5;
78
91
  --line-height-control: 1.2;
79
- --font-weight-regular: 500;
92
+ --font-weight-light: 300;
93
+ --font-weight-regular: 400;
94
+ --font-weight-medium: 500;
80
95
  --font-weight-semi-bold: 600;
81
96
  --font-weight-bold: 800;
82
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
97
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
83
98
  }
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ // Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
 
5
5
  @color-content-primary: #e2e6e8;
6
6
  @color-content-secondary: #c9cbce;
7
+ @color-content-tertiary: #a8aaac;
7
8
  @color-content-accent: #00b9ff;
8
9
  @color-content-accent-hover: #00a6ea;
9
10
  @color-content-accent-active: #0097db;
@@ -16,7 +17,6 @@
16
17
  @color-content-warning: #ffd184;
17
18
  @color-content-warning-hover: #e9bd71;
18
19
  @color-content-warning-active: #daae63;
19
- @color-content-disabled: #a8aaac;
20
20
  @color-interactive-accent: #00a2dd;
21
21
  @color-interactive-accent-hover: #008fc9;
22
22
  @color-interactive-accent-active: #0081ba;
@@ -32,7 +32,6 @@
32
32
  @color-interactive-secondary: #a8aaac;
33
33
  @color-interactive-secondary-hover: #959799;
34
34
  @color-interactive-secondary-active: #87898b;
35
- @color-interactive-disabled: #a8aaac;
36
35
  @color-background-screen: #181818;
37
36
  @color-background-elevated: #202020;
38
37
  @color-background-neutral: #86a7bd1a;
@@ -69,12 +68,28 @@
69
68
  @font-size-14: 0.875rem;
70
69
  @font-size-16: 1rem;
71
70
  @font-size-20: 1.25rem;
71
+ @font-size-22: 1.375rem;
72
72
  @font-size-26: 1.625rem;
73
+ @font-size-30: 1.75rem;
73
74
  @font-size-32: 2rem;
75
+ @letter-spacing-size-1: 0.01;
76
+ @letter-spacing-size-2: 0.02;
77
+ @letter-spacing-size-0.5: 0.005;
78
+ @letter-spacing-size-1.25: 0.0125;
79
+ @letter-spacing-size-1.5: 0.015;
80
+ @letter-spacing-size-2.5: 0.025;
81
+ @letter-spacing-size-1: -0.01;
82
+ @letter-spacing-size-2: -0.02;
83
+ @letter-spacing-size-0.5: -0.005;
84
+ @letter-spacing-size-1.25: -0.0125;
85
+ @letter-spacing-size-1.5: -0.015;
86
+ @letter-spacing-size-2.5: -0.025;
74
87
  @line-height-title: 1.2;
75
88
  @line-height-body: 1.5;
76
89
  @line-height-control: 1.2;
77
- @font-weight-regular: 500;
90
+ @font-weight-light: 300;
91
+ @font-weight-regular: 400;
92
+ @font-weight-medium: 500;
78
93
  @font-weight-semi-bold: 600;
79
94
  @font-weight-bold: 800;
80
- @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
95
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ * Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
  */
5
5
 
6
6
  .np-theme-light {
7
7
  --color-content-primary: #37517e;
8
8
  --color-content-secondary: #5d7079;
9
+ --color-content-tertiary: #768e9c;
9
10
  --color-content-accent: #0097c7;
10
11
  --color-content-accent-hover: #0084b3;
11
12
  --color-content-accent-active: #0077a5;
@@ -18,7 +19,6 @@
18
19
  --color-content-warning: #9a6500;
19
20
  --color-content-warning-hover: #855400;
20
21
  --color-content-warning-active: #764700;
21
- --color-content-disabled: #a8aaac;
22
22
  --color-interactive-accent: #00a2dd;
23
23
  --color-interactive-accent-hover: #008fc9;
24
24
  --color-interactive-accent-active: #0081ba;
@@ -34,7 +34,6 @@
34
34
  --color-interactive-secondary: #c9cbce;
35
35
  --color-interactive-secondary-hover: #b5b7ba;
36
36
  --color-interactive-secondary-active: #a7a9ab;
37
- --color-interactive-disabled: #a8aaac;
38
37
  --color-background-screen: #ffffff;
39
38
  --color-background-elevated: #ffffff;
40
39
  --color-background-neutral: #86a7bd1a;
@@ -71,13 +70,29 @@
71
70
  --font-size-14: 0.875rem;
72
71
  --font-size-16: 1rem;
73
72
  --font-size-20: 1.25rem;
73
+ --font-size-22: 1.375rem;
74
74
  --font-size-26: 1.625rem;
75
+ --font-size-30: 1.75rem;
75
76
  --font-size-32: 2rem;
77
+ --letter-spacing-size-1: 0.01;
78
+ --letter-spacing-size-2: 0.02;
79
+ --letter-spacing-size-0.5: 0.005;
80
+ --letter-spacing-size-1.25: 0.0125;
81
+ --letter-spacing-size-1.5: 0.015;
82
+ --letter-spacing-size-2.5: 0.025;
83
+ --letter-spacing-size-1: -0.01;
84
+ --letter-spacing-size-2: -0.02;
85
+ --letter-spacing-size-0.5: -0.005;
86
+ --letter-spacing-size-1.25: -0.0125;
87
+ --letter-spacing-size-1.5: -0.015;
88
+ --letter-spacing-size-2.5: -0.025;
76
89
  --line-height-title: 1.2;
77
90
  --line-height-body: 1.5;
78
91
  --line-height-control: 1.2;
79
- --font-weight-regular: 500;
92
+ --font-weight-light: 300;
93
+ --font-weight-regular: 400;
94
+ --font-weight-medium: 500;
80
95
  --font-weight-semi-bold: 600;
81
96
  --font-weight-bold: 800;
82
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
97
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
83
98
  }
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ // Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
 
5
5
  @color-content-primary: #37517e;
6
6
  @color-content-secondary: #5d7079;
7
+ @color-content-tertiary: #768e9c;
7
8
  @color-content-accent: #0097c7;
8
9
  @color-content-accent-hover: #0084b3;
9
10
  @color-content-accent-active: #0077a5;
@@ -16,7 +17,6 @@
16
17
  @color-content-warning: #9a6500;
17
18
  @color-content-warning-hover: #855400;
18
19
  @color-content-warning-active: #764700;
19
- @color-content-disabled: #a8aaac;
20
20
  @color-interactive-accent: #00a2dd;
21
21
  @color-interactive-accent-hover: #008fc9;
22
22
  @color-interactive-accent-active: #0081ba;
@@ -32,7 +32,6 @@
32
32
  @color-interactive-secondary: #c9cbce;
33
33
  @color-interactive-secondary-hover: #b5b7ba;
34
34
  @color-interactive-secondary-active: #a7a9ab;
35
- @color-interactive-disabled: #a8aaac;
36
35
  @color-background-screen: #ffffff;
37
36
  @color-background-elevated: #ffffff;
38
37
  @color-background-neutral: #86a7bd1a;
@@ -69,12 +68,28 @@
69
68
  @font-size-14: 0.875rem;
70
69
  @font-size-16: 1rem;
71
70
  @font-size-20: 1.25rem;
71
+ @font-size-22: 1.375rem;
72
72
  @font-size-26: 1.625rem;
73
+ @font-size-30: 1.75rem;
73
74
  @font-size-32: 2rem;
75
+ @letter-spacing-size-1: 0.01;
76
+ @letter-spacing-size-2: 0.02;
77
+ @letter-spacing-size-0.5: 0.005;
78
+ @letter-spacing-size-1.25: 0.0125;
79
+ @letter-spacing-size-1.5: 0.015;
80
+ @letter-spacing-size-2.5: 0.025;
81
+ @letter-spacing-size-1: -0.01;
82
+ @letter-spacing-size-2: -0.02;
83
+ @letter-spacing-size-0.5: -0.005;
84
+ @letter-spacing-size-1.25: -0.0125;
85
+ @letter-spacing-size-1.5: -0.015;
86
+ @letter-spacing-size-2.5: -0.025;
74
87
  @line-height-title: 1.2;
75
88
  @line-height-body: 1.5;
76
89
  @line-height-control: 1.2;
77
- @font-weight-regular: 500;
90
+ @font-weight-light: 300;
91
+ @font-weight-regular: 400;
92
+ @font-weight-medium: 500;
78
93
  @font-weight-semi-bold: 600;
79
94
  @font-weight-bold: 800;
80
- @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
95
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ * Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
  */
5
5
 
6
6
  .np-theme-navy {
7
7
  --color-content-primary: #ffffff;
8
8
  --color-content-secondary: #c9cbce;
9
+ --color-content-tertiary: #a8aaac;
9
10
  --color-content-accent: #00b9ff;
10
11
  --color-content-accent-hover: #00a6ea;
11
12
  --color-content-accent-active: #0097db;
@@ -18,7 +19,6 @@
18
19
  --color-content-warning: #ffd184;
19
20
  --color-content-warning-hover: #e9bd71;
20
21
  --color-content-warning-active: #daae63;
21
- --color-content-disabled: #a8aaac;
22
22
  --color-interactive-accent: #00a2dd;
23
23
  --color-interactive-accent-hover: #008fc9;
24
24
  --color-interactive-accent-active: #0081ba;
@@ -34,7 +34,6 @@
34
34
  --color-interactive-secondary: #a8aaac;
35
35
  --color-interactive-secondary-hover: #959799;
36
36
  --color-interactive-secondary-active: #87898b;
37
- --color-interactive-disabled: #a8aaac;
38
37
  --color-background-screen: #2e4369;
39
38
  --color-background-elevated: #37517e;
40
39
  --color-background-neutral: #86a7bd1a;
@@ -71,13 +70,29 @@
71
70
  --font-size-14: 0.875rem;
72
71
  --font-size-16: 1rem;
73
72
  --font-size-20: 1.25rem;
73
+ --font-size-22: 1.375rem;
74
74
  --font-size-26: 1.625rem;
75
+ --font-size-30: 1.75rem;
75
76
  --font-size-32: 2rem;
77
+ --letter-spacing-size-1: 0.01;
78
+ --letter-spacing-size-2: 0.02;
79
+ --letter-spacing-size-0.5: 0.005;
80
+ --letter-spacing-size-1.25: 0.0125;
81
+ --letter-spacing-size-1.5: 0.015;
82
+ --letter-spacing-size-2.5: 0.025;
83
+ --letter-spacing-size-1: -0.01;
84
+ --letter-spacing-size-2: -0.02;
85
+ --letter-spacing-size-0.5: -0.005;
86
+ --letter-spacing-size-1.25: -0.0125;
87
+ --letter-spacing-size-1.5: -0.015;
88
+ --letter-spacing-size-2.5: -0.025;
76
89
  --line-height-title: 1.2;
77
90
  --line-height-body: 1.5;
78
91
  --line-height-control: 1.2;
79
- --font-weight-regular: 500;
92
+ --font-weight-light: 300;
93
+ --font-weight-regular: 400;
94
+ --font-weight-medium: 500;
80
95
  --font-weight-semi-bold: 600;
81
96
  --font-weight-bold: 800;
82
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
97
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
83
98
  }
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ // Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
 
5
5
  @color-content-primary: #ffffff;
6
6
  @color-content-secondary: #c9cbce;
7
+ @color-content-tertiary: #a8aaac;
7
8
  @color-content-accent: #00b9ff;
8
9
  @color-content-accent-hover: #00a6ea;
9
10
  @color-content-accent-active: #0097db;
@@ -16,7 +17,6 @@
16
17
  @color-content-warning: #ffd184;
17
18
  @color-content-warning-hover: #e9bd71;
18
19
  @color-content-warning-active: #daae63;
19
- @color-content-disabled: #a8aaac;
20
20
  @color-interactive-accent: #00a2dd;
21
21
  @color-interactive-accent-hover: #008fc9;
22
22
  @color-interactive-accent-active: #0081ba;
@@ -32,7 +32,6 @@
32
32
  @color-interactive-secondary: #a8aaac;
33
33
  @color-interactive-secondary-hover: #959799;
34
34
  @color-interactive-secondary-active: #87898b;
35
- @color-interactive-disabled: #a8aaac;
36
35
  @color-background-screen: #2e4369;
37
36
  @color-background-elevated: #37517e;
38
37
  @color-background-neutral: #86a7bd1a;
@@ -69,12 +68,28 @@
69
68
  @font-size-14: 0.875rem;
70
69
  @font-size-16: 1rem;
71
70
  @font-size-20: 1.25rem;
71
+ @font-size-22: 1.375rem;
72
72
  @font-size-26: 1.625rem;
73
+ @font-size-30: 1.75rem;
73
74
  @font-size-32: 2rem;
75
+ @letter-spacing-size-1: 0.01;
76
+ @letter-spacing-size-2: 0.02;
77
+ @letter-spacing-size-0.5: 0.005;
78
+ @letter-spacing-size-1.25: 0.0125;
79
+ @letter-spacing-size-1.5: 0.015;
80
+ @letter-spacing-size-2.5: 0.025;
81
+ @letter-spacing-size-1: -0.01;
82
+ @letter-spacing-size-2: -0.02;
83
+ @letter-spacing-size-0.5: -0.005;
84
+ @letter-spacing-size-1.25: -0.0125;
85
+ @letter-spacing-size-1.5: -0.015;
86
+ @letter-spacing-size-2.5: -0.025;
74
87
  @line-height-title: 1.2;
75
88
  @line-height-body: 1.5;
76
89
  @line-height-control: 1.2;
77
- @font-weight-regular: 500;
90
+ @font-weight-light: 300;
91
+ @font-weight-regular: 400;
92
+ @font-weight-medium: 500;
78
93
  @font-weight-semi-bold: 600;
79
94
  @font-weight-bold: 800;
80
- @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
95
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
package/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ * Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --color-content-primary: #37517e;
8
8
  --color-content-secondary: #5d7079;
9
+ --color-content-tertiary: #768e9c;
9
10
  --color-content-accent: #0097c7;
10
11
  --color-content-accent-hover: #0084b3;
11
12
  --color-content-accent-active: #0077a5;
@@ -18,7 +19,6 @@
18
19
  --color-content-warning: #9a6500;
19
20
  --color-content-warning-hover: #855400;
20
21
  --color-content-warning-active: #764700;
21
- --color-content-disabled: #a8aaac;
22
22
  --color-interactive-accent: #00a2dd;
23
23
  --color-interactive-accent-hover: #008fc9;
24
24
  --color-interactive-accent-active: #0081ba;
@@ -34,7 +34,6 @@
34
34
  --color-interactive-secondary: #c9cbce;
35
35
  --color-interactive-secondary-hover: #b5b7ba;
36
36
  --color-interactive-secondary-active: #a7a9ab;
37
- --color-interactive-disabled: #a8aaac;
38
37
  --color-background-screen: #ffffff;
39
38
  --color-background-elevated: #ffffff;
40
39
  --color-background-neutral: #86a7bd1a;
@@ -71,13 +70,29 @@
71
70
  --font-size-14: 0.875rem;
72
71
  --font-size-16: 1rem;
73
72
  --font-size-20: 1.25rem;
73
+ --font-size-22: 1.375rem;
74
74
  --font-size-26: 1.625rem;
75
+ --font-size-30: 1.75rem;
75
76
  --font-size-32: 2rem;
77
+ --letter-spacing-size-1: 0.01;
78
+ --letter-spacing-size-2: 0.02;
79
+ --letter-spacing-size-0.5: 0.005;
80
+ --letter-spacing-size-1.25: 0.0125;
81
+ --letter-spacing-size-1.5: 0.015;
82
+ --letter-spacing-size-2.5: 0.025;
83
+ --letter-spacing-negative-size-1: -0.01;
84
+ --letter-spacing-negative-size-2: -0.02;
85
+ --letter-spacing-negative-size-0.5: -0.005;
86
+ --letter-spacing-negative-size-1.25: -0.0125;
87
+ --letter-spacing-negative-size-1.5: -0.015;
88
+ --letter-spacing-negative-size-2.5: -0.025;
76
89
  --line-height-title: 1.2;
77
90
  --line-height-body: 1.5;
78
91
  --line-height-control: 1.2;
79
- --font-weight-regular: 500;
92
+ --font-weight: 300;
93
+ --font-weight-regular: 400;
94
+ --font-weight-medium: 500;
80
95
  --font-weight-semi-bold: 600;
81
96
  --font-weight-bold: 800;
82
- --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
97
+ --font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
83
98
  }
package/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 24 Nov 2021 13:23:31 GMT
3
+ // Generated on Tue, 12 Jul 2022 17:27:06 GMT
4
4
 
5
5
  @color-dark-content-primary: #e2e6e8;
6
6
  @color-dark-content-secondary: #c9cbce;
7
+ @color-dark-content-tertiary: #a8aaac;
7
8
  @color-dark-content-accent: #00b9ff;
8
9
  @color-dark-content-accent-hover: #00a6ea;
9
10
  @color-dark-content-accent-active: #0097db;
@@ -16,7 +17,6 @@
16
17
  @color-dark-content-warning: #ffd184;
17
18
  @color-dark-content-warning-hover: #e9bd71;
18
19
  @color-dark-content-warning-active: #daae63;
19
- @color-dark-content-disabled: #a8aaac;
20
20
  @color-dark-interactive-accent: #00a2dd;
21
21
  @color-dark-interactive-accent-hover: #008fc9;
22
22
  @color-dark-interactive-accent-active: #0081ba;
@@ -32,7 +32,6 @@
32
32
  @color-dark-interactive-secondary: #a8aaac;
33
33
  @color-dark-interactive-secondary-hover: #959799;
34
34
  @color-dark-interactive-secondary-active: #87898b;
35
- @color-dark-interactive-disabled: #a8aaac;
36
35
  @color-dark-background-screen: #181818;
37
36
  @color-dark-background-elevated: #202020;
38
37
  @color-dark-background-neutral: #86a7bd1a;
@@ -46,6 +45,7 @@
46
45
  @color-dark-core-contrast: #ffffff;
47
46
  @color-content-primary: #37517e;
48
47
  @color-content-secondary: #5d7079;
48
+ @color-content-tertiary: #768e9c;
49
49
  @color-content-accent: #0097c7;
50
50
  @color-content-accent-hover: #0084b3;
51
51
  @color-content-accent-active: #0077a5;
@@ -58,7 +58,6 @@
58
58
  @color-content-warning: #9a6500;
59
59
  @color-content-warning-hover: #855400;
60
60
  @color-content-warning-active: #764700;
61
- @color-content-disabled: #a8aaac;
62
61
  @color-interactive-accent: #00a2dd;
63
62
  @color-interactive-accent-hover: #008fc9;
64
63
  @color-interactive-accent-active: #0081ba;
@@ -74,7 +73,6 @@
74
73
  @color-interactive-secondary: #c9cbce;
75
74
  @color-interactive-secondary-hover: #b5b7ba;
76
75
  @color-interactive-secondary-active: #a7a9ab;
77
- @color-interactive-disabled: #a8aaac;
78
76
  @color-background-screen: #ffffff;
79
77
  @color-background-elevated: #ffffff;
80
78
  @color-background-neutral: #86a7bd1a;
@@ -88,6 +86,7 @@
88
86
  @color-core-contrast: #000000;
89
87
  @color-navy-content-primary: #ffffff;
90
88
  @color-navy-content-secondary: #c9cbce;
89
+ @color-navy-content-tertiary: #a8aaac;
91
90
  @color-navy-content-accent: #00b9ff;
92
91
  @color-navy-content-accent-hover: #00a6ea;
93
92
  @color-navy-content-accent-active: #0097db;
@@ -100,7 +99,6 @@
100
99
  @color-navy-content-warning: #ffd184;
101
100
  @color-navy-content-warning-hover: #e9bd71;
102
101
  @color-navy-content-warning-active: #daae63;
103
- @color-navy-content-disabled: #a8aaac;
104
102
  @color-navy-interactive-accent: #00a2dd;
105
103
  @color-navy-interactive-accent-hover: #008fc9;
106
104
  @color-navy-interactive-accent-active: #0081ba;
@@ -116,7 +114,6 @@
116
114
  @color-navy-interactive-secondary: #a8aaac;
117
115
  @color-navy-interactive-secondary-hover: #959799;
118
116
  @color-navy-interactive-secondary-active: #87898b;
119
- @color-navy-interactive-disabled: #a8aaac;
120
117
  @color-navy-background-screen: #2e4369;
121
118
  @color-navy-background-elevated: #37517e;
122
119
  @color-navy-background-neutral: #86a7bd1a;
@@ -153,12 +150,28 @@
153
150
  @font-size-14: 0.875rem;
154
151
  @font-size-16: 1rem;
155
152
  @font-size-20: 1.25rem;
153
+ @font-size-22: 1.375rem;
156
154
  @font-size-26: 1.625rem;
155
+ @font-size-30: 1.75rem;
157
156
  @font-size-32: 2rem;
157
+ @letter-spacing-size-1: 0.01;
158
+ @letter-spacing-size-2: 0.02;
159
+ @letter-spacing-size-0.5: 0.005;
160
+ @letter-spacing-size-1.25: 0.0125;
161
+ @letter-spacing-size-1.5: 0.015;
162
+ @letter-spacing-size-2.5: 0.025;
163
+ @letter-spacing-negative-size-1: -0.01;
164
+ @letter-spacing-negative-size-2: -0.02;
165
+ @letter-spacing-negative-size-0.5: -0.005;
166
+ @letter-spacing-negative-size-1.25: -0.0125;
167
+ @letter-spacing-negative-size-1.5: -0.015;
168
+ @letter-spacing-negative-size-2.5: -0.025;
158
169
  @line-height-title: 1.2;
159
170
  @line-height-body: 1.5;
160
171
  @line-height-control: 1.2;
161
- @font-weight-regular: 500;
172
+ @font-weight: 300;
173
+ @font-weight-regular: 400;
174
+ @font-weight-medium: 500;
162
175
  @font-weight-semi-bold: 600;
163
176
  @font-weight-bold: 800;
164
- @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
177
+ @font-family-regular: 'Inter', sans-serif, Helvetica, Arial, sans-serif;
package/CHANGELOG.md DELETED
@@ -1,32 +0,0 @@
1
- # v6.0.0
2
-
3
- ## Remove themed CSS custom properties (variables) from :root
4
-
5
- To avoid further confusion with our upcoming theming changes, we are dropping the color theme name from CSS variables assigned to the `:root` pseudo-class.
6
-
7
- # v5.1.0
8
-
9
- ## Add font-family token
10
-
11
- # v5.0.0
12
-
13
- ## Add Navy color tokens to default bundle
14
-
15
- Navy tokens added with `-navy-` part in file, e.g
16
-
17
- ```css
18
- --color-navy-content-primary: #...;
19
- --color-navy-content-secondary: #...;
20
- ```
21
-
22
- ## and make path to default bundle same as in v1 (breaking change)
23
-
24
- ```css
25
- // old
26
- @import "@transferwise/neptune-tokens/themes/default/tokens.css";
27
-
28
- // new
29
- @import "@transferwise/neptune-tokens/tokens.css";
30
- ```
31
-
32
- This is necessary because most people still use v1 and it will be less of a breaking change in upcoming Neptune release with new colors.