@ably/ui 8.7.0-dev.1e9479a → 8.7.0-dev.2b71529

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 (24) hide show
  1. package/core/FeaturedLink/component.css +1 -1
  2. package/core/Footer/component.css +3 -3
  3. package/core/Footer.jsx +13 -13
  4. package/core/Meganav/component.css +7 -7
  5. package/core/Meganav.jsx +3 -3
  6. package/core/MeganavContentPlatform.jsx +1 -1
  7. package/core/Notice/component.css +1 -1
  8. package/core/Notice.jsx +2 -2
  9. package/core/styles.css +50 -36
  10. package/package.json +1 -1
  11. package/src/core/FeaturedLink/component.css +1 -1
  12. package/src/core/Footer/component.css +3 -3
  13. package/src/core/Footer/component.html.erb +13 -13
  14. package/src/core/Footer/component.jsx +13 -13
  15. package/src/core/Meganav/component.css +7 -7
  16. package/src/core/MeganavContentPlatform/component.html.erb +1 -1
  17. package/src/core/MeganavContentPlatform/component.jsx +1 -1
  18. package/src/core/Notice/component.css +1 -1
  19. package/src/core/Notice/component.html.erb +2 -2
  20. package/src/core/Notice/component.jsx +2 -2
  21. package/src/core/styles/forms.css +5 -5
  22. package/src/core/styles/properties.css +26 -16
  23. package/src/core/styles/text.css +19 -15
  24. package/tailwind.config.js +34 -26
package/core/FeaturedLink/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-featured-link {
3
- @apply font-sans font-medium block;
3
+ @apply font-manrope font-bold block;
4
4
  @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
5
  }
6
6
 
package/core/Footer/component.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
3
+ @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
7
+ @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
package/core/Footer.jsx CHANGED
@@ -188,7 +188,7 @@ function Footer(_ref) {
188
188
  };
189
189
 
190
190
  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("footer", {
191
- className: "bg-light-grey font-sans antialiased",
191
+ className: "bg-light-grey font-manrope antialiased leading-normal",
192
192
  "data-id": "footer"
193
193
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
194
194
  className: "max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
@@ -201,11 +201,11 @@ function Footer(_ref) {
201
201
  src: paths.ablyStack,
202
202
  alt: "Ably homepage"
203
203
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
204
- className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
204
+ className: "text-overline2 font-jetbrains_mono font-bold col-span-full uppercase tracking-widen-0.16"
205
205
  }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
206
206
  className: "md:col-span-4 md:w-3/4 xs:w-3/5 w-full"
207
207
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
208
- className: "text-p3 py-16 font-medium p-menu-row-snug"
208
+ className: "font-manrope text-p3 py-16 font-bold p-menu-row-snug"
209
209
  }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
210
210
  className: "grid grid-cols-1"
211
211
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -465,7 +465,7 @@ function Footer(_ref) {
465
465
  name: "glassdoor",
466
466
  size: "1.5rem"
467
467
  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
468
- className: "pl-16 text-menu3 font-light"
468
+ className: "pl-16 text-menu3 font-manrope font-medium"
469
469
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
470
470
  className: "block font-medium"
471
471
  }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -485,7 +485,7 @@ function Footer(_ref) {
485
485
  name: "glassdoor",
486
486
  size: "1.5rem"
487
487
  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
488
- className: "text-menu3 font-light"
488
+ className: "text-menu3 font-manrope font-medium"
489
489
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
490
490
  className: "block font-medium"
491
491
  }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -537,9 +537,9 @@ function Footer(_ref) {
537
537
  size: "1.5rem",
538
538
  additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
539
539
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
540
- className: "ui-footer-compliance-text font-medium whitespace-nowrap"
540
+ className: "ui-footer-compliance-text font-bold whitespace-nowrap"
541
541
  }, "SOC 2 Type 2"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
542
- className: "ui-footer-compliance-text font-light mb-24"
542
+ className: "ui-footer-compliance-text font-medium mb-24"
543
543
  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
544
544
  className: "flex mr-24 md:col-start-2"
545
545
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
@@ -548,9 +548,9 @@ function Footer(_ref) {
548
548
  size: "1.5rem",
549
549
  additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
550
550
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
551
- className: "ui-footer-compliance-text font-medium whitespace-nowrap"
551
+ className: "ui-footer-compliance-text font-bold whitespace-nowrap"
552
552
  }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
553
- className: "ui-footer-compliance-text font-light mb-24"
553
+ className: "ui-footer-compliance-text font-medium mb-24"
554
554
  }, "Compliant"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
555
555
  className: "flex mr-24 md:col-start-3"
556
556
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
@@ -559,9 +559,9 @@ function Footer(_ref) {
559
559
  size: "1.5rem",
560
560
  additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
561
561
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
562
- className: "ui-footer-compliance-text font-medium whitespace-nowrap"
562
+ className: "ui-footer-compliance-text font-bold whitespace-nowrap"
563
563
  }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
564
- className: "ui-footer-compliance-text font-light mb-24"
564
+ className: "ui-footer-compliance-text font-medium mb-24"
565
565
  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
566
566
  className: "flex mr-24 md:col-start-4"
