ably-ui 8.7.0.dev.602ecf0 → 8.7.0.dev.734c219

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 (73) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +6 -6
  3. data/README.md +16 -5
  4. data/lib/ably_ui/core/code/component.css +5 -3
  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/customer_logos/customer_logos.html.erb +2 -2
  13. data/lib/ably_ui/core/customer_logos/customer_logos.rb +2 -1
  14. data/lib/ably_ui/core/dropdown_menu/component.js +1 -0
  15. data/lib/ably_ui/core/feature_footer/component.js +1 -1
  16. data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +4 -4
  17. data/lib/ably_ui/core/featured_link/component.css +1 -1
  18. data/lib/ably_ui/core/featured_link/component.js +1 -1
  19. data/lib/ably_ui/core/flash/component.js +1 -1
  20. data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
  21. data/lib/ably_ui/core/fonts/manrope.css +3 -0
  22. data/lib/ably_ui/core/footer/component.css +23 -3
  23. data/lib/ably_ui/core/footer/component.js +1 -1
  24. data/lib/ably_ui/core/footer/footer.html.erb +120 -58
  25. data/lib/ably_ui/core/icon/component.js +1 -1
  26. data/lib/ably_ui/core/images/ably-logo.png +0 -0
  27. data/lib/ably_ui/core/images/high-performer-2022.png +0 -0
  28. data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -0
  29. data/lib/ably_ui/core/images/users-love-us-2022.png +0 -0
  30. data/lib/ably_ui/core/loader/component.js +1 -1
  31. data/lib/ably_ui/core/logo/component.js +1 -1
  32. data/lib/ably_ui/core/logo/logo.html.erb +2 -27
  33. data/lib/ably_ui/core/logo/logo.rb +15 -6
  34. data/lib/ably_ui/core/meganav/component.css +8 -10
  35. data/lib/ably_ui/core/meganav/component.js +1 -2
  36. data/lib/ably_ui/core/meganav/component.json +1 -1
  37. data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
  38. data/lib/ably_ui/core/meganav/meganav.rb +3 -2
  39. data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
  40. data/lib/ably_ui/core/meganav_content_company/component.js +1 -1
  41. data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +9 -0
  42. data/lib/ably_ui/core/meganav_content_developers/component.js +1 -1
  43. data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +26 -10
  44. data/lib/ably_ui/core/meganav_content_platform/component.js +1 -1
  45. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +7 -7
  46. data/lib/ably_ui/core/meganav_content_use_cases/component.js +1 -1
  47. data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +43 -39
  48. data/lib/ably_ui/core/meganav_control/component.js +1 -1
  49. data/lib/ably_ui/core/meganav_control_mobile_dropdown/component.js +1 -1
  50. data/lib/ably_ui/core/meganav_control_mobile_panel_close/component.js +1 -1
  51. data/lib/ably_ui/core/meganav_control_mobile_panel_open/component.js +1 -1
  52. data/lib/ably_ui/core/meganav_items_desktop/component.js +1 -1
  53. data/lib/ably_ui/core/meganav_items_mobile/component.js +1 -1
  54. data/lib/ably_ui/core/meganav_items_signed_in/component.js +1 -1
  55. data/lib/ably_ui/core/meganav_search/component.js +1 -1
  56. data/lib/ably_ui/core/meganav_search_autocomplete/component.js +1 -2
  57. data/lib/ably_ui/core/meganav_search_panel/component.js +1 -1
  58. data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
  59. data/lib/ably_ui/core/meganav_search_suggestions/meganav_search_suggestions.html.erb +1 -1
  60. data/lib/ably_ui/core/notice/component.css +1 -1
  61. data/lib/ably_ui/core/notice/component.js +1 -2
  62. data/lib/ably_ui/core/notice/notice.html.erb +2 -2
  63. data/lib/ably_ui/core/scripts.js +1 -1
  64. data/lib/ably_ui/core/showcase/component.js +1 -1
  65. data/lib/ably_ui/core/sign_out_link/component.js +1 -1
  66. data/lib/ably_ui/core/slider/component.js +1 -1
  67. data/lib/ably_ui/core/sprites.svg +109 -1
  68. data/lib/ably_ui/core/styles.css +226 -104
  69. data/lib/ably_ui/core/uptime/component.js +1 -1
  70. data/lib/ably_ui/reset/scripts.js +1 -1
  71. data/lib/ably_ui/reset/styles.css +1 -11
  72. data/lib/ably_ui/version.rb +1 -1
  73. metadata +9 -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;
