ably-ui 8.7.0.dev.779bcfa → 8.7.0.dev.873a47c
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 +0 -2
- data/lib/ably_ui/core/featured_link/component.css +1 -1
- 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 +3 -10
- 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 +88 -122
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -4
- data/lib/ably_ui/core/fonts/jetBrains-mono.css +0 -3
- data/lib/ably_ui/core/fonts/manrope.css +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 141df1249d2bca26adc2e96e013e19ecd834eece13d844d580c2ec7918ab42e1
|
|
4
|
+
data.tar.gz: ca62228c98d0a8d570a7cb651cac5bc7e480406a318e356c6d0aef84b2881314
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8288690df2780d459c6ba33d763d17589b0158dbc32fbdd66f6051f414332c7d4183538dea56332981d1a3ba7f2adcb4bf3894aa6da9432c80a642106a9fb262
|
|
7
|
+
data.tar.gz: 65617a8b1603e825bf7ca98359ed8ccf06cd6e62d6e2d824e9d4f12922d0c028ec760bc6f97af0aebef1acd76d3f82b6abab3927663651b5e0edc0510141aac0
|
data/Gemfile.lock
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
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");
|
|
5
3
|
}
|
|
6
4
|
|
|
7
5
|
@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-light 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-light;
|
|
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-sans 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-light">
|
|
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-light">
|
|
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-medium whitespace-nowrap">SOC 2 Type 2</p>
|
|
235
|
+
<p class="ui-footer-compliance-text font-light 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-medium whitespace-nowrap">HIPAA</p>
|
|
242
|
+
<p class="ui-footer-compliance-text font-light 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-medium whitespace-nowrap">EU GDPR</p>
|
|
249
|
+
<p class="ui-footer-compliance-text font-light 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-medium whitespace-nowrap">256-bit AES</p>
|
|
256
|
+
<p class="ui-footer-compliance-text font-light 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-sans 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-medium block;
|
|
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
|
|
66
|
+
@apply text-menu2 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-light;
|
|
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-medium group-hover:text-gui-hover group-focus:text-gui-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.ui-meganav-media-copy {
|
|
104
|
-
@apply text-p3
|
|
104
|
+
@apply text-p3 text-dark-grey font-light;
|
|
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-medium tracking-widen-0.15 p-overline;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.ui-meganav-hr {
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
</li>
|
|
36
36
|
</ul>
|
|
37
37
|
</div>
|
|
38
|
+
|
|
38
39
|
<div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
|
|
39
40
|
<ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
|
|
40
41
|
<li>
|
|
@@ -64,19 +65,11 @@
|
|
|
64
65
|
</div>
|
|
65
66
|
<% end %>
|
|
66
67
|
</li>
|
|
67
|
-
<li>
|
|
68
|
-
<%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
|
|
69
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
70
|
-
<div class="flex flex-col justify-center">
|
|
71
|
-
<p class="ui-meganav-media-heading">Multiplayer reference guide</p>
|
|
72
|
-
<p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
|
|
73
|
-
</div>
|
|
74
|
-
<% end %>
|
|
75
|
-
</li>
|
|
76
68
|
</ul>
|
|
77
69
|
</div>
|
|
70
|
+
|
|
78
71
|
<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=meganav-developers-panel-quick-links">
|
|
72
|
+
<h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
|
|
80
73
|
Quick links
|
|
81
74
|
</h3>
|
|
82
75
|
<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-light w-full pr-8 text-p3 self-center" do %>
|
|
5
|
+
<strong class="font-medium 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,24 +4,20 @@
|
|
|
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: #4af7ff;
|
|
8
8
|
--color-zingy-green: #08ff13;
|
|
9
|
-
--color-bright-red: #
|
|
10
|
-
--color-orange-700: #ff2739;
|
|
9
|
+
--color-bright-red: #ff2739;
|
|
11
10
|
--color-jazzy-pink: #ff17d2;
|
|
12
|
-
--color-extra-light-grey: #
|
|
13
|
-
--color-light-grey: #
|
|
14
|
-
--color-mid-grey: #
|
|
15
|
-
--color-dark-grey: #
|
|
16
|
-
--color-charcoal-grey: #
|
|
17
|
-
--color-gui-default: #
|
|
18
|
-
--color-gui-hover: #
|
|
19
|
-
--color-gui-
|
|
20
|
-
--color-gui-default-dark: #4da6ff;
|
|
21
|
-
--color-gui-hover-dark: #2894ff;
|
|
22
|
-
--color-gui-active-dark: #0080ff;
|
|
23
|
-
--color-gui-focus: #80b9f2;
|
|
11
|
+
--color-extra-light-grey: #fafafb;
|
|
12
|
+
--color-light-grey: #f5f5f6;
|
|
13
|
+
--color-mid-grey: #d9d9da;
|
|
14
|
+
--color-dark-grey: #76767c;
|
|
15
|
+
--color-charcoal-grey: #292831;
|
|
16
|
+
--color-gui-default: #0073e6;
|
|
17
|
+
--color-gui-hover: #0867c4;
|
|
18
|
+
--color-gui-focus: #0073e6;
|
|
24
19
|
--color-gui-focus-outline: #80b9f2;
|
|
20
|
+
--color-gui-active: #074095;
|
|
25
21
|
--color-gui-visited: #4887c2;
|
|
26
22
|
--color-gui-unavailable: #a8a8a8;
|
|
27
23
|
--color-gui-error: #fb0c0c;
|
|
@@ -40,10 +36,6 @@
|
|
|
40
36
|
--syntax-red: #d54e53;
|
|
41
37
|
--syntax-lilac: #bb87d3;
|
|
42
38
|
|
|
43
|
-
/* New Neutral colors */
|
|
44
|
-
--color-neutral-900: #39414e;
|
|
45
|
-
--color-neutral-500: #c6ced9;
|
|
46
|
-
|
|
47
39
|
/* uptime status colors */
|
|
48
40
|
--uptime-color-up: #39b54a;
|
|
49
41
|
--uptime-color-trouble: #e87623;
|
|
@@ -78,43 +70,38 @@
|
|
|
78
70
|
|
|
79
71
|
--gradient-hot-pink: linear-gradient(
|
|
80
72
|
80.2deg,
|
|
81
|
-
var(--color-
|
|
73
|
+
var(--color-bright-red) 0%,
|
|
82
74
|
var(--color-jazzy-pink) 100%
|
|
83
75
|
);
|
|
84
76
|
|
|
85
|
-
--fs-title-xl:
|
|
86
|
-
--fs-title:
|
|
87
|
-
--fs-title-xs:
|
|
88
|
-
--fs-h1-xl:
|
|
89
|
-
--fs-h1:
|
|
90
|
-
--fs-h1-xs:
|
|
91
|
-
|
|
92
|
-
--fs-h2-xl: 2.125rem;
|
|
77
|
+
--fs-title-xl: 4rem;
|
|
78
|
+
--fs-title: 3.5rem;
|
|
79
|
+
--fs-title-xs: 3rem;
|
|
80
|
+
--fs-h1-xl: 3.5rem;
|
|
81
|
+
--fs-h1: 3rem;
|
|
82
|
+
--fs-h1-xs: 2.625rem;
|
|
83
|
+
--fs-h2-xl: 2.5rem;
|
|
93
84
|
--fs-h2: 2rem;
|
|
94
|
-
--fs-h2-xs: 1.
|
|
95
|
-
|
|
85
|
+
--fs-h2-xs: 1.875rem;
|
|
96
86
|
--fs-h3: 1.5rem;
|
|
97
|
-
--fs-h4: 1.
|
|
98
|
-
--fs-
|
|
99
|
-
|
|
100
|
-
--fs-p1: 1rem;
|
|
101
|
-
--fs-p2: 0.938rem;
|
|
87
|
+
--fs-h4: 1.125rem;
|
|
88
|
+
--fs-p1: 1.125rem;
|
|
89
|
+
--fs-p2: 1rem;
|
|
102
90
|
--fs-p3: 0.875rem;
|
|
103
91
|
--fs-standfirst-xl: 2.25rem;
|
|
104
92
|
--fs-standfirst: 1.5rem;
|
|
105
|
-
--fs-sub-header: 1.
|
|
106
|
-
--fs-sub-header-xs: 1.
|
|
93
|
+
--fs-sub-header: 1.5rem;
|
|
94
|
+
--fs-sub-header-xs: 1.125rem;
|
|
107
95
|
--fs-overline1: 1rem;
|
|
108
96
|
--fs-overline2: 0.875rem;
|
|
109
|
-
--fs-btn1:
|
|
110
|
-
--fs-btn2:
|
|
97
|
+
--fs-btn1: 1.125rem;
|
|
98
|
+
--fs-btn2: 1rem;
|
|
111
99
|
--fs-btn3: 0.875rem;
|
|
112
|
-
--fs-menu1:
|
|
113
|
-
--fs-menu2:
|
|
100
|
+
--fs-menu1: 1.125rem;
|
|
101
|
+
--fs-menu2: 1rem;
|
|
114
102
|
--fs-menu3: 0.875rem;
|
|
115
|
-
--fs-quote: 1.
|
|
116
|
-
--fs-code: 0.
|
|
117
|
-
--fs-code2: 0.813rem;
|
|
103
|
+
--fs-quote: 1.5rem;
|
|
104
|
+
--fs-code: 0.875rem;
|
|
118
105
|
|
|
119
106
|
--lh-dense: 1;
|
|
120
107
|
--lh-tight: 1.125;
|
|
@@ -128,9 +115,7 @@
|
|
|
128
115
|
--ls-tighten-0_01: -0.01em;
|
|
129
116
|
--ls-tighten-0_005: -0.005em;
|
|
130
117
|
--ls-tighten-0_0025: -0.0025em;
|
|
131
|
-
--ls-tighten-0_0015: -0.0015em;
|
|
132
118
|
--ls-widen-0_1: 0.1em;
|
|
133
|
-
--ls-widen-0_16: 0.16em;
|
|
134
119
|
--ls-widen-0_15: 0.15em;
|
|
135
120
|
|
|
136
121
|
--spacing-0: 0px;
|
|
@@ -145,7 +130,6 @@
|
|
|
145
130
|
--spacing-20: 1.25rem;
|
|
146
131
|
--spacing-24: 1.5rem;
|
|
147
132
|
--spacing-32: 2rem;
|
|
148
|
-
--spacing-36: 2.25rem;
|
|
149
133
|
--spacing-40: 2.5rem;
|
|
150
134
|
--spacing-48: 3rem;
|
|
151
135
|
--spacing-64: 4rem;
|
|
@@ -193,7 +177,7 @@
|
|
|
193
177
|
}
|
|
194
178
|
@layer components {
|
|
195
179
|
.ui-btn {
|
|
196
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
180
|
+
@apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
197
181
|
@apply hover:text-white hover:bg-active-orange;
|
|
198
182
|
@apply active:text-white active:bg-red-orange;
|
|
199
183
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -217,7 +201,7 @@
|
|
|
217
201
|
background-size: 200% 100%;
|
|
218
202
|
background-position: 0% 0%;
|
|
219
203
|
|
|
220
|
-
@apply text-white text-btn2 font-
|
|
204
|
+
@apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
221
205
|
@apply focus:outline-gui-focus;
|
|
222
206
|
@apply inline-flex items-center justify-center;
|
|
223
207
|
}
|
|
@@ -233,7 +217,7 @@
|
|
|
233
217
|
}
|
|
234
218
|
|
|
235
219
|
.ui-btn-invert {
|
|
236
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
220
|
+
@apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
237
221
|
@apply hover:text-white hover:bg-active-orange;
|
|
238
222
|
@apply active:text-white active:bg-red-orange;
|
|
239
223
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -243,7 +227,7 @@
|
|
|
243
227
|
}
|
|
244
228
|
|
|
245
229
|
.ui-btn-secondary {
|
|
246
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
230
|
+
@apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
|
|
247
231
|
@apply hover:text-cool-black hover:border-active-orange hover:bg-white;
|
|
248
232
|
@apply active:border-red-orange active:bg-white;
|
|
249
233
|
@apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
|
|
@@ -253,7 +237,7 @@
|
|
|
253
237
|
}
|
|
254
238
|
|
|
255
239
|
.ui-btn-secondary-invert {
|
|
256
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
240
|
+
@apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
|
|
257
241
|
@apply hover:text-white hover:border-active-orange;
|
|
258
242
|
@apply active:border-red-orange;
|
|
259
243
|
@apply focus:outline-gui-focus;
|
|
@@ -338,54 +322,48 @@
|
|
|
338
322
|
}
|
|
339
323
|
@layer components {
|
|
340
324
|
.ui-text-title {
|
|
341
|
-
@apply font-
|
|
342
|
-
@apply text-title-xs xs:text-title xl:text-title-xl
|
|
343
|
-
@apply tracking-tighten-0.
|
|
325
|
+
@apply font-sans font-medium text-cool-black;
|
|
326
|
+
@apply text-title-xs xs:text-title xl:text-title-xl;
|
|
327
|
+
@apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
|
|
344
328
|
}
|
|
345
329
|
|
|
346
330
|
.ui-text-h1 {
|
|
347
|
-
@apply font-
|
|
348
|
-
@apply text-h1-xs xs:text-h1 xl:text-h1-xl
|
|
349
|
-
@apply tracking-tighten-0.
|
|
331
|
+
@apply font-sans font-medium text-cool-black;
|
|
332
|
+
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
|
333
|
+
@apply tracking-tighten-0.01;
|
|
350
334
|
}
|
|
351
335
|
|
|
352
336
|
.ui-text-h2 {
|
|
353
|
-
@apply font-
|
|
354
|
-
@apply text-h2-xs xs:text-h2 xl:text-h2-xl
|
|
355
|
-
@apply tracking-tighten-0.
|
|
337
|
+
@apply font-sans font-medium text-cool-black;
|
|
338
|
+
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
|
339
|
+
@apply tracking-tighten-0.005;
|
|
356
340
|
}
|
|
357
341
|
|
|
358
342
|
.ui-text-h3 {
|
|
359
|
-
@apply font-
|
|
360
|
-
@apply text-h3
|
|
361
|
-
@apply tracking-tighten-0.
|
|
343
|
+
@apply font-sans font-medium text-cool-black;
|
|
344
|
+
@apply text-h3;
|
|
345
|
+
@apply tracking-tighten-0.0025;
|
|
362
346
|
}
|
|
363
347
|
|
|
364
348
|
.ui-text-h4 {
|
|
365
|
-
@apply font-
|
|
366
|
-
@apply text-h4
|
|
367
|
-
@apply tracking-
|
|
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;
|
|
349
|
+
@apply font-sans font-medium text-cool-black;
|
|
350
|
+
@apply text-h4 uppercase;
|
|
351
|
+
@apply tracking-widen-0.1;
|
|
374
352
|
}
|
|
375
353
|
|
|
376
354
|
.ui-text-p1 {
|
|
377
|
-
@apply font-
|
|
378
|
-
@apply text-p1
|
|
355
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
356
|
+
@apply text-p1;
|
|
379
357
|
}
|
|
380
358
|
|
|
381
359
|
.ui-text-p2 {
|
|
382
|
-
@apply font-
|
|
383
|
-
@apply text-p2
|
|
360
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
361
|
+
@apply text-p2;
|
|
384
362
|
}
|
|
385
363
|
|
|
386
364
|
.ui-text-p3 {
|
|
387
|
-
@apply font-
|
|
388
|
-
@apply text-p3
|
|
365
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
366
|
+
@apply text-p3;
|
|
389
367
|
}
|
|
390
368
|
|
|
391
369
|
.ui-text-standfirst {
|
|
@@ -395,63 +373,60 @@
|
|
|
395
373
|
}
|
|
396
374
|
|
|
397
375
|
.ui-text-quote {
|
|
398
|
-
@apply font-
|
|
399
|
-
@apply text-quote
|
|
400
|
-
@apply tracking-tighten-0.
|
|
376
|
+
@apply font-sans font-light text-cool-black;
|
|
377
|
+
@apply text-quote;
|
|
378
|
+
@apply tracking-tighten-0.025;
|
|
401
379
|
}
|
|
402
380
|
|
|
403
381
|
.ui-text-sub-header {
|
|
404
|
-
@apply font-
|
|
405
|
-
@apply text-sub-header-xs xs:text-sub-header
|
|
382
|
+
@apply font-sans font-light text-dark-grey;
|
|
383
|
+
@apply text-sub-header-xs xs:text-sub-header;
|
|
384
|
+
@apply tracking-tighten-0.025;
|
|
406
385
|
}
|
|
407
386
|
|
|
408
387
|
.ui-text-overline1 {
|
|
409
|
-
@apply font-
|
|
410
|
-
@apply text-overline1
|
|
411
|
-
@apply tracking-widen-0.
|
|
388
|
+
@apply font-sans font-medium text-dark-grey uppercase;
|
|
389
|
+
@apply text-overline1;
|
|
390
|
+
@apply tracking-widen-0.15;
|
|
412
391
|
}
|
|
413
392
|
|
|
414
393
|
.ui-text-overline2 {
|
|
415
|
-
@apply font-
|
|
416
|
-
@apply text-overline2
|
|
417
|
-
@apply tracking-widen-0.
|
|
394
|
+
@apply font-sans font-medium text-dark-grey uppercase;
|
|
395
|
+
@apply text-overline2;
|
|
396
|
+
@apply tracking-widen-0.1;
|
|
418
397
|
}
|
|
419
398
|
|
|
420
399
|
.ui-text-menu1 {
|
|
421
|
-
@apply font-
|
|
422
|
-
@apply text-menu1
|
|
400
|
+
@apply font-sans font-light text-cool-black;
|
|
401
|
+
@apply text-menu1;
|
|
423
402
|
}
|
|
424
403
|
|
|
425
404
|
.ui-text-menu2 {
|
|
426
|
-
@apply font-
|
|
427
|
-
@apply text-menu2
|
|
405
|
+
@apply font-sans font-light text-cool-black;
|
|
406
|
+
@apply text-menu2;
|
|
428
407
|
}
|
|
429
408
|
|
|
430
409
|
.ui-text-menu3 {
|
|
431
|
-
@apply font-
|
|
432
|
-
@apply text-menu3
|
|
410
|
+
@apply font-sans font-light text-cool-black;
|
|
411
|
+
@apply text-menu3;
|
|
433
412
|
}
|
|
434
413
|
|
|
435
414
|
.ui-text-code {
|
|
436
|
-
@apply font-
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.ui-text-code2 {
|
|
440
|
-
@apply font-jetbrains_mono font-medium text-code2;
|
|
415
|
+
@apply font-mono font-semibold text-code;
|
|
441
416
|
}
|
|
442
417
|
|
|
443
418
|
.ui-text-code-inline {
|
|
444
|
-
@apply font-
|
|
419
|
+
@apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
|
|
445
420
|
}
|
|
446
421
|
|
|
447
422
|
.ui-unordered-list {
|
|
448
|
-
@apply text-p1 font-
|
|
449
|
-
@apply list-disc ml-32
|
|
423
|
+
@apply text-p1 font-light text-cool-black;
|
|
424
|
+
@apply list-disc ml-32 mb-24;
|
|
450
425
|
}
|
|
451
426
|
|
|
452
427
|
.ui-ordered-list {
|
|
453
|
-
@apply text-p1 font-
|
|
454
|
-
@apply ml-32
|
|
428
|
+
@apply text-p1 font-light text-cool-black;
|
|
429
|
+
@apply ml-32 mb-24 list-decimal;
|
|
455
430
|
}
|
|
456
431
|
|
|
457
432
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
|
@@ -468,20 +443,11 @@
|
|
|
468
443
|
}
|
|
469
444
|
|
|
470
445
|
.ui-unordered-list ul ul {
|
|
471
|
-
@apply list-square
|
|
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;
|
|
446
|
+
@apply list-square;
|
|
481
447
|
}
|
|
482
448
|
|
|
483
449
|
.ui-unordered-list-with-emphasis {
|
|
484
|
-
@apply text-p1 font-
|
|
450
|
+
@apply text-p1 font-light text-cool-black;
|
|
485
451
|
@apply list-disc ml-32 mt-32 -mb-12;
|
|
486
452
|
}
|
|
487
453
|
|
|
@@ -517,11 +483,11 @@
|
|
|
517
483
|
}
|
|
518
484
|
@layer components {
|
|
519
485
|
.ui-checkbox-p1 {
|
|
520
|
-
@apply flex items-start mb-16 font-
|
|
486
|
+
@apply flex items-start mb-16 font-sans;
|
|
521
487
|
}
|
|
522
488
|
|
|
523
489
|
.ui-checkbox-p2 {
|
|
524
|
-
@apply flex items-start mb-12 font-
|
|
490
|
+
@apply flex items-start mb-12 font-sans;
|
|
525
491
|
}
|
|
526
492
|
|
|
527
493
|
.ui-checkbox-input {
|
|
@@ -540,12 +506,12 @@
|
|
|
540
506
|
|
|
541
507
|
.ui-checkbox-label-p1 {
|
|
542
508
|
@apply select-none;
|
|
543
|
-
@apply text-p1 font-
|
|
509
|
+
@apply text-p1 font-light text-cool-black;
|
|
544
510
|
}
|
|
545
511
|
|
|
546
512
|
.ui-checkbox-label-p2 {
|
|
547
513
|
@apply select-none;
|
|
548
|
-
@apply text-p2 font-
|
|
514
|
+
@apply text-p2 font-light text-cool-black;
|
|
549
515
|
}
|
|
550
516
|
|
|
551
517
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
@@ -566,7 +532,7 @@
|
|
|
566
532
|
}
|
|
567
533
|
|
|
568
534
|
.ui-textarea {
|
|
569
|
-
@apply font-
|
|
535
|
+
@apply font-sans font-light text-cool-black text-p1;
|
|
570
536
|
@apply p-input mb-16;
|
|
571
537
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
|
572
538
|
@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.873a47c
|
|
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-
|
|
13
|
+
date: 2023-04-27 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|
|
@@ -91,8 +91,6 @@ 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
|
|
96
94
|
- lib/ably_ui/core/fonts/next.css
|
|
97
95
|
- lib/ably_ui/core/fonts/source-code-pro.css
|
|
98
96
|
- lib/ably_ui/core/footer/component.css
|