ably-ui 8.7.0.dev.4e08581 → 8.7.0.dev.05d9441
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 +6 -6
- data/README.md +23 -12
- data/lib/ably_ui/core/code/component.css +5 -3
- data/lib/ably_ui/core/code/component.js +1 -1
- data/lib/ably_ui/core/company_autocomplete/component.js +1 -1
- data/lib/ably_ui/core/connect_state_wrapper/component.js +1 -1
- data/lib/ably_ui/core/contact_footer/component.js +1 -1
- data/lib/ably_ui/core/cookie_message/component.js +1 -1
- data/lib/ably_ui/core/core.rb +16 -4
- data/lib/ably_ui/core/customer_logos/component.js +1 -1
- data/lib/ably_ui/core/dropdown_menu/component.js +1 -0
- data/lib/ably_ui/core/feature_footer/component.js +1 -1
- data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +1 -1
- data/lib/ably_ui/core/featured_link/component.css +1 -1
- data/lib/ably_ui/core/featured_link/component.js +1 -1
- data/lib/ably_ui/core/flash/component.js +1 -1
- data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
- data/lib/ably_ui/core/fonts/manrope.css +3 -0
- data/lib/ably_ui/core/footer/component.css +23 -3
- data/lib/ably_ui/core/footer/component.js +1 -1
- data/lib/ably_ui/core/footer/footer.html.erb +122 -65
- data/lib/ably_ui/core/icon/component.js +1 -1
- data/lib/ably_ui/core/images/ably-logo.png +0 -0
- data/lib/ably_ui/core/images/best-support-2023.svg +1 -0
- data/lib/ably_ui/core/images/fastest-implementation-2023.svg +1 -0
- data/lib/ably_ui/core/images/high-performer-2022.png +0 -0
- data/lib/ably_ui/core/images/high-performer-2023.svg +1 -0
- data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -0
- data/lib/ably_ui/core/images/highest-user-adoption-2023.svg +1 -0
- data/lib/ably_ui/core/images/users-love-us-2022.png +0 -0
- data/lib/ably_ui/core/loader/component.js +1 -1
- data/lib/ably_ui/core/logo/component.js +1 -1
- data/lib/ably_ui/core/logo/logo.html.erb +2 -27
- data/lib/ably_ui/core/logo/logo.rb +15 -6
- data/lib/ably_ui/core/meganav/component.css +7 -9
- data/lib/ably_ui/core/meganav/component.js +1 -1
- data/lib/ably_ui/core/meganav/component.json +2 -2
- data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
- data/lib/ably_ui/core/meganav/meganav.rb +7 -6
- data/lib/ably_ui/core/meganav_blog_posts_list/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_company/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_company/meganav_content_company.html.erb +9 -0
- data/lib/ably_ui/core/meganav_content_developers/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +35 -10
- data/lib/ably_ui/core/{meganav_content_platform → meganav_content_products}/component.js +1 -1
- data/lib/ably_ui/core/{meganav_content_platform/meganav_content_platform.html.erb → meganav_content_products/meganav_content_products.html.erb} +16 -34
- data/lib/ably_ui/core/{meganav_content_platform/meganav_content_platform.rb → meganav_content_products/meganav_content_products.rb} +1 -1
- data/lib/ably_ui/core/meganav_content_use_cases/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb +43 -39
- data/lib/ably_ui/core/meganav_control/component.js +1 -1
- data/lib/ably_ui/core/meganav_control_mobile_dropdown/component.js +1 -1
- data/lib/ably_ui/core/meganav_control_mobile_panel_close/component.js +1 -1
- data/lib/ably_ui/core/meganav_control_mobile_panel_open/component.js +1 -1
- data/lib/ably_ui/core/meganav_items_desktop/component.js +1 -1
- data/lib/ably_ui/core/meganav_items_desktop/meganav_items_desktop.rb +1 -1
- data/lib/ably_ui/core/meganav_items_mobile/component.js +1 -1
- data/lib/ably_ui/core/meganav_items_signed_in/component.js +1 -1
- data/lib/ably_ui/core/meganav_search/component.js +1 -1
- data/lib/ably_ui/core/meganav_search_autocomplete/component.js +1 -1
- data/lib/ably_ui/core/meganav_search_panel/component.js +1 -1
- data/lib/ably_ui/core/meganav_search_suggestions/component.js +1 -1
- data/lib/ably_ui/core/meganav_search_suggestions/meganav_search_suggestions.html.erb +1 -1
- data/lib/ably_ui/core/notice/component.js +1 -1
- data/lib/ably_ui/core/notice/notice.html.erb +2 -2
- data/lib/ably_ui/core/scripts.js +1 -1
- data/lib/ably_ui/core/showcase/component.js +1 -1
- data/lib/ably_ui/core/sign_out_link/component.js +1 -1
- data/lib/ably_ui/core/slider/component.js +1 -1
- data/lib/ably_ui/core/sprites.svg +135 -1
- data/lib/ably_ui/core/styles.css +224 -101
- data/lib/ably_ui/core/uptime/component.js +1 -1
- data/lib/ably_ui/reset/scripts.js +1 -1
- data/lib/ably_ui/reset/styles.css +1 -11
- data/lib/ably_ui/version.rb +1 -1
- metadata +16 -7
- data/lib/ably_ui/react/connect_state_wrapper/component.js +0 -1
- data/lib/ably_ui/react/scripts.js +0 -1
data/lib/ably_ui/core/styles.css
CHANGED
@@ -1,34 +1,132 @@
|
|
1
1
|
@layer base {
|
2
2
|
:root {
|
3
|
-
|
4
|
-
--color-
|
5
|
-
--color-
|
6
|
-
--color-
|
7
|
-
--color-
|
8
|
-
--color-
|
9
|
-
--color-
|
10
|
-
--color-
|
11
|
-
--color-
|
12
|
-
--color-
|
13
|
-
--color-
|
14
|
-
--color-
|
15
|
-
--color-
|
16
|
-
--color-
|
17
|
-
--color-
|
18
|
-
|
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
|
-
|
23
|
-
|
24
|
-
--color-
|
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-
|
28
|
-
--syntax-dark-grey: var(--color-
|
29
|
-
--syntax-mid-grey: var(--color-
|
30
|
-
--syntax-light-grey: var(--color-
|
31
|
-
--syntax-extra-light-grey: var(--color-
|
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-
|
171
|
+
var(--color-orange-700) 0%,
|
72
172
|
var(--color-jazzy-pink) 100%
|
73
173
|
);
|
74
174
|
|
75
|
-
--fs-title-xl:
|
76
|
-
--fs-title:
|
77
|
-
--fs-title-xs:
|
78
|
-
--fs-h1-xl:
|
79
|
-
--fs-h1:
|
80
|
-
--fs-h1-xs:
|
81
|
-
|
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.
|
184
|
+
--fs-h2-xs: 1.75rem;
|
185
|
+
|
84
186
|
--fs-h3: 1.5rem;
|
85
|
-
--fs-h4: 1.
|
86
|
-
--fs-
|
87
|
-
|
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.
|
92
|
-
--fs-sub-header-xs: 1.
|
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:
|
96
|
-
--fs-btn2:
|
199
|
+
--fs-btn1: 1rem;
|
200
|
+
--fs-btn2: 0.938rem;
|
97
201
|
--fs-btn3: 0.875rem;
|
98
|
-
--fs-menu1:
|
99
|
-
--fs-menu2:
|
202
|
+
--fs-menu1: 1rem;
|
203
|
+
--fs-menu2: 0.938rem;
|
100
204
|
--fs-menu3: 0.875rem;
|
101
|
-
--fs-quote: 1.
|
102
|
-
--fs-code: 0.
|
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-
|
288
|
+
@apply text-white bg-cool-black text-btn2 font-sans 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-
|
312
|
+
@apply text-white text-btn2 font-sans 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-
|
328
|
+
@apply text-cool-black bg-white text-btn2 font-sans 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-
|
338
|
+
@apply text-cool-black bg-white text-btn2 font-sans 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-
|
348
|
+
@apply text-white bg-cool-black text-btn2 font-sans 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-
|
433
|
+
@apply font-sans font-extrabold text-cool-black;
|
324
434
|
@apply text-title-xs xs:text-title xl:text-title-xl;
|
325
|
-
@apply tracking-tighten-0.
|
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-
|
439
|
+
@apply font-sans font-extrabold text-cool-black;
|
330
440
|
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
331
|
-
@apply tracking-tighten-0.
|
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-
|
445
|
+
@apply font-sans font-extrabold text-cool-black;
|
336
446
|
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
337
|
-
@apply tracking-tighten-0.
|
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-
|
451
|
+
@apply font-sans font-extrabold text-cool-black;
|
342
452
|
@apply text-h3;
|
343
|
-
@apply tracking-tighten-0.
|
453
|
+
@apply tracking-tighten-0.005;
|
344
454
|
}
|
345
455
|
|
346
456
|
.ui-text-h4 {
|
347
|
-
@apply font-sans font-
|
348
|
-
@apply text-h4
|
349
|
-
@apply tracking-
|
457
|
+
@apply font-sans font-extrabold text-cool-black;
|
458
|
+
@apply text-h4;
|
459
|
+
@apply tracking-tighten-0.0015;
|
460
|
+
}
|
461
|
+
|
462
|
+
.ui-text-h5 {
|
463
|
+
@apply font-sans 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-
|
469
|
+
@apply font-sans font-medium text-charcoal-grey;
|
354
470
|
@apply text-p1;
|
355
471
|
}
|
356
472
|
|
357
473
|
.ui-text-p2 {
|
358
|
-
@apply font-sans font-
|
474
|
+
@apply font-sans font-medium text-charcoal-grey;
|
359
475
|
@apply text-p2;
|
360
476
|
}
|
361
477
|
|
362
478
|
.ui-text-p3 {
|
363
|
-
@apply font-sans font-
|
479
|
+
@apply font-sans 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-
|
375
|
-
@apply text-quote;
|
376
|
-
@apply tracking-tighten-0.
|
490
|
+
@apply font-sans 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-
|
381
|
-
@apply text-sub-header-xs xs:text-sub-header;
|
382
|
-
@apply tracking-tighten-0.025;
|
496
|
+
@apply font-sans 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-
|
387
|
-
@apply text-overline1;
|
388
|
-
@apply tracking-widen-0.
|
501
|
+
@apply font-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-
|
393
|
-
@apply text-overline2;
|
394
|
-
@apply tracking-widen-0.
|
507
|
+
@apply font-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-
|
399
|
-
@apply text-menu1;
|
513
|
+
@apply font-sans 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-
|
404
|
-
@apply text-menu2;
|
518
|
+
@apply font-sans 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-
|
409
|
-
@apply text-menu3;
|
523
|
+
@apply font-sans 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-
|
528
|
+
@apply font-mono font-medium text-code;
|
529
|
+
}
|
530
|
+
|
531
|
+
.ui-text-code2 {
|
532
|
+
@apply font-mono font-medium text-code2;
|
414
533
|
}
|
415
534
|
|
416
535
|
.ui-text-code-inline {
|
417
|
-
@apply font-mono font-
|
536
|
+
@apply font-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-
|
422
|
-
@apply list-disc ml-32
|
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-
|
427
|
-
@apply ml-32
|
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-sans 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-
|
577
|
+
@apply text-p1 font-medium text-cool-black;
|
449
578
|
@apply list-disc ml-32 mt-32 -mb-12;
|
450
579
|
}
|
451
580
|
|
@@ -481,11 +610,11 @@
|
|
481
610
|
}
|
482
611
|
@layer components {
|
483
612
|
.ui-checkbox-p1 {
|
484
|
-
@apply flex items-start mb-16 font-sans;
|
613
|
+
@apply flex items-start mb-16 font-sans font-medium;
|
485
614
|
}
|
486
615
|
|
487
616
|
.ui-checkbox-p2 {
|
488
|
-
@apply flex items-start mb-12 font-sans;
|
617
|
+
@apply flex items-start mb-12 font-sans font-medium;
|
489
618
|
}
|
490
619
|
|
491
620
|
.ui-checkbox-input {
|
@@ -504,12 +633,12 @@
|
|
504
633
|
|
505
634
|
.ui-checkbox-label-p1 {
|
506
635
|
@apply select-none;
|
507
|
-
@apply text-p1 font-
|
636
|
+
@apply text-p1 font-medium text-cool-black;
|
508
637
|
}
|
509
638
|
|
510
639
|
.ui-checkbox-label-p2 {
|
511
640
|
@apply select-none;
|
512
|
-
@apply text-p2 font-
|
641
|
+
@apply text-p2 font-medium text-cool-black;
|
513
642
|
}
|
514
643
|
|
515
644
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
@@ -530,7 +659,7 @@
|
|
530
659
|
}
|
531
660
|
|
532
661
|
.ui-textarea {
|
533
|
-
@apply font-sans font-
|
662
|
+
@apply font-sans font-medium text-cool-black text-p1;
|
534
663
|
@apply p-input mb-16;
|
535
664
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
536
665
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
@@ -543,12 +672,6 @@
|
|
543
672
|
color: #76767c;
|
544
673
|
}
|
545
674
|
|
546
|
-
.ui-textarea:-ms-input-placeholder {
|
547
|
-
/* CSS vars don't work in ::placeholder in Webkit :( */
|
548
|
-
/* color: var(--text-dark-grey); */
|
549
|
-
color: #76767c;
|
550
|
-
}
|
551
|
-
|
552
675
|
.ui-textarea::placeholder {
|
553
676
|
/* CSS vars don't work in ::placeholder in Webkit :( */
|
554
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,(
|
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,(
|
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
|
-
|
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;
|
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.05d9441
|
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:
|
13
|
+
date: 2023-10-18 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,8 +102,10 @@ 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
|
108
|
+
- lib/ably_ui/core/images/best-support-2023.svg
|
104
109
|
- lib/ably_ui/core/images/cust-logo-ao-col-pos.png
|
105
110
|
- lib/ably_ui/core/images/cust-logo-ao-col-pos@2x.png
|
106
111
|
- lib/ably_ui/core/images/cust-logo-ausopen-col-pos.png
|
@@ -126,11 +131,17 @@ files:
|
|
126
131
|
- lib/ably_ui/core/images/cust-photo-hubspot-max-freiert.jpg
|
127
132
|
- lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
|
128
133
|
- lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
|
134
|
+
- lib/ably_ui/core/images/fastest-implementation-2023.svg
|
129
135
|
- lib/ably_ui/core/images/flexible-companies.png
|
136
|
+
- lib/ably_ui/core/images/high-performer-2022.png
|
137
|
+
- lib/ably_ui/core/images/high-performer-2023.svg
|
138
|
+
- lib/ably_ui/core/images/highest-user-adoption-2022.png
|
139
|
+
- lib/ably_ui/core/images/highest-user-adoption-2023.svg
|
130
140
|
- lib/ably_ui/core/images/icon-tech-aws.svg
|
131
141
|
- lib/ably_ui/core/images/rocket-list-2021.png
|
132
142
|
- lib/ably_ui/core/images/scale-motif-open-empathetic.svg
|
133
143
|
- lib/ably_ui/core/images/technical-support-01-800x533.jpg
|
144
|
+
- lib/ably_ui/core/images/users-love-us-2022.png
|
134
145
|
- lib/ably_ui/core/loader/component.js
|
135
146
|
- lib/ably_ui/core/loader/loader.html.erb
|
136
147
|
- lib/ably_ui/core/loader/loader.rb
|
@@ -151,9 +162,9 @@ files:
|
|
151
162
|
- lib/ably_ui/core/meganav_content_developers/component.js
|
152
163
|
- lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb
|
153
164
|
- lib/ably_ui/core/meganav_content_developers/meganav_content_developers.rb
|
154
|
-
- lib/ably_ui/core/
|
155
|
-
- lib/ably_ui/core/
|
156
|
-
- lib/ably_ui/core/
|
165
|
+
- lib/ably_ui/core/meganav_content_products/component.js
|
166
|
+
- lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb
|
167
|
+
- lib/ably_ui/core/meganav_content_products/meganav_content_products.rb
|
157
168
|
- lib/ably_ui/core/meganav_content_use_cases/component.js
|
158
169
|
- lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.html.erb
|
159
170
|
- lib/ably_ui/core/meganav_content_use_cases/meganav_content_use_cases.rb
|
@@ -212,8 +223,6 @@ files:
|
|
212
223
|
- lib/ably_ui/core/uptime/component.js
|
213
224
|
- lib/ably_ui/core/uptime/uptime.html.erb
|
214
225
|
- lib/ably_ui/core/uptime/uptime.rb
|
215
|
-
- lib/ably_ui/react/connect_state_wrapper/component.js
|
216
|
-
- lib/ably_ui/react/scripts.js
|
217
226
|
- lib/ably_ui/reset/scripts.js
|
218
227
|
- lib/ably_ui/reset/styles.css
|
219
228
|
- lib/ably_ui/version.rb
|
@@ -1 +0,0 @@
|
|
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.React=e.AblyUi.React||{},e.AblyUi.React.ConnectStateWrapper=t())}(this,(function(){return{}.default}));
|
@@ -1 +0,0 @@
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports.AblyUi=t(require("react"),require("react-dom")):(e.AblyUi=e.AblyUi||{},e.AblyUi.React=t(e[void 0],e[void 0]))}(this,(function(e,t){return(()=>{"use strict";var r={281:t=>{t.exports=e},645:e=>{e.exports=t}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return r[e](n,n.exports,a),n.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{a.r(n),a.d(n,{reactRenderer:()=>i});var e=a(281),t=a.n(e),r=a(645),o=a.n(r);function i(e){var r=document.querySelectorAll("[data-react]");Array.from(r).forEach((function(r){var a=r.getAttribute("data-react"),n=e[a];if(!n)throw new Error('Found a data-react attribute with "'.concat(a,'" but no matching component.'));var i=r.getAttribute("data-react-props"),c=i&&JSON.parse(i||{});o().render(t().createElement(n,c),r),r.removeAttribute("data-react"),r.removeAttribute("data-react-props")}))}})(),n})()}));
|