ably-ui 8.7.0.dev.602ecf0 → 8.7.0.dev.734c219
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +6 -6
- data/README.md +16 -5
- 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 +12 -4
- data/lib/ably_ui/core/customer_logos/component.js +1 -1
- data/lib/ably_ui/core/customer_logos/customer_logos.html.erb +2 -2
- data/lib/ably_ui/core/customer_logos/customer_logos.rb +2 -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 +4 -4
- 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 +120 -58
- 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/high-performer-2022.png +0 -0
- data/lib/ably_ui/core/images/highest-user-adoption-2022.png +0 -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 +8 -10
- data/lib/ably_ui/core/meganav/component.js +1 -2
- data/lib/ably_ui/core/meganav/component.json +1 -1
- data/lib/ably_ui/core/meganav/meganav.html.erb +1 -1
- data/lib/ably_ui/core/meganav/meganav.rb +3 -2
- 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 +26 -10
- data/lib/ably_ui/core/meganav_content_platform/component.js +1 -1
- data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +7 -7
- 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_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 -2
- 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.css +1 -1
- data/lib/ably_ui/core/notice/component.js +1 -2
- 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 +109 -1
- data/lib/ably_ui/core/styles.css +226 -104
- 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 +9 -2
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-
|
288
|
+
@apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
179
289
|
@apply hover:text-white hover:bg-active-orange;
|
180
290
|
@apply active:text-white active:bg-red-orange;
|
181
291
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
@@ -199,7 +309,7 @@
|
|
199
309
|
background-size: 200% 100%;
|
200
310
|
background-position: 0% 0%;
|
201
311
|
|
202
|
-
@apply text-white text-btn2 font-
|
312
|
+
@apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
203
313
|
@apply focus:outline-gui-focus;
|
204
314
|
@apply inline-flex items-center justify-center;
|
205
315
|
}
|
@@ -215,7 +325,7 @@
|
|
215
325
|
}
|
216
326
|
|
217
327
|
.ui-btn-invert {
|
218
|
-
@apply text-cool-black bg-white text-btn2 font-
|
328
|
+
@apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
219
329
|
@apply hover:text-white hover:bg-active-orange;
|
220
330
|
@apply active:text-white active:bg-red-orange;
|
221
331
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
@@ -225,7 +335,7 @@
|
|
225
335
|
}
|
226
336
|
|
227
337
|
.ui-btn-secondary {
|
228
|
-
@apply text-cool-black bg-white text-btn2 font-
|
338
|
+
@apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
|
229
339
|
@apply hover:text-cool-black hover:border-active-orange hover:bg-white;
|
230
340
|
@apply active:border-red-orange active:bg-white;
|
231
341
|
@apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
|
@@ -235,7 +345,7 @@
|
|
235
345
|
}
|
236
346
|
|
237
347
|
.ui-btn-secondary-invert {
|
238
|
-
@apply text-white bg-cool-black text-btn2 font-
|
348
|
+
@apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
|
239
349
|
@apply hover:text-white hover:border-active-orange;
|
240
350
|
@apply active:border-red-orange;
|
241
351
|
@apply focus:outline-gui-focus;
|
@@ -320,47 +430,53 @@
|
|
320
430
|
}
|
321
431
|
@layer components {
|
322
432
|
.ui-text-title {
|
323
|
-
@apply font-
|
433
|
+
@apply font-manrope font-extrabold text-cool-black;
|
324
434
|
@apply text-title-xs xs:text-title xl:text-title-xl;
|
325
|
-
@apply tracking-tighten-0.
|
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-
|
439
|
+
@apply font-manrope font-extrabold text-cool-black;
|
330
440
|
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
331
|
-
@apply tracking-tighten-0.
|
441
|
+
@apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
|
332
442
|
}
|
333
443
|
|
334
444
|
.ui-text-h2 {
|
335
|
-
@apply font-
|
445
|
+
@apply font-manrope font-extrabold text-cool-black;
|
336
446
|
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
337
|
-
@apply tracking-tighten-0.
|
447
|
+
@apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
|
338
448
|
}
|
339
449
|
|
340
450
|
.ui-text-h3 {
|
341
|
-
@apply font-
|
451
|
+
@apply font-manrope 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-
|
348
|
-
@apply text-h4
|
349
|
-
@apply tracking-
|
457
|
+
@apply font-manrope font-extrabold text-cool-black;
|
458
|
+
@apply text-h4;
|
459
|
+
@apply tracking-tighten-0.0015;
|
460
|
+
}
|
461
|
+
|
462
|
+
.ui-text-h5 {
|
463
|
+
@apply font-manrope font-extrabold text-cool-black;
|
464
|
+
@apply text-h5;
|
465
|
+
@apply tracking-tighten-0.0025;
|
350
466
|
}
|
351
467
|
|
352
468
|
.ui-text-p1 {
|
353
|
-
@apply font-
|
469
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
354
470
|
@apply text-p1;
|
355
471
|
}
|
356
472
|
|
357
473
|
.ui-text-p2 {
|
358
|
-
@apply font-
|
474
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
359
475
|
@apply text-p2;
|
360
476
|
}
|
361
477
|
|
362
478
|
.ui-text-p3 {
|
363
|
-
@apply font-
|
479
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
364
480
|
@apply text-p3;
|
365
481
|
}
|
366
482
|
|
@@ -371,60 +487,63 @@
|
|
371
487
|
}
|
372
488
|
|
373
489
|
.ui-text-quote {
|
374
|
-
@apply font-
|
375
|
-
@apply text-quote;
|
376
|
-
@apply tracking-tighten-0.
|
490
|
+
@apply font-manrope font-normal text-cool-black;
|
491
|
+
@apply text-quote leading-normal;
|
492
|
+
@apply tracking-tighten-0.0015;
|
377
493
|
}
|
378
494
|
|
379
495
|
.ui-text-sub-header {
|
380
|
-
@apply font-
|
381
|
-
@apply text-sub-header-xs xs:text-sub-header;
|
382
|
-
@apply tracking-tighten-0.025;
|
496
|
+
@apply font-manrope font-semibold text-neutral-800;
|
497
|
+
@apply text-sub-header-xs xs:text-sub-header leading-normal;
|
383
498
|
}
|
384
499
|
|
385
500
|
.ui-text-overline1 {
|
386
|
-
@apply font-
|
387
|
-
@apply text-overline1;
|
388
|
-
@apply tracking-widen-0.
|
501
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
502
|
+
@apply text-overline1 leading-normal;
|
503
|
+
@apply tracking-widen-0.16;
|
389
504
|
}
|
390
505
|
|
391
506
|
.ui-text-overline2 {
|
392
|
-
@apply font-
|
393
|
-
@apply text-overline2;
|
394
|
-
@apply tracking-widen-0.
|
507
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
508
|
+
@apply text-overline2 leading-normal;
|
509
|
+
@apply tracking-widen-0.16;
|
395
510
|
}
|
396
511
|
|
397
512
|
.ui-text-menu1 {
|
398
|
-
@apply font-
|
399
|
-
@apply text-menu1;
|
513
|
+
@apply font-manrope font-medium text-cool-black;
|
514
|
+
@apply text-menu1 leading-snug;
|
400
515
|
}
|
401
516
|
|
402
517
|
.ui-text-menu2 {
|
403
|
-
@apply font-
|
404
|
-
@apply text-menu2;
|
518
|
+
@apply font-manrope font-medium text-cool-black;
|
519
|
+
@apply text-menu2 leading-snug;
|
405
520
|
}
|
406
521
|
|
407
522
|
.ui-text-menu3 {
|
408
|
-
@apply font-
|
409
|
-
@apply text-menu3;
|
523
|
+
@apply font-manrope font-medium text-cool-black;
|
524
|
+
@apply text-menu3 leading-snug;
|
410
525
|
}
|
411
526
|
|
412
527
|
.ui-text-code {
|
413
|
-
@apply font-
|
528
|
+
@apply font-jetbrains_mono font-medium text-code;
|
529
|
+
}
|
530
|
+
|
531
|
+
.ui-text-code2 {
|
532
|
+
@apply font-jetbrains_mono font-medium text-code2;
|
414
533
|
}
|
415
534
|
|
416
535
|
.ui-text-code-inline {
|
417
|
-
@apply font-
|
536
|
+
@apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
|
418
537
|
}
|
419
538
|
|
420
539
|
.ui-unordered-list {
|
421
|
-
@apply text-p1 font-
|
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-manrope tracking-widen-0;
|
573
|
+
line-height: var(--lh-extra-relaxed);
|
445
574
|
}
|
446
575
|
|
447
576
|
.ui-unordered-list-with-emphasis {
|
448
|
-
@apply text-p1 font-
|
577
|
+
@apply text-p1 font-medium text-cool-black;
|
449
578
|
@apply list-disc ml-32 mt-32 -mb-12;
|
450
579
|
}
|
451
580
|
|
@@ -468,25 +597,24 @@
|
|
468
597
|
|
469
598
|
.ui-link {
|
470
599
|
@apply text-gui-default;
|
471
|
-
@apply visited:text-gui-default;
|
472
600
|
@apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
|
473
601
|
@apply focus:text-gui-default focus:outline-gui-focus;
|
602
|
+
@apply no-underline;
|
474
603
|
}
|
475
604
|
|
476
605
|
.ui-link-neutral {
|
477
|
-
@apply visited:text-dark-grey;
|
478
606
|
@apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
|
479
|
-
@apply focus:text-
|
607
|
+
@apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
|
480
608
|
@apply underline;
|
481
609
|
}
|
482
610
|
}
|
483
611
|
@layer components {
|
484
612
|
.ui-checkbox-p1 {
|
485
|
-
@apply flex items-start mb-16 font-
|
613
|
+
@apply flex items-start mb-16 font-manrope font-medium;
|
486
614
|
}
|
487
615
|
|
488
616
|
.ui-checkbox-p2 {
|
489
|
-
@apply flex items-start mb-12 font-
|
617
|
+
@apply flex items-start mb-12 font-manrope font-medium;
|
490
618
|
}
|
491
619
|
|
492
620
|
.ui-checkbox-input {
|
@@ -505,12 +633,12 @@
|
|
505
633
|
|
506
634
|
.ui-checkbox-label-p1 {
|
507
635
|
@apply select-none;
|
508
|
-
@apply text-p1 font-
|
636
|
+
@apply text-p1 font-medium text-cool-black;
|
509
637
|
}
|
510
638
|
|
511
639
|
.ui-checkbox-label-p2 {
|
512
640
|
@apply select-none;
|
513
|
-
@apply text-p2 font-
|
641
|
+
@apply text-p2 font-medium text-cool-black;
|
514
642
|
}
|
515
643
|
|
516
644
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
@@ -531,7 +659,7 @@
|
|
531
659
|
}
|
532
660
|
|
533
661
|
.ui-textarea {
|
534
|
-
@apply font-
|
662
|
+
@apply font-manrope font-medium text-cool-black text-p1;
|
535
663
|
@apply p-input mb-16;
|
536
664
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
537
665
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
@@ -544,12 +672,6 @@
|
|
544
672
|
color: #76767c;
|
545
673
|
}
|
546
674
|
|
547
|
-
.ui-textarea:-ms-input-placeholder {
|
548
|
-
/* CSS vars don't work in ::placeholder in Webkit :( */
|
549
|
-
/* color: var(--text-dark-grey); */
|
550
|
-
color: #76767c;
|
551
|
-
}
|
552
|
-
|
553
675
|
.ui-textarea::placeholder {
|
554
676
|
/* CSS vars don't work in ::placeholder in Webkit :( */
|
555
677
|
/* color: var(--text-dark-grey); */
|
@@ -1 +1 @@
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Uptime=t())}(this,(
|
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.734c219
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dominik Piatek
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date:
|
13
|
+
date: 2023-08-11 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: view_component
|
@@ -64,6 +64,7 @@ files:
|
|
64
64
|
- lib/ably_ui/core/customer_logos/component.js
|
65
65
|
- lib/ably_ui/core/customer_logos/customer_logos.html.erb
|
66
66
|
- lib/ably_ui/core/customer_logos/customer_logos.rb
|
67
|
+
- lib/ably_ui/core/dropdown_menu/component.js
|
67
68
|
- lib/ably_ui/core/feature_footer/component.css
|
68
69
|
- lib/ably_ui/core/feature_footer/component.js
|
69
70
|
- lib/ably_ui/core/feature_footer/feature_footer.html.erb
|
@@ -90,6 +91,8 @@ files:
|
|
90
91
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
|
91
92
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
|
92
93
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
|
94
|
+
- lib/ably_ui/core/fonts/jetBrains-mono.css
|
95
|
+
- lib/ably_ui/core/fonts/manrope.css
|
93
96
|
- lib/ably_ui/core/fonts/next.css
|
94
97
|
- lib/ably_ui/core/fonts/source-code-pro.css
|
95
98
|
- lib/ably_ui/core/footer/component.css
|
@@ -99,6 +102,7 @@ files:
|
|
99
102
|
- lib/ably_ui/core/icon/component.js
|
100
103
|
- lib/ably_ui/core/icon/icon.html.erb
|
101
104
|
- lib/ably_ui/core/icon/icon.rb
|
105
|
+
- lib/ably_ui/core/images/ably-logo.png
|
102
106
|
- lib/ably_ui/core/images/ably-logo.svg
|
103
107
|
- lib/ably_ui/core/images/ably-stack.svg
|
104
108
|
- lib/ably_ui/core/images/cust-logo-ao-col-pos.png
|
@@ -127,10 +131,13 @@ files:
|
|
127
131
|
- lib/ably_ui/core/images/cust-photo-split-pato-echague.jpg
|
128
132
|
- lib/ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg
|
129
133
|
- lib/ably_ui/core/images/flexible-companies.png
|
134
|
+
- lib/ably_ui/core/images/high-performer-2022.png
|
135
|
+
- lib/ably_ui/core/images/highest-user-adoption-2022.png
|
130
136
|
- lib/ably_ui/core/images/icon-tech-aws.svg
|
131
137
|
- lib/ably_ui/core/images/rocket-list-2021.png
|
132
138
|
- lib/ably_ui/core/images/scale-motif-open-empathetic.svg
|
133
139
|
- lib/ably_ui/core/images/technical-support-01-800x533.jpg
|
140
|
+
- lib/ably_ui/core/images/users-love-us-2022.png
|
134
141
|
- lib/ably_ui/core/loader/component.js
|
135
142
|
- lib/ably_ui/core/loader/loader.html.erb
|
136
143
|
- lib/ably_ui/core/loader/loader.rb
|