ably-ui 8.7.0.dev.fe9bd38 → 8.7.0.dev.579e0ab

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8215add2cafe26f088c72ed20b2ffbe5ad059f9610da223470431f0dc7096f0d
-  data.tar.gz: 470e1c9ce6d4516a0bf992b91d0c96dab5aa4387ffeeaddde4a2cbdf3b1d1b48
+  metadata.gz: bf7799300b3dea00eb96e5e786f0b051b3d726f9043f03058dd8f280ab6d2d15
+  data.tar.gz: b10da85702bd896b7cf9b494c0aaa607434d14feae7503e4c09676b1551ea2e9
 SHA512:
-  metadata.gz: a8db7ec93291d550612f08659a0e62ee0e3b49f90b1e0e43a1b7d140325b7314bd5636aab1b648706fb04cc5e7518a34d9da60cbcf96d28e3c4f0c188fc8f1c3
-  data.tar.gz: 631541e1f0c1b0ce0368e7556a7f2f6c8b6a4d3e38983582ce3c8a7aadb5195d9a12b9c4ae70fcad02aa0dc5b4ab905a178cc6a2abdcbf49045e7c1fdf08db42
+  metadata.gz: 122526df94fe08e63c38aed273a7a4852d20afe21f2ac99e02c97698ec0855bdcdb5877831cf8498a1929d35e5da0db6ded93b8f9c7fe30155f09dcad9f77d11
+  data.tar.gz: 961eaf1be756b8f4d094162dbcb670a46efec34ac7f8680cd3fe96d92892128c3cfce801018ba6dae3d9c5cd850747ef1f8e5d9014f3a8aab948761472ada9e9

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.681c3bf)
+    ably-ui (8.7.0.dev.ef0470f)
       view_component (>= 2.33, < 2.50)
 
 GEM

data/lib/ably_ui/core/featured_link/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-featured-link {
-    @apply font-sans font-medium block;
+    @apply font-manrope font-bold block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

data/lib/ably_ui/core/footer/component.css

@@ -4,11 +4,11 @@
   }
 
   .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-manrope font-medium hover:text-gui-hover block;
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-manrope font-medium;
   }
 
   .ui-footer-compliance-text {

data/lib/ably_ui/core/footer/footer.html.erb

@@ -1,4 +1,4 @@
-<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+<footer class="bg-light-grey font-manrope antialiased" data-id="footer">
   <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">
     <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
@@ -180,7 +180,7 @@
                 >
               <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
             </a>
-            <div class="pl-16 text-menu3 font-light">
+            <div class="pl-16 text-menu3 font-manrope font-medium">
               <strong class="block font-medium">We&apos;re hiring!</strong>
               <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
                 Learn more at Glassdoor
@@ -200,7 +200,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-light">
+          <div class="text-menu3 font-manrope font-medium">
             <strong class="block font-medium">We&apos;re hiring!</strong>
             <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
               Learn more at Glassdoor
@@ -231,29 +231,29 @@
       <div class="flex mr-24">
         <%= 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")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-2">
         <%= 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")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-3">
         <%= 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")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
         </div>
       </div>
       <div class="flex mr-24 md:col-start-4">
         <%= 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")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
-          <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
+          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
+          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
         </div>
       </div>
     </div>

data/lib/ably_ui/core/meganav/component.css

@@ -7,7 +7,7 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply antialiased font-manrope transition-colors;
   }
 
   .ui-meganav {
@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-manrope;
     @apply mr-12 lg:mr-24 px-0 py-20;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
@@ -63,13 +63,13 @@
 
   .ui-meganav-mobile-link {
     @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply text-menu2  font-bold font-jetbrains_mono font-medium block text-cool-black text-left;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }
 
   .ui-meganav-account-link {
-    @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;
+    @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;
   }
 
   .ui-meganav-content {
@@ -97,15 +97,15 @@
   }
 
   .ui-meganav-media-heading {
-    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+    @apply text-menu3 text-cool-black font-bold font-manrope group-hover:text-gui-hover group-focus:text-gui-focus;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply font-manrope font-medium text-dark-grey;
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
+    @apply text-overline2 text-cool-black uppercase font-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb

@@ -76,7 +76,7 @@
       </ul>
     </div>
     <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-      <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
+      <h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
         Quick links
       </h3>
       <ul aria-labelledby="meganav-developers-panel-quick-links">

data/lib/ably_ui/core/notice/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-announcement {
-    @apply font-sans;
+    @apply font-manrope;
     max-height: 37.5rem;
     transition: max-height 300ms;
   }

data/lib/ably_ui/core/notice/notice.html.erb

@@ -1,8 +1,8 @@
 <%# Note the style attribute is used for entry animation %>
 <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
   <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-    <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
-      <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
+    <%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
+      <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
       <span class="pr-4"><%= @contents[:body_text] %></span>
       <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
     <% end %>

data/lib/ably_ui/core/styles.css

@@ -339,53 +339,53 @@
 @layer components {
   .ui-text-title {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-title-xs xs:text-title xl:text-title-xl;
+    @apply text-title-xs xs:text-title xl:text-title-xl leading-tight;
     @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl leading-tight;
     @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-10;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl leading-tight;
     @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h3 leading-7;
+    @apply text-h3 leading-tight;
     @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h4 leading-6;
+    @apply text-h4 leading-tight;
     @apply tracking-tighten-0.0015;
   }
 
   .ui-text-h5 {
     @apply font-manrope font-extrabold text-cool-black;
-    @apply text-h5 leading-5;
+    @apply text-h5 leading-tight;
     @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
     @apply font-manrope font-medium text-charcoal-grey;
-    @apply text-p1 leading-6;
+    @apply text-p1 leading-relaxed;
   }
 
   .ui-text-p2 {
     @apply font-manrope font-medium text-charcoal-grey;
-    @apply text-p2 leading-5;
+    @apply text-p2 leading-relaxed;
   }
 
   .ui-text-p3 {
     @apply font-manrope font-medium text-charcoal-grey;
-    @apply text-p3 leading-tight;
+    @apply text-p3 leading-relaxed;
   }
 
   .ui-text-standfirst {
@@ -396,30 +396,30 @@
 
   .ui-text-quote {
     @apply font-manrope font-normal text-cool-black;
-    @apply text-quote leading-7;
+    @apply text-quote leading-normal;
     @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-manrope font-semibold text-neutral-900 leading-relaxed;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal xs:leading-relaxed;
+    @apply font-manrope font-semibold text-neutral-900;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
     @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline1;
+    @apply text-overline1 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
     @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline2;
+    @apply text-overline2 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
     @apply font-manrope font-medium text-cool-black;
-    @apply text-menu1 leading-normal;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
@@ -429,7 +429,7 @@
 
   .ui-text-menu3 {
     @apply font-manrope font-medium text-cool-black;
-    @apply text-menu3 leading-tight;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.fe9bd38'
+  VERSION = '8.7.0.dev.579e0ab'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 8.7.0.dev.fe9bd38
+  version: 8.7.0.dev.579e0ab
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-15 00:00:00.000000000 Z
+date: 2023-06-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component