@@ -47,6 +145,8 @@
47
145
  --icon-color-glassdoor: #0baa41;
48
146
  --icon-color-github: #000000;
49
147
  --icon-color-discord: #5865f2;
148
+ --icon-color-stackoverflow: #f48024;
149
+ --icon-color-youtube: #ff0000;
50
150
 
51
151
  --gradient-active-orange: linear-gradient(
52
152
  61.2deg,
@@ -68,44 +168,51 @@
68
168
 
69
169
  --gradient-hot-pink: linear-gradient(
70
170
  80.2deg,
71
- var(--color-bright-red) 0%,
171
+ var(--color-orange-700) 0%,
72
172
  var(--color-jazzy-pink) 100%
73
173
  );
74
174
 
75
- --fs-title-xl: 4rem;
76
- --fs-title: 3.5rem;
77
- --fs-title-xs: 3rem;
78
- --fs-h1-xl: 3.5rem;
79
- --fs-h1: 3rem;
80
- --fs-h1-xs: 2.625rem;
81
- --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;
82
183
  --fs-h2: 2rem;
83
- --fs-h2-xs: 1.875rem;
184
+ --fs-h2-xs: 1.75rem;
185
+
84
186
  --fs-h3: 1.5rem;
85
- --fs-h4: 1.125rem;
86
- --fs-p1: 1.125rem;
87
- --fs-p2: 1rem;
187
+ --fs-h4: 1.25rem;
188
+ --fs-h5: 1rem;
189
+
190
+ --fs-p1: 1rem;
191
+ --fs-p2: 0.938rem;
88
192
  --fs-p3: 0.875rem;
89
193
  --fs-standfirst-xl: 2.25rem;
90
194
  --fs-standfirst: 1.5rem;
91
- --fs-sub-header: 1.5rem;
92
- --fs-sub-header-xs: 1.125rem;
195
+ --fs-sub-header: 1.125rem;
196
+ --fs-sub-header-xs: 1.063rem;
93
197
  --fs-overline1: 1rem;
94
198
  --fs-overline2: 0.875rem;
95
- --fs-btn1: 1.125rem;
96
- --fs-btn2: 1rem;
199
+ --fs-btn1: 1rem;
200
+ --fs-btn2: 0.938rem;
97
201
  --fs-btn3: 0.875rem;
98
- --fs-menu1: 1.125rem;
99
- --fs-menu2: 1rem;
202
+ --fs-menu1: 1rem;
203
+ --fs-menu2: 0.938rem;
100
204
  --fs-menu3: 0.875rem;
101
- --fs-quote: 1.5rem;
102
- --fs-code: 0.875rem;
205
+ --fs-quote: 1.25rem;
206
+ --fs-code: 0.938rem;
207
+ --fs-code2: 0.813rem;
103
208
 
104
209
  --lh-dense: 1;
105
210
  --lh-tight: 1.125;
106
211
  --lh-snug: 1.15;
212
+ --lh-min-normal: 1.2;
107
213
  --lh-normal: 1.25;
108
214
  --lh-relaxed: 1.45;
215
+ --lh-extra-relaxed: 1.6;
109
216
 
110
217
  --ls-tighten-0_025: -0.025em;
111
218
  --ls-tighten-0_02: -0.02em;
@@ -113,7 +220,9 @@
113
220
  --ls-tighten-0_01: -0.01em;
114
221
  --ls-tighten-0_005: -0.005em;
115
222
  --ls-tighten-0_0025: -0.0025em;
223
+ --ls-tighten-0_0015: -0.0015em;
116
224
  --ls-widen-0_1: 0.1em;
225
+ --ls-widen-0_16: 0.16em;
117
226
  --ls-widen-0_15: 0.15em;
118
227
 
119
228
  --spacing-0: 0px;
@@ -128,6 +237,7 @@
128
237
  --spacing-20: 1.25rem;
129
238
  --spacing-24: 1.5rem;
130
239
  --spacing-32: 2rem;
240
+ --spacing-36: 2.25rem;
131
241
  --spacing-40: 2.5rem;
132
242
  --spacing-48: 3rem;
133
243
  --spacing-64: 4rem;
@@ -175,7 +285,7 @@
175
285
  }
