ably-ui 8.7.0.dev.fba161a → 8.7.0.dev.fe9bd38

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.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/lib/ably_ui/core/featured_link/component.css +1 -1
  4. data/lib/ably_ui/core/footer/component.css +3 -3
  5. data/lib/ably_ui/core/footer/footer.html.erb +13 -13
  6. data/lib/ably_ui/core/meganav/component.css +7 -7
  7. data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb +1 -1
  8. data/lib/ably_ui/core/notice/component.css +1 -1
  9. data/lib/ably_ui/core/notice/notice.html.erb +2 -2
  10. data/lib/ably_ui/core/styles.css +46 -139
  11. data/lib/ably_ui/version.rb +1 -1
  12. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1240ce160935edbbf5ef1a26f9362c56412051b0cbbd63ccb8072d98e94b4e1b
4
- data.tar.gz: 81e14fce00e941c17922109d61db2f6332794b1e864bc4c04ae91f64ab9f72b8
3
+ metadata.gz: 8215add2cafe26f088c72ed20b2ffbe5ad059f9610da223470431f0dc7096f0d
4
+ data.tar.gz: 470e1c9ce6d4516a0bf992b91d0c96dab5aa4387ffeeaddde4a2cbdf3b1d1b48
5
5
  SHA512:
6
- metadata.gz: 00f581b9b4e8cd5ee46d28cb21f9529f99290104fbaea469abd5c0ec4b542dd72cf385a800ecbc86424771c63a46489c3b96c5bf65323354ffdcb80492ee244e
7
- data.tar.gz: 225e0b9758fa1ae87c20fa8ed1983d66a70182227468be718ae30a8564519c2da73ca83ad9c54ad08d0706efb289fe833523186153cf764d524bb0361ae5c684
6
+ metadata.gz: a8db7ec93291d550612f08659a0e62ee0e3b49f90b1e0e43a1b7d140325b7314bd5636aab1b648706fb04cc5e7518a34d9da60cbcf96d28e3c4f0c188fc8f1c3
7
+ data.tar.gz: 631541e1f0c1b0ce0368e7556a7f2f6c8b6a4d3e38983582ce3c8a7aadb5195d9a12b9c4ae70fcad02aa0dc5b4ab905a178cc6a2abdcbf49045e7c1fdf08db42
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.2b71529)
4
+ ably-ui (8.7.0.dev.681c3bf)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/lib/ably_ui/core/featured_link/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-featured-link {
3
- @apply font-manrope font-bold block;
3
+ @apply font-sans font-medium block;
4
4
  @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
5
  }
6
6
 