567
567
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
@@ -570,9 +570,9 @@ function Footer(_ref) {
570
570
  size: "1.5rem",
571
571
  additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
572
572
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
573
- className: "ui-footer-compliance-text font-medium whitespace-nowrap"
573
+ className: "ui-footer-compliance-text font-bold whitespace-nowrap"
574
574
  }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
575
- className: "ui-footer-compliance-text font-light mb-24"
575
+ className: "ui-footer-compliance-text font-medium mb-24"
576
576
  }, "Encryption"))))));
577
577
  }
578
578
  Footer.propTypes = {
package/core/Meganav/component.css CHANGED
@@ -7,7 +7,7 @@
7
7
  z-index: var(--stacking-context-page-meganav);
8
8
 
9
9
  @apply fixed top-0 w-full;
10
- @apply antialiased font-sans transition-colors;
10
+ @apply antialiased font-manrope transition-colors;
11
11
  }
12
12
 
13
13
  .ui-meganav {
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-meganav-link {
54
- @apply text-menu2 font-medium block;
54
+ @apply text-menu2 font-bold block font-manrope;
55
55
  @apply mr-12 lg:mr-24 px-0 py-20;
56
56
  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
57
57
  @apply transition-colors;
@@ -63,13 +63,13 @@
63
63
 
64
64
  .ui-meganav-mobile-link {
65
65
  @apply p-menu-row relative -left-8 w-extend-8;
66
- @apply text-menu2 font-medium block text-cool-black text-left;
66
+ @apply text-menu2 font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
67
67
  @apply flex items-center;
68
68
  @apply focus:text-gui-focus focus:outline-none;
69
69
  }
70
70
 
71
71
  .ui-meganav-account-link {
72
- @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
72
+ @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-jetbrains_mono;
73
73
  }
74
74
 
75
75
  .ui-meganav-content {
@@ -97,15 +97,15 @@
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
100
- @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
100
+ @apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
101
101
  }
102
102
 
103
103
  .ui-meganav-media-copy {
104
- @apply text-p3 text-dark-grey font-light;
104
+ @apply text-p3 font-manrope font-medium text-dark-grey leading-normal;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
108
- @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
108
+ @apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
109
109
  }
110
110
 
111
111
  .ui-meganav-hr {
package/core/Meganav.jsx CHANGED
@@ -1123,7 +1123,7 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
1123
1123
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
1124
1124
  className: "ui-meganav-overline ml-24"
1125
1125
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1126
- className: "text-p2 font-medium text-cool-black mb-24",
1126
+ className: "text-p2 font-bold text-cool-black mb-24 leading-normal",
1127
1127
  style: {
1128
1128
  maxWidth: "330px"
1129
1129
  }
@@ -2341,7 +2341,7 @@ var Icon_component = __webpack_require__(9008);
2341
2341
  ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
2342
2342
 
2343
2343
 
2344
- var contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
2344
+ var contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
2345
2345
 
2346
2346
 
2347
2347
 
@@ -2395,7 +2395,7 @@ var component_Notice = function Notice(_ref2) {
2395
2395
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(ContentWrapper, {
2396
2396
  buttonLink: buttonLink
2397
2397
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
2398
- className: "font-medium whitespace-nowrap pr-4"
2398
+ className: "font-bold whitespace-nowrap pr-4"
2399
2399
  }, title), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
2400
2400
  className: "pr-4"
2401
2401
  }, bodyText), buttonLabel && /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
package/core/MeganavContentPlatform.jsx CHANGED
@@ -230,7 +230,7 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
230
230
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
231
231
  className: "ui-meganav-overline ml-24"
232
232
  }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
233
- className: "text-p2 font-medium text-cool-black mb-24",
233
+ className: "text-p2 font-bold text-cool-black mb-24 leading-normal",
234
234
  style: {
235
235
  maxWidth: "330px"
236
236
  }
package/core/Notice/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-announcement {
3
- @apply font-sans;
3
+ @apply font-manrope;
4
4
  max-height: 37.5rem;
5
5
  transition: max-height 300ms;
6
6
  }
package/core/Notice.jsx CHANGED
@@ -822,7 +822,7 @@ var Icon_component = __webpack_require__(9008);
822
822
  ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
823
823
 
824
824
 
825
- var contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
825
+ var contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
826
826
 
827
827
 
828
828
 
@@ -876,7 +876,7 @@ var component_Notice = function Notice(_ref2) {
876
876
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(ContentWrapper, {
877
877
  buttonLink: buttonLink
878
878
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
879
- className: "font-medium whitespace-nowrap pr-4"
879
+ className: "font-bold whitespace-nowrap pr-4"
880
880
  }, title), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
881
881
  className: "pr-4"
882
882
  }, bodyText), buttonLabel && /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
