ably-ui 11.7.1 → 12.0.0.dev.77b7db9

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 (25) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +6 -7
  4. data/lib/ably_ui/core/code/component.css +2 -0
  5. data/lib/ably_ui/core/contact_footer/contact_footer.html.erb +8 -8
  6. data/lib/ably_ui/core/feature_footer/feature_footer.html.erb +6 -6
  7. data/lib/ably_ui/core/featured_link/component.css +0 -15
  8. data/lib/ably_ui/core/featured_link/component.js +1 -1
  9. data/lib/ably_ui/core/featured_link/featured_link.html.erb +14 -5
  10. data/lib/ably_ui/core/featured_link/featured_link.rb +3 -1
  11. data/lib/ably_ui/core/flash/component.css +0 -4
  12. data/lib/ably_ui/core/fonts/jetBrains-mono.css +3 -0
  13. data/lib/ably_ui/core/fonts/manrope.css +3 -0
  14. data/lib/ably_ui/core/footer/component.css +3 -3
  15. data/lib/ably_ui/core/footer/footer.html.erb +13 -13
  16. data/lib/ably_ui/core/meganav/component.css +6 -6
  17. data/lib/ably_ui/core/meganav_content_products/meganav_content_products.html.erb +1 -1
  18. data/lib/ably_ui/core/notice/component.js +1 -1
  19. data/lib/ably_ui/core/notice/notice.html.erb +3 -3
  20. data/lib/ably_ui/core/showcase/component.js +1 -1
  21. data/lib/ably_ui/core/showcase/showcase.html.erb +9 -9
  22. data/lib/ably_ui/core/styles.css +232 -117
  23. data/lib/ably_ui/core/uptime/component.css +2 -3
  24. data/lib/ably_ui/version.rb +1 -1
  25. metadata +11 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2afa7302e5340d5635d86b73c4902271191e9da6bd9fd22db0ed876cab957636
4
- data.tar.gz: dd26ea7b43f4b72375f9ba2ce831094bd66286a13d4d0747d48182e9a75afd62
3
+ metadata.gz: aa0f233e8b6024db5a9eb48d4286500a0d8e3412a728d8e0e833ace01ae7e0f7
4
+ data.tar.gz: 760a20eb684d437862348c4ba67a1fff5090f38d662ad2f59780aedf1a102d25
5
5
  SHA512:
6
- metadata.gz: b36a930eafd6c384b55e60fa99328ffdbbe60200a83d5b7fc5589401040e5790d43b3cfc06557bd9a6b056fbfc4b256c955c39e258be746175b6e022bca35209
7
- data.tar.gz: 2f03873dfab2ad7de45d5783b1e426563a55f52ae4fe7aa97f0c66fe5565d7a8191a816b345b3156e562a75c58b04272dd1ecc6789ce4a5b448045cd5b794f78
6
+ metadata.gz: 49a7c36164c0219176e96f5e3b762e227608fc6b6964348bb00925ae62cedfb906a456dc0a95b0b4d23b28638c25d872d8178f9b41b4bce847d80e5472ed1eaf
7
+ data.tar.gz: d82afab4e779c4973d76f424d66cafaacfaafdf0bf561c073f2562cfb76b68103f5f25c6480a3ea505790f065dba0ef9f2727b2312408afc07b918b32f7545f9
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- ably-ui (8.7.0.dev.827e917)
4
+ ably-ui (12.0.0)
5
5
  view_component (>= 2.33, < 2.50)
6
6
 
7
7
  GEM
data/README.md CHANGED
@@ -75,12 +75,11 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
75
75
  1. Add AblyUI to your project
76
76
  2. Add TailwindCSS to your project
77
77
  1. By project type:
78
- 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
- 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
- 1. Add postCSS import with `npm install postcss-import`
81
- 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
- 2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
- 3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
78
+ 1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
79
+ 2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
80
+ 1. Add postCSS import with `npm install postcss-import`
81
+ 1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
+ 1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
84
83
  3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
85
84
  4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
86
85
 
@@ -233,7 +232,7 @@ For `npm`:
233
232
  ```bash
234
233
  # in the root directory
235
234
  yarn link
236
- # in the the "preview" directory
235
+ # in the "preview" directory
237
236
  yarn link @ably/ui
238
237
  ```
239
238
 
