ably-ui 8.7.0.dev.1e9479a → 8.7.0.dev.2b71529
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/featured_link/component.css +1 -1
- data/lib/ably_ui/core/footer/component.css +3 -3
- data/lib/ably_ui/core/footer/footer.html.erb +13 -13
- data/lib/ably_ui/core/meganav/component.css +7 -7
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +1 -1
- data/lib/ably_ui/core/notice/component.css +1 -1
- data/lib/ably_ui/core/notice/notice.html.erb +2 -2
- data/lib/ably_ui/core/styles.css +50 -36
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 67281037363d082590051da806eedd650204a6cc0e8988610d63694a6806bfe4
|
4
|
+
data.tar.gz: d613b363d5042f62a9cdc9d84b06628a33882002f84eab04426c69f051dc178c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 99d0ac0443489b5754224f0b28128173e4d8b95588ee8fa95ee26819d396a9c0557a7c82c27606e4184909489d879cfa91a9e46da4c2d9d5b3c2794adcd8d78d
|
7
|
+
data.tar.gz: 4ba3bb5b573f250ddea26f4f7df34972704bc25c74809ccf9738211a4bacec529147a5a4eef6946c7e6c2fbc1c08f689ec43130e211f3e1acb6b50665855a218
|
data/Gemfile.lock
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
@layer components {
|
2
2
|
.ui-footer-col-title {
|
3
|
-
@apply text-overline2 p-menu-row-title font-
|
3
|
+
@apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
|
4
4
|
}
|
5
5
|
|
6
6
|
.ui-footer-menu-row-link {
|
7
|
-
@apply text-menu3 text-cool-black font-
|
7
|
+
@apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
|
8
8
|
}
|
9
9
|
|
10
10
|
.ui-footer-link {
|
11
|
-
@apply text-gui-default hover:text-gui-hover text-menu3 font-
|
11
|
+
@apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
|
12
12
|
}
|
13
13
|
|
14
14
|
.ui-footer-compliance-text {
|
@@ -1,12 +1,12 @@
|
|
1
|
-
<footer class="bg-light-grey font-
|
1
|
+
<footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
|
2
2
|
<div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
|
3
3
|
<div class="col-span-full md:col-span-2">
|
4
4
|
<div class="flex flex-row p-menu-row-snug">
|
5
5
|
<%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
|
6
|
-
<h2 class="text-overline2 col-span-full font-
|
6
|
+
<h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
|
7
7
|
</div>
|
8
8
|
<div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
|
9
|
-
<p class="text-p3 py-16 font-
|
9
|
+
<p class="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
|
10
10
|
Easily power any realtime experience in your application via a simple API that handles everything realtime.
|
11
11
|
</p>
|
12
12
|
</div>
|
@@ -180,7 +180,7 @@
|
|
180
180
|
>
|
181
181
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
182
182
|
</a>
|
183
|
-
<div class="pl-16 text-menu3 font-
|
183
|
+
<div class="pl-16 text-menu3 font-manrope font-medium">
|
184
184
|
<strong class="block font-medium">We're hiring!</strong>
|
185
185
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
186
186
|
Learn more at Glassdoor
|
@@ -200,7 +200,7 @@
|
|
200
200
|
>
|
201
201
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
202
202
|
</a>
|
203
|
-
<div class="text-menu3 font-
|
203
|
+
<div class="text-menu3 font-manrope font-medium">
|
204
204
|
<strong class="block font-medium">We're hiring!</strong>
|
205
205
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
206
206
|
Learn more at Glassdoor
|
@@ -231,29 +231,29 @@
|
|
231
231
|
<div class="flex mr-24">
|
232
232
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
233
233
|
<div>
|
234
|
-
<p class="ui-footer-compliance-text font-
|
235
|
-
<p class="ui-footer-compliance-text font-
|
234
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
|
235
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
|
236
236
|
</div>
|
237
237
|
</div>
|
238
238
|
<div class="flex mr-24 md:col-start-2">
|
239
239
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
240
240
|
<div>
|
241
|
-
<p class="ui-footer-compliance-text font-
|
242
|
-
<p class="ui-footer-compliance-text font-
|
241
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
|
242
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
|
243
243
|
</div>
|
244
244
|
</div>
|
245
245
|
<div class="flex mr-24 md:col-start-3">
|
246
246
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
247
247
|
<div>
|
248
|
-
<p class="ui-footer-compliance-text font-
|
249
|
-
<p class="ui-footer-compliance-text font-
|
248
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
|
249
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
|
250
250
|
</div>
|
251
251
|
</div>
|
252
252
|
<div class="flex mr-24 md:col-start-4">
|
253
253
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
254
254
|
<div>
|
255
|
-
<p class="ui-footer-compliance-text font-
|
256
|
-
<p class="ui-footer-compliance-text font-
|
255
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
|
256
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
|
257
257
|
</div>
|
258
258
|
</div>
|
259
259
|
</div>
|
@@ -7,7 +7,7 @@
|
|
7
7
|
z-index: var(--stacking-context-page-meganav);
|
8
8
|
|
9
9
|
@apply fixed top-0 w-full;
|
10
|
-
@apply antialiased font-
|
10
|
+
@apply antialiased font-manrope transition-colors;
|
11
11
|
}
|
12
12
|
|
13
13
|
.ui-meganav {
|
@@ -51,7 +51,7 @@
|
|
51
51
|
}
|
52
52
|
|
53
53
|
.ui-meganav-link {
|
54
|
-
@apply text-menu2 font-
|
54
|
+
@apply text-menu2 font-bold block font-manrope;
|
55
55
|
@apply mr-12 lg:mr-24 px-0 py-20;
|
56
56
|
@apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
|
57
57
|
@apply transition-colors;
|
@@ -63,13 +63,13 @@
|
|
63
63
|
|
64
64
|
.ui-meganav-mobile-link {
|
65
65
|
@apply p-menu-row relative -left-8 w-extend-8;
|
66
|
-
@apply text-menu2 font-medium block text-cool-black text-left;
|
66
|
+
@apply text-menu2 font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
|
67
67
|
@apply flex items-center;
|
68
68
|
@apply focus:text-gui-focus focus:outline-none;
|
69
69
|
}
|
70
70
|
|
71
71
|
.ui-meganav-account-link {
|
72
|
-
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-
|
72
|
+
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-jetbrains_mono;
|
73
73
|
}
|
74
74
|
|
75
75
|
.ui-meganav-content {
|
@@ -97,15 +97,15 @@
|
|
97
97
|
}
|
98
98
|
|
99
99
|
.ui-meganav-media-heading {
|
100
|
-
@apply text-menu3 text-cool-black font-
|
100
|
+
@apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
|
101
101
|
}
|
102
102
|
|
103
103
|
.ui-meganav-media-copy {
|
104
|
-
@apply text-p3 text-dark-grey
|
104
|
+
@apply text-p3 font-manrope font-medium text-dark-grey leading-normal;
|
105
105
|
}
|
106
106
|
|
107
107
|
.ui-meganav-overline {
|
108
|
-
@apply text-overline2 text-cool-black uppercase font-
|
108
|
+
@apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
|
109
109
|
}
|
110
110
|
|
111
111
|
.ui-meganav-hr {
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
|
8
8
|
</div>
|
9
9
|
|
10
|
-
<p class="text-p2 font-
|
10
|
+
<p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
|
11
11
|
Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
|
12
12
|
realtime, and lets you focus on your code.
|
13
13
|
</p>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<%# Note the style attribute is used for entry animation %>
|
2
2
|
<%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
|
3
3
|
<div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
|
4
|
-
<%= content_wrapper class: "font-
|
5
|
-
<strong class="font-
|
4
|
+
<%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
|
5
|
+
<strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
|
6
6
|
<span class="pr-4"><%= @contents[:body_text] %></span>
|
7
7
|
<span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
|
8
8
|
<% end %>
|
data/lib/ably_ui/core/styles.css
CHANGED
@@ -1,23 +1,27 @@
|
|
1
1
|
@layer base {
|
2
2
|
:root {
|
3
|
-
--color-cool-black: #
|
4
|
-
--color-active-orange: #
|
5
|
-
--color-red-orange: #
|
3
|
+
--color-cool-black: #03020d;
|
4
|
+
--color-active-orange: #ff5416;
|
5
|
+
--color-red-orange: #e40000;
|
6
6
|
--color-white: #ffffff;
|
7
|
-
--color-electric-cyan: #
|
8
|
-
--color-zingy-green: #
|
9
|
-
--color-bright-red: #
|
10
|
-
--color-
|
11
|
-
--color-
|
12
|
-
--color-light-grey: #
|
13
|
-
--color-
|
7
|
+
--color-electric-cyan: #4ad4ff;
|
8
|
+
--color-zingy-green: #08ff13;
|
9
|
+
--color-bright-red: #fe372b;
|
10
|
+
--color-orange-700: #ff2739;
|
11
|
+
--color-jazzy-pink: #ff17d2;
|
12
|
+
--color-extra-light-grey: #f8fafc;
|
13
|
+
--color-light-grey: #f4f8fb;
|
14
|
+
--color-mid-grey: #c6ced9;
|
14
15
|
--color-dark-grey: #667085;
|
15
|
-
--color-charcoal-grey: #
|
16
|
-
--color-gui-default: #
|
17
|
-
--color-gui-hover: #
|
18
|
-
--color-gui-focus: #80B9F2;
|
19
|
-
--color-gui-focus-outline: #80b9f2;
|
16
|
+
--color-charcoal-grey: #2b303b;
|
17
|
+
--color-gui-default: #006edc;
|
18
|
+
--color-gui-hover: #0862b9;
|
20
19
|
--color-gui-active: #074095;
|
20
|
+
--color-gui-default-dark: #4da6ff;
|
21
|
+
--color-gui-hover-dark: #2894ff;
|
22
|
+
--color-gui-active-dark: #0080ff;
|
23
|
+
--color-gui-focus: #80b9f2;
|
24
|
+
--color-gui-focus-outline: #80b9f2;
|
21
25
|
--color-gui-visited: #4887c2;
|
22
26
|
--color-gui-unavailable: #a8a8a8;
|
23
27
|
--color-gui-error: #fb0c0c;
|
@@ -36,6 +40,10 @@
|
|
36
40
|
--syntax-red: #d54e53;
|
37
41
|
--syntax-lilac: #bb87d3;
|
38
42
|
|
43
|
+
/* New Neutral colors */
|
44
|
+
--color-neutral-900: #39414e;
|
45
|
+
--color-neutral-500: #c6ced9;
|
46
|
+
|
39
47
|
/* uptime status colors */
|
40
48
|
--uptime-color-up: #39b54a;
|
41
49
|
--uptime-color-trouble: #e87623;
|
@@ -70,7 +78,7 @@
|
|
70
78
|
|
71
79
|
--gradient-hot-pink: linear-gradient(
|
72
80
|
80.2deg,
|
73
|
-
var(--color-
|
81
|
+
var(--color-orange-700) 0%,
|
74
82
|
var(--color-jazzy-pink) 100%
|
75
83
|
);
|
76
84
|
|
@@ -111,8 +119,10 @@
|
|
111
119
|
--lh-dense: 1;
|
112
120
|
--lh-tight: 1.125;
|
113
121
|
--lh-snug: 1.15;
|
122
|
+
--lh-min-normal: 1.2;
|
114
123
|
--lh-normal: 1.25;
|
115
124
|
--lh-relaxed: 1.45;
|
125
|
+
--lh-extra-relaxed: 1.6;
|
116
126
|
|
117
127
|
--ls-tighten-0_025: -0.025em;
|
118
128
|
--ls-tighten-0_02: -0.02em;
|
@@ -388,40 +398,40 @@
|
|
388
398
|
|
389
399
|
.ui-text-quote {
|
390
400
|
@apply font-manrope font-normal text-cool-black;
|
391
|
-
@apply text-quote;
|
401
|
+
@apply text-quote leading-normal;
|
392
402
|
@apply tracking-tighten-0.0015;
|
393
403
|
}
|
394
404
|
|
395
405
|
.ui-text-sub-header {
|
396
|
-
@apply font-manrope font-semibold text-
|
397
|
-
@apply text-sub-header-xs xs:text-sub-header;
|
406
|
+
@apply font-manrope font-semibold text-neutral-900;
|
407
|
+
@apply text-sub-header-xs xs:text-sub-header leading-normal;
|
398
408
|
}
|
399
409
|
|
400
410
|
.ui-text-overline1 {
|
401
|
-
@apply font-
|
402
|
-
@apply text-overline1;
|
411
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
412
|
+
@apply text-overline1 leading-normal;
|
403
413
|
@apply tracking-widen-0.16;
|
404
414
|
}
|
405
415
|
|
406
416
|
.ui-text-overline2 {
|
407
|
-
@apply font-
|
408
|
-
@apply text-overline2;
|
417
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
418
|
+
@apply text-overline2 leading-normal;
|
409
419
|
@apply tracking-widen-0.16;
|
410
420
|
}
|
411
421
|
|
412
422
|
.ui-text-menu1 {
|
413
423
|
@apply font-manrope font-medium text-cool-black;
|
414
|
-
@apply text-menu1;
|
424
|
+
@apply text-menu1 leading-snug;
|
415
425
|
}
|
416
426
|
|
417
427
|
.ui-text-menu2 {
|
418
428
|
@apply font-manrope font-medium text-cool-black;
|
419
|
-
@apply text-menu2;
|
429
|
+
@apply text-menu2 leading-snug;
|
420
430
|
}
|
421
431
|
|
422
432
|
.ui-text-menu3 {
|
423
433
|
@apply font-manrope font-medium text-cool-black;
|
424
|
-
@apply text-menu3;
|
434
|
+
@apply text-menu3 leading-snug;
|
425
435
|
}
|
426
436
|
|
427
437
|
.ui-text-code {
|
@@ -438,12 +448,12 @@
|
|
438
448
|
|
439
449
|
.ui-unordered-list {
|
440
450
|
@apply text-p1 font-medium text-cool-black;
|
441
|
-
@apply list-disc ml-32
|
451
|
+
@apply list-disc ml-32 my-16;
|
442
452
|
}
|
443
453
|
|
444
454
|
.ui-ordered-list {
|
445
455
|
@apply text-p1 font-medium text-charcoal-grey;
|
446
|
-
@apply ml-32
|
456
|
+
@apply ml-32 my-16 list-decimal;
|
447
457
|
}
|
448
458
|
|
449
459
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
@@ -460,15 +470,19 @@
|
|
460
470
|
}
|
461
471
|
|
462
472
|
.ui-unordered-list ul ul {
|
463
|
-
@apply list-square;
|
473
|
+
@apply list-square my-8;
|
474
|
+
}
|
475
|
+
|
476
|
+
.ui-unordered-list ul ul {
|
477
|
+
@apply my-8;
|
464
478
|
}
|
465
479
|
|
466
480
|
.ui-ordered-list li,
|
467
481
|
.ui-unordered-list li {
|
468
|
-
@apply font-medium font-manrope;
|
482
|
+
@apply font-medium font-manrope tracking-widen-0;
|
483
|
+
line-height: var(--lh-extra-relaxed);
|
469
484
|
}
|
470
485
|
|
471
|
-
|
472
486
|
.ui-unordered-list-with-emphasis {
|
473
487
|
@apply text-p1 font-medium text-cool-black;
|
474
488
|
@apply list-disc ml-32 mt-32 -mb-12;
|
@@ -506,11 +520,11 @@
|
|
506
520
|
}
|
507
521
|
@layer components {
|
508
522
|
.ui-checkbox-p1 {
|
509
|
-
@apply flex items-start mb-16 font-
|
523
|
+
@apply flex items-start mb-16 font-manrope font-medium;
|
510
524
|
}
|
511
525
|
|
512
526
|
.ui-checkbox-p2 {
|
513
|
-
@apply flex items-start mb-12 font-
|
527
|
+
@apply flex items-start mb-12 font-manrope font-medium;
|
514
528
|
}
|
515
529
|
|
516
530
|
.ui-checkbox-input {
|
@@ -529,12 +543,12 @@
|
|
529
543
|
|
530
544
|
.ui-checkbox-label-p1 {
|
531
545
|
@apply select-none;
|
532
|
-
@apply text-p1 font-
|
546
|
+
@apply text-p1 font-medium text-cool-black;
|
533
547
|
}
|
534
548
|
|
535
549
|
.ui-checkbox-label-p2 {
|
536
550
|
@apply select-none;
|
537
|
-
@apply text-p2 font-
|
551
|
+
@apply text-p2 font-medium text-cool-black;
|
538
552
|
}
|
539
553
|
|
540
554
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
@@ -555,7 +569,7 @@
|
|
555
569
|
}
|
556
570
|
|
557
571
|
.ui-textarea {
|
558
|
-
@apply font-
|
572
|
+
@apply font-manrope font-medium text-cool-black text-p1;
|
559
573
|
@apply p-input mb-16;
|
560
574
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
561
575
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
data/lib/ably_ui/version.rb
CHANGED
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.
|
4
|
+
version: 8.7.0.dev.2b71529
|
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-06-
|
13
|
+
date: 2023-06-20 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: view_component
|