176
286
  @layer components {
177
287
  .ui-btn {
178
- @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;
179
289
  @apply hover:text-white hover:bg-active-orange;
180
290
  @apply active:text-white active:bg-red-orange;
181
291
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -199,7 +309,7 @@
199
309
  background-size: 200% 100%;
200
310
  background-position: 0% 0%;
201
311
 
202
- @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;
203
313
  @apply focus:outline-gui-focus;
204
314
  @apply inline-flex items-center justify-center;
205
315
  }
@@ -215,7 +325,7 @@
215
325
  }
216
326
 
217
327
  .ui-btn-invert {
218
- @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;
219
329
  @apply hover:text-white hover:bg-active-orange;
220
330
  @apply active:text-white active:bg-red-orange;
221
331
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -225,7 +335,7 @@
225
335
  }
226
336
 
227
337
  .ui-btn-secondary {
228
- @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;
229
339
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
230
340
  @apply active:border-red-orange active:bg-white;
231
341
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -235,7 +345,7 @@
235
345
  }
236
346
 
237
347
  .ui-btn-secondary-invert {
238
- @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;
239
349
  @apply hover:text-white hover:border-active-orange;
240
350
  @apply active:border-red-orange;
241
351
  @apply focus:outline-gui-focus;
@@ -320,47 +430,53 @@
320
430
  }
321
431
  @layer components {
322
432
  .ui-text-title {
323
- @apply font-sans font-medium text-cool-black;
433
+ @apply font-manrope font-extrabold text-cool-black;
324
434
  @apply text-title-xs xs:text-title xl:text-title-xl;
325
- @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;
326
436
  }
327
437
 
328
438
  .ui-text-h1 {
329
- @apply font-sans font-medium text-cool-black;
439
+ @apply font-manrope font-extrabold text-cool-black;
330
440
  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
331
- @apply tracking-tighten-0.01;
441
+ @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
332
442
  }
333
443
 
334
444
  .ui-text-h2 {
335
- @apply font-sans font-medium text-cool-black;
445
+ @apply font-manrope font-extrabold text-cool-black;
336
446
  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
337
- @apply tracking-tighten-0.005;
447
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
338
448
  }
339
449
 
340
450
  .ui-text-h3 {
341
- @apply font-sans font-medium text-cool-black;
451
+ @apply font-manrope font-extrabold text-cool-black;
342
452
  @apply text-h3;
343
- @apply tracking-tighten-0.0025;
453
+ @apply tracking-tighten-0.005;
344
454
  }
345
455
 
346
456
  .ui-text-h4 {
347
- @apply font-sans font-medium text-cool-black;
348
- @apply text-h4 uppercase;
349
- @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;
350
466
  }
351
467
 
352
468
  .ui-text-p1 {
353
- @apply font-sans font-light text-charcoal-grey;
469
+ @apply font-manrope font-medium text-charcoal-grey;
354
470
  @apply text-p1;
355
471
  }
356
472
 
357
473
  .ui-text-p2 {
358
- @apply font-sans font-light text-charcoal-grey;
474
+ @apply font-manrope font-medium text-charcoal-grey;
359
475
  @apply text-p2;
360
476
  }
361
477
 
362
478
  .ui-text-p3 {
363
- @apply font-sans font-light text-charcoal-grey;
479
+ @apply font-manrope font-medium text-charcoal-grey;
364
480
  @apply text-p3;
365
481
  }
366
482
 
@@ -371,60 +487,63 @@
371
487
  }