data/lib/ably_ui/core/code/component.css 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 {
data/lib/ably_ui/core/contact_footer/contact_footer.html.erb CHANGED
@@ -3,8 +3,8 @@
3
3
  <div class="ui-contact-footer-box">
4
4
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
5
5
  <div>
6
- <div class="text-h3 mb-24">Live Chat</div>
7
- <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
6
+ <div class="ui-text-h3 mb-24">Live Chat</div>
7
+ <p class="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
8
8
  </div>
9
9
  <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
10
10
  Live chat unavailable
@@ -13,18 +13,18 @@
13
13
  <div class="ui-contact-footer-box">
14
14
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
15
15
  <div class="flex-grow">
16
- <div class="text-h3 mb-24">Call us</div>
17
- <p class="text-p1 font-light">
18
- <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
19
- <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
16
+ <div class="ui-text-h3 mb-24">Call us</div>
17
+ <p class="ui-text-p1">
18
+ <span class="block"><strong class="font-bold">+1 877 434 5287</strong> (USA, toll free) </span>
19
+ <span class="block"><strong class="font-bold">+44 20 3318 4689</strong> (UK) </span>
20
20
  </p>
21
21
  </div>
22
22
  </div>
23
23
  <div class="ui-contact-footer-box">
24
24
  <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
25
25
  <div>
26
- <div class="text-h3 mb-24">Technical and account support</div>
27
- <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
26
+ <div class="ui-text-h3 mb-24">Technical and account support</div>
27
+ <p class="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
28
28
  </div>
29
29
  <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
30
30
  </div>
data/lib/ably_ui/core/feature_footer/feature_footer.html.erb CHANGED
@@ -6,14 +6,14 @@
6
6
  <div class="p-24 sm:p-32 flex-1 h-full">
7
7
  <div class="flex flex-col h-full space-between">
8
8
  <span class="flex-1">
9
- <div class="text-h3 mb-24 flex-1"><%= @title %> </div>
10
- <p class="text-p1 font-light"><%= @subtitle %></p>
9
+ <div class="ui-text-h3 text-white mb-24 flex-1"><%= @title %> </div>
10
+ <p class="ui-text-p1 text-white"><%= @subtitle %></p>
11
11
  <%= tag.button type: "button", class: "ui-btn-secondary-invert self-start mt-24", data: { id: "open-chat-widget", enabled_label: live_chat_label, disabled_label: live_chat_disabled_label }, disabled: true do %>
12
12
  <%= live_chat_disabled_label %>
13
13
  <% end %>
14
14
  </span>
15
15
  <span class="flex-0 mt-24 md:mt-0">
16
- <p class="text-p1 font-light">
16
+ <p class="ui-text-p1 text-white">
17
17
  Don’t want to chat?
18
18
  <%= link_to 'Get in touch via our contact page', abs_url("/contact"), class: "text-white underline font-medium hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus" %>
19
19
  </p>
@@ -24,9 +24,9 @@
24
24
  <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
25
25
  <div class="flex flex-col h-full space-between">
26
26
  <span class="flex-1">
27
- <div class="text-h3 mb-24">Try our APIs for free</div>
28
- <p class="text-p1 font-medium mb-16">Our free plan includes</p>
29
- <ul class="relative ml-24 text-p1 font-light leading-8">
27
+ <div class="ui-text-h3 mb-24">Try our APIs for free</div>
28
+ <p class="ui-text-p1 mb-16">Our free plan includes</p>
29
+ <ul class="relative ml-24 ui-text-p1">
30
30
  <li>
31
31
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
32
32
  6m messages per month
data/lib/ably_ui/core/featured_link/component.css CHANGED
@@ -1,16 +1 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-medium block;
4
- @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
-
7
- .ui-featured-link:hover svg {
8
- @apply left-0;
9
- }
10
-
11
- .ui-featured-link-icon {
12
- transition: left 100ms ease-in-out;
13
- @apply align-middle ml-8 relative -top-1 -left-4;
14
- }
15
- }
16
1
 
data/lib/ably_ui/core/featured_link/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
1
+ !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
data/lib/ably_ui/core/featured_link/featured_link.html.erb CHANGED
@@ -1,6 +1,15 @@
1
- <%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
- <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
3
- size: "calc(var(--featured-link-icon-size) * 1.25)",
4
- color: @icon_color,
5
- additional_css: "ui-featured-link-icon")) %>
1
+ <%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-#{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
+ <% if @reverse %>
3
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
5
+ color: @icon_color,
6
+ additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
+ <%= content -%>
8
+ <% else %>
9
+ <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
11
+ color: @icon_color,
12
+ additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
+ <% end %>
14
+
6
15
  <% end %>
data/lib/ably_ui/core/featured_link/featured_link.rb CHANGED
@@ -3,15 +3,17 @@ module AblyUi
3
3
  class FeaturedLink < ViewComponent::Base
4
4
  def initialize(
5
5
  url:,
6
- text_size: 'text-menu3',
6
+ text_size: 'text-p2',
7
7
  icon_color: 'text-cool-black',
8
8
  flush: false,
9
+ reverse: false,
9
10
  additional_css: ''
10
11
  )
11
12
  @url = url
12
13
  @text_size = text_size
13
14
  @icon_color = icon_color
14
15
  @flush = flush
16
+ @reverse = reverse
15
17
  @additional_css = additional_css
16
18
  end
17
19
  end
data/lib/ably_ui/core/flash/component.css CHANGED
@@ -13,10 +13,6 @@
13
13
  transform: translateY(-200%) rotateX(-90deg);
14
14
  }
15
15
 
16
- .ui-flash-text {
17
- @apply mr-16 text-p1;
18
- }
19
-
20
16
  /* dynamic content inside flash, can't add classes */
21
17
  .ui-flash-text a {
22
18
  @apply underline;
data/lib/ably_ui/core/fonts/jetBrains-mono.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
3
+ }
data/lib/ably_ui/core/fonts/manrope.css ADDED
@@ -0,0 +1,3 @@
1
+ @layer base {
2
+ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
3
+ }
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 text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
3
+ @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
4
4
  }
