ably-ui 8.7.0.dev.4e08581 → 8.7.0.dev.05d9441
Sign up to get free protection for your applications and to get access to all the features.
- 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})()}));
|