ably-ui 8.7.0.dev.2c392ee → 8.7.0.dev.2f1ba81

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 (67) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +6 -6
  3. data/README.md +7 -7
  4. data/lib/ably_ui/core/code/component.css +2 -0
  5. data/lib/ably_ui/core/code/component.js +1 -1
  6. data/lib/ably_ui/core/company_autocomplete/component.js +2 -1
  7. data/lib/ably_ui/core/connect_state_wrapper/component.js +1 -1
  8. data/lib/ably_ui/core/contact_footer/component.js +1 -1
  9. data/lib/ably_ui/core/cookie_message/component.js +1 -1
  10. data/lib/ably_ui/core/core.rb +8 -4
  11. data/lib/ably_ui/core/customer_logos/component.js +1 -1
  12. data/lib/ably_ui/core/dropdown_menu/component.js +1 -1
  13. data/lib/ably_ui/core/feature_footer/component.js +1 -1
  14. data/lib/ably_ui/core/featured_link/component.css +1 -1
  15. data/lib/ably_ui/core/featured_link/component.js +1 -1
  16. data/lib/ably_ui/core/flash/component.js +1 -1
  17. data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
  18. data/lib/ably_ui/core/fonts/manrope.css +3 -0
  19. data/lib/ably_ui/core/footer/component.css +3 -3
  20. data/lib/ably_ui/core/footer/component.js +1 -1
  21. data/lib/ably_ui/core/footer/footer.html.erb +20 -25
  22. data/lib/ably_ui/core/icon/component.js +1 -1
  23. data/lib/ably_ui/core/images/best-support-2023.svg +1 -0
  24. data/lib/ably_ui/core/images/fastest-implementation-2023.svg +1 -0
  25. data/lib/ably_ui/core/images/high-performer-2023.svg +1 -0
  26. data/lib/ably_ui/core/images/highest-user-adoption-2023.svg +1 -0
  27. data/lib/ably_ui/core/loader/component.js +1 -1
  28. data/lib/ably_ui/core/logo/component.js +1 -1
  29. data/lib/ably_ui/core/meganav/component.css +7 -9
  30. data/lib/ably_ui/core/meganav/component.js +1 -1
  31. data/lib/ably_ui/core/meganav/component.json +1 -1
  32. data/lib/ably_ui/core/meganav/meganav.rb +4 -4
  33. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +2 -1
  34. data/lib/ably_ui/core/meganav_content_company/component.js +1 -1
  35. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +9 -0
  36. data/lib/ably_ui/core/meganav_content_developers/component.js +1 -1
  37. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +18 -2
  38. data/lib/ably_ui/core/{meganav_content_platform → meganav_content_products}/component.js +1 -1
  39. data/lib/ably_ui/core/{meganav_content_platform/meganav_content_platform.html.erb → meganav_content_products/meganav_content_products.html.erb} +16 -34
  40. data/lib/ably_ui/core/{meganav_content_platform/meganav_content_platform.rb → meganav_content_products/meganav_content_products.rb} +1 -1
  41. data/lib/ably_ui/core/meganav_content_use_cases/component.js +1 -1
  42. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +15 -14
  43. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  44. data/lib/ably_ui/core/meganav_control_mobile_dropdown/component.js +1 -1
  45. data/lib/ably_ui/core/meganav_control_mobile_panel_close/component.js +1 -1
  46. data/lib/ably_ui/core/meganav_control_mobile_panel_open/component.js +1 -1
  47. data/lib/ably_ui/core/meganav_items_desktop/component.js +1 -1
  48. data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +1 -1
  49. data/lib/ably_ui/core/meganav_items_mobile/component.js +1 -1
  50. data/lib/ably_ui/core/meganav_items_signed_in/component.js +1 -1
  51. data/lib/ably_ui/core/meganav_search/component.js +1 -1
  52. data/lib/ably_ui/core/meganav_search_autocomplete/component.js +1 -1
  53. data/lib/ably_ui/core/meganav_search_panel/component.js +1 -1
  54. data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
  55. data/lib/ably_ui/core/notice/component.js +1 -1
  56. data/lib/ably_ui/core/notice/notice.html.erb +2 -2
  57. data/lib/ably_ui/core/scripts.js +2 -1
  58. data/lib/ably_ui/core/showcase/component.js +1 -1
  59. data/lib/ably_ui/core/sign_out_link/component.js +1 -1
  60. data/lib/ably_ui/core/slider/component.js +1 -1
  61. data/lib/ably_ui/core/sprites.svg +41 -0
  62. data/lib/ably_ui/core/styles.css +222 -101
  63. data/lib/ably_ui/core/uptime/component.js +1 -1
  64. data/lib/ably_ui/reset/scripts.js +1 -1
  65. data/lib/ably_ui/reset/styles.css +1 -11
  66. data/lib/ably_ui/version.rb +1 -1
  67. metadata +11 -5
