ably-ui 8.7.0.dev.35edbd4 → 8.7.0.dev.40be3cd
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 +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
|