@transferwise/neptune-tokens 5.0.0 → 7.0.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +29 -8
  2. package/colors-base.css +2 -2
  3. package/colors-base.less +2 -2
  4. package/colors.json +79 -154
  5. package/package.json +1 -1
  6. package/themes/dark/tokens.css +3 -3
  7. package/themes/dark/tokens.less +4 -4
  8. package/themes/light/tokens.css +3 -3
  9. package/themes/light/tokens.less +4 -4
  10. package/themes/navy/tokens.css +3 -3
  11. package/themes/navy/tokens.less +4 -4
  12. package/tokens.css +3 -45
  13. package/tokens.less +46 -6
package/CHANGELOG.md CHANGED
@@ -1,23 +1,44 @@
1
+ # v7.0.0
2
+
3
+ ## Remove disabled colour tokens
4
+
5
+ Disabled colours were simulating transparency and desaturation, and were encouraging us to create a larger palette than we needed, and more prone to mistakes. We're now removing those tokens and encouraging consumers to use opacity and blend modes to achieve the same effect.
6
+
7
+ # v6.1.0
8
+
9
+ ## Add tertiary content token
10
+
11
+ We're adding a new tertiary content token for text that should be deemphasised further than secondary, like placeholders in inputs and inactive components.
12
+
13
+ # v6.0.0
14
+
15
+ ## Remove themed CSS custom properties (variables) from :root
16
+
17
+ 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.
18
+
19
+ # v5.1.0
20
+
21
+ ## Add font-family token
22
+
1
23
  # v5.0.0
2
24
 
3
25
  ## Add Navy color tokens to default bundle
4
26
 
5
- Navy tokens addes with `-navy-` part in file, e.g
27
+ Navy tokens added with `-navy-` part in file, e.g
6
28
 
7
29
  ```css
8
- --color-navy-content-primary: #...;
9
- --color-navy-content-secondary: #...;
30
+ --color-navy-content-primary: #...;
31
+ --color-navy-content-secondary: #...;
10
32
  ```
11
33
 
12
-
13
34
  ## and make path to default bundle same as in v1 (breaking change)
14
35
 
15
- ```js
36
+ ```css
16
37
  // old
17
- @transferwise/neptune-tokens/themes/default/tokens.css
38
+ @import "@transferwise/neptune-tokens/themes/default/tokens.css";
18
39
 
19
40
  // new
