@ably/ui 11.7.0 → 11.7.1-dev.1344841

package/src/core/ContactFooter/component.html.erb

@@ -3,8 +3,8 @@
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
       <div>
-        <div class="text-h3 mb-24">Live Chat</div>
-        <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+        <div class="ui-text-h3 mb-24">Live Chat</div>
+        <p class="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
       </div>
       <%= 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 %>
         Live chat unavailable
@@ -13,18 +13,18 @@
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
       <div class="flex-grow">
-        <div class="text-h3 mb-24">Call us</div>
-        <p class="text-p1 font-light">
-          <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
-          <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
+        <div class="ui-text-h3 mb-24">Call us</div>
+        <p class="ui-text-p1">
+          <span class="block"><strong class="font-bold">+1 877 434 5287</strong> (USA, toll free) </span>
+          <span class="block"><strong class="font-bold">+44 20 3318 4689</strong> (UK) </span>
         </p>
       </div>
     </div>
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
       <div>
-        <div class="text-h3 mb-24">Technical and account support</div>
-        <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+        <div class="ui-text-h3 mb-24">Technical and account support</div>
+        <p class="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
       </div>
       <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
     </div>

package/src/core/ContactFooter/component.jsx

@@ -16,8 +16,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Live Chat</div>
-            <p className="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+            <div className="ui-text-h3 mb-24">Live Chat</div>
+            <p className="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
           </div>
           <button
             type="button"
@@ -34,13 +34,13 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-call-mobile" size="3rem" additionalCSS="block mb-16" />
           <div className="flex-grow">
-            <div className="text-h3 mb-24">Call us</div>
-            <p className="text-p1 font-light">
+            <div className="ui-text-h3 mb-24">Call us</div>
+            <p className="ui-text-p1">
               <span className="block">
-                <strong className="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free)
+                <strong className="font-bold">+1 877 434 5287</strong> (USA, toll free)
               </span>
               <span className="block">
-                <strong className="text-p1 font-medium">+44 20 3318 4689</strong> (UK)
+                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
               </span>
             </p>
           </div>
@@ -49,8 +49,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-tech-account-comms" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Technical and account support</div>
-            <p className="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+            <div className="ui-text-h3 mb-24">Technical and account support</div>
+            <p className="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
           </div>
           <a className="ui-btn-secondary self-start p-btn mt-16" href={absUrl("/support")}>
             Get support now

package/src/core/DropdownMenu/component.jsx

@@ -92,7 +92,7 @@ const Link = ({ url, title, subtitle, iconName, children }) => {
         {title}
         {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
       </p>
-      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {subtitle ? <p className="ui-text-p3 mb-16">{subtitle}</p> : null}
       {children}
     </a>
   );

package/src/core/FeatureFooter/component.html.erb

@@ -6,14 +6,14 @@
       <div class="p-24 sm:p-32 flex-1 h-full">
         <div class="flex flex-col h-full space-between">
           <span class="flex-1">
-            <div class="text-h3 mb-24 flex-1"><%= @title %> </div>
-            <p class="text-p1 font-light"><%= @subtitle %></p>
+            <div class="ui-text-h3 text-white mb-24 flex-1"><%= @title %> </div>
+            <p class="ui-text-p1 text-white"><%= @subtitle %></p>
             <%= 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 %>
               <%= live_chat_disabled_label %>
             <% end %>
           </span>
           <span class="flex-0 mt-24 md:mt-0">
-            <p class="text-p1 font-light">
+            <p class="ui-text-p1 text-white">
               Don’t want to chat?
               <%= 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" %>
             </p>
@@ -24,9 +24,9 @@
     <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
       <div class="flex flex-col h-full space-between">
         <span class="flex-1">
-          <div class="text-h3 mb-24">Try our APIs for free</div>
-          <p class="text-p1 font-medium mb-16">Our free plan includes</p>
-          <ul class="relative ml-24 text-p1 font-light leading-8">
+          <div class="ui-text-h3 mb-24">Try our APIs for free</div>
+          <p class="ui-text-p1 mb-16">Our free plan includes</p>
+          <ul class="relative ml-24 ui-text-p1">
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
               6m messages per month

package/src/core/FeaturedLink/component.html.erb

@@ -1,6 +1,15 @@
-<%= 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 %>
-  <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
-                                                   size: "calc(var(--featured-link-icon-size) * 1.25)",
-                                                   color: @icon_color,
-                                                   additional_css: "ui-featured-link-icon")) %>
+<%= 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 %>
+  <% if @reverse %>
+    <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
+                                      size: "calc(var(--featured-link-icon-size) * 1.25)",
+                                      color: @icon_color,
+                                      additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
+    <%= content -%>
+  <% else %>
+    <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
+                                                     size: "calc(var(--featured-link-icon-size) * 1.25)",
+                                                     color: @icon_color,
+                                                     additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
+  <% end %>
+
 <% end %>