372
488
 
373
489
  .ui-text-quote {
374
- @apply font-sans font-light text-cool-black;
375
- @apply text-quote;
376
- @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;
377
493
  }
378
494
 
379
495
  .ui-text-sub-header {
380
- @apply font-sans font-light text-dark-grey;
381
- @apply text-sub-header-xs xs:text-sub-header;
382
- @apply tracking-tighten-0.025;
496
+ @apply font-manrope font-semibold text-neutral-800;
497
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
383
498
  }
384
499
 
385
500
  .ui-text-overline1 {
386
- @apply font-sans font-medium text-dark-grey uppercase;
387
- @apply text-overline1;
388
- @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;
389
504
  }
390
505
 
391
506
  .ui-text-overline2 {
392
- @apply font-sans font-medium text-dark-grey uppercase;
393
- @apply text-overline2;
394
- @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;
395
510
  }
396
511
 
397
512
  .ui-text-menu1 {
398
- @apply font-sans font-light text-cool-black;
399
- @apply text-menu1;
513
+ @apply font-manrope font-medium text-cool-black;
514
+ @apply text-menu1 leading-snug;
400
515
  }
401
516
 
402
517
  .ui-text-menu2 {
403
- @apply font-sans font-light text-cool-black;
404
- @apply text-menu2;
518
+ @apply font-manrope font-medium text-cool-black;
519
+ @apply text-menu2 leading-snug;
405
520
  }
406
521
 
407
522
  .ui-text-menu3 {
408
- @apply font-sans font-light text-cool-black;
409
- @apply text-menu3;
523
+ @apply font-manrope font-medium text-cool-black;
524
+ @apply text-menu3 leading-snug;
410
525
  }
411
526
 
412
527
  .ui-text-code {
413
- @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;
414
533
  }
415
534
 
416
535
  .ui-text-code-inline {
417
- @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;
418
537
  }
419
538
 
420
539
  .ui-unordered-list {
421
- @apply text-p1 font-light text-cool-black;
422
- @apply list-disc ml-32 mb-24;
540
+ @apply text-p1 font-medium text-cool-black;
541
+ @apply list-disc ml-32 my-16;
423
542
  }
424
543
 
425
544
  .ui-ordered-list {
426
- @apply text-p1 font-light text-cool-black;
427
- @apply ml-32 mb-24 list-decimal;
545
+ @apply text-p1 font-medium text-charcoal-grey;
546
+ @apply ml-32 my-16 list-decimal;
428
547
  }
429
548
 
430
549
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -441,11 +560,21 @@
441
560
  }
442
561
 
443
562
  .ui-unordered-list ul ul {
444
- @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);
445
574
  }
446
575
 
447
576
  .ui-unordered-list-with-emphasis {
448
- @apply text-p1 font-light text-cool-black;
577
+ @apply text-p1 font-medium text-cool-black;
449
578
  @apply list-disc ml-32 mt-32 -mb-12;
450
579
  }
451
580
 
@@ -468,25 +597,24 @@
468
597
 
469
598
  .ui-link {
470
599
  @apply text-gui-default;
471
- @apply visited:text-gui-default;
472
600
  @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
473
601
  @apply focus:text-gui-default focus:outline-gui-focus;
602
+ @apply no-underline;
474
603
  }
475
604
 
476
605
  .ui-link-neutral {
477
- @apply visited:text-dark-grey;
478
606
  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
479
- @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
607
+ @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
480
608
  @apply underline;
481
609
  }
482
610
  }