20
- @transferwise/neptune-tokens/tokens.css
41
+ @import "@transferwise/neptune-tokens/tokens.css";
21
42
  ```
22
43
 
23
- 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.
44
+ 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.
package/colors-base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ * Generated on Mon, 17 Jan 2022 12:49:22 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 Thu, 11 Nov 2021 16:13:36 GMT
3
+ // Generated on Mon, 17 Jan 2022 12:49:22 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,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-tokens",
3
- "version": "5.0.0",
3
+ "version": "7.0.0",
4
4
  "description": "Design tokens for the Neptune Design System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
package/themes/dark/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ * Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -79,4 +78,5 @@
79
78
  --font-weight-regular: 500;
80
79
  --font-weight-semi-bold: 600;
81
80
  --font-weight-bold: 800;
81
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
82
  }
package/themes/dark/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ // Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -76,4 +75,5 @@
76
75
  @line-height-control: 1.2;
77
76
  @font-weight-regular: 500;
78
77
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
78
+ @font-weight-bold: 800;
79
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/themes/light/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ * Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -79,4 +78,5 @@
79
78
  --font-weight-regular: 500;
80
79
  --font-weight-semi-bold: 600;
81
80
  --font-weight-bold: 800;
81
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
82
  }
package/themes/light/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ // Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -76,4 +75,5 @@
76
75
  @line-height-control: 1.2;
77
76
  @font-weight-regular: 500;
78
77
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
78
+ @font-weight-bold: 800;
79
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/themes/navy/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ * Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -79,4 +78,5 @@
79
78
  --font-weight-regular: 500;
80
79
  --font-weight-semi-bold: 600;
81
80
  --font-weight-bold: 800;
81
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
82
82
  }
package/themes/navy/tokens.less CHANGED
@@ -1,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ // Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -76,4 +75,5 @@
76
75
  @line-height-control: 1.2;
77
76
  @font-weight-regular: 500;
78
77
  @font-weight-semi-bold: 600;
79
- @font-weight-bold: 800;
78
+ @font-weight-bold: 800;
79
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
package/tokens.css CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ * Generated on Mon, 17 Jan 2022 12:49:22 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;
@@ -46,48 +45,6 @@
46
45
  --color-border-neutral: #0000001a;
47
46
  --color-border-overlay: #0000001a;
48
47
  --color-core-contrast: #000000;
49
- --color-navy-content-primary: #ffffff;
50
- --color-navy-content-secondary: #c9cbce;
51
- --color-navy-content-accent: #00b9ff;
52
- --color-navy-content-accent-hover: #00a6ea;
53
- --color-navy-content-accent-active: #0097db;
54
- --color-navy-content-positive: #6fd698;
55
- --color-navy-content-positive-hover: #5ac285;
56
- --color-navy-content-positive-active: #4bb377;
57
- --color-navy-content-negative: #ffa6a9;
58
- --color-navy-content-negative-hover: #ea9396;
59
- --color-navy-content-negative-active: #da8488;
60
- --color-navy-content-warning: #ffd184;
61
- --color-navy-content-warning-hover: #e9bd71;
62
- --color-navy-content-warning-active: #daae63;
63
- --color-navy-content-disabled: #a8aaac;
64
- --color-navy-interactive-accent: #00a2dd;
65
- --color-navy-interactive-accent-hover: #008fc9;
66
- --color-navy-interactive-accent-active: #0081ba;
67
- --color-navy-interactive-positive: #2ead4b;
68
- --color-navy-interactive-positive-hover: #069939;
69
- --color-navy-interactive-positive-active: #008b2b;
70
- --color-navy-interactive-negative: #e74848;
71
- --color-navy-interactive-negative-hover: #d03238;
72
- --color-navy-interactive-negative-active: #bf1e2c;
73
- --color-navy-interactive-warning: #df8700;
74
- --color-navy-interactive-warning-hover: #c97500;
75
- --color-navy-interactive-warning-active: #b86700;
76
- --color-navy-interactive-secondary: #a8aaac;
77
- --color-navy-interactive-secondary-hover: #959799;
78
- --color-navy-interactive-secondary-active: #87898b;
79
- --color-navy-interactive-disabled: #a8aaac;
80
- --color-navy-background-screen: #2e4369;
81
- --color-navy-background-elevated: #37517e;
82
- --color-navy-background-neutral: #86a7bd1a;
83
- --color-navy-background-accent: #38c8ff1a;
84
- --color-navy-background-positive: #36c7971a;
85
- --color-navy-background-negative: #ff87871a;
86
- --color-navy-background-warning: #ffac001a;
87
- --color-navy-background-overlay: #ffffff1a;
88
- --color-navy-border-neutral: #ffffff1a;
89
- --color-navy-border-overlay: #ffffff1a;
90
- --color-navy-core-contrast: #ffffff;
91
48
  --radius-small: 3px;
92
49
  --radius-medium: 10px;
93
50
  --size-4: 4px;
@@ -121,4 +78,5 @@
121
78
  --font-weight-regular: 500;
122
79
  --font-weight-semi-bold: 600;
123
80
  --font-weight-bold: 800;
81
+ --font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;
124
82
  }
package/tokens.less CHANGED
@@ -1,9 +1,51 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 11 Nov 2021 16:13:36 GMT
3
+ // Generated on Mon, 17 Jan 2022 12:49:22 GMT
4
4
 
5
+ @color-dark-content-primary: #e2e6e8;
6
+ @color-dark-content-secondary: #c9cbce;
7
+ @color-dark-content-tertiary: #a8aaac;
8
+ @color-dark-content-accent: #00b9ff;
9
+ @color-dark-content-accent-hover: #00a6ea;
10
+ @color-dark-content-accent-active: #0097db;
11
+ @color-dark-content-positive: #6fd698;
12
+ @color-dark-content-positive-hover: #5ac285;
13
+ @color-dark-content-positive-active: #4bb377;
14
+ @color-dark-content-negative: #ffa6a9;
15
+ @color-dark-content-negative-hover: #ea9396;
16
+ @color-dark-content-negative-active: #da8488;
17
+ @color-dark-content-warning: #ffd184;
18
+ @color-dark-content-warning-hover: #e9bd71;
19
+ @color-dark-content-warning-active: #daae63;
20
+ @color-dark-interactive-accent: #00a2dd;
21
+ @color-dark-interactive-accent-hover: #008fc9;
22
+ @color-dark-interactive-accent-active: #0081ba;
23
+ @color-dark-interactive-positive: #2ead4b;
24
+ @color-dark-interactive-positive-hover: #069939;
25
+ @color-dark-interactive-positive-active: #008b2b;
26
+ @color-dark-interactive-negative: #e74848;
27
+ @color-dark-interactive-negative-hover: #d03238;
28
+ @color-dark-interactive-negative-active: #bf1e2c;
29
+ @color-dark-interactive-warning: #df8700;
30
+ @color-dark-interactive-warning-hover: #c97500;
31
+ @color-dark-interactive-warning-active: #b86700;
32
+ @color-dark-interactive-secondary: #a8aaac;
33
+ @color-dark-interactive-secondary-hover: #959799;
34
+ @color-dark-interactive-secondary-active: #87898b;
35
+ @color-dark-background-screen: #181818;
36
+ @color-dark-background-elevated: #202020;
37
+ @color-dark-background-neutral: #86a7bd1a;
38
+ @color-dark-background-accent: #38c8ff1a;
39
+ @color-dark-background-positive: #36c7971a;
40
+ @color-dark-background-negative: #ff87871a;
41
+ @color-dark-background-warning: #ffac001a;
42
+ @color-dark-background-overlay: #ffffff1a;
43
+ @color-dark-border-neutral: #ffffff1a;
44
+ @color-dark-border-overlay: #ffffff1a;
45
+ @color-dark-core-contrast: #ffffff;
5
46
  @color-content-primary: #37517e;
6
47
  @color-content-secondary: #5d7079;
48
+ @color-content-tertiary: #768e9c;
7
49
  @color-content-accent: #0097c7;
8
50
  @color-content-accent-hover: #0084b3;
9
51
  @color-content-accent-active: #0077a5;
@@ -16,7 +58,6 @@
16
58
  @color-content-warning: #9a6500;
17
59
  @color-content-warning-hover: #855400;
18
60
  @color-content-warning-active: #764700;
19
- @color-content-disabled: #a8aaac;
20
61
  @color-interactive-accent: #00a2dd;
21
62
  @color-interactive-accent-hover: #008fc9;
22
63
  @color-interactive-accent-active: #0081ba;
@@ -32,7 +73,6 @@
32
73
  @color-interactive-secondary: #c9cbce;
33
74
  @color-interactive-secondary-hover: #b5b7ba;
34
75
  @color-interactive-secondary-active: #a7a9ab;
35
- @color-interactive-disabled: #a8aaac;
36
76
  @color-background-screen: #ffffff;
37
77
  @color-background-elevated: #ffffff;
38
78
  @color-background-neutral: #86a7bd1a;
@@ -46,6 +86,7 @@
46
86
  @color-core-contrast: #000000;
47
87
  @color-navy-content-primary: #ffffff;
48
88
  @color-navy-content-secondary: #c9cbce;
89
+ @color-navy-content-tertiary: #a8aaac;
49
90
  @color-navy-content-accent: #00b9ff;
50
91
  @color-navy-content-accent-hover: #00a6ea;
51
92
  @color-navy-content-accent-active: #0097db;
@@ -58,7 +99,6 @@
58
99
  @color-navy-content-warning: #ffd184;
59
100
  @color-navy-content-warning-hover: #e9bd71;
60
101
  @color-navy-content-warning-active: #daae63;
61
- @color-navy-content-disabled: #a8aaac;
62
102
  @color-navy-interactive-accent: #00a2dd;
63
103
  @color-navy-interactive-accent-hover: #008fc9;
64
104
  @color-navy-interactive-accent-active: #0081ba;
@@ -74,7 +114,6 @@
74
114
  @color-navy-interactive-secondary: #a8aaac;
75
115
  @color-navy-interactive-secondary-hover: #959799;
76
116
  @color-navy-interactive-secondary-active: #87898b;
77
- @color-navy-interactive-disabled: #a8aaac;
78
117
  @color-navy-background-screen: #2e4369;
79
118
  @color-navy-background-elevated: #37517e;
80
119
  @color-navy-background-neutral: #86a7bd1a;
@@ -118,4 +157,5 @@
118
157
  @line-height-control: 1.2;
119
158
  @font-weight-regular: 500;
120
159
  @font-weight-semi-bold: 600;
121
- @font-weight-bold: 800;
160
+ @font-weight-bold: 800;
161
+ @font-family-regular: Averta, Avenir W02, Avenir, Helvetica, Arial, sans-serif;