@ably/ui 11.7.1 → 12.0.0-dev.f7338b0

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>
@@ -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>
@@ -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/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

@@ -13,7 +13,7 @@
                          type: 'button',
                          data: { id: 'showcase-control' },
                          aria: { controls: @random_id } do %>
-            <%= 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"]] %>
+            <%= 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"]] %>
           <% end %>
         </li>
       <% end %>
@@ -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" %>
+                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 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/Showcase/component.js

@@ -6,7 +6,7 @@ import "./component.css";
 const SLIDE_SHOW_INTERVAL = 5000;
 
 const updateLogoOpacity = (logos, currentIndex) => {
-  const visible = ["filter-grayscale", "filter-none"];
+  const visible = ["grayscale", "grayscale-0"];
   const opaque = [...visible].reverse();
   logos.forEach((logo, i) => {
     logo.classList.replace(...(i === currentIndex ? visible : opaque));

package/src/core/Uptime/component.css

@@ -30,8 +30,7 @@
   }
 
   .ui-uptime-day:hover {
-    filter: brightness(1.2);
-    @apply z-10;
+    @apply z-10 brightness-125;
   }
 
   .ui-uptime-day:hover span {
@@ -86,7 +85,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 {

package/src/core/Uptime/component.jsx

@@ -139,10 +139,7 @@ export default function Uptime({ serverUrl, linkTo = null, theme = "light" }) {
 
   if (data && data.error) {
     return (
-      <div
-        className={`flex sm:flex-row justify-center items-center p-24 border rounded font-sans font-light text-p2 ${themes[theme].text}`}
-        data-id="uptime-error"
-      >
+      <div className={`flex sm:flex-row justify-center items-center p-24 border rounded ui-text-p2 ${themes[theme].text}`} data-id="uptime-error">
         Sorry, we can’t retrieve uptime data right now.
       </div>
     );

package/src/core/fonts/jetBrains-mono.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+}

package/src/core/fonts/manrope.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
+}

package/src/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -24,7 +24,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -40,7 +40,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
@@ -50,7 +50,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
@@ -60,7 +60,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus:outline-gui-focus;

package/src/core/styles/forms.css

@@ -1,10 +1,10 @@
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans;
+    @apply flex items-start mb-16 font-sans font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans;
+    @apply flex items-start mb-12 font-sans font-medium;
   }
 
   .ui-checkbox-input {
@@ -23,12 +23,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-light text-cool-black;
+    @apply text-p1 font-medium text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-light text-cool-black;
+    @apply text-p2 font-medium text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -49,7 +49,7 @@
   }
 
   .ui-textarea {
-    @apply font-sans font-light text-cool-black text-p1;
+    @apply font-sans font-medium text-cool-black text-p1;
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;