ably-ui 8.7.0.dev.602ecf0 → 8.7.0.dev.734c219
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 +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
|