package/src/core/FeaturedLink/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/FeaturedLink/component.jsx

@@ -3,14 +3,35 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const FeaturedLink = ({ url, textSize = "text-menu3", iconColor = "text-cool-black", flush = false, children }) => (
+const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, additionalCSS = "", children }) => (
   <a
     href={url}
-    className={`ui-featured-link ${textSize} ${flush ? "" : "py-8"} `}
+    className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
+      flush ? "" : "py-8"
+    } ${additionalCSS}`}
     style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
   >
-    {children}
-    <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon" />
+    {reverse ? (
+      <>
+        <Icon
+          name="icon-gui-link-arrow"
+          size={`calc(var(--featured-link-icon-size) * 1.25)`}
+          color={iconColor}
+          additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+        />
+        {children}
+      </>
+    ) : (
+      <>
+        {children}
+        <Icon
+          name="icon-gui-link-arrow"
+          size={`calc(var(--featured-link-icon-size) * 1.25)`}
+          color={iconColor}
+          additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+        />
+      </>
+    )}
   </a>
 );
 
@@ -20,6 +41,8 @@ FeaturedLink.propTypes = {
   textSize: T.string,
   iconColor: T.string,
   flush: T.bool,
+  reverse: T.bool,
+  additionalCSS: T.string,
 };
 
 export default FeaturedLink;

package/src/core/FeaturedLink/component.rb

@@ -3,15 +3,17 @@ module AblyUi
     class FeaturedLink < ViewComponent::Base
       def initialize(
         url:,
-        text_size: 'text-menu3',
+        text_size: 'text-p2',
         icon_color: 'text-cool-black',
         flush: false,
+        reverse: false,
         additional_css: ''
       )
         @url = url
         @text_size = text_size
         @icon_color = icon_color
         @flush = flush
+        @reverse = reverse
         @additional_css = additional_css
       end
     end

package/src/core/Flash/component.css

@@ -13,10 +13,6 @@
     transform: translateY(-200%) rotateX(-90deg);
   }
 
-  .ui-flash-text {
-    @apply mr-16 text-p1;
-  }
-
   /* dynamic content inside flash, can't add classes */
   .ui-flash-text a {
     @apply underline;

package/src/core/Flash/component.jsx

@@ -125,7 +125,7 @@ const Flash = ({ id, type, content, removeFlash }) => {
     <div className={`ui-flash-message ui-grid-px ${animateEntry ? "ui-flash-message-enter" : ""}`} style={style} ref={ref} data-id="ui-flash">
       <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
         {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
-        <p className={`ui-flash-text ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
+        <p className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
         <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
           <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
         </button>

package/src/core/Footer/component.css