483
611
  @layer components {
484
612
  .ui-checkbox-p1 {
485
- @apply flex items-start mb-16 font-sans;
613
+ @apply flex items-start mb-16 font-manrope font-medium;
486
614
  }
487
615
 
488
616
  .ui-checkbox-p2 {
489
- @apply flex items-start mb-12 font-sans;
617
+ @apply flex items-start mb-12 font-manrope font-medium;
490
618
  }
491
619
 
492
620
  .ui-checkbox-input {
@@ -505,12 +633,12 @@
505
633
 
506
634
  .ui-checkbox-label-p1 {
507
635
  @apply select-none;
508
- @apply text-p1 font-light text-cool-black;
636
+ @apply text-p1 font-medium text-cool-black;
509
637
  }
510
638
 
511
639
  .ui-checkbox-label-p2 {
512
640
  @apply select-none;
513
- @apply text-p2 font-light text-cool-black;
641
+ @apply text-p2 font-medium text-cool-black;
514
642
  }
515
643
 
516
644
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -531,7 +659,7 @@
531
659
  }
532
660
 
533
661
  .ui-textarea {
534
- @apply font-sans font-light text-cool-black text-p1;
662
+ @apply font-manrope font-medium text-cool-black text-p1;
535
663
  @apply p-input mb-16;
536
664
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
537
665
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -544,12 +672,6 @@
544
672
  color: #76767c;
545
673
  }
546
674
 
547
- .ui-textarea:-ms-input-placeholder {
548
- /* CSS vars don't work in ::placeholder in Webkit :( */
549
- /* color: var(--text-dark-grey); */
550
- color: #76767c;
551
- }
552
-
553
675
  .ui-textarea::placeholder {
554
676
  /* CSS vars don't work in ::placeholder in Webkit :( */
555
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.602ecf0'
2
+ VERSION = '8.7.0.dev.734c219'
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.602ecf0
4
+ version: 8.7.0.dev.734c219
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-09-23 00:00:00.000000000 Z
13
+ date: 2023-08-11 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -64,6 +64,7 @@ files:
64
64
  - lib/ably_ui/core/customer_logos/component.js
65
65
  - lib/ably_ui/core/customer_logos/customer_logos.html.erb
66
66
  - lib/ably_ui/core/customer_logos/customer_logos.rb
67
+ - lib/ably_ui/core/dropdown_menu/component.js
67
68
  - lib/ably_ui/core/feature_footer/component.css
68
69
  - lib/ably_ui/core/feature_footer/component.js
69
70
  - lib/ably_ui/core/feature_footer/feature_footer.html.erb
@@ -90,6 +91,8 @@ files:
90
91
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
91
92
  - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
92
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
93
96
  - lib/ably_ui/core/fonts/next.css
94
97
  - lib/ably_ui/core/fonts/source-code-pro.css
95
98
  - lib/ably_ui/core/footer/component.css
@@ -99,6 +102,7 @@ files:
99
102
  - lib/ably_ui/core/icon/component.js
100
103
  - lib/ably_ui/core/icon/icon.html.erb
101
104
  - lib/ably_ui/core/icon/icon.rb
105
+ - lib/ably_ui/core/images/ably-logo.png
102
106
  - lib/ably_ui/core/images/ably-logo.svg
103
107
  - lib/ably_ui/core/images/ably-stack.svg
104
108
  - lib/ably_ui/core/images/cust-logo-ao-col-pos.png
@@ -127,10 +131,13 @@ files:
127
131
  - lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
128
132
  - lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
129
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
130
136
  - lib/ably_ui/core/images/icon-tech-aws.svg
131
137
  - lib/ably_ui/core/images/rocket-list-2021.png
132
138
  - lib/ably_ui/core/images/scale-motif-open-empathetic.svg
133
139
  - lib/ably_ui/core/images/technical-support-01-800x533.jpg
140
+ - lib/ably_ui/core/images/users-love-us-2022.png
134
141
  - lib/ably_ui/core/loader/component.js
135
142
  - lib/ably_ui/core/loader/loader.html.erb
136
143
  - lib/ably_ui/core/loader/loader.rb