ably-ui 8.7.0.dev.734c219 → 8.7.0.dev.779bcfa
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/footer/component.css +1 -1
- data/lib/ably_ui/core/footer/footer.html.erb +3 -3
- data/lib/ably_ui/core/meganav/component.css +2 -2
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +1 -1
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +1 -1
- data/lib/ably_ui/core/styles.css +42 -135
- 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: 8fcbcb4fde3bb2665a6d1c592d9f4b0f5171e36ed56ee337c679ec4f2a089a96
|
|
4
|
+
data.tar.gz: cc494d6ab420af8ddd76b17d833ec421ed2f60c0cd74da72a27c42aeafb9ea0f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b1380e04191dac32bbc47e08a53b82863b71c93fe31e67a5bba3d31f357e555cf2aec7a4f2b25525c800567b37fb19c5d3c2b90fd2bf0d9216115e9acb1d2f6f
|
|
7
|
+
data.tar.gz: 50d64b35814a266f74dc5e40c1d8391149013abfe21e522e471dabd43cd0a80b1e85bb42b7bc9338c4f1fc859a796ce68212bb6bf5382c2f82f9022abf728668
|
data/Gemfile.lock
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<footer class="bg-light-grey font-manrope antialiased
|
|
1
|
+
<footer class="bg-light-grey font-manrope antialiased" 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-medium uppercase tracking-widen-0.1">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="
|
|
9
|
+
<p class="text-p3 py-16 font-medium 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>
|
|
@@ -97,11 +97,11 @@
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.ui-meganav-media-heading {
|
|
100
|
-
@apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus
|
|
100
|
+
@apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.ui-meganav-media-copy {
|
|
104
|
-
@apply text-p3 font-manrope font-medium text-dark-grey
|
|
104
|
+
@apply text-p3 font-manrope font-medium text-dark-grey;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.ui-meganav-overline {
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
</ul>
|
|
77
77
|
</div>
|
|
78
78
|
<div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
|
|
79
|
-
<h3 class="ui-meganav-overline uppercase" id=
|
|
79
|
+
<h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
|
|
80
80
|
Quick links
|
|
81
81
|
</h3>
|
|
82
82
|
<ul aria-labelledby="meganav-developers-panel-quick-links">
|
|
@@ -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-medium text-cool-black mb-24" 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>
|
data/lib/ably_ui/core/styles.css
CHANGED
|
@@ -1,132 +1,38 @@
|
|
|
1
1
|
@layer base {
|
|
2
2
|
:root {
|
|
3
|
-
|
|
4
|
-
--color-
|
|
5
|
-
--color-
|
|
6
|
-
--color-
|
|
7
|
-
--color-
|
|
8
|
-
--color-
|
|
9
|
-
--color-
|
|
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;
|
|
3
|
+
--color-cool-black: #03020d;
|
|
4
|
+
--color-active-orange: #ff5416;
|
|
5
|
+
--color-red-orange: #e40000;
|
|
6
|
+
--color-white: #ffffff;
|
|
7
|
+
--color-electric-cyan: #4ad4ff;
|
|
8
|
+
--color-zingy-green: #08ff13;
|
|
9
|
+
--color-bright-red: #fe372b;
|
|
26
10
|
--color-orange-700: #ff2739;
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
--color-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
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;
|
|
11
|
+
--color-jazzy-pink: #ff17d2;
|
|
12
|
+
--color-extra-light-grey: #f8fafc;
|
|
13
|
+
--color-light-grey: #f4f8fb;
|
|
14
|
+
--color-mid-grey: #c6ced9;
|
|
15
|
+
--color-dark-grey: #667085;
|
|
16
|
+
--color-charcoal-grey: #2b303b;
|
|
17
|
+
--color-gui-default: #006edc;
|
|
18
|
+
--color-gui-hover: #0862b9;
|
|
19
|
+
--color-gui-active: #074095;
|
|
20
|
+
--color-gui-default-dark: #4da6ff;
|
|
21
|
+
--color-gui-hover-dark: #2894ff;
|
|
22
|
+
--color-gui-active-dark: #0080ff;
|
|
91
23
|
--color-gui-focus: #80b9f2;
|
|
92
24
|
--color-gui-focus-outline: #80b9f2;
|
|
93
25
|
--color-gui-visited: #4887c2;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
--color-
|
|
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);
|
|
26
|
+
--color-gui-unavailable: #a8a8a8;
|
|
27
|
+
--color-gui-error: #fb0c0c;
|
|
28
|
+
--color-gui-success: #11cb24;
|
|
123
29
|
|
|
124
30
|
/* code syntax: theme */
|
|
125
|
-
--syntax-black: var(--color-
|
|
126
|
-
--syntax-dark-grey: var(--color-
|
|
127
|
-
--syntax-mid-grey: var(--color-
|
|
128
|
-
--syntax-light-grey: var(--color-
|
|
129
|
-
--syntax-extra-light-grey: var(--color-
|
|
31
|
+
--syntax-black: var(--color-cool-black);
|
|
32
|
+
--syntax-dark-grey: var(--color-dark-grey);
|
|
33
|
+
--syntax-mid-grey: var(--color-mid-grey);
|
|
34
|
+
--syntax-light-grey: var(--color-light-grey);
|
|
35
|
+
--syntax-extra-light-grey: var(--color-extra-light-grey);
|
|
130
36
|
--syntax-orange: #e78c45;
|
|
131
37
|
--syntax-yellow: #e7c547;
|
|
132
38
|
--syntax-blue: #3490ec;
|
|
@@ -134,6 +40,10 @@
|
|
|
134
40
|
--syntax-red: #d54e53;
|
|
135
41
|
--syntax-lilac: #bb87d3;
|
|
136
42
|
|
|
43
|
+
/* New Neutral colors */
|
|
44
|
+
--color-neutral-900: #39414e;
|
|
45
|
+
--color-neutral-500: #c6ced9;
|
|
46
|
+
|
|
137
47
|
/* uptime status colors */
|
|
138
48
|
--uptime-color-up: #39b54a;
|
|
139
49
|
--uptime-color-trouble: #e87623;
|
|
@@ -209,10 +119,8 @@
|
|
|
209
119
|
--lh-dense: 1;
|
|
210
120
|
--lh-tight: 1.125;
|
|
211
121
|
--lh-snug: 1.15;
|
|
212
|
-
--lh-min-normal: 1.2;
|
|
213
122
|
--lh-normal: 1.25;
|
|
214
123
|
--lh-relaxed: 1.45;
|
|
215
|
-
--lh-extra-relaxed: 1.6;
|
|
216
124
|
|
|
217
125
|
--ls-tighten-0_025: -0.025em;
|
|
218
126
|
--ls-tighten-0_02: -0.02em;
|
|
@@ -431,53 +339,53 @@
|
|
|
431
339
|
@layer components {
|
|
432
340
|
.ui-text-title {
|
|
433
341
|
@apply font-manrope font-extrabold text-cool-black;
|
|
434
|
-
@apply text-title-xs xs:text-title xl:text-title-xl;
|
|
342
|
+
@apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
|
|
435
343
|
@apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
|
|
436
344
|
}
|
|
437
345
|
|
|
438
346
|
.ui-text-h1 {
|
|
439
347
|
@apply font-manrope font-extrabold text-cool-black;
|
|
440
|
-
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
|
348
|
+
@apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
|
|
441
349
|
@apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
|
|
442
350
|
}
|
|
443
351
|
|
|
444
352
|
.ui-text-h2 {
|
|
445
353
|
@apply font-manrope font-extrabold text-cool-black;
|
|
446
|
-
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
|
354
|
+
@apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
|
|
447
355
|
@apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
|
|
448
356
|
}
|
|
449
357
|
|
|
450
358
|
.ui-text-h3 {
|
|
451
359
|
@apply font-manrope font-extrabold text-cool-black;
|
|
452
|
-
@apply text-h3;
|
|
360
|
+
@apply text-h3 leading-tight;
|
|
453
361
|
@apply tracking-tighten-0.005;
|
|
454
362
|
}
|
|
455
363
|
|
|
456
364
|
.ui-text-h4 {
|
|
457
365
|
@apply font-manrope font-extrabold text-cool-black;
|
|
458
|
-
@apply text-h4;
|
|
366
|
+
@apply text-h4 leading-tight;
|
|
459
367
|
@apply tracking-tighten-0.0015;
|
|
460
368
|
}
|
|
461
369
|
|
|
462
370
|
.ui-text-h5 {
|
|
463
371
|
@apply font-manrope font-extrabold text-cool-black;
|
|
464
|
-
@apply text-h5;
|
|
372
|
+
@apply text-h5 leading-tight;
|
|
465
373
|
@apply tracking-tighten-0.0025;
|
|
466
374
|
}
|
|
467
375
|
|
|
468
376
|
.ui-text-p1 {
|
|
469
377
|
@apply font-manrope font-medium text-charcoal-grey;
|
|
470
|
-
@apply text-p1;
|
|
378
|
+
@apply text-p1 leading-relaxed;
|
|
471
379
|
}
|
|
472
380
|
|
|
473
381
|
.ui-text-p2 {
|
|
474
382
|
@apply font-manrope font-medium text-charcoal-grey;
|
|
475
|
-
@apply text-p2;
|
|
383
|
+
@apply text-p2 leading-relaxed;
|
|
476
384
|
}
|
|
477
385
|
|
|
478
386
|
.ui-text-p3 {
|
|
479
387
|
@apply font-manrope font-medium text-charcoal-grey;
|
|
480
|
-
@apply text-p3;
|
|
388
|
+
@apply text-p3 leading-relaxed;
|
|
481
389
|
}
|
|
482
390
|
|
|
483
391
|
.ui-text-standfirst {
|
|
@@ -493,7 +401,7 @@
|
|
|
493
401
|
}
|
|
494
402
|
|
|
495
403
|
.ui-text-sub-header {
|
|
496
|
-
@apply font-manrope font-semibold text-neutral-
|
|
404
|
+
@apply font-manrope font-semibold text-neutral-900;
|
|
497
405
|
@apply text-sub-header-xs xs:text-sub-header leading-normal;
|
|
498
406
|
}
|
|
499
407
|
|
|
@@ -569,8 +477,7 @@
|
|
|
569
477
|
|
|
570
478
|
.ui-ordered-list li,
|
|
571
479
|
.ui-unordered-list li {
|
|
572
|
-
@apply font-medium font-manrope tracking-widen-0;
|
|
573
|
-
line-height: var(--lh-extra-relaxed);
|
|
480
|
+
@apply font-medium font-manrope tracking-widen-0 leading-relaxed;
|
|
574
481
|
}
|
|
575
482
|
|
|
576
483
|
.ui-unordered-list-with-emphasis {
|
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.779bcfa
|
|
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-
|
|
13
|
+
date: 2023-06-19 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|