package/core/styles.css CHANGED
@@ -1,23 +1,27 @@
1
1
  @layer base {
2
2
  :root {
3
- --color-cool-black: #03020D;
4
- --color-active-orange: #FF5416;
5
- --color-red-orange: #E40000;
3
+ --color-cool-black: #03020d;
4
+ --color-active-orange: #ff5416;
5
+ --color-red-orange: #e40000;
6
6
  --color-white: #ffffff;
7
- --color-electric-cyan: #4AD4FF;
8
- --color-zingy-green: #08FF13;
9
- --color-bright-red: #FE372B;
10
- --color-jazzy-pink: #FF17D2;
11
- --color-extra-light-grey: #F8FAFC;
12
- --color-light-grey: #F4F8FB;
13
- --color-mid-grey: #C6CED9;
7
+ --color-electric-cyan: #4ad4ff;
8
+ --color-zingy-green: #08ff13;
9
+ --color-bright-red: #fe372b;
10
+ --color-orange-700: #ff2739;
11
+ --color-jazzy-pink: #ff17d2;
12
+ --color-extra-light-grey: #f8fafc;
13
+ --color-light-grey: #f4f8fb;
14
+ --color-mid-grey: #c6ced9;
14
15
  --color-dark-grey: #667085;
15
- --color-charcoal-grey: #2B303B;
16
- --color-gui-default: #006EDC;
17
- --color-gui-hover: #0862B9;
18
- --color-gui-focus: #80B9F2;
19
- --color-gui-focus-outline: #80b9f2;
16
+ --color-charcoal-grey: #2b303b;
17
+ --color-gui-default: #006edc;
18
+ --color-gui-hover: #0862b9;
20
19
  --color-gui-active: #074095;
20
+ --color-gui-default-dark: #4da6ff;
21
+ --color-gui-hover-dark: #2894ff;
22
+ --color-gui-active-dark: #0080ff;
23
+ --color-gui-focus: #80b9f2;
24
+ --color-gui-focus-outline: #80b9f2;
21
25
  --color-gui-visited: #4887c2;
22
26
  --color-gui-unavailable: #a8a8a8;
23
27
  --color-gui-error: #fb0c0c;
@@ -36,6 +40,10 @@
36
40
  --syntax-red: #d54e53;
37
41
  --syntax-lilac: #bb87d3;
38
42
 
43
+ /* New Neutral colors */
44
+ --color-neutral-900: #39414e;
45
+ --color-neutral-500: #c6ced9;
46
+
39
47
  /* uptime status colors */
40
48
  --uptime-color-up: #39b54a;
41
49
  --uptime-color-trouble: #e87623;
@@ -70,7 +78,7 @@
70
78
 
71
79
  --gradient-hot-pink: linear-gradient(
72
80
  80.2deg,
73
- var(--color-bright-red) 0%,
81
+ var(--color-orange-700) 0%,
74
82
  var(--color-jazzy-pink) 100%
75
83
  );
76
84
 
@@ -111,8 +119,10 @@
111
119
  --lh-dense: 1;
112
120
  --lh-tight: 1.125;
113
121
  --lh-snug: 1.15;
122
+ --lh-min-normal: 1.2;
114
123
  --lh-normal: 1.25;
115
124
  --lh-relaxed: 1.45;
125
+ --lh-extra-relaxed: 1.6;
116
126
 
117
127
  --ls-tighten-0_025: -0.025em;
118
128
  --ls-tighten-0_02: -0.02em;
@@ -388,40 +398,40 @@
388
398
 
389
399
  .ui-text-quote {
390
400
  @apply font-manrope font-normal text-cool-black;
391
- @apply text-quote;
401
+ @apply text-quote leading-normal;
392
402
  @apply tracking-tighten-0.0015;
393
403
  }
394
404
 
395
405
  .ui-text-sub-header {
396
- @apply font-manrope font-semibold text-dark-grey;
397
- @apply text-sub-header-xs xs:text-sub-header;
406
+ @apply font-manrope font-semibold text-neutral-900;
407
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
398
408
  }
399
409
 
400
410
  .ui-text-overline1 {
401
- @apply font-mono font-medium text-active-orange uppercase;
402
- @apply text-overline1;
411
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
412
+ @apply text-overline1 leading-normal;
403
413
  @apply tracking-widen-0.16;
404
414
  }
405
415
 
406
416
  .ui-text-overline2 {
407
- @apply font-mono font-medium text-active-orange uppercase;
408
- @apply text-overline2;
417
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
418
+ @apply text-overline2 leading-normal;
409
419
  @apply tracking-widen-0.16;
410
420
  }
411
421
 
412
422
  .ui-text-menu1 {
413
423
  @apply font-manrope font-medium text-cool-black;
414
- @apply text-menu1;
424
+ @apply text-menu1 leading-snug;
415
425
  }
416
426
 
417
427
  .ui-text-menu2 {
418
428
  @apply font-manrope font-medium text-cool-black;
419
- @apply text-menu2;
429
+ @apply text-menu2 leading-snug;
420
430
  }
421
431
 
422
432
  .ui-text-menu3 {
423
433
  @apply font-manrope font-medium text-cool-black;
424
- @apply text-menu3;
434
+ @apply text-menu3 leading-snug;
425
435
  }
426
436
 
427
437
  .ui-text-code {
@@ -438,12 +448,12 @@
438
448
 
439
449
  .ui-unordered-list {
440
450
  @apply text-p1 font-medium text-cool-black;
441
- @apply list-disc ml-32 mb-24;
451
+ @apply list-disc ml-32 my-16;
442
452
  }
443
453
 
444
454
  .ui-ordered-list {
445
455
  @apply text-p1 font-medium text-charcoal-grey;
446
- @apply ml-32 mb-24 list-decimal;
456
+ @apply ml-32 my-16 list-decimal;
447
457
  }
448
458
 
449
459
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -460,15 +470,19 @@
460
470
  }
461
471
 
462
472
  .ui-unordered-list ul ul {
463
- @apply list-square;
473
+ @apply list-square my-8;
474
+ }
475
+
476
+ .ui-unordered-list ul ul {
477
+ @apply my-8;
464
478
  }
465
479
 
466
480
  .ui-ordered-list li,
467
481
  .ui-unordered-list li {
468
- @apply font-medium font-manrope;
482
+ @apply font-medium font-manrope tracking-widen-0;
483
+ line-height: var(--lh-extra-relaxed);
469
484
  }
470
485
 
471
-
472
486
  .ui-unordered-list-with-emphasis {
473
487
  @apply text-p1 font-medium text-cool-black;
474
488
  @apply list-disc ml-32 mt-32 -mb-12;
@@ -506,11 +520,11 @@
506
520
  }
507
521
  @layer components {
508
522
  .ui-checkbox-p1 {
509
- @apply flex items-start mb-16 font-sans;
523
+ @apply flex items-start mb-16 font-manrope font-medium;
510
524
  }
511
525
 
512
526
  .ui-checkbox-p2 {
513
- @apply flex items-start mb-12 font-sans;
527
+ @apply flex items-start mb-12 font-manrope font-medium;
514
528
  }
515
529
 
516
530
  .ui-checkbox-input {
@@ -529,12 +543,12 @@
529
543
 
530
544
  .ui-checkbox-label-p1 {
531
545
  @apply select-none;
532
- @apply text-p1 font-light text-cool-black;
546
+ @apply text-p1 font-medium text-cool-black;
533
547
  }
534
548
 
535
549
  .ui-checkbox-label-p2 {
536
550
  @apply select-none;
537
- @apply text-p2 font-light text-cool-black;
551
+ @apply text-p2 font-medium text-cool-black;
538
552
  }
539
553
 
540
554
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -555,7 +569,7 @@
555
569
  }
556
570
 
557
571
  .ui-textarea {
558
- @apply font-sans font-light text-cool-black text-p1;
572
+ @apply font-manrope font-medium text-cool-black text-p1;
559
573
  @apply p-input mb-16;
560
574
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
561
575
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.7.0-dev.1e9479a",
3
+ "version": "8.7.0-dev.2b71529",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/FeaturedLink/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-featured-link {
3
- @apply font-sans font-medium block;
3
+ @apply font-manrope font-bold block;
4
4
  @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
5
  }
6
6
 
package/src/core/Footer/component.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
3
+ @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
7
+ @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
package/src/core/Footer/component.html.erb CHANGED
@@ -1,12 +1,12 @@
1
- <footer class="bg-light-grey font-sans antialiased" data-id="footer">
1
+ <footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
2
2
  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
3
3
  <div class="col-span-full md:col-span-2">
4
4
  <div class="flex flex-row p-menu-row-snug">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
- <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
6
+ <h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
7
7
  </div>
8
8
  <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
- <p class="text-p3 py-16 font-medium p-menu-row-snug">
9
+ <p class="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
10
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
11
  </p>
12
12
  </div>
@@ -180,7 +180,7 @@
180
180
  >
181
181
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
182
182
  </a>
183
- <div class="pl-16 text-menu3 font-light">
183
+ <div class="pl-16 text-menu3 font-manrope font-medium">
184
184
  <strong class="block font-medium">We&apos;re hiring!</strong>
185
185
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
186
186
  Learn more at Glassdoor
@@ -200,7 +200,7 @@
200
200
  >
201
201
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
202
202
  </a>
203
- <div class="text-menu3 font-light">
203
+ <div class="text-menu3 font-manrope font-medium">
204
204
  <strong class="block font-medium">We&apos;re hiring!</strong>
205
205
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
206
206
  Learn more at Glassdoor
@@ -231,29 +231,29 @@
231
231
  <div class="flex mr-24">
232
232
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
233
233
  <div>
234
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
235
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
234
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
235
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
236
236
  </div>
237
237
  </div>
238
238
  <div class="flex mr-24 md:col-start-2">
239
239
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
240
240
  <div>
241
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
242
- <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
241
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
242
+ <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
243
243
  </div>
244
244
  </div>
245
245
  <div class="flex mr-24 md:col-start-3">
246
246
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
247
247
  <div>
248
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
249
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
248
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
249
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
250
250
  </div>
251
251
  </div>
252
252
  <div class="flex mr-24 md:col-start-4">
253
253
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
254
254
  <div>
255
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
256
- <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
255
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
256
+ <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
257
257
  </div>
258
258
  </div>
259
259
  </div>
package/src/core/Footer/component.jsx CHANGED
@@ -8,15 +8,15 @@ export default function Footer({ paths, urlBase }) {
8
8
  const absUrl = (path) => _absUrl(path, urlBase);
9
9
 
10
10
  return (
11
- <footer className="bg-light-grey font-sans antialiased" data-id="footer">
11
+ <footer className="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
12
12
  <div className="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
13
13
  <div className="col-span-full md:col-span-2">
14
14
  <div className="flex flex-row p-menu-row-snug">
15
15
  <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
16
- <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
16
+ <h2 className="text-overline2 font-jetbrains_mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
17
17
  </div>
18
18
  <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
19
- <p className="text-p3 py-16 font-medium p-menu-row-snug">
19
+ <p className="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
20
20
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
21
21
  </p>
22
22
  </div>
@@ -274,7 +274,7 @@ export default function Footer({ paths, urlBase }) {
274
274
  >
275
275
  <Icon name="glassdoor" size="1.5rem" />
276
276
  </a>
277
- <div className="pl-16 text-menu3 font-light">
277
+ <div className="pl-16 text-menu3 font-manrope font-medium">
278
278
  <strong className="block font-medium">We&apos;re hiring!</strong>
279
279
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
280
280
  Learn more at Glassdoor
@@ -294,7 +294,7 @@ export default function Footer({ paths, urlBase }) {
294
294
  >
295
295
  <Icon name="glassdoor" size="1.5rem" />
296
296
  </a>
297
- <div className="text-menu3 font-light">
297
+ <div className="text-menu3 font-manrope font-medium">
298
298
  <strong className="block font-medium">We&apos;re hiring!</strong>
299
299
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
300
300
  Learn more at Glassdoor
@@ -335,29 +335,29 @@ export default function Footer({ paths, urlBase }) {
335
335
  <div className="flex mr-24">
336
336
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
337
337
  <div>
338
- <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
339
- <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
338
+ <p className="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
339
+ <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
340
340
  </div>
341
341
  </div>
342
342
  <div className="flex mr-24 md:col-start-2">
343
343
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
344
344
  <div>
345
- <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
346
- <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
345
+ <p className="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
346
+ <p className="ui-footer-compliance-text font-medium mb-24">Compliant</p>
347
347
  </div>
348
348
  </div>
349
349
  <div className="flex mr-24 md:col-start-3">
350
350
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
351
351
  <div>
352
- <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
353
- <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
352
+ <p className="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
353
+ <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
354
354
  </div>
355
355
  </div>
356
356
  <div className="flex mr-24 md:col-start-4">
357
357
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
358
358
  <div>
359
- <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
360
- <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
359
+ <p className="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
360
+ <p className="ui-footer-compliance-text font-medium mb-24">Encryption</p>
361
361
  </div>
362
362
  </div>
363
363
  </div>
package/src/core/Meganav/component.css CHANGED
@@ -7,7 +7,7 @@
7
7
  z-index: var(--stacking-context-page-meganav);
8
8
 
9
9
  @apply fixed top-0 w-full;
10
- @apply antialiased font-sans transition-colors;
10
+ @apply antialiased font-manrope transition-colors;
11
11
  }
12
12
 
13
13
  .ui-meganav {
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-meganav-link {
54
- @apply text-menu2 font-medium block;
54
+ @apply text-menu2 font-bold block font-manrope;
55
55
  @apply mr-12 lg:mr-24 px-0 py-20;
56
56
  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
57
57
  @apply transition-colors;
@@ -63,13 +63,13 @@
63
63
 
64
64
  .ui-meganav-mobile-link {
65
65
  @apply p-menu-row relative -left-8 w-extend-8;
66
- @apply text-menu2 font-medium block text-cool-black text-left;
66
+ @apply text-menu2 font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
67
67
  @apply flex items-center;
68
68
  @apply focus:text-gui-focus focus:outline-none;
69
69
  }
70
70
 
71
71
  .ui-meganav-account-link {
72
- @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
72
+ @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-jetbrains_mono;
73
73
  }
74
74
 
75
75
  .ui-meganav-content {
@@ -97,15 +97,15 @@
97
97
  }
98
98
 
99
99
  .ui-meganav-media-heading {
100
- @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
100
+ @apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
101
101
  }
102
102
 
103
103
  .ui-meganav-media-copy {
104
- @apply text-p3 text-dark-grey font-light;
104
+ @apply text-p3 font-manrope font-medium text-dark-grey leading-normal;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
108
- @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
108
+ @apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
109
109
  }
110
110
 
111
111
  .ui-meganav-hr {
package/src/core/MeganavContentPlatform/component.html.erb CHANGED
@@ -7,7 +7,7 @@
7
7
  <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
8
8
  </div>
9
9
 
10
- <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
10
+ <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
11
11
  Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
12
12
  realtime, and lets you focus on your code.
13
13
  </p>
package/src/core/MeganavContentPlatform/component.jsx CHANGED
@@ -12,7 +12,7 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
12
12
  <img src={paths.ablyStack} alt="Ably homepage" />
13
13
  <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
14
14
  </div>
15
- <p className="text-p2 font-medium text-cool-black mb-24" style={{ maxWidth: "330px" }}>
15
+ <p className="text-p2 font-bold text-cool-black mb-24 leading-normal" style={{ maxWidth: "330px" }}>
16
16
  Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
17
17
  realtime, and lets you focus on your code.
18
18
  </p>
package/src/core/Notice/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-announcement {
3
- @apply font-sans;
3
+ @apply font-manrope;
4
4
  max-height: 37.5rem;
5
5
  transition: max-height 300ms;
6
6
  }
package/src/core/Notice/component.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%# Note the style attribute is used for entry animation %>
2
2
  <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
3
3
  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
4
- <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
5
- <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
4
+ <%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
5
+ <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
6
6
  <span class="pr-4"><%= @contents[:body_text] %></span>
7
7
  <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
8
8
  <% end %>
package/src/core/Notice/component.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect } from "react";
2
2
  import T from "prop-types";
3
3
 
4
- const contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
4
+ const contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
5
5
 
6
6
  import NoticeScripts from "./component.js";
7
7
  import Icon from "../Icon/component.jsx";
@@ -38,7 +38,7 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
38
38
  <div className={wrapperClasses} data-id="ui-notice" style={{ maxHeight: 0, overflow: "hidden" }}>
39
39
  <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
40
40
  <ContentWrapper buttonLink={buttonLink}>
41
- <strong className="font-medium whitespace-nowrap pr-4">{title}</strong>
41
+ <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
42
42
  <span className="pr-4">{bodyText}</span>
43
43
  {buttonLabel && <span className="underline cursor-pointer whitespace-nowrap">{buttonLabel}</span>}
44
44
  </ContentWrapper>
package/src/core/styles/forms.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @layer components {
2
2
  .ui-checkbox-p1 {
3
- @apply flex items-start mb-16 font-sans;
3
+ @apply flex items-start mb-16 font-manrope font-medium;
4
4
  }
5
5
 
6
6
  .ui-checkbox-p2 {
7
- @apply flex items-start mb-12 font-sans;
7
+ @apply flex items-start mb-12 font-manrope font-medium;
8
8
  }
9
9
 
10
10
  .ui-checkbox-input {
@@ -23,12 +23,12 @@
23
23
 
24
24
  .ui-checkbox-label-p1 {
25
25
  @apply select-none;
26
- @apply text-p1 font-light text-cool-black;
26
+ @apply text-p1 font-medium text-cool-black;
27
27
  }
28
28
 
29
29
  .ui-checkbox-label-p2 {
30
30
  @apply select-none;
31
- @apply text-p2 font-light text-cool-black;
31
+ @apply text-p2 font-medium text-cool-black;
32
32
  }
33
33
 
34
34
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
  .ui-textarea {
52
- @apply font-sans font-light text-cool-black text-p1;
52
+ @apply font-manrope font-medium text-cool-black text-p1;
53
53
  @apply p-input mb-16;
54
54
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
55
55
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
package/src/core/styles/properties.css CHANGED
@@ -1,23 +1,27 @@
1
1
  @layer base {
2
2
  :root {
3
- --color-cool-black: #03020D;
4
- --color-active-orange: #FF5416;
5
- --color-red-orange: #E40000;
3
+ --color-cool-black: #03020d;
4
+ --color-active-orange: #ff5416;
5
+ --color-red-orange: #e40000;
6
6
  --color-white: #ffffff;
7
- --color-electric-cyan: #4AD4FF;
8
- --color-zingy-green: #08FF13;
9
- --color-bright-red: #FE372B;
10
- --color-jazzy-pink: #FF17D2;
11
- --color-extra-light-grey: #F8FAFC;
12
- --color-light-grey: #F4F8FB;
13
- --color-mid-grey: #C6CED9;
7
+ --color-electric-cyan: #4ad4ff;
8
+ --color-zingy-green: #08ff13;
9
+ --color-bright-red: #fe372b;
10
+ --color-orange-700: #ff2739;
11
+ --color-jazzy-pink: #ff17d2;
12
+ --color-extra-light-grey: #f8fafc;
13
+ --color-light-grey: #f4f8fb;
14
+ --color-mid-grey: #c6ced9;
14
15
  --color-dark-grey: #667085;
15
- --color-charcoal-grey: #2B303B;
16
- --color-gui-default: #006EDC;
17
- --color-gui-hover: #0862B9;
18
- --color-gui-focus: #80B9F2;
19
- --color-gui-focus-outline: #80b9f2;
16
+ --color-charcoal-grey: #2b303b;
17
+ --color-gui-default: #006edc;
18
+ --color-gui-hover: #0862b9;
20
19
  --color-gui-active: #074095;
20
+ --color-gui-default-dark: #4da6ff;
21
+ --color-gui-hover-dark: #2894ff;
22
+ --color-gui-active-dark: #0080ff;
23
+ --color-gui-focus: #80b9f2;
24
+ --color-gui-focus-outline: #80b9f2;
21
25
  --color-gui-visited: #4887c2;
22
26
  --color-gui-unavailable: #a8a8a8;
23
27
  --color-gui-error: #fb0c0c;
@@ -36,6 +40,10 @@
36
40
  --syntax-red: #d54e53;
37
41
  --syntax-lilac: #bb87d3;
38
42
 
43
+ /* New Neutral colors */
44
+ --color-neutral-900: #39414e;
45
+ --color-neutral-500: #c6ced9;
46
+
39
47
  /* uptime status colors */
40
48
  --uptime-color-up: #39b54a;
41
49
  --uptime-color-trouble: #e87623;
@@ -70,7 +78,7 @@
70
78
 
71
79
  --gradient-hot-pink: linear-gradient(
72
80
  80.2deg,
73
- var(--color-bright-red) 0%,
81
+ var(--color-orange-700) 0%,
74
82
  var(--color-jazzy-pink) 100%
75
83
  );
76
84
 
@@ -111,8 +119,10 @@
111
119
  --lh-dense: 1;
112
120
  --lh-tight: 1.125;
113
121
  --lh-snug: 1.15;
122
+ --lh-min-normal: 1.2;
114
123
  --lh-normal: 1.25;
115
124
  --lh-relaxed: 1.45;
125
+ --lh-extra-relaxed: 1.6;
116
126
 
117
127
  --ls-tighten-0_025: -0.025em;
118
128
  --ls-tighten-0_02: -0.02em;
package/src/core/styles/text.css CHANGED
@@ -58,40 +58,40 @@
58
58
 
59
59
  .ui-text-quote {
60
60
  @apply font-manrope font-normal text-cool-black;
61
- @apply text-quote;
61
+ @apply text-quote leading-normal;
62
62
  @apply tracking-tighten-0.0015;
63
63
  }
64
64
 
65
65
  .ui-text-sub-header {
66
- @apply font-manrope font-semibold text-dark-grey;
67
- @apply text-sub-header-xs xs:text-sub-header;
66
+ @apply font-manrope font-semibold text-neutral-900;
67
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
68
68
  }
69
69
 
70
70
  .ui-text-overline1 {
71
- @apply font-mono font-medium text-active-orange uppercase;
72
- @apply text-overline1;
71
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
72
+ @apply text-overline1 leading-normal;
73
73
  @apply tracking-widen-0.16;
74
74
  }
75
75
 
76
76
  .ui-text-overline2 {
77
- @apply font-mono font-medium text-active-orange uppercase;
78
- @apply text-overline2;
77
+ @apply font-jetbrains_mono font-medium text-active-orange uppercase;
78
+ @apply text-overline2 leading-normal;
79
79
  @apply tracking-widen-0.16;
80
80
  }
81
81
 
82
82
  .ui-text-menu1 {
83
83
  @apply font-manrope font-medium text-cool-black;
84
- @apply text-menu1;
84
+ @apply text-menu1 leading-snug;
85
85
  }
86
86
 
87
87
  .ui-text-menu2 {
88
88
  @apply font-manrope font-medium text-cool-black;
89
- @apply text-menu2;
89
+ @apply text-menu2 leading-snug;
90
90
  }
91
91
 
92
92
  .ui-text-menu3 {
93
93
  @apply font-manrope font-medium text-cool-black;
94
- @apply text-menu3;
94
+ @apply text-menu3 leading-snug;
95
95
  }
96
96
 
97
97
  .ui-text-code {
@@ -108,12 +108,12 @@
108
108
 
109
109
  .ui-unordered-list {
110
110
  @apply text-p1 font-medium text-cool-black;
111
- @apply list-disc ml-32 mb-24;
111
+ @apply list-disc ml-32 my-16;
112
112
  }
113
113
 
114
114
  .ui-ordered-list {
115
115
  @apply text-p1 font-medium text-charcoal-grey;
116
- @apply ml-32 mb-24 list-decimal;
116
+ @apply ml-32 my-16 list-decimal;
117
117
  }
118
118
 
119
119
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -130,15 +130,19 @@
130
130
  }
131
131
 
132
132
  .ui-unordered-list ul ul {
133
- @apply list-square;
133
+ @apply list-square my-8;
134
+ }
135
+
136
+ .ui-unordered-list ul ul {
137
+ @apply my-8;
134
138
  }
135
139
 
136
140
  .ui-ordered-list li,
137
141
  .ui-unordered-list li {
138
- @apply font-medium font-manrope;
142
+ @apply font-medium font-manrope tracking-widen-0;
143
+ line-height: var(--lh-extra-relaxed);
139
144
  }
140
145
 
141
-
142
146
  .ui-unordered-list-with-emphasis {
143
147
  @apply text-p1 font-medium text-cool-black;
144
148
  @apply list-disc ml-32 mt-32 -mb-12;
package/tailwind.config.js CHANGED
@@ -24,35 +24,35 @@ module.exports = {
24
24
  xl: "1440px",
25
25
  },
26
26
  fontSize: {
27
- title: ["var(--fs-title)", "var(--lh-tight)"],
28
- "title-xl": ["var(--fs-title-xl)", "var(--lh-tight)"],
29
- "title-xs": ["var(--fs-title-xs)", "var(--lh-tight)"],
27
+ title: ["var(--fs-title)", "var(--lh-min-normal)"],
28
+ "title-xl": ["var(--fs-title-xl)", "var(--lh-min-normal)"],
29
+ "title-xs": ["var(--fs-title-xs)", "var(--lh-min-normal)"],
30
30
  h1: ["var(--fs-h1)", "var(--lh-tight)"],
31
- "h1-xl": ["var(--fs-h1-xl)", "var(--lh-tight)"],
32
- "h1-xs": ["var(--fs-h1-xs)", "var(--lh-tight)"],
33
- h2: ["var(--fs-h2)", "var(--lh-tight)"],
34
- "h2-xl": ["var(--fs-h2-xl)", "var(--lh-tight)"],
35
- "h2-xs": ["var(--fs-h2-xs)", "var(--lh-tight)"],
36
- h3: ["var(--fs-h3)", "var(--lh-tight)"],
37
- h4: ["var(--fs-h4)", "var(--lh-tight)"],
38
- h5: ["var(--fs-h5)", "var(--lh-tight)"],
39
- p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
40
- p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
41
- p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
42
- standfirst: ["var(--fs-standfirst)", "var(--lh-snug)"],
43
- "standfirst-xl": ["var(--fs-standfirst-xl)", "var(--lh-snug)"],
44
- "sub-header": ["var(--fs-sub-header)", "var(--lh-normal)"],
45
- "sub-header-xs": ["var(--fs-sub-header-xs)", "var(--lh-normal)"],
46
- overline1: ["var(--fs-overline1)", "var(--lh-normal)"],
47
- overline2: ["var(--fs-overline2)", "var(--lh-normal)"],
31
+ "h1-xl": ["var(--fs-h1-xl)", "var(--lh-min-normal)"],
32
+ "h1-xs": ["var(--fs-h1-xs)", "var(--lh-min-normal)"],
33
+ h2: ["var(--fs-h2)", "var(--lh-min-normal)"],
34
+ "h2-xl": ["var(--fs-h2-xl)", "var(--lh-min-normal)"],
35
+ "h2-xs": ["var(--fs-h2-xs)", "var(--lh-min-normal)"],
36
+ h3: ["var(--fs-h3)", "var(--lh-min-normal)"],
37
+ h4: ["var(--fs-h4)", "var(--lh-min-normal)"],
38
+ h5: ["var(--fs-h5)", "var(--lh-min-normal)"],
39
+ p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
40
+ p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
41
+ p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
42
+ standfirst: ["var(--fs-standfirst)"],
43
+ "standfirst-xl": ["var(--fs-standfirst-xl)"],
44
+ "sub-header": ["var(--fs-sub-header)"],
45
+ "sub-header-xs": ["var(--fs-sub-header-xs)"],
46
+ overline1: ["var(--fs-overline1)"],
47
+ overline2: ["var(--fs-overline2)"],
48
48
  btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
49
49
  btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
50
50
  btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
51
51
  btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
52
- menu1: ["var(--fs-menu1)", "var(--lh-tight)"],
53
- menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
54
- menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
55
- quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
52
+ menu1: ["var(--fs-menu1)"],
53
+ menu2: ["var(--fs-menu2)"],
54
+ menu3: ["var(--fs-menu3)"],
55
+ quote: ["var(--fs-quote)"],
56
56
  code: ["var(--fs-code)", "var(--lh-dense)"],
57
57
  code2: ["var(--fs-code2)", "var(--lh-dense)"],
58
58
  },
@@ -72,10 +72,15 @@ module.exports = {
72
72
  "dark-grey": "var(--color-dark-grey)",
73
73
  "charcoal-grey": "var(--color-charcoal-grey)",
74
74
  "gui-default": "var(--color-gui-default)",
75
- "gui-alt": "var(--color-cool-black)",
76
75
  "gui-hover": "var(--color-gui-hover)",
77
- "gui-focus": "var(--color-gui-focus)",
78
76
  "gui-active": "var(--color-gui-active)",
77
+ "gui-default-dark": "var(--color-gui-default-dark)",
78
+ "gui-hover-dark": "var(--color-gui-hover-dark)",
79
+ "gui-active-dark": "var(--color-gui-active-dark)",
80
+ "gui-alt": "var(--color-cool-black)",
81
+ "gui-focus": "var(--color-gui-focus)",
82
+ "gui-focus-outline": "var(--color-gui-focus-outline)",
83
+
79
84
  "gui-visited": "var(--color-gui-visited)",
80
85
  "gui-unavailable": "var(--color-gui-unavailable)",
81
86
  "gui-error": "var(--color-gui-error)",
@@ -85,6 +90,8 @@ module.exports = {
85
90
  "icon-glassdoor": "var(--icon-color-glassdoor)",
86
91
  "icon-github": "var(--icon-color-github)",
87
92
  "icon-discord": "var(--icon-color-discord)",
93
+ "neutral-900": "var(--color-neutral-900)",
94
+ "neutral-500": "var(--color-neutral-500)",
88
95
  },
89
96
  fontFamily: {
90
97
  sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
@@ -165,6 +172,7 @@ module.exports = {
165
172
  "tighten-0.005": "var(--ls-tighten-0_005)",
166
173
  "tighten-0.0025": "var(--ls-tighten-0_0025)",
167
174
  "tighten-0.0015": "var(--ls-tighten-0_0015)",
175
+ "widen-0": 0,
168
176
  "widen-0.1": "var(--ls-widen-0_1)",
169
177
  "widen-0.15": "var(--ls-widen-0_15)",
170
178
  "widen-0.16": "var(--ls-widen-0_16)",