data/lib/ably_ui/core/footer/component.css CHANGED
@@ -1,14 +1,14 @@
1
1
  @layer components {
2
2
  .ui-footer-col-title {
3
- @apply font-jetbrains_mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
3
+ @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
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-manrope font-medium;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
data/lib/ably_ui/core/footer/footer.html.erb CHANGED
@@ -1,12 +1,12 @@
1
- <footer class="bg-light-grey font-manrope antialiased leading-normal" data-id="footer">
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">
5
5
  <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
6
- <h2 class="text-overline2 col-span-full font-jetbrains_mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
6
+ <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
7
7
  </div>
8
8
  <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
9
- <p class="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
9
+ <p class="text-p3 py-16 font-medium p-menu-row-snug">
10
10
  Easily power any realtime experience in your application via a simple API that handles everything realtime.
11
11
  </p>
12
12
  </div>
@@ -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-manrope font-medium">
183
+ <div class="pl-16 text-menu3 font-light">
184
184
  <strong class="block font-medium">We&apos;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-manrope font-medium">
203
+ <div class="text-menu3 font-light">
204
204
  <strong class="block font-medium">We&apos;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-bold whitespace-nowrap">SOC 2 Type 2</p>
235
- <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
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-bold whitespace-nowrap">HIPAA</p>
242
- <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
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-bold whitespace-nowrap">EU GDPR</p>
249
- <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
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-bold whitespace-nowrap">256-bit AES</p>
256
- <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
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>
data/lib/ably_ui/core/meganav/component.css CHANGED
@@ -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-manrope transition-colors;
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-bold block font-manrope;
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 font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
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-bold font-jetbrains_mono;
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-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
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 font-manrope font-medium text-dark-grey leading-normal;
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-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
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 {
data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.html.erb CHANGED
@@ -7,7 +7,7 @@
7
7
  <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
8
8
  </div>
9
9
 
10
- <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
10
+ <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
11
11
  Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
12
12
  realtime, and lets you focus on your code.
13
13
  </p>
data/lib/ably_ui/core/notice/component.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-announcement {
3
- @apply font-manrope;
3
+ @apply font-sans;
4
4
  max-height: 37.5rem;
5
5
  transition: max-height 300ms;
6
6
  }
data/lib/ably_ui/core/notice/notice.html.erb CHANGED
@@ -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-medium w-full pr-8 text-p3 self-center" do %>
5
- <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
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
@@ -1,132 +1,38 @@
1
1
  @layer base {
2
2
  :root {
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;
3
+ --color-cool-black: #03020d;
4
+ --color-active-orange: #ff5416;
5
+ --color-red-orange: #e40000;
6
+ --color-white: #ffffff;
7
+ --color-electric-cyan: #4ad4ff;
8
+ --color-zingy-green: #08ff13;
9
+ --color-bright-red: #fe372b;
26
10
  --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;
11
+ --color-jazzy-pink: #ff17d2;
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;
19
+ --color-gui-active: #074095;
20
+ --color-gui-default-dark: #4da6ff;
21
+ --color-gui-hover-dark: #2894ff;
22
+ --color-gui-active-dark: #0080ff;
91
23
  --color-gui-focus: #80b9f2;
92
24
  --color-gui-focus-outline: #80b9f2;
93
25
  --color-gui-visited: #4887c2;
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);
26
+ --color-gui-unavailable: #a8a8a8;
27
+ --color-gui-error: #fb0c0c;
28
+ --color-gui-success: #11cb24;
123
29
 
124
30
  /* code syntax: theme */
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);
31
+ --syntax-black: var(--color-cool-black);
32
+ --syntax-dark-grey: var(--color-dark-grey);
33
+ --syntax-mid-grey: var(--color-mid-grey);
34
+ --syntax-light-grey: var(--color-light-grey);
35
+ --syntax-extra-light-grey: var(--color-extra-light-grey);
130
36
  --syntax-orange: #e78c45;
131
37
  --syntax-yellow: #e7c547;
132
38
  --syntax-blue: #3490ec;
@@ -134,6 +40,10 @@
134
40
  --syntax-red: #d54e53;
135
41
  --syntax-lilac: #bb87d3;
136
42
 
43
+ /* New Neutral colors */
44
+ --color-neutral-900: #39414e;
45
+ --color-neutral-500: #c6ced9;
46
+
137
47
  /* uptime status colors */
138
48
  --uptime-color-up: #39b54a;
139
49
  --uptime-color-trouble: #e87623;
@@ -209,10 +119,8 @@
209
119
  --lh-dense: 1;
210
120
  --lh-tight: 1.125;
211
121
  --lh-snug: 1.15;
212
- --lh-min-normal: 1.2;
213
122
  --lh-normal: 1.25;
214
123
  --lh-relaxed: 1.45;
215
- --lh-extra-relaxed: 1.6;
216
124
 
217
125
  --ls-tighten-0_025: -0.025em;
218
126
  --ls-tighten-0_02: -0.02em;
@@ -443,41 +351,41 @@
443
351
 
444
352
  .ui-text-h2 {
445
353
  @apply font-manrope font-extrabold text-cool-black;
446
- @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
354
+ @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-10;
447
355
  @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
448
356
  }
449
357
 
450
358
  .ui-text-h3 {
451
359
  @apply font-manrope font-extrabold text-cool-black;
452
- @apply text-h3;
360
+ @apply text-h3 leading-7;
453
361
  @apply tracking-tighten-0.005;
454
362
  }
455
363
 
456
364
  .ui-text-h4 {
457
365
  @apply font-manrope font-extrabold text-cool-black;
458
- @apply text-h4;
366
+ @apply text-h4 leading-6;
459
367
  @apply tracking-tighten-0.0015;
460
368
  }
461
369
 
462
370
  .ui-text-h5 {
463
371
  @apply font-manrope font-extrabold text-cool-black;
464
- @apply text-h5;
372
+ @apply text-h5 leading-5;
465
373
  @apply tracking-tighten-0.0025;
466
374
  }
467
375
 
468
376
  .ui-text-p1 {
469
377
  @apply font-manrope font-medium text-charcoal-grey;
470
- @apply text-p1;
378
+ @apply text-p1 leading-6;
471
379
  }
472
380
 
473
381
  .ui-text-p2 {
474
382
  @apply font-manrope font-medium text-charcoal-grey;
475
- @apply text-p2;
383
+ @apply text-p2 leading-5;
476
384
  }
477
385
 
478
386
  .ui-text-p3 {
479
387
  @apply font-manrope font-medium text-charcoal-grey;
480
- @apply text-p3;
388
+ @apply text-p3 leading-tight;
481
389
  }
482
390
 
483
391
  .ui-text-standfirst {
@@ -488,30 +396,30 @@
488
396
 
489
397
  .ui-text-quote {
490
398
  @apply font-manrope font-normal text-cool-black;
491
- @apply text-quote leading-normal;
399
+ @apply text-quote leading-7;
492
400
  @apply tracking-tighten-0.0015;
493
401
  }
494
402
 
495
403
  .ui-text-sub-header {
496
- @apply font-manrope font-semibold text-neutral-900;
497
- @apply text-sub-header-xs xs:text-sub-header leading-normal;
404
+ @apply font-manrope font-semibold text-neutral-900 leading-relaxed;
405
+ @apply text-sub-header-xs xs:text-sub-header leading-normal xs:leading-relaxed;
498
406
  }
499
407
 
500
408
  .ui-text-overline1 {
501
409
  @apply font-jetbrains_mono font-medium text-active-orange uppercase;
502
- @apply text-overline1 leading-normal;
410
+ @apply text-overline1;
503
411
  @apply tracking-widen-0.16;
504
412
  }
505
413
 
506
414
  .ui-text-overline2 {
507
415
  @apply font-jetbrains_mono font-medium text-active-orange uppercase;
508
- @apply text-overline2 leading-normal;
416
+ @apply text-overline2;
509
417
  @apply tracking-widen-0.16;
510
418
  }
511
419
 
512
420
  .ui-text-menu1 {
513
421
  @apply font-manrope font-medium text-cool-black;
514
- @apply text-menu1 leading-snug;
422
+ @apply text-menu1 leading-normal;
515
423
  }
516
424
 
517
425
  .ui-text-menu2 {
@@ -521,7 +429,7 @@
521
429
 
522
430
  .ui-text-menu3 {
523
431
  @apply font-manrope font-medium text-cool-black;
524
- @apply text-menu3 leading-snug;
432
+ @apply text-menu3 leading-tight;
525
433
  }
526
434
 
527
435
  .ui-text-code {
@@ -569,8 +477,7 @@
569
477
 
570
478
  .ui-ordered-list li,
571
479
  .ui-unordered-list li {
572
- @apply font-medium font-manrope tracking-widen-0;
573
- line-height: var(--lh-extra-relaxed);
480
+ @apply font-medium font-manrope tracking-widen-0 leading-relaxed;
574
481
  }
575
482
 
576
483
  .ui-unordered-list-with-emphasis {
data/lib/ably_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '8.7.0.dev.fba161a'
2
+ VERSION = '8.7.0.dev.fe9bd38'
3
3
  end
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.fba161a
4
+ version: 8.7.0.dev.fe9bd38
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-08-10 00:00:00.000000000 Z
13
+ date: 2023-06-15 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component