5
5
 
6
6
  .ui-footer-menu-row-link {
7
- @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
7
+ @apply text-menu3 text-cool-black font-sans 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-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
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-sans antialiased" data-id="footer">
1
+ <footer class="bg-light-grey font-sans antialiased leading-normal" 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-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
6
+ <h2 class="ui-text-overline2 col-span-full font-mono uppercase tracking-widen-0.16">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="text-p3 py-16 font-medium p-menu-row-snug">
9
+ <p class="ui-text-p3 font-bold py-16 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>
@@ -174,7 +174,7 @@
174
174
  >
175
175
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
176
176
  </a>
177
- <div class="pl-16 text-menu3 font-light">
177
+ <div class="pl-16 text-menu3 font-sans font-medium">
178
178
  <strong class="block font-medium">We&apos;re hiring!</strong>
179
179
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
180
180
  Learn more at Glassdoor
@@ -194,7 +194,7 @@
194
194
  >
195
195
  <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
196
196
  </a>
197
- <div class="text-menu3 font-light">
197
+ <div class="text-menu3 font-sans font-medium">
198
198
  <strong class="block font-medium">We&apos;re hiring!</strong>
199
199
  <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
200
200
  Learn more at Glassdoor
@@ -226,29 +226,29 @@
226
226
  <div class="flex mr-24">
227
227
  <%= 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")) %>
228
228
  <div>
229
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
230
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
229
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
230
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
231
231
  </div>
232
232
  </div>
233
233
  <div class="flex mr-24 md:col-start-2">
234
234
  <%= 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")) %>
235
235
  <div>
236
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
237
- <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
236
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
237
+ <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
238
238
  </div>
239
239
  </div>
240
240
  <div class="flex mr-24 md:col-start-3">
241
241
  <%= 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")) %>
242
242
  <div>
243
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
244
- <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
243
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
244
+ <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
245
245
  </div>
246
246
  </div>
247
247
  <div class="flex mr-24 md:col-start-4">
248
248
  <%= 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")) %>
249
249
  <div>
250
- <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
251
- <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
250
+ <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
251
+ <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
252
252
  </div>
253
253
  </div>
254
254
  </div>
data/lib/ably_ui/core/meganav/component.css CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .ui-meganav-link {
54
- @apply text-menu2 font-medium block;
54
+ @apply text-menu2 font-bold block font-sans;
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-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-light;
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-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-medium group-hover:text-gui-hover group-focus:text-gui-focus;
100
+ @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
101
101
  }
102
102
 
103
103
  .ui-meganav-media-copy {
104
- @apply text-p3 text-dark-grey font-light;
104
+ @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
105
105
  }
106
106
 
107
107
  .ui-meganav-overline {
108
- @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
108
+ @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
109
109
  }
110
110
 
111
111
  .ui-meganav-hr {
data/lib/ably_ui/core/meganav_content_products/meganav_content_products.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-medium text-cool-black mb-24" style="max-width: 330px">
10
+ <p class="ui-text-p2 font-bold 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.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5293);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var E="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return C.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(q[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(T[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};L.propTypes=g({},k);var z=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5293);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var E="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return C.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(q[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-text-p1 mr-16 ".concat(T[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};L.propTypes=g({},k);var z=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function I(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()));
data/lib/ably_ui/core/notice/notice.html.erb CHANGED
@@ -1,15 +1,15 @@
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-light w-full pr-8 text-p3 self-center" do %>
5
- <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
4
+ <%= content_wrapper class: "w-full pr-8 ui-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 %>
9
9
 
10
10
  <% if close_btn? %>
11
11
  <%= button_tag type: 'button', class: 'h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline' do %>
12
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-white")) %>
12
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-cool-black")) %>
13
13
  <% end %>
14
14
  <% end %>
15
15
  </div>
data/lib/ably_ui/core/showcase/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,y,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["filter-grayscale","filter-none"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(h=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){h.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(y=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",y),function(){return l.parentNode.removeEventListener("wheel",y)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
data/lib/ably_ui/core/showcase/showcase.html.erb CHANGED
@@ -13,7 +13,7 @@
13
13
  type: 'button',
14
14
  data: { id: 'showcase-control' },
15
15
  aria: { controls: @random_id } do %>
16
- <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
16
+ <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
17
17
  <% end %>
18
18
  </li>
19
19
  <% end %>
@@ -36,15 +36,15 @@
36
36
  <% if company[:layout] == "quotes" %>
37
37
  <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
38
38
 
39
- <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
39
+ <p class="ui-text-quote mb-24"><%= company[:quote] %></p>
40
40
 
41
41
  <div class="flex items-center">
42
42
  <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
43
- <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
43
+ <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
44
44
  </div>
45
45
  <div>
46
- <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
47
- <p class="text-p3 font-light"><%= company[:author][:title] %></p>
46
+ <p class="ui-text-p2"><%= company[:author][:name] %></p>
47
+ <p class="ui-text-p3"><%= company[:author][:title] %></p>
48
48
  </div>
49
49
  </div>
50
50
  <% end %>
@@ -54,16 +54,16 @@
54
54
  <% company[:columns].each_with_index do |col, n| %>
55
55
  <% if company[:columns].last == col %>
56
56
  <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
57
- <p class="text-h4 pb-24"><%= col[:heading] %></p>
58
- <p class="text-p1 font-light"><%= col[:text] %></p>
57
+ <p class="ui-text-h4 pb-24"><%= col[:heading] %></p>
58
+ <p class="ui-text-p1"><%= col[:text] %></p>
59
59
  <%- if col[:button] %>
60
60
  <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
61
61
  <% end %>
62
62
  </div>
63
63
  <% else %>
64
64
  <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
65
- <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
66
- <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
65
+ <p class="ui-text-title-xl"><%= col[:heading] %></p>
66
+ <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
67
67
  </div>
68
68
  <% end %>
69
69
  <% end %>
data/lib/ably_ui/core/styles.css CHANGED
@@ -1,34 +1,132 @@
1
1
  @layer base {
2
2
  :root {
3
- --color-cool-black: #03020d;
4
- --color-active-orange: #ff5416;
5
- --color-red-orange: #e40000;
6
- --color-white: #ffffff;
7
- --color-electric-cyan: #4af7ff;
8
- --color-zingy-green: #08ff13;
9
- --color-bright-red: #ff2739;
10
- --color-jazzy-pink: #ff17d2;
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;
3
+ /* Neutral colors */
4
+ --color-neutral-000: #ffffff;
5
+ --color-neutral-100: #f8fafc;
6
+ --color-neutral-200: #f4f8fb;
7
+ --color-neutral-300: #edf1f7;
8
+ --color-neutral-400: #e2e7ef;
9
+ --color-neutral-500: #c6ced9;
10
+ --color-neutral-600: #adb6c2;
11
+ --color-neutral-700: #89929f;
12
+ --color-neutral-800: #667085;
13
+ --color-neutral-900: #39414e;
14
+ --color-neutral-1000: #2b303b;
15
+ --color-neutral-1100: #202531;
16
+ --color-neutral-1200: #141924;
17
+ --color-neutral-1300: #03020d;
18
+
19
+ /* Ably orange */
20
+ --color-orange-100: #fff5f1;
21
+ --color-orange-200: #ffe3d8;
22
+ --color-orange-300: #ffc4ae;
23
+ --color-orange-400: #ff9c79;
24
+ --color-orange-500: #ff723f;
25
+ --color-orange-600: #ff5416;
26
+ --color-orange-700: #ff2739;
27
+ --color-orange-800: #e40000;
28
+ --color-orange-900: #b82202;
29
+ --color-orange-1000: #751500;
30
+ --color-orange-1100: #2a0b00;
31
+
32
+ /* Secondary colours */
33
+ --color-yellow-100: #fffbef;
34
+ --color-yellow-200: #fff0ba;
35
+ --color-yellow-300: #ffe27c;
36
+ --color-yellow-400: #ffd43d;
37
+ --color-yellow-500: #f8c100;
38
+ --color-yellow-600: #e8a700;
39
+ --color-yellow-700: #ac8600;
40
+ --color-yellow-800: #654f00;
41
+ --color-yellow-900: #291c01;
42
+ --color-green-100: #f1fff1;
43
+ --color-green-200: #b8ffbb;
44
+ --color-green-300: #80ff85;
45
+ --color-green-400: #08ff13;
46
+ --color-green-500: #00e80b;
47
+ --color-green-600: #00c008;
48
+ --color-green-700: #008e06;
49
+ --color-green-800: #005303;
50
+ --color-green-900: #002a02;
51
+ --color-blue-100: #f1fbff;
52
+ --color-blue-200: #b8eaff;
53
+ --color-blue-300: #80d9ff;
54
+ --color-blue-400: #4ad4ff;
55
+ --color-blue-500: #2cc0ff;
56
+ --color-blue-600: #00a5ec;
57
+ --color-blue-700: #0284cd;
58
+ --color-blue-800: #004b75;
59
+ --color-blue-900: #001b2a;
60
+ --color-violet-100: #f7f2fe;
61
+ --color-violet-200: #d8bcfb;
62
+ --color-violet-300: #b986f8;
63
+ --color-violet-400: #9951f5;
64
+ --color-violet-500: #7a1bf2;
65
+ --color-violet-600: #5f0bc9;
66
+ --color-violet-700: #460894;
67
+ --color-violet-800: #2d055e;
68
+ --color-violet-900: #130228;
69
+ --color-pink-100: #fff1fc;
70
+ --color-pink-200: #ffb8f1;
71
+ --color-pink-300: #ff80e6;
72
+ --color-pink-400: #ff47db;
73
+ --color-pink-500: #ff17d2;
74
+ --color-pink-600: #d400ab;
75
+ --color-pink-700: #9c007e;
76
+ --color-pink-800: #630050;
77
+ --color-pink-900: #2a0022;
78
+
79
+ /* GUI colours */
80
+ /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
81
+ --color-gui-blue-default-light: #006edc;
82
+ --color-gui-blue-hover-light: #0862b9;
83
+ --color-gui-blue-active-light: #074095;
84
+ --color-gui-blue-default-dark: #4da6ff;
85
+ --color-gui-blue-hover-dark: #2894ff;
86
+ --color-gui-blue-active-dark: #0080ff;
87
+ --color-gui-blue-focus: #80b9f2;
88
+ --color-gui-unavailable: #a8a8a8;
89
+ --color-gui-success-green: #11cb24;
90
+ --color-gui-error-red: #fb0c0c;
91
+ --color-gui-focus: #80b9f2;
19
92
  --color-gui-focus-outline: #80b9f2;
20
- --color-gui-active: #074095;
21
93
  --color-gui-visited: #4887c2;
22
- --color-gui-unavailable: #a8a8a8;
23
- --color-gui-error: #fb0c0c;
24
- --color-gui-success: #11cb24;
94
+
95
+ /* Colours replaced by neutral colours */
96
+ --color-white: var(--color-neutral-000);
97
+ --color-extra-light-grey: var(--color-neutral-100);
98
+ --color-light-grey: var(--color-neutral-200);
99
+ --color-mid-grey: var(--color-neutral-500);
100
+ --color-dark-grey: var(--color-neutral-800);
101
+ --color-charcoal-grey: var(--color-neutral-1000);
102
+ --color-cool-black: var(--color-neutral-1300);
103
+
104
+ /* Colours replaced by orange colours */
105
+ --color-active-orange: var(--color-orange-600);
106
+ --color-bright-red: var(--color-orange-700);
107
+ --color-red-orange: var(--color-orange-800);
108
+
109
+ /* Colours replaced by secondary colours */
110
+ --color-electric-cyan: var(--color-blue-400);
111
+ --color-zingy-green: var(--color-green-400);
112
+ --color-jazzy-pink: var(--color-pink-500);
113
+
114
+ /* Colours replaced by GUI colours */
115
+ --color-gui-default: var(--color-gui-blue-default-light);
116
+ --color-gui-hover: var(--color-gui-blue-hover-light);
117
+ --color-gui-active: var(--color-gui-blue-active-light);
118
+ --color-gui-error: var(--color-gui-error-red);
119
+ --color-gui-success: var(--color-gui-success-green);
120
+ --color-gui-default-dark: var(--color-gui-blue-default-dark);
121
+ --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
122
+ --color-gui-active-dark: var(--color-gui-blue-active-dark);
25
123
 
26
124
  /* code syntax: theme */
27
- --syntax-black: var(--color-cool-black);
28
- --syntax-dark-grey: var(--color-dark-grey);
29
- --syntax-mid-grey: var(--color-mid-grey);
30
- --syntax-light-grey: var(--color-light-grey);
31
- --syntax-extra-light-grey: var(--color-extra-light-grey);
125
+ --syntax-black: var(--color-neutral-1300);
126
+ --syntax-dark-grey: var(--color-neutral-800);
127
+ --syntax-mid-grey: var(--color-neutral-500);
128
+ --syntax-light-grey: var(--color-neutral-200);
129
+ --syntax-extra-light-grey: var(--color-neutral-100);
32
130
  --syntax-orange: #e78c45;
33
131
  --syntax-yellow: #e7c547;
34
132
  --syntax-blue: #3490ec;
@@ -70,44 +168,51 @@
70
168
 
71
169
  --gradient-hot-pink: linear-gradient(
72
170
  80.2deg,
73
- var(--color-bright-red) 0%,
171
+ var(--color-orange-700) 0%,
74
172
  var(--color-jazzy-pink) 100%
75
173
  );
76
174
 
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;
175
+ --fs-title-xl: 3rem;
176
+ --fs-title: 2.75rem;
177
+ --fs-title-xs: 2.5rem;
178
+ --fs-h1-xl: 2.5rem;
179
+ --fs-h1: 2.25rem;
180
+ --fs-h1-xs: 2rem;
181
+
182
+ --fs-h2-xl: 2.125rem;
84
183
  --fs-h2: 2rem;
85
- --fs-h2-xs: 1.875rem;
184
+ --fs-h2-xs: 1.75rem;
185
+
86
186
  --fs-h3: 1.5rem;
87
- --fs-h4: 1.125rem;
88
- --fs-p1: 1.125rem;
89
- --fs-p2: 1rem;
187
+ --fs-h4: 1.25rem;
188
+ --fs-h5: 1rem;
189
+
190
+ --fs-p1: 1rem;
191
+ --fs-p2: 0.938rem;
90
192
  --fs-p3: 0.875rem;
91
193
  --fs-standfirst-xl: 2.25rem;
92
194
  --fs-standfirst: 1.5rem;
93
- --fs-sub-header: 1.5rem;
94
- --fs-sub-header-xs: 1.125rem;
195
+ --fs-sub-header: 1.125rem;
196
+ --fs-sub-header-xs: 1.063rem;
95
197
  --fs-overline1: 1rem;
96
198
  --fs-overline2: 0.875rem;
97
- --fs-btn1: 1.125rem;
98
- --fs-btn2: 1rem;
199
+ --fs-btn1: 1rem;
200
+ --fs-btn2: 0.938rem;
99
201
  --fs-btn3: 0.875rem;
100
- --fs-menu1: 1.125rem;
101
- --fs-menu2: 1rem;
202
+ --fs-menu1: 1rem;
203
+ --fs-menu2: 0.938rem;
102
204
  --fs-menu3: 0.875rem;
103
- --fs-quote: 1.5rem;
104
- --fs-code: 0.875rem;
205
+ --fs-quote: 1.25rem;
206
+ --fs-code: 0.938rem;
207
+ --fs-code2: 0.813rem;
105
208
 
106
209
  --lh-dense: 1;
107
210
  --lh-tight: 1.125;
108
211
  --lh-snug: 1.15;
212
+ --lh-min-normal: 1.2;
109
213
  --lh-normal: 1.25;
110
214
  --lh-relaxed: 1.45;
215
+ --lh-extra-relaxed: 1.6;
111
216
 
112
217
  --ls-tighten-0_025: -0.025em;
113
218
  --ls-tighten-0_02: -0.02em;
@@ -115,7 +220,9 @@
115
220
  --ls-tighten-0_01: -0.01em;
116
221
  --ls-tighten-0_005: -0.005em;
117
222
  --ls-tighten-0_0025: -0.0025em;
223
+ --ls-tighten-0_0015: -0.0015em;
118
224
  --ls-widen-0_1: 0.1em;
225
+ --ls-widen-0_16: 0.16em;
119
226
  --ls-widen-0_15: 0.15em;
120
227
 
121
228
  --spacing-0: 0px;
@@ -130,6 +237,7 @@
130
237
  --spacing-20: 1.25rem;
131
238
  --spacing-24: 1.5rem;
132
239
  --spacing-32: 2rem;
240
+ --spacing-36: 2.25rem;
133
241
  --spacing-40: 2.5rem;
134
242
  --spacing-48: 3rem;
135
243
  --spacing-64: 4rem;
@@ -177,7 +285,7 @@
177
285
  }
178
286
  @layer components {
179
287
  .ui-btn {
180
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
288
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
181
289
  @apply hover:text-white hover:bg-active-orange;
182
290
  @apply active:text-white active:bg-red-orange;
183
291
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -201,7 +309,7 @@
201
309
  background-size: 200% 100%;
202
310
  background-position: 0% 0%;
203
311
 
204
- @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
312
+ @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
205
313
  @apply focus:outline-gui-focus;
206
314
  @apply inline-flex items-center justify-center;
207
315
  }
@@ -217,7 +325,7 @@
217
325
  }
218
326
 
219
327
  .ui-btn-invert {
220
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
328
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
221
329
  @apply hover:text-white hover:bg-active-orange;
222
330
  @apply active:text-white active:bg-red-orange;
223
331
  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -227,7 +335,7 @@
227
335
  }
228
336
 
229
337
  .ui-btn-secondary {
230
- @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
338
+ @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
231
339
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
232
340
  @apply active:border-red-orange active:bg-white;
233
341
  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -237,7 +345,7 @@
237
345
  }
238
346
 
239
347
  .ui-btn-secondary-invert {
240
- @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
348
+ @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
241
349
  @apply hover:text-white hover:border-active-orange;
242
350
  @apply active:border-red-orange;
243
351
  @apply focus:outline-gui-focus;
@@ -322,47 +430,53 @@
322
430
  }
323
431
  @layer components {
324
432
  .ui-text-title {
325
- @apply font-sans font-medium text-cool-black;
433
+ @apply font-sans font-extrabold text-cool-black;
326
434
  @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;
435
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
328
436
  }
329
437
 
330
438
  .ui-text-h1 {
331
- @apply font-sans font-medium text-cool-black;
439
+ @apply font-sans font-extrabold text-cool-black;
332
440
  @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
333
- @apply tracking-tighten-0.01;
441
+ @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
334
442
  }
335
443
 
336
444
  .ui-text-h2 {
337
- @apply font-sans font-medium text-cool-black;
445
+ @apply font-sans font-extrabold text-cool-black;
338
446
  @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
339
- @apply tracking-tighten-0.005;
447
+ @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
340
448
  }
341
449
 
342
450
  .ui-text-h3 {
343
- @apply font-sans font-medium text-cool-black;
451
+ @apply font-sans font-extrabold text-cool-black;
344
452
  @apply text-h3;
345
- @apply tracking-tighten-0.0025;
453
+ @apply tracking-tighten-0.005;
346
454
  }
347
455
 
348
456
  .ui-text-h4 {
349
- @apply font-sans font-medium text-cool-black;
457
+ @apply font-sans font-extrabold text-cool-black;
350
458
  @apply text-h4;
351
- @apply tracking-widen-0.1;
459
+ @apply tracking-tighten-0.0015;
460
+ }
461
+
462
+ .ui-text-h5 {
463
+ @apply font-sans font-extrabold text-cool-black;
464
+ @apply text-h5;
465
+ @apply tracking-tighten-0.0025;
352
466
  }
353
467
 
354
468
  .ui-text-p1 {
355
- @apply font-sans font-light text-charcoal-grey;
469
+ @apply font-sans font-medium text-charcoal-grey;
356
470
  @apply text-p1;
357
471
  }
358
472
 
359
473
  .ui-text-p2 {
360
- @apply font-sans font-light text-charcoal-grey;
474
+ @apply font-sans font-medium text-charcoal-grey;
361
475
  @apply text-p2;
362
476
  }
363
477
 
364
478
  .ui-text-p3 {
365
- @apply font-sans font-light text-charcoal-grey;
479
+ @apply font-sans font-medium text-charcoal-grey;
366
480
  @apply text-p3;
367
481
  }
368
482
 
@@ -373,60 +487,70 @@
373
487
  }
374
488
 
375
489
  .ui-text-quote {
376
- @apply font-sans font-light text-cool-black;
377
- @apply text-quote;
378
- @apply tracking-tighten-0.025;
490
+ @apply font-sans font-normal text-cool-black;
491
+ @apply text-quote leading-normal;
492
+ @apply tracking-tighten-0.0015;
379
493
  }
380
494
 
381
495
  .ui-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;
496
+ @apply font-sans font-semibold text-neutral-800;
497
+ @apply text-sub-header-xs xs:text-sub-header leading-normal;
385
498
  }
386
499
 
387
500
  .ui-text-overline1 {
388
- @apply font-sans font-medium text-dark-grey uppercase;
389
- @apply text-overline1;
390
- @apply tracking-widen-0.15;
501
+ @apply font-mono font-medium text-active-orange uppercase;
502
+ @apply text-overline1 leading-normal;
503
+ @apply tracking-widen-0.16;
391
504
  }
392
505
 
393
506
  .ui-text-overline2 {
394
- @apply font-sans font-medium text-dark-grey uppercase;
395
- @apply text-overline2;
396
- @apply tracking-widen-0.1;
507
+ @apply font-mono font-medium text-active-orange uppercase;
508
+ @apply text-overline2 leading-normal;
509
+ @apply tracking-widen-0.16;
397
510
  }
398
511
 
399
512
  .ui-text-menu1 {
400
- @apply font-sans font-light text-cool-black;
401
- @apply text-menu1;
513
+ @apply font-sans font-medium text-cool-black;
514
+ @apply text-menu1 leading-snug;
402
515
  }
403
516
 
404
517
  .ui-text-menu2 {
405
- @apply font-sans font-light text-cool-black;
406
- @apply text-menu2;
518
+ @apply font-sans font-medium text-cool-black;
519
+ @apply text-menu2 leading-snug;
407
520
  }
408
521
 
409
522
  .ui-text-menu3 {
410
- @apply font-sans font-light text-cool-black;
411
- @apply text-menu3;
523
+ @apply font-sans font-medium text-cool-black;
524
+ @apply text-menu3 leading-snug;
412
525
  }
413
526
 
414
527
  .ui-text-code {
415
- @apply font-mono font-semibold text-code;
528
+ @apply font-mono font-normal text-code;
529
+ }
530
+
531
+ .ui-text-code2 {
532
+ @apply font-mono font-normal text-code2;
416
533
  }
417
534
 
418
535
  .ui-text-code-inline {
419
- @apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
536
+ @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
420
537
  }
421
538
 
422
539
  .ui-unordered-list {
423
- @apply text-p1 font-light text-cool-black;
424
- @apply list-disc ml-32 mb-24;
540
+ @apply text-p1 font-medium text-charcoal-grey;
541
+ @apply ml-32 my-16;
542
+ @apply list-disc;
425
543
  }
426
544
 
427
545
  .ui-ordered-list {
428
- @apply text-p1 font-light text-cool-black;
429
- @apply ml-32 mb-24 list-decimal;
546
+ @apply text-p1 font-medium text-charcoal-grey;
547
+ @apply ml-32 my-16;
548
+ @apply list-decimal;
549
+ }
550
+
551
+ .ui-ordered-list li,
552
+ .ui-unordered-list li {
553
+ @apply mb-8;
430
554
  }
431
555
 
432
556
  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -435,37 +559,19 @@
435
559
  }
436
560
 
437
561
  .ui-unordered-list ul {
438
- @apply ml-24 mt-16 list-circle;
562
+ @apply ml-24 my-8 list-circle;
439
563
  }
440
564
 
441
565
  .ui-ordered-list ol {
442
- @apply ml-24 mt-16 list-decimal;
566
+ @apply ml-24 my-16 list-decimal;
443
567
  }
444
568
 
445
569
  .ui-unordered-list ul ul {
446
- @apply list-square;
570
+ @apply list-square my-8;
447
571
  }
448
572
 
449
- .ui-unordered-list-with-emphasis {
450
- @apply text-p1 font-light text-cool-black;
451
- @apply list-disc ml-32 mt-32 -mb-12;
452
- }
453
-
454
- .ui-unordered-list-with-emphasis li div {
455
- @apply relative -top-12;
456
- }
457
-
458
- .ui-unordered-list-with-emphasis li div > strong {
459
- @apply block;
460
- }
461
-
462
- .ui-unordered-list-with-emphasis ul {
463
- margin-top: calc(var(--spacing-16) + var(--spacing-8));
464
- @apply ml-24 list-circle;
465
- }
466
-
467
- .ui-unordered-list-with-emphasis ul ul {
468
- @apply list-square;
573
+ .ui-unordered-list ul ul {
574
+ @apply my-8;
469
575
  }
470
576
 
471
577
  .ui-link {
@@ -477,17 +583,26 @@
477
583
 
478
584
  .ui-link-neutral {
479
585
  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
480
- @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
586
+ @apply focus:text-charcoal-grey;
481
587
  @apply underline;
482
588
  }
589
+
590
+ /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
591
+ .ui-link-neutral:focus {
592
+ outline: 2px solid var(--color-neutral-000);
593
+ }
594
+
595
+ .ui-figcaption {
596
+ @apply font-mono text-p3 text-neutral-800;
597
+ }
483
598
  }
484
599
  @layer components {
485
600
  .ui-checkbox-p1 {
486
- @apply flex items-start mb-16 font-sans;
601
+ @apply flex items-start mb-16 font-sans font-medium;
487
602
  }
488
603
 
489
604
  .ui-checkbox-p2 {
490
- @apply flex items-start mb-12 font-sans;
605
+ @apply flex items-start mb-12 font-sans font-medium;
491
606
  }
492
607
 
493
608
  .ui-checkbox-input {
@@ -506,12 +621,12 @@
506
621
 
507
622
  .ui-checkbox-label-p1 {
508
623
  @apply select-none;
509
- @apply text-p1 font-light text-cool-black;
624
+ @apply text-p1 font-medium text-cool-black;
510
625
  }
511
626
 
512
627
  .ui-checkbox-label-p2 {
513
628
  @apply select-none;
514
- @apply text-p2 font-light text-cool-black;
629
+ @apply text-p2 font-medium text-cool-black;
515
630
  }
516
631
 
517
632
  .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -532,7 +647,7 @@
532
647
  }
533
648
 
534
649
  .ui-textarea {
535
- @apply font-sans font-light text-cool-black text-p1;
650
+ @apply font-sans font-medium text-cool-black text-p1;
536
651
  @apply p-input mb-16;
537
652
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
538
653
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
@@ -553,7 +668,7 @@
553
668
  }
554
669
  @layer components {
555
670
  .ui-input {
556
- @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
671
+ @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
557
672
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
558
673
  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
559
674
  @apply max-w-screen-sm;
data/lib/ably_ui/core/uptime/component.css CHANGED
@@ -30,8 +30,7 @@
30
30
  }
31
31
 
32
32
  .ui-uptime-day:hover {
33
- filter: brightness(1.2);
34
- @apply z-10;
33
+ @apply z-10 brightness-125;
35
34
  }
36
35
 
37
36
  .ui-uptime-day:hover span {
@@ -86,7 +85,7 @@
86
85
  .ui-uptime-key {
87
86
  @apply block mt-16 mr-20 bg-transparent;
88
87
  @apply sm:inline-block sm:mt-0;
89
- @apply font-light text-p2 text-white block sm:inline-flex items-center;
88
+ @apply font-medium text-p2 text-white block sm:inline-flex items-center;
90
89
  }
91
90
 
92
91
  .ui-uptime-key:first-child {
data/lib/ably_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module AblyUi
2
- VERSION = '11.7.1'
2
+ VERSION = '12.0.0.dev.77b7db9'
3
3
  end
metadata CHANGED
@@ -1,16 +1,16 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ably-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.7.1
4
+ version: 12.0.0.dev.77b7db9
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dominik Piatek
8
8
  - Arti Mathanda
9
9
  - Bruce Thomas
10
- autorequire:
10
+ autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2023-11-15 00:00:00.000000000 Z
13
+ date: 2023-12-04 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: view_component
@@ -32,7 +32,7 @@ dependencies:
32
32
  - - "<"
33
33
  - !ruby/object:Gem::Version
34
34
  version: '2.50'
35
- description:
35
+ description:
36
36
  email:
37
37
  - dominik.piatek@ably.com
38
38
  - arti.mathanda@ably.com
@@ -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
@@ -229,7 +231,7 @@ licenses:
229
231
  - Apache-2.0
230
232
  metadata:
231
233
  source_code_uri: https://github.com/ably/ably-ui
232
- post_install_message:
234
+ post_install_message:
233
235
  rdoc_options: []
234
236
  require_paths:
235
237
  - lib
@@ -240,12 +242,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
240
242
  version: '0'
241
243
  required_rubygems_version: !ruby/object:Gem::Requirement
242
244
  requirements:
243
- - - ">="
245
+ - - ">"
244
246
  - !ruby/object:Gem::Version
245
- version: '0'
247
+ version: 1.3.1
246
248
  requirements: []
247
- rubygems_version: 3.2.3
248
- signing_key:
249
+ rubygems_version: 3.3.7
250
+ signing_key:
249
251
  specification_version: 4
250
252
  summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
251
253
  test_files: []