@@ -1,34 +1,132 @@
1
1
  @layer base {
2
2
  :root {
3
- --color-cool-black: #03020d;
4
- --color-active-orange: #ff5416;
5
- --color-red-orange: #e40000;
6
- --color-white: #ffffff;
7
- --color-electric-cyan: #4af7ff;
8
- --color-zingy-green: #08ff13;
9
- --color-bright-red: #ff2739;
10
- --color-jazzy-pink: #ff17d2;
11
- --color-extra-light-grey: #fafafb;
12
- --color-light-grey: #f5f5f6;
13
- --color-mid-grey: #d9d9da;
14
- --color-dark-grey: #76767c;
15
- --color-charcoal-grey: #292831;
16
- --color-gui-default: #0073e6;
17
- --color-gui-hover: #0867c4;
18
- --color-gui-focus: #0073e6;
3
+ /* Neutral colors */
4
+ --color-neutral-000: #ffffff;
5
+ --color-neutral-100: #f8fafc;
6
+ --color-neutral-200: #f4f8fb;
7
+ --color-neutral-300: #edf1f7;
8
+ --color-neutral-400: #e2e7ef;
9
+ --color-neutral-500: #c6ced9;
10
+ --color-neutral-600: #adb6c2;
11
+ --color-neutral-700: #89929f;
12
+ --color-neutral-800: #667085;
13
+ --color-neutral-900: #39414e;
14
+ --color-neutral-1000: #2b303b;
15
+ --color-neutral-1100: #202531;
16
+ --color-neutral-1200: #141924;
17
+ --color-neutral-1300: #03020d;
18
+
19
+ /* Ably orange */
20
+ --color-orange-100: #fff5f1;
21
+ --color-orange-200: #ffe3d8;
22
+ --color-orange-300: #ffc4ae;
23
+ --color-orange-400: #ff9c79;
24
+ --color-orange-500: #ff723f;
25
+ --color-orange-600: #ff5416;
26
+ --color-orange-700: #ff2739;
27
+ --color-orange-800: #e40000;
28
+ --color-orange-900: #b82202;
29
+ --color-orange-1000: #751500;
30
+ --color-orange-1100: #2a0b00;
31
+
32
+ /* Secondary colours */
33
+ --color-yellow-100: #fffbef;
34
+ --color-yellow-200: #fff0ba;
35
+ --color-yellow-300: #ffe27c;
36
+ --color-yellow-400: #ffd43d;
37
+ --color-yellow-500: #f8c100;
38
+ --color-yellow-600: #e8a700;
39
+ --color-yellow-700: #ac8600;
40
+ --color-yellow-800: #654f00;
41
+ --color-yellow-900: #291c01;
42
+ --color-green-100: #f1fff1;
43
+ --color-green-200: #b8ffbb;
44
+ --color-green-300: #80ff85;
45
+ --color-green-400: #08ff13;
46
+ --color-green-500: #00e80b;
47
+ --color-green-600: #00c008;
48
+ --color-green-700: #008e06;
49
+ --color-green-800: #005303;
50
+ --color-green-900: #002a02;
51
+ --color-blue-100: #f1fbff;
52
+ --color-blue-200: #b8eaff;
53
+ --color-blue-300: #80d9ff;
54
+ --color-blue-400: #4ad4ff;
55
+ --color-blue-500: #2cc0ff;
56
+ --color-blue-600: #00a5ec;
57
+ --color-blue-700: #0284cd;
58
+ --color-blue-800: #004b75;
59
+ --color-blue-900: #001b2a;
60
+ --color-violet-100: #f7f2fe;
61
+ --color-violet-200: #d8bcfb;
62
+ --color-violet-300: #b986f8;
63
+ --color-violet-400: #9951f5;
64
+ --color-violet-500: #7a1bf2;
65
+ --color-violet-600: #5f0bc9;
66
+ --color-violet-700: #460894;
67
+ --color-violet-800: #2d055e;
68
+ --color-violet-900: #130228;
69
+ --color-pink-100: #fff1fc;
70
+ --color-pink-200: #ffb8f1;
71
+ --color-pink-300: #ff80e6;
72
+ --color-pink-400: #ff47db;
73
+ --color-pink-500: #ff17d2;
74
+ --color-pink-600: #d400ab;
75
+ --color-pink-700: #9c007e;
76
+ --color-pink-800: #630050;
77
+ --color-pink-900: #2a0022;
78
+
79
+ /* GUI colours */
80
+ /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
81
+ --color-gui-blue-default-light: #006edc;
82
+ --color-gui-blue-hover-light: #0862b9;
83
+ --color-gui-blue-active-light: #074095;
84
+ --color-gui-blue-default-dark: #4da6ff;
85
+ --color-gui-blue-hover-dark: #2894ff;
86
+ --color-gui-blue-active-dark: #0080ff;
87
+ --color-gui-blue-focus: #80b9f2;
88
+ --color-gui-unavailable: #a8a8a8;
89
+ --color-gui-success-green: #11cb24;
90
+ --color-gui-error-red: #fb0c0c;
91
+ --color-gui-focus: #80b9f2;
19
92
  --color-gui-focus-outline: #80b9f2;
20
- --color-gui-active: #074095;
21
93
  --color-gui-visited: #4887c2;
22
- --color-gui-unavailable: #a8a8a8;
23
- --color-gui-error: #fb0c0c;
24
- --color-gui-success: #11cb24;
94
+
95
+ /* Colours replaced by neutral colours */
96
+ --color-white: var(--color-neutral-000);
97
+ --color-extra-light-grey: var(--color-neutral-100);
98
+ --color-light-grey: var(--color-neutral-200);
99
+ --color-mid-grey: var(--color-neutral-500);
100
+ --color-dark-grey: var(--color-neutral-800);
101
+ --color-charcoal-grey: var(--color-neutral-1000);
102
+ --color-cool-black: var(--color-neutral-1300);
103
+
104
+ /* Colours replaced by orange colours */
105
+ --color-active-orange: var(--color-orange-600);
106
+ --color-bright-red: var(--color-orange-700);
107
+ --color-red-orange: var(--color-orange-800);
108
+
109
+ /* Colours replaced by secondary colours */
110
+ --color-electric-cyan: var(--color-blue-400);
111
+ --color-zingy-green: var(--color-green-400);
112
+ --color-jazzy-pink: var(--color-pink-500);
113
+
114
+ /* Colours replaced by GUI colours */
115
+ --color-gui-default: var(--color-gui-blue-default-light);
116
+ --color-gui-hover: var(--color-gui-blue-hover-light);
117
+ --color-gui-active: var(--color-gui-blue-active-light);
118
+ --color-gui-error: var(--color-gui-error-red);
119
+ --color-gui-success: var(--color-gui-success-green);
120
+ --color-gui-default-dark: var(--color-gui-blue-default-dark);
121
+ --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
122
+ --color-gui-active-dark: var(--color-gui-blue-active-dark);
25
123
 
26
124
  /* code syntax: theme */
27
- --syntax-black: var(--color-cool-black);
28
- --syntax-dark-grey: var(--color-dark-grey);
29
- --syntax-mid-grey: var(--color-mid-grey);
30
- --syntax-light-grey: var(--color-light-grey);
31
- --syntax-extra-light-grey: var(--color-extra-light-grey);
125
+ --syntax-black: var(--color-neutral-1300);
126
+ --syntax-dark-grey: var(--color-neutral-800);
127
+ --syntax-mid-grey: var(--color-neutral-500);
128
+ --syntax-light-grey: var(--color-neutral-200);
129
+ --syntax-extra-light-grey: var(--color-neutral-100);
32
130
  --syntax-orange: #e78c45;
33
131
  --syntax-yellow: #e7c547;
34
132
  --syntax-blue: #3490ec;
@@ -70,44 +168,51 @@
70
168
 
71
169
  --gradient-hot-pink: linear-gradient(
72
170
  80.2deg,
73
- var(--color-bright-red) 0%,
171
+ var(--color-orange-700) 0%,
74
172
  var(--color-jazzy-pink) 100%
75
173
  );
76
174
 
77
- --fs-title-xl: 4rem;
78
- --fs-title: 3.5rem;
79
- --fs-title-xs: 3rem;
80
- --fs-h1-xl: 3.5rem;
81
- --fs-h1: 3rem;
82
- --fs-h1-xs: 2.625rem;
83
- --fs-h2-xl: 2.5rem;
175
+ --fs-title-xl: 3rem;
176
+ --fs-title: 2.75rem;
177
+ --fs-title-xs: 2.5rem;
178
+ --fs-h1-xl: 2.5rem;
179
+ --fs-h1: 2.25rem;
180
+ --fs-h1-xs: 2rem;
181
+
182
+ --fs-h2-xl: 2.125rem;
84
183
  --fs-h2: 2rem;
85
- --fs-h2-xs: 1.875rem;
184
+ --fs-h2-xs: 1.75rem;
185
+
86
186
  --fs-h3: 1.5rem;
87
- --fs-h4: 1.125rem;
88
- --fs-p1: 1.125rem;
89
- --fs-p2: 1rem;
187
+ --fs-h4: 1.25rem;
188
+ --fs-h5: 1rem;
189
+
190
+ --fs-p1: 1rem;
191
+ --fs-p2: 0.938rem;
90
192
  --fs-p3: 0.875rem;
91
193
  --fs-standfirst-xl: 2.25rem;
92
194
  --fs-standfirst: 1.5rem;
93
- --fs-sub-header: 1.5rem;
94
- --fs-sub-header-xs: 1.125rem;
195
+ --fs-sub-header: 1.125rem;
196
+ --fs-sub-header-xs: 1.063rem;
95
197
  --fs-overline1: 1rem;
96
198
  --fs-overline2: 0.875rem;
97
- --fs-btn1: 1.125rem;
98
- --fs-btn2: 1rem;
199
+ --fs-btn1: 1rem;
200
+ --fs-btn2: 0.938rem;
99
201
  --fs-btn3: 0.875rem;
100
- --fs-menu1: 1.125rem;
101
- --fs-menu2: 1rem;
202
+ --fs-menu1: 1rem;
203
+ --fs-menu2: 0.938rem;
102
204
  --fs-menu3: 0.875rem;
103
- --fs-quote: 1.5rem;
104
- --fs-code: 0.875rem;
205
+ --fs-quote: 1.25rem;
206
+ --fs-code: 0.938rem;
207
+ --fs-code2: 0.813rem;
105
208
 
106
209
  --lh-dense: 1;
107
210
  --lh-tight: 1.125;
108
211
  --lh-snug: 1.15;
212
+ --lh-min-normal: 1.2;
109
213
  --lh-normal: 1.25;
110
214
  --lh-relaxed: 1.45;
215
+ --lh-extra-relaxed: 1.6;
111
216
 
112
217
  --ls-tighten-0_025: -0.025em;
113
218
  --ls-tighten-0_02: -0.02em;
@@ -115,7 +220,9 @@
115
220
  --ls-tighten-0_01: -0.01em;
116
221
  --ls-tighten-0_005: -0.005em;
117
222
  --ls-tighten-0_0025: -0.0025em;
223
+ --ls-tighten-0_0015: -0.0015em;
118
224
  --ls-widen-0_1: 0.1em;
225
+ --ls-widen-0_16: 0.16em;
119
226
  --ls-widen-0_15: 0.15em;
120
227
 
121
228
  --spacing-0: 0px;
@@ -130,6 +237,7 @@
130
237
  --spacing-20: 1.25rem;
131
238
  --spacing-24: 1.5rem;
132
239
  --spacing-32: 2rem;
240
+ --spacing-36: 2.25rem;
133
241
  --spacing-40: 2.5rem;
134
242
  --spacing-48: 3rem;
135
243
  --spacing-64: 4rem;
@@ -177,7 +285,7 @@
177
285
  }
178
286
  @layer components {
179
287
  .ui-btn {
180
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
288
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
181
289
  @apply hover:text-white hover:bg-active-orange;
182
290
  @apply active:text-white active:bg-red-orange;
183
291
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -201,7 +309,7 @@
201
309
  background-size: 200% 100%;
202
310
  background-position: 0% 0%;
203
311
 
204
- @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
312
+ @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
205
313
  @apply focus:outline-gui-focus;
206
314
  @apply inline-flex items-center justify-center;
207
315
  }
@@ -217,7 +325,7 @@
217
325
  }
218
326
 
219
327
  .ui-btn-invert {
220
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
328
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
221
329
  @apply hover:text-white hover:bg-active-orange;
222
330
  @apply active:text-white active:bg-red-orange;
223
331
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -227,7 +335,7 @@
227
335
  }
228
336
 
229
337
  .ui-btn-secondary {
230
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
338
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
231
339
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
232
340
  @apply active:border-red-orange active:bg-white;
233
341
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -237,7 +345,7 @@
237
345
  }
238
346
 
239
347
  .ui-btn-secondary-invert {
240
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
348
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
241
349
  @apply hover:text-white hover:border-active-orange;
242
350
  @apply active:border-red-orange;
243
351
  @apply focus:outline-gui-focus;
@@ -322,47 +430,53 @@
322
430
  }
323
431
  @layer components {
324
432
  .ui-text-title {
325
- @apply font-sans font-medium text-cool-black;
433
+ @apply font-sans font-extrabold text-cool-black;
326
434
  @apply text-title-xs xs:text-title xl:text-title-xl;
327
- @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
435
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
328
436
  }
329
437
 
330
438
  .ui-text-h1 {
331
- @apply font-sans font-medium text-cool-black;
439
+ @apply font-sans font-extrabold text-cool-black;
332
440
  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
333
- @apply tracking-tighten-0.01;
441
+ @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
334
442
  }
335
443
 
336
444
  .ui-text-h2 {
337
- @apply font-sans font-medium text-cool-black;
445
+ @apply font-sans font-extrabold text-cool-black;
338
446
  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
339
- @apply tracking-tighten-0.005;
447
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
340
448
  }
341
449
 
342
450
  .ui-text-h3 {
343
- @apply font-sans font-medium text-cool-black;
451
+ @apply font-sans font-extrabold text-cool-black;
344
452
  @apply text-h3;
345
- @apply tracking-tighten-0.0025;
453
+ @apply tracking-tighten-0.005;
346
454
  }
347
455
 
348
456
  .ui-text-h4 {
349
- @apply font-sans font-medium text-cool-black;
350
- @apply text-h4 uppercase;
351
- @apply tracking-widen-0.1;
457
+ @apply font-sans font-extrabold text-cool-black;
458
+ @apply text-h4;
459
+ @apply tracking-tighten-0.0015;
460
+ }
461
+
462
+ .ui-text-h5 {
463
+ @apply font-sans font-extrabold text-cool-black;
464
+ @apply text-h5;
465
+ @apply tracking-tighten-0.0025;
352
466
  }
353
467
 
354
468
  .ui-text-p1 {
355
- @apply font-sans font-light text-charcoal-grey;
469
+ @apply font-sans font-medium text-charcoal-grey;
356
470
  @apply text-p1;
357
471
  }
358
472
 
359
473
  .ui-text-p2 {
360
- @apply font-sans font-light text-charcoal-grey;
474
+ @apply font-sans font-medium text-charcoal-grey;
361
475
  @apply text-p2;
362
476
  }
363
477
 
364
478
  .ui-text-p3 {
365
- @apply font-sans font-light text-charcoal-grey;
479
+ @apply font-sans font-medium text-charcoal-grey;
366
480
  @apply text-p3;
367
481
  }
368
482
 
@@ -373,60 +487,63 @@
373
487
  }
374
488
 
375
489
  .ui-text-quote {
376
- @apply font-sans font-light text-cool-black;
377
- @apply text-quote;
378
- @apply tracking-tighten-0.025;
490
+ @apply font-sans font-normal text-cool-black;
491
+ @apply text-quote leading-normal;
492
+ @apply tracking-tighten-0.0015;
379
493
  }
380
494
 
381
495
  .ui-text-sub-header {
382
- @apply font-sans font-light text-dark-grey;
383
- @apply text-sub-header-xs xs:text-sub-header;
384
- @apply tracking-tighten-0.025;
496
+ @apply font-sans font-semibold text-neutral-800;
497
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
385
498
  }
386
499
 
387
500
  .ui-text-overline1 {
388
- @apply font-sans font-medium text-dark-grey uppercase;
389
- @apply text-overline1;
390
- @apply tracking-widen-0.15;
501
+ @apply font-mono font-medium text-active-orange uppercase;
502
+ @apply text-overline1 leading-normal;
503
+ @apply tracking-widen-0.16;
391
504
  }
392
505
 
393
506
  .ui-text-overline2 {
394
- @apply font-sans font-medium text-dark-grey uppercase;
395
- @apply text-overline2;
396
- @apply tracking-widen-0.1;
507
+ @apply font-mono font-medium text-active-orange uppercase;
508
+ @apply text-overline2 leading-normal;
509
+ @apply tracking-widen-0.16;
397
510
  }
398
511
 
399
512
  .ui-text-menu1 {
400
- @apply font-sans font-light text-cool-black;
401
- @apply text-menu1;
513
+ @apply font-sans font-medium text-cool-black;
514
+ @apply text-menu1 leading-snug;
402
515
  }
403
516
 
404
517
  .ui-text-menu2 {
405
- @apply font-sans font-light text-cool-black;
406
- @apply text-menu2;
518
+ @apply font-sans font-medium text-cool-black;
519
+ @apply text-menu2 leading-snug;
407
520
  }
408
521
 
409
522
  .ui-text-menu3 {
410
- @apply font-sans font-light text-cool-black;
411
- @apply text-menu3;
523
+ @apply font-sans font-medium text-cool-black;
524
+ @apply text-menu3 leading-snug;
412
525
  }
413
526
 
414
527
  .ui-text-code {
415
- @apply font-mono font-semibold text-code;
528
+ @apply font-mono font-medium text-code;
529
+ }
530
+
531
+ .ui-text-code2 {
532
+ @apply font-mono font-medium text-code2;
416
533
  }
417
534
 
418
535
  .ui-text-code-inline {
419
- @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
536
+ @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
420
537
  }
421
538
 
422
539
  .ui-unordered-list {
423
- @apply text-p1 font-light text-cool-black;
424
- @apply list-disc ml-32 mb-24;
540
+ @apply text-p1 font-medium text-cool-black;
541
+ @apply list-disc ml-32 my-16;
425
542
  }
426
543
 
427
544
  .ui-ordered-list {
428
- @apply text-p1 font-light text-cool-black;
429
- @apply ml-32 mb-24 list-decimal;
545
+ @apply text-p1 font-medium text-charcoal-grey;
546
+ @apply ml-32 my-16 list-decimal;
430
547
  }
431
548
 
432
549
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -443,11 +560,21 @@
443
560
  }
