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

Sign up to get free protection for your applications and to get access to all the features.
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