ably-ui 8.7.0.dev.fa55b85 → 8.7.0.dev.fba161a

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +6 -6
  3. data/README.md +15 -4
  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 +1 -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 +12 -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 +23 -3
  20. data/lib/ably_ui/core/footer/component.js +1 -1
  21. data/lib/ably_ui/core/footer/footer.html.erb +120 -58
  22. data/lib/ably_ui/core/icon/component.js +1 -1
  23. data/lib/ably_ui/core/images/ably-logo.png +0 -0
  24. data/lib/ably_ui/core/images/high-performer-2022.png +0 -0
  25. data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -0
  26. data/lib/ably_ui/core/images/users-love-us-2022.png +0 -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/logo/logo.html.erb +2 -27
  30. data/lib/ably_ui/core/logo/logo.rb +15 -6
  31. data/lib/ably_ui/core/meganav/component.css +8 -10
  32. data/lib/ably_ui/core/meganav/component.js +1 -1
  33. data/lib/ably_ui/core/meganav/component.json +1 -1
  34. data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
  35. data/lib/ably_ui/core/meganav/meganav.rb +3 -2
  36. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
  37. data/lib/ably_ui/core/meganav_content_company/component.js +1 -1
  38. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +9 -0
  39. data/lib/ably_ui/core/meganav_content_developers/component.js +1 -1
  40. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +21 -14
  41. data/lib/ably_ui/core/meganav_content_platform/component.js +1 -1
  42. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +7 -7
  43. data/lib/ably_ui/core/meganav_content_use_cases/component.js +1 -1
  44. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +42 -38
  45. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  46. data/lib/ably_ui/core/meganav_control_mobile_dropdown/component.js +1 -1
  47. data/lib/ably_ui/core/meganav_control_mobile_panel_close/component.js +1 -1
  48. data/lib/ably_ui/core/meganav_control_mobile_panel_open/component.js +1 -1
  49. data/lib/ably_ui/core/meganav_items_desktop/component.js +1 -1
  50. data/lib/ably_ui/core/meganav_items_mobile/component.js +1 -1
  51. data/lib/ably_ui/core/meganav_items_signed_in/component.js +1 -1
  52. data/lib/ably_ui/core/meganav_search/component.js +1 -1
  53. data/lib/ably_ui/core/meganav_search_autocomplete/component.js +1 -1
  54. data/lib/ably_ui/core/meganav_search_panel/component.js +1 -1
  55. data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
  56. data/lib/ably_ui/core/notice/component.css +1 -1
  57. data/lib/ably_ui/core/notice/component.js +1 -1
  58. data/lib/ably_ui/core/notice/notice.html.erb +2 -2
  59. data/lib/ably_ui/core/scripts.js +1 -1
  60. data/lib/ably_ui/core/showcase/component.js +1 -1
  61. data/lib/ably_ui/core/sign_out_link/component.js +1 -1
  62. data/lib/ably_ui/core/slider/component.js +1 -1
  63. data/lib/ably_ui/core/sprites.svg +87 -3
  64. data/lib/ably_ui/core/styles.css +222 -101
  65. data/lib/ably_ui/core/uptime/component.js +1 -1
  66. data/lib/ably_ui/reset/scripts.js +1 -1
  67. data/lib/ably_ui/reset/styles.css +1 -11
  68. data/lib/ably_ui/version.rb +1 -1
  69. metadata +8 -2
@@ -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-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope font-extrabold text-cool-black;
458
+ @apply text-h4;
459
+ @apply tracking-tighten-0.0015;
460
+ }
461
+
462
+ .ui-text-h5 {
463
+ @apply font-manrope 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-manrope 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-manrope 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-manrope 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-manrope 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-manrope font-semibold text-neutral-900;
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-jetbrains_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-jetbrains_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-manrope 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-manrope 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-manrope 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-jetbrains_mono font-medium text-code;
529
+ }
530
+
531
+ .ui-text-code2 {
532
+ @apply font-jetbrains_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-jetbrains_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-manrope 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-manrope 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-manrope 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-manrope 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.fa55b85'
2
+ VERSION = '8.7.0.dev.fba161a'
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.fa55b85
4
+ version: 8.7.0.dev.fba161a
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: 2022-10-28 00:00:00.000000000 Z
13
+ date: 2023-08-10 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
@@ -100,6 +102,7 @@ files:
100
102
  - lib/ably_ui/core/icon/component.js
101
103
  - lib/ably_ui/core/icon/icon.html.erb
102
104
  - lib/ably_ui/core/icon/icon.rb
105
+ - lib/ably_ui/core/images/ably-logo.png
103
106
  - lib/ably_ui/core/images/ably-logo.svg
104
107
  - lib/ably_ui/core/images/ably-stack.svg
105
108
  - lib/ably_ui/core/images/cust-logo-ao-col-pos.png
@@ -128,10 +131,13 @@ files:
128
131
  - lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
129
132
  - lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
130
133
  - lib/ably_ui/core/images/flexible-companies.png
134
+ - lib/ably_ui/core/images/high-performer-2022.png
135
+ - lib/ably_ui/core/images/highest-user-adoption-2022.png
131
136
  - lib/ably_ui/core/images/icon-tech-aws.svg
132
137
  - lib/ably_ui/core/images/rocket-list-2021.png
133
138
  - lib/ably_ui/core/images/scale-motif-open-empathetic.svg
134
139
  - lib/ably_ui/core/images/technical-support-01-800x533.jpg
140
+ - lib/ably_ui/core/images/users-love-us-2022.png
135
141
  - lib/ably_ui/core/loader/component.js
136
142
  - lib/ably_ui/core/loader/loader.html.erb
137
143
  - lib/ably_ui/core/loader/loader.rb