444
561
 
445
562
  .ui-unordered-list ul ul {
446
- @apply list-square;
563
+ @apply list-square my-8;
564
+ }
565
+
566
+ .ui-unordered-list ul ul {
567
+ @apply my-8;
568
+ }
569
+
570
+ .ui-ordered-list li,
571
+ .ui-unordered-list li {
572
+ @apply font-medium font-sans tracking-widen-0;
573
+ line-height: var(--lh-extra-relaxed);
447
574
  }
448
575
 
449
576
  .ui-unordered-list-with-emphasis {
450
- @apply text-p1 font-light text-cool-black;
577
+ @apply text-p1 font-medium text-cool-black;
451
578
  @apply list-disc ml-32 mt-32 -mb-12;
452
579
  }
453
580
 
@@ -483,11 +610,11 @@
483
610
  }
484
611
  @layer components {
485
612
  .ui-checkbox-p1 {
486
- @apply flex items-start mb-16 font-sans;
613
+ @apply flex items-start mb-16 font-sans font-medium;
487
614
  }
488
615
 
489
616
  .ui-checkbox-p2 {
490
- @apply flex items-start mb-12 font-sans;
617
+ @apply flex items-start mb-12 font-sans font-medium;
491
618
  }
492
619
 
493
620
  .ui-checkbox-input {
@@ -506,12 +633,12 @@
506
633
 
507
634
  .ui-checkbox-label-p1 {
508
635
  @apply select-none;
509
- @apply text-p1 font-light text-cool-black;
636
+ @apply text-p1 font-medium text-cool-black;
510
637
  }
511
638
 
512
639
  .ui-checkbox-label-p2 {
513
640
  @apply select-none;
514
- @apply text-p2 font-light text-cool-black;
641
+ @apply text-p2 font-medium text-cool-black;
515
642
  }
516
643
 
517
644
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +659,7 @@
532
659
  }
533
660
 
534
661
  .ui-textarea {
535
- @apply font-sans font-light text-cool-black text-p1;
662
+ @apply font-sans font-medium text-cool-black text-p1;
536
663
  @apply p-input mb-16;
537
664
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
538
665
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -545,12 +672,6 @@
545
672
  color: #76767c;
546
673
  }
547
674
 
548
- .ui-textarea:-ms-input-placeholder {
549
- /* CSS vars don't work in ::placeholder in Webkit :( */
550
- /* color: var(--text-dark-grey); */
551
- color: #76767c;
552
- }
553
-
554
675
  .ui-textarea::placeholder {
555
676
  /* CSS vars don't work in ::placeholder in Webkit :( */
556
677
  /* color: var(--text-dark-grey); */
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Uptime=t())}(this,(function(){return(()=>{"use strict";var e={};return e.default})()}));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Uptime=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Reset=t())}(this,(()=>(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()));
@@ -86,8 +86,7 @@
86
86
  abbr[title] {
87
87
  border-bottom: none; /* 1 */
88
88
  text-decoration: underline; /* 2 */
89
- -webkit-text-decoration: underline dotted;
90
- text-decoration: underline dotted; /* 2 */
89
+ text-decoration: underline dotted; /* 2 */
91
90
  }
92
91
 
93
92
  /**
@@ -444,19 +443,10 @@
444
443
  resize: vertical;
445
444
  }
446
445
 
447
- input:-ms-input-placeholder,
448
- textarea:-ms-input-placeholder {
449
- color: #a0aec0;
450
- }
451
-
452
446
  input::-moz-placeholder, textarea::-moz-placeholder {
453
447
  color: #a0aec0;
454
448
  }
455
449
 
456
- input:-ms-input-placeholder, textarea:-ms-input-placeholder {
457
- color: #a0aec0;
458
- }
459
-
460
450
  input::placeholder,
461
451
  textarea::placeholder {
462
452
  color: #a0aec0;
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '8.7.0.dev.2c392ee'
2
+ VERSION = '8.7.0.dev.2f1ba81'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ably-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 8.7.0.dev.2c392ee
4
+ version: 8.7.0.dev.2f1ba81
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2023-02-02 00:00:00.000000000 Z
13
+ date: 2023-10-19 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -91,6 +91,8 @@ files:
91
91
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
92
92
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
93
93
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
94
+ - lib/ably_ui/core/fonts/jetBrains-mono.css
95
+ - lib/ably_ui/core/fonts/manrope.css
94
96
  - lib/ably_ui/core/fonts/next.css
95
97
  - lib/ably_ui/core/fonts/source-code-pro.css
96
98
  - lib/ably_ui/core/footer/component.css
@@ -103,6 +105,7 @@ files:
103
105
  - lib/ably_ui/core/images/ably-logo.png
104
106
  - lib/ably_ui/core/images/ably-logo.svg
105
107
  - lib/ably_ui/core/images/ably-stack.svg
108
+ - lib/ably_ui/core/images/best-support-2023.svg
106
109
  - lib/ably_ui/core/images/cust-logo-ao-col-pos.png
107
110
  - lib/ably_ui/core/images/cust-logo-ao-col-pos@2x.png
108
111
  - lib/ably_ui/core/images/cust-logo-ausopen-col-pos.png
@@ -128,9 +131,12 @@ files:
128
131
  - lib/ably_ui/core/images/cust-photo-hubspot-max-freiert.jpg
129
132
  - lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
130
133
  - lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
134
+ - lib/ably_ui/core/images/fastest-implementation-2023.svg
131
135
  - lib/ably_ui/core/images/flexible-companies.png
132
136
  - lib/ably_ui/core/images/high-performer-2022.png
137
+ - lib/ably_ui/core/images/high-performer-2023.svg
133
138
  - lib/ably_ui/core/images/highest-user-adoption-2022.png
139
+ - lib/ably_ui/core/images/highest-user-adoption-2023.svg
134
140
  - lib/ably_ui/core/images/icon-tech-aws.svg
135
141
  - lib/ably_ui/core/images/rocket-list-2021.png
136
142
  - lib/ably_ui/core/images/scale-motif-open-empathetic.svg
@@ -156,9 +162,9 @@ files:
156
162
  - lib/ably_ui/core/meganav_content_developers/component.js
157
163
  - lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb
158
164
  - lib/ably_ui/core/meganav_content_developers/meganav_content_developers.rb
159
- - lib/ably_ui/core/meganav_content_platform/component.js
160
- - lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb
161
- - lib/ably_ui/core/meganav_content_platform/meganav_content_platform.rb
165
+ - lib/ably_ui/core/meganav_content_products/component.js
166
+ - lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb
167
+ - lib/ably_ui/core/meganav_content_products/meganav_content_products.rb
162
168
  - lib/ably_ui/core/meganav_content_use_cases/component.js
163
169
  - lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb
164
170
  - lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.rb