ably-ui 8.7.0.dev.35edbd4 → 8.7.0.dev.40be3cd
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/code/component.css +2 -0
- data/lib/ably_ui/core/featured_link/component.css +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 +2 -2
- data/lib/ably_ui/core/footer/footer.html.erb +11 -11
- data/lib/ably_ui/core/meganav/component.css +7 -7
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +2 -2
- data/lib/ably_ui/core/notice/component.css +1 -1
- data/lib/ably_ui/core/notice/notice.html.erb +2 -2
- data/lib/ably_ui/core/styles.css +122 -88
- data/lib/ably_ui/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4c8ed31da52d119e6315ac9522b4a897389d4f35c61d65408197757d6851b297
|
|
4
|
+
data.tar.gz: afa154f29c4c03129327631c0b19472181f2aac322d3bf4d0329ee698f037c61
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 736a795487fc56a92d69a0349aac20c5dd68bea09db16320aff9feb60f3d5d73fbe8c240c63e7898e7d2345630e332e59531f0c04e5554e1066ad68645bf5a6d
|
|
7
|
+
data.tar.gz: '0628ab29c904a5af0fafeef00ea92661e1dcd3fe6520cad2540598f2d5eff0344b004ea281f101de28775efaa669ee413d6e84d12e5edbe76ccb7841f89dddb4'
|
data/Gemfile.lock
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
@layer base {
|
|
2
2
|
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
|
|
3
|
+
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
|
|
4
|
+
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
|
|
3
5
|
}
|
|
4
6
|
|
|
5
7
|
@layer components {
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.ui-footer-menu-row-link {
|
|
7
|
-
@apply text-menu3 text-cool-black font-
|
|
7
|
+
@apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.ui-footer-link {
|
|
11
|
-
@apply text-gui-default hover:text-gui-hover text-menu3 font-
|
|
11
|
+
@apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.ui-footer-compliance-text {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<footer class="bg-light-grey font-
|
|
1
|
+
<footer class="bg-light-grey font-manrope antialiased" data-id="footer">
|
|
2
2
|
<div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
|
|
3
3
|
<div class="col-span-full md:col-span-2">
|
|
4
4
|
<div class="flex flex-row p-menu-row-snug">
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
>
|
|
181
181
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
|
182
182
|
</a>
|
|
183
|
-
<div class="pl-16 text-menu3 font-
|
|
183
|
+
<div class="pl-16 text-menu3 font-manrope font-medium">
|
|
184
184
|
<strong class="block font-medium">We're hiring!</strong>
|
|
185
185
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
|
186
186
|
Learn more at Glassdoor
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
>
|
|
201
201
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
|
202
202
|
</a>
|
|
203
|
-
<div class="text-menu3 font-
|
|
203
|
+
<div class="text-menu3 font-manrope font-medium">
|
|
204
204
|
<strong class="block font-medium">We're hiring!</strong>
|
|
205
205
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
|
206
206
|
Learn more at Glassdoor
|
|
@@ -231,29 +231,29 @@
|
|
|
231
231
|
<div class="flex mr-24">
|
|
232
232
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
233
233
|
<div>
|
|
234
|
-
<p class="ui-footer-compliance-text font-
|
|
235
|
-
<p class="ui-footer-compliance-text font-
|
|
234
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
|
|
235
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
|
|
236
236
|
</div>
|
|
237
237
|
</div>
|
|
238
238
|
<div class="flex mr-24 md:col-start-2">
|
|
239
239
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
240
240
|
<div>
|
|
241
|
-
<p class="ui-footer-compliance-text font-
|
|
242
|
-
<p class="ui-footer-compliance-text font-
|
|
241
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
|
|
242
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
|
|
243
243
|
</div>
|
|
244
244
|
</div>
|
|
245
245
|
<div class="flex mr-24 md:col-start-3">
|
|
246
246
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
247
247
|
<div>
|
|
248
|
-
<p class="ui-footer-compliance-text font-
|
|
249
|
-
<p class="ui-footer-compliance-text font-
|
|
248
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
|
|
249
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
252
|
<div class="flex mr-24 md:col-start-4">
|
|
253
253
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
254
254
|
<div>
|
|
255
|
-
<p class="ui-footer-compliance-text font-
|
|
256
|
-
<p class="ui-footer-compliance-text font-
|
|
255
|
+
<p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
|
|
256
|
+
<p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
|
|
257
257
|
</div>
|
|
258
258
|
</div>
|
|
259
259
|
</div>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
z-index: var(--stacking-context-page-meganav);
|
|
8
8
|
|
|
9
9
|
@apply fixed top-0 w-full;
|
|
10
|
-
@apply antialiased font-
|
|
10
|
+
@apply antialiased font-manrope transition-colors;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.ui-meganav {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.ui-meganav-link {
|
|
54
|
-
@apply text-menu2 font-
|
|
54
|
+
@apply text-menu2 font-bold block font-manrope;
|
|
55
55
|
@apply mr-12 lg:mr-24 px-0 py-20;
|
|
56
56
|
@apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
|
|
57
57
|
@apply transition-colors;
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
|
|
64
64
|
.ui-meganav-mobile-link {
|
|
65
65
|
@apply p-menu-row relative -left-8 w-extend-8;
|
|
66
|
-
@apply text-menu2 font-medium block text-cool-black text-left;
|
|
66
|
+
@apply text-menu2 font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
|
|
67
67
|
@apply flex items-center;
|
|
68
68
|
@apply focus:text-gui-focus focus:outline-none;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ui-meganav-account-link {
|
|
72
|
-
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-
|
|
72
|
+
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-jetbrains_mono;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.ui-meganav-content {
|
|
@@ -97,15 +97,15 @@
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.ui-meganav-media-heading {
|
|
100
|
-
@apply text-menu3 text-cool-black font-
|
|
100
|
+
@apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.ui-meganav-media-copy {
|
|
104
|
-
@apply text-p3 text-dark-grey
|
|
104
|
+
@apply text-p3 font-manrope font-medium text-dark-grey;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.ui-meganav-overline {
|
|
108
|
-
@apply text-overline2 text-cool-black uppercase font-
|
|
108
|
+
@apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.ui-meganav-hr {
|
|
@@ -69,14 +69,14 @@
|
|
|
69
69
|
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
70
70
|
<div class="flex flex-col justify-center">
|
|
71
71
|
<p class="ui-meganav-media-heading">Multiplayer reference guide</p>
|
|
72
|
-
<p class="ui-meganav-media-copy">Learn
|
|
72
|
+
<p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
|
|
73
73
|
</div>
|
|
74
74
|
<% end %>
|
|
75
75
|
</li>
|
|
76
76
|
</ul>
|
|
77
77
|
</div>
|
|
78
78
|
<div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
|
|
79
|
-
<h3 class="ui-meganav-overline uppercase" id=
|
|
79
|
+
<h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
|
|
80
80
|
Quick links
|
|
81
81
|
</h3>
|
|
82
82
|
<ul aria-labelledby="meganav-developers-panel-quick-links">
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%# Note the style attribute is used for entry animation %>
|
|
2
2
|
<%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
|
|
3
3
|
<div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
|
|
4
|
-
<%= content_wrapper class: "font-
|
|
5
|
-
<strong class="font-
|
|
4
|
+
<%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
|
|
5
|
+
<strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
|
|
6
6
|
<span class="pr-4"><%= @contents[:body_text] %></span>
|
|
7
7
|
<span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
|
|
8
8
|
<% end %>
|
data/lib/ably_ui/core/styles.css
CHANGED
|
@@ -4,20 +4,24 @@
|
|
|
4
4
|
--color-active-orange: #ff5416;
|
|
5
5
|
--color-red-orange: #e40000;
|
|
6
6
|
--color-white: #ffffff;
|
|
7
|
-
--color-electric-cyan: #
|
|
7
|
+
--color-electric-cyan: #4ad4ff;
|
|
8
8
|
--color-zingy-green: #08ff13;
|
|
9
|
-
--color-bright-red: #
|
|
9
|
+
--color-bright-red: #fe372b;
|
|
10
|
+
--color-orange-700: #ff2739;
|
|
10
11
|
--color-jazzy-pink: #ff17d2;
|
|
11
|
-
--color-extra-light-grey: #
|
|
12
|
-
--color-light-grey: #
|
|
13
|
-
--color-mid-grey: #
|
|
14
|
-
--color-dark-grey: #
|
|
15
|
-
--color-charcoal-grey: #
|
|
16
|
-
--color-gui-default: #
|
|
17
|
-
--color-gui-hover: #
|
|
18
|
-
--color-gui-focus: #0073e6;
|
|
19
|
-
--color-gui-focus-outline: #80b9f2;
|
|
12
|
+
--color-extra-light-grey: #f8fafc;
|
|
13
|
+
--color-light-grey: #f4f8fb;
|
|
14
|
+
--color-mid-grey: #c6ced9;
|
|
15
|
+
--color-dark-grey: #667085;
|
|
16
|
+
--color-charcoal-grey: #2b303b;
|
|
17
|
+
--color-gui-default: #006edc;
|
|
18
|
+
--color-gui-hover: #0862b9;
|
|
20
19
|
--color-gui-active: #074095;
|
|
20
|
+
--color-gui-default-dark: #4da6ff;
|
|
21
|
+
--color-gui-hover-dark: #2894ff;
|
|
22
|
+
--color-gui-active-dark: #0080ff;
|
|
23
|
+
--color-gui-focus: #80b9f2;
|
|
24
|
+
--color-gui-focus-outline: #80b9f2;
|
|
21
25
|
--color-gui-visited: #4887c2;
|
|
22
26
|
--color-gui-unavailable: #a8a8a8;
|
|
23
27
|
--color-gui-error: #fb0c0c;
|
|
@@ -36,6 +40,10 @@
|
|
|
36
40
|
--syntax-red: #d54e53;
|
|
37
41
|
--syntax-lilac: #bb87d3;
|
|
38
42
|
|
|
43
|
+
/* New Neutral colors */
|
|
44
|
+
--color-neutral-900: #39414e;
|
|
45
|
+
--color-neutral-500: #c6ced9;
|
|
46
|
+
|
|
39
47
|
/* uptime status colors */
|
|
40
48
|
--uptime-color-up: #39b54a;
|
|
41
49
|
--uptime-color-trouble: #e87623;
|
|
@@ -70,38 +78,43 @@
|
|
|
70
78
|
|
|
71
79
|
--gradient-hot-pink: linear-gradient(
|
|
72
80
|
80.2deg,
|
|
73
|
-
var(--color-
|
|
81
|
+
var(--color-orange-700) 0%,
|
|
74
82
|
var(--color-jazzy-pink) 100%
|
|
75
83
|
);
|
|
76
84
|
|
|
77
|
-
--fs-title-xl:
|
|
78
|
-
--fs-title:
|
|
79
|
-
--fs-title-xs:
|
|
80
|
-
--fs-h1-xl:
|
|
81
|
-
--fs-h1:
|
|
82
|
-
--fs-h1-xs:
|
|
83
|
-
|
|
85
|
+
--fs-title-xl: 3rem;
|
|
86
|
+
--fs-title: 2.75rem;
|
|
87
|
+
--fs-title-xs: 2.5rem;
|
|
88
|
+
--fs-h1-xl: 2.5rem;
|
|
89
|
+
--fs-h1: 2.25rem;
|
|
90
|
+
--fs-h1-xs: 2rem;
|
|
91
|
+
|
|
92
|
+
--fs-h2-xl: 2.125rem;
|
|
84
93
|
--fs-h2: 2rem;
|
|
85
|
-
--fs-h2-xs: 1.
|
|
94
|
+
--fs-h2-xs: 1.75rem;
|
|
95
|
+
|
|
86
96
|
--fs-h3: 1.5rem;
|
|
87
|
-
--fs-h4: 1.
|
|
88
|
-
--fs-
|
|
89
|
-
|
|
97
|
+
--fs-h4: 1.25rem;
|
|
98
|
+
--fs-h5: 1rem;
|
|
99
|
+
|
|
100
|
+
--fs-p1: 1rem;
|
|
101
|
+
--fs-p2: 0.938rem;
|
|
90
102
|
--fs-p3: 0.875rem;
|
|
91
103
|
--fs-standfirst-xl: 2.25rem;
|
|
92
104
|
--fs-standfirst: 1.5rem;
|
|
93
|
-
--fs-sub-header: 1.
|
|
94
|
-
--fs-sub-header-xs: 1.
|
|
105
|
+
--fs-sub-header: 1.125rem;
|
|
106
|
+
--fs-sub-header-xs: 1.063rem;
|
|
95
107
|
--fs-overline1: 1rem;
|
|
96
108
|
--fs-overline2: 0.875rem;
|
|
97
|
-
--fs-btn1:
|
|
98
|
-
--fs-btn2:
|
|
109
|
+
--fs-btn1: 1rem;
|
|
110
|
+
--fs-btn2: 0.938rem;
|
|
99
111
|
--fs-btn3: 0.875rem;
|
|
100
|
-
--fs-menu1:
|
|
101
|
-
--fs-menu2:
|
|
112
|
+
--fs-menu1: 1rem;
|
|
113
|
+
--fs-menu2: 0.938rem;
|
|
102
114
|
--fs-menu3: 0.875rem;
|
|
103
|
-
--fs-quote: 1.
|
|
104
|
-
--fs-code: 0.
|
|
115
|
+
--fs-quote: 1.25rem;
|
|
116
|
+
--fs-code: 0.938rem;
|
|
117
|
+
--fs-code2: 0.813rem;
|
|
105
118
|
|
|
106
119
|
--lh-dense: 1;
|
|
107
120
|
--lh-tight: 1.125;
|
|
@@ -115,7 +128,9 @@
|
|
|
115
128
|
--ls-tighten-0_01: -0.01em;
|
|
116
129
|
--ls-tighten-0_005: -0.005em;
|
|
117
130
|
--ls-tighten-0_0025: -0.0025em;
|
|
131
|
+
--ls-tighten-0_0015: -0.0015em;
|
|
118
132
|
--ls-widen-0_1: 0.1em;
|
|
133
|
+
--ls-widen-0_16: 0.16em;
|
|
119
134
|
--ls-widen-0_15: 0.15em;
|
|
120
135
|
|
|
121
136
|
--spacing-0: 0px;
|
|
@@ -130,6 +145,7 @@
|
|
|
130
145
|
--spacing-20: 1.25rem;
|
|
131
146
|
--spacing-24: 1.5rem;
|
|
132
147
|
--spacing-32: 2rem;
|
|
148
|
+
--spacing-36: 2.25rem;
|
|
133
149
|
--spacing-40: 2.5rem;
|
|
134
150
|
--spacing-48: 3rem;
|
|
135
151
|
--spacing-64: 4rem;
|
|
@@ -177,7 +193,7 @@
|
|
|
177
193
|
}
|
|
178
194
|
@layer components {
|
|
179
195
|
.ui-btn {
|
|
180
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
196
|
+
@apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
|
181
197
|
@apply hover:text-white hover:bg-active-orange;
|
|
182
198
|
@apply active:text-white active:bg-red-orange;
|
|
183
199
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -201,7 +217,7 @@
|
|
|
201
217
|
background-size: 200% 100%;
|
|
202
218
|
background-position: 0% 0%;
|
|
203
219
|
|
|
204
|
-
@apply text-white text-btn2 font-
|
|
220
|
+
@apply text-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
|
205
221
|
@apply focus:outline-gui-focus;
|
|
206
222
|
@apply inline-flex items-center justify-center;
|
|
207
223
|
}
|
|
@@ -217,7 +233,7 @@
|
|
|
217
233
|
}
|
|
218
234
|
|
|
219
235
|
.ui-btn-invert {
|
|
220
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
236
|
+
@apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block rounded p-btn;
|
|
221
237
|
@apply hover:text-white hover:bg-active-orange;
|
|
222
238
|
@apply active:text-white active:bg-red-orange;
|
|
223
239
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -227,7 +243,7 @@
|
|
|
227
243
|
}
|
|
228
244
|
|
|
229
245
|
.ui-btn-secondary {
|
|
230
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
246
|
+
@apply text-cool-black bg-white text-btn2 font-manrope font-bold inline-block border-btn border-cool-black rounded p-btn;
|
|
231
247
|
@apply hover:text-cool-black hover:border-active-orange hover:bg-white;
|
|
232
248
|
@apply active:border-red-orange active:bg-white;
|
|
233
249
|
@apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
|
|
@@ -237,7 +253,7 @@
|
|
|
237
253
|
}
|
|
238
254
|
|
|
239
255
|
.ui-btn-secondary-invert {
|
|
240
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
256
|
+
@apply text-white bg-cool-black text-btn2 font-manrope font-bold inline-block border-btn border-mid-grey rounded p-btn;
|
|
241
257
|
@apply hover:text-white hover:border-active-orange;
|
|
242
258
|
@apply active:border-red-orange;
|
|
243
259
|
@apply focus:outline-gui-focus;
|
|
@@ -322,48 +338,54 @@
|
|
|
322
338
|
}
|
|
323
339
|
@layer components {
|
|
324
340
|
.ui-text-title {
|
|
325
|
-
@apply font-
|
|
326
|
-
@apply text-title-xs xs:text-title xl:text-title-xl;
|
|
327
|
-
@apply tracking-tighten-0.
|
|
341
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
342
|
+
@apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
|
|
343
|
+
@apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
|
|
328
344
|
}
|
|
329
345
|
|
|
330
346
|
.ui-text-h1 {
|
|
331
|
-
@apply font-
|
|
332
|
-
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
|
333
|
-
@apply tracking-tighten-0.
|
|
347
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
348
|
+
@apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
|
|
349
|
+
@apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
|
|
334
350
|
}
|
|
335
351
|
|
|
336
352
|
.ui-text-h2 {
|
|
337
|
-
@apply font-
|
|
338
|
-
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
|
339
|
-
@apply tracking-tighten-0.
|
|
353
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
354
|
+
@apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
|
|
355
|
+
@apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
|
|
340
356
|
}
|
|
341
357
|
|
|
342
358
|
.ui-text-h3 {
|
|
343
|
-
@apply font-
|
|
344
|
-
@apply text-h3;
|
|
345
|
-
@apply tracking-tighten-0.
|
|
359
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
360
|
+
@apply text-h3 leading-tight;
|
|
361
|
+
@apply tracking-tighten-0.005;
|
|
346
362
|
}
|
|
347
363
|
|
|
348
364
|
.ui-text-h4 {
|
|
349
|
-
@apply font-
|
|
350
|
-
@apply text-h4;
|
|
351
|
-
@apply tracking-
|
|
365
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
366
|
+
@apply text-h4 leading-tight;
|
|
367
|
+
@apply tracking-tighten-0.0015;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.ui-text-h5 {
|
|
371
|
+
@apply font-manrope font-extrabold text-cool-black;
|
|
372
|
+
@apply text-h5 leading-tight;
|
|
373
|
+
@apply tracking-tighten-0.0025;
|
|
352
374
|
}
|
|
353
375
|
|
|
354
376
|
.ui-text-p1 {
|
|
355
|
-
@apply font-
|
|
356
|
-
@apply text-p1;
|
|
377
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
|
378
|
+
@apply text-p1 leading-relaxed;
|
|
357
379
|
}
|
|
358
380
|
|
|
359
381
|
.ui-text-p2 {
|
|
360
|
-
@apply font-
|
|
361
|
-
@apply text-p2;
|
|
382
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
|
383
|
+
@apply text-p2 leading-relaxed;
|
|
362
384
|
}
|
|
363
385
|
|
|
364
386
|
.ui-text-p3 {
|
|
365
|
-
@apply font-
|
|
366
|
-
@apply text-p3;
|
|
387
|
+
@apply font-manrope font-medium text-charcoal-grey;
|
|
388
|
+
@apply text-p3 leading-relaxed;
|
|
367
389
|
}
|
|
368
390
|
|
|
369
391
|
.ui-text-standfirst {
|
|
@@ -373,60 +395,63 @@
|
|
|
373
395
|
}
|
|
374
396
|
|
|
375
397
|
.ui-text-quote {
|
|
376
|
-
@apply font-
|
|
377
|
-
@apply text-quote;
|
|
378
|
-
@apply tracking-tighten-0.
|
|
398
|
+
@apply font-manrope font-normal text-cool-black;
|
|
399
|
+
@apply text-quote leading-normal;
|
|
400
|
+
@apply tracking-tighten-0.0015;
|
|
379
401
|
}
|
|
380
402
|
|
|
381
403
|
.ui-text-sub-header {
|
|
382
|
-
@apply font-
|
|
383
|
-
@apply text-sub-header-xs xs:text-sub-header;
|
|
384
|
-
@apply tracking-tighten-0.025;
|
|
404
|
+
@apply font-manrope font-semibold text-neutral-900;
|
|
405
|
+
@apply text-sub-header-xs xs:text-sub-header leading-normal;
|
|
385
406
|
}
|
|
386
407
|
|
|
387
408
|
.ui-text-overline1 {
|
|
388
|
-
@apply font-
|
|
389
|
-
@apply text-overline1;
|
|
390
|
-
@apply tracking-widen-0.
|
|
409
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
|
410
|
+
@apply text-overline1 leading-normal;
|
|
411
|
+
@apply tracking-widen-0.16;
|
|
391
412
|
}
|
|
392
413
|
|
|
393
414
|
.ui-text-overline2 {
|
|
394
|
-
@apply font-
|
|
395
|
-
@apply text-overline2;
|
|
396
|
-
@apply tracking-widen-0.
|
|
415
|
+
@apply font-jetbrains_mono font-medium text-active-orange uppercase;
|
|
416
|
+
@apply text-overline2 leading-normal;
|
|
417
|
+
@apply tracking-widen-0.16;
|
|
397
418
|
}
|
|
398
419
|
|
|
399
420
|
.ui-text-menu1 {
|
|
400
|
-
@apply font-
|
|
401
|
-
@apply text-menu1;
|
|
421
|
+
@apply font-manrope font-medium text-cool-black;
|
|
422
|
+
@apply text-menu1 leading-snug;
|
|
402
423
|
}
|
|
403
424
|
|
|
404
425
|
.ui-text-menu2 {
|
|
405
|
-
@apply font-
|
|
406
|
-
@apply text-menu2;
|
|
426
|
+
@apply font-manrope font-medium text-cool-black;
|
|
427
|
+
@apply text-menu2 leading-snug;
|
|
407
428
|
}
|
|
408
429
|
|
|
409
430
|
.ui-text-menu3 {
|
|
410
|
-
@apply font-
|
|
411
|
-
@apply text-menu3;
|
|
431
|
+
@apply font-manrope font-medium text-cool-black;
|
|
432
|
+
@apply text-menu3 leading-snug;
|
|
412
433
|
}
|
|
413
434
|
|
|
414
435
|
.ui-text-code {
|
|
415
|
-
@apply font-
|
|
436
|
+
@apply font-jetbrains_mono font-medium text-code;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.ui-text-code2 {
|
|
440
|
+
@apply font-jetbrains_mono font-medium text-code2;
|
|
416
441
|
}
|
|
417
442
|
|
|
418
443
|
.ui-text-code-inline {
|
|
419
|
-
@apply font-
|
|
444
|
+
@apply font-jetbrains_mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
|
|
420
445
|
}
|
|
421
446
|
|
|
422
447
|
.ui-unordered-list {
|
|
423
|
-
@apply text-p1 font-
|
|
424
|
-
@apply list-disc ml-32
|
|
448
|
+
@apply text-p1 font-medium text-cool-black;
|
|
449
|
+
@apply list-disc ml-32 my-16;
|
|
425
450
|
}
|
|
426
451
|
|
|
427
452
|
.ui-ordered-list {
|
|
428
|
-
@apply text-p1 font-
|
|
429
|
-
@apply ml-32
|
|
453
|
+
@apply text-p1 font-medium text-charcoal-grey;
|
|
454
|
+
@apply ml-32 my-16 list-decimal;
|
|
430
455
|
}
|
|
431
456
|
|
|
432
457
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
|
@@ -443,11 +468,20 @@
|
|
|
443
468
|
}
|
|
444
469
|
|
|
445
470
|
.ui-unordered-list ul ul {
|
|
446
|
-
@apply list-square;
|
|
471
|
+
@apply list-square my-8;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.ui-unordered-list ul ul {
|
|
475
|
+
@apply my-8;
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.ui-ordered-list li,
|
|
479
|
+
.ui-unordered-list li {
|
|
480
|
+
@apply font-medium font-manrope tracking-widen-0 leading-relaxed;
|
|
447
481
|
}
|
|
448
482
|
|
|
449
483
|
.ui-unordered-list-with-emphasis {
|
|
450
|
-
@apply text-p1 font-
|
|
484
|
+
@apply text-p1 font-medium text-cool-black;
|
|
451
485
|
@apply list-disc ml-32 mt-32 -mb-12;
|
|
452
486
|
}
|
|
453
487
|
|
|
@@ -483,11 +517,11 @@
|
|
|
483
517
|
}
|
|
484
518
|
@layer components {
|
|
485
519
|
.ui-checkbox-p1 {
|
|
486
|
-
@apply flex items-start mb-16 font-
|
|
520
|
+
@apply flex items-start mb-16 font-manrope font-medium;
|
|
487
521
|
}
|
|
488
522
|
|
|
489
523
|
.ui-checkbox-p2 {
|
|
490
|
-
@apply flex items-start mb-12 font-
|
|
524
|
+
@apply flex items-start mb-12 font-manrope font-medium;
|
|
491
525
|
}
|
|
492
526
|
|
|
493
527
|
.ui-checkbox-input {
|
|
@@ -506,12 +540,12 @@
|
|
|
506
540
|
|
|
507
541
|
.ui-checkbox-label-p1 {
|
|
508
542
|
@apply select-none;
|
|
509
|
-
@apply text-p1 font-
|
|
543
|
+
@apply text-p1 font-medium text-cool-black;
|
|
510
544
|
}
|
|
511
545
|
|
|
512
546
|
.ui-checkbox-label-p2 {
|
|
513
547
|
@apply select-none;
|
|
514
|
-
@apply text-p2 font-
|
|
548
|
+
@apply text-p2 font-medium text-cool-black;
|
|
515
549
|
}
|
|
516
550
|
|
|
517
551
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
@@ -532,7 +566,7 @@
|
|
|
532
566
|
}
|
|
533
567
|
|
|
534
568
|
.ui-textarea {
|
|
535
|
-
@apply font-
|
|
569
|
+
@apply font-manrope font-medium text-cool-black text-p1;
|
|
536
570
|
@apply p-input mb-16;
|
|
537
571
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
|
538
572
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
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.40be3cd
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dominik Piatek
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2023-06-
|
|
13
|
+
date: 2023-06-19 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|
|
@@ -91,6 +91,8 @@ files:
|
|
|
91
91
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
|
|
92
92
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
|
|
93
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
|
|
94
96
|
- lib/ably_ui/core/fonts/next.css
|
|
95
97
|
- lib/ably_ui/core/fonts/source-code-pro.css
|
|
96
98
|
- lib/ably_ui/core/footer/component.css
|