@@ -1,14 +1,14 @@
 @layer components {
   .ui-footer-col-title {
-    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
   }
 
   .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-sans 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-sans font-medium;
   }
 
   .ui-footer-compliance-text {

package/src/core/Footer/component.html.erb

@@ -1,12 +1,12 @@
-<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+<footer class="bg-light-grey font-sans antialiased leading-normal" 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">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
-        <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
+        <h2 class="ui-text-overline2 col-span-full font-mono uppercase tracking-widen-0.16">The Ably Platform</h2>
       </div>
       <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-        <p class="text-p3 py-16 font-medium p-menu-row-snug">
+        <p class="ui-text-p3 font-bold py-16 p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
@@ -79,7 +79,7 @@
           <%= link_to 'Support & FAQs', abs_url("/support"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-          <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
+          <%= link_to 'SDKs', abs_url("/docs/sdks"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug flex items-center -mt-4">
           <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
@@ -174,7 +174,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-sans 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
@@ -194,7 +194,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-light">
+          <div class="text-menu3 font-sans 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
@@ -226,29 +226,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>

package/src/core/Footer/component.jsx

@@ -8,15 +8,15 @@ export default function Footer({ paths, urlBase }) {
   const absUrl = (path) => _absUrl(path, urlBase);
 
   return (
-    <footer className="bg-light-grey font-sans antialiased" data-id="footer">
+    <footer className="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
       <div className="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 className="col-span-full md:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
-            <h2 className="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
+            <h2 className="ui-text-overline2 col-span-full">The Ably Platform</h2>
           </div>
           <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-            <p className="text-p3 py-16 font-medium p-menu-row-snug">
+            <p className="ui-text-p3 font-bold py-16 p-menu-row-snug">
               Easily power any realtime experience in your application via a simple API that handles everything realtime.
             </p>
           </div>
@@ -130,7 +130,7 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a href={absUrl("/download")} className="ui-footer-menu-row-link">
+              <a href={absUrl("/docs/sdks")} className="ui-footer-menu-row-link">
                 SDKs
               </a>
             </li>
@@ -141,7 +141,7 @@ export default function Footer({ paths, urlBase }) {
               <iframe
                 className="w-20 h-20 mb-2"
                 src="https://status.ably.com/embed/icon"
-                allowtransparency="true"
+                allowTransparency={true}
                 frameBorder="0"
                 scrolling="no"
                 title="System Status"
@@ -264,7 +264,7 @@ export default function Footer({ paths, urlBase }) {
                 >
                   <Icon name="glassdoor" size="1.5rem" />
                 </a>
-                <div className="pl-16 text-menu3 font-light">
+                <div className="pl-16 text-menu3 font-sans font-medium">
                   <strong className="block font-medium">We&apos;re hiring!</strong>
                   <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
                     Learn more at Glassdoor
@@ -284,7 +284,7 @@ export default function Footer({ paths, urlBase }) {
               >
                 <Icon name="glassdoor" size="1.5rem" />
               </a>
-              <div className="text-menu3 font-light">
+              <div className="text-menu3 font-sans font-medium">
                 <strong className="block font-medium">We&apos;re hiring!</strong>
                 <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" className="ui-footer-link">
                   Learn more at Glassdoor
@@ -326,29 +326,29 @@ export default function Footer({ paths, urlBase }) {
           <div className="flex mr-24">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-2">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Compliant</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-3">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Certified</p>
             </div>
           </div>
           <div className="flex mr-24 md:col-start-4">
             <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12  ui-footer-tick-icon" />
             <div>
-              <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
-              <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
+              <p className="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
+              <p className="ui-footer-compliance-text font-medium mb-24">Encryption</p>
             </div>
           </div>
         </div>

package/src/core/Meganav/component.css

@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-sans;
     @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-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-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-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
   }
 
   .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-medium font-mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -47,7 +47,7 @@
     <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
-          <%= link_to abs_url("/download"), class: "ui-meganav-media-with-image group" do %>
+          <%= link_to abs_url("/docs/sdks"), class: "ui-meganav-media-with-image group" do %>
             <%= render(AblyUi::Core::Icon.new(name: "icon-display-sdks-col", size: "2.5rem")) %>
             <div class="flex flex-col justify-center">
               <p class="ui-meganav-media-heading">SDKs</p>

package/src/core/MeganavContentDevelopers/component.jsx

@@ -54,7 +54,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
       <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
         <ul className="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
           <li>
-            <a href={absUrl("/download")} className="ui-meganav-media-with-image group">
+            <a href={absUrl("/docs/sdks")} className="ui-meganav-media-with-image group">
               <Icon name="icon-display-sdks-col" size="2.5rem" />
               <div className="flex flex-col justify-center">
                 <p className="ui-meganav-media-heading">SDKs</p>

package/src/core/MeganavContentProducts/component.html.erb

@@ -7,7 +7,7 @@
         <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
       </div>
 
-      <p class="text-p2 font-medium text-cool-black mb-24" style="max-width: 330px">
+      <p class="ui-text-p2 font-bold mb-24" style="max-width: 330px">
         Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
         realtime, and lets you focus on your code.
       </p>

package/src/core/MeganavContentProducts/component.jsx

@@ -12,7 +12,7 @@ const MeganavContentProducts = ({ paths, absUrl }) => (
           <img src={paths.ablyStack} alt="Ably homepage" />
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
-        <p className="text-p2 font-medium text-cool-black mb-24" style={{ maxWidth: "330px" }}>
+        <p className="ui-text-p2 font-bold mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
           realtime, and lets you focus on your code.
         </p>

package/src/core/Notice/component.html.erb

@@ -1,15 +1,15 @@
 <%# 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: "w-full pr-8 ui-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 %>
 
     <% if close_btn? %>
       <%= button_tag type: 'button', class: 'h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline' do %>
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-white")) %>
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-cool-black")) %>
       <% end %>
     <% end %>
   </div>

package/src/core/Notice/component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import T from "prop-types";
 
-const contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 import NoticeScripts from "./component.js";
 import Icon from "../Icon/component.jsx";
@@ -38,14 +38,14 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
     <div className={wrapperClasses} data-id="ui-notice" style={{ maxHeight: 0, overflow: "hidden" }}>
       <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
         <ContentWrapper buttonLink={buttonLink}>
-          <strong className="font-medium whitespace-nowrap pr-4">{title}</strong>
+          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
           <span className="pr-4">{bodyText}</span>
           {buttonLabel && <span className="underline cursor-pointer whitespace-nowrap">{buttonLabel}</span>}
         </ContentWrapper>
 
         {closeBtn && (
           <button type="button" className="ml-auto h-20 w-20 border-none bg-none self-baseline">
-            <Icon name="icon-gui-close" size="1.25rem" color="text-white" />
+            <Icon name="icon-gui-close" size="1.25rem" color="text-cool-black" />
           </button>
         )}
       </div>

package/src/core/Showcase/component.html.erb

@@ -36,15 +36,15 @@
           <% if company[:layout] == "quotes" %>
             <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
 
-            <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
+            <p class="ui-text-quote mb-24"><%= company[:quote] %></p>
 
             <div class="flex items-center">
               <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
                 <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
               </div>
               <div>
-                <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
-                <p class="text-p3 font-light"><%= company[:author][:title] %></p>
+                <p class="ui-text-p2"><%= company[:author][:name] %></p>
+                <p class="ui-text-p3"><%= company[:author][:title] %></p>
               </div>
             </div>
           <% end %>
@@ -54,16 +54,16 @@
               <% company[:columns].each_with_index do |col, n| %>
                 <% if company[:columns].last == col %>
                   <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-h4 pb-24"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light"><%= col[:text] %></p>
+                    <p class="ui-text-h4 pb-24"><%= col[:heading] %></p>
+                    <p class="ui-text-p1"><%= col[:text] %></p>
                     <%- if col[:button] %>
                       <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
                     <% end %>
                   </div>
                 <% else %>
                   <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
+                    <p class="ui-text-title-xl"><%= col[:heading] %></p>
+                    <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
                   </div>
                 <% end %>
               <% end %>

package/src/core/Uptime/component.css

@@ -86,7 +86,7 @@
   .ui-uptime-key {
     @apply block mt-16 mr-20 bg-transparent;
     @apply sm:inline-block sm:mt-0;
-    @apply font-light text-p2 text-white block sm:inline-flex items-center;
+    @apply font-medium text-p2 text-white block sm:inline-flex items-center;
   }
 
   .ui-uptime-key:first-child {