@ably/ui 11.7.1-dev.d65c98c → 12.0.0

package/core/Notice.jsx

@@ -325,7 +325,7 @@ var Flash = function Flash(_ref) {
     size: "1.5rem",
     additionalCSS: "mr-16 self-baseline"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-flash-text ".concat(FLASH_TEXT_COLOR[type]),
+    className: "ui-text-p1 mr-16 ".concat(FLASH_TEXT_COLOR[type]),
     dangerouslySetInnerHTML: {
       __html: safeContent
     }
@@ -822,7 +822,7 @@ var Icon_component = __webpack_require__(9008);
 ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
 
 
-var contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
+var contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 
 
@@ -887,7 +887,7 @@ var component_Notice = function Notice(_ref2) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component["default"], {
     name: "icon-gui-close",
     size: "1.25rem",
-    color: "text-white"
+    color: "text-cool-black"
   }))));
 };
 

package/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 {

package/core/Uptime.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       flush = _ref$flush === void 0 ? false : _ref$flush,
       _ref$reverse = _ref.reverse,
       reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "ui-featured-link group ".concat(textSize, " ").concat(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-".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
     style: {
       "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
   }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
 
@@ -817,7 +821,7 @@ function Uptime(_ref8) {
 
   if (data && data.error) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-      className: "flex sm:flex-row justify-center items-center p-24 border rounded font-sans font-light text-p2 ".concat(themes[theme].text),
+      className: "flex sm:flex-row justify-center items-center p-24 border rounded ui-text-p2 ".concat(themes[theme].text),
       "data-id": "uptime-error"
     }, "Sorry, we can\u2019t retrieve uptime data right now.");
   }

package/core/styles.css

@@ -525,25 +525,32 @@
   }
 
   .ui-text-code {
-    @apply font-mono font-medium text-code;
+    @apply font-mono font-normal text-code;
   }
 
   .ui-text-code2 {
-    @apply font-mono font-medium text-code2;
+    @apply font-mono font-normal text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 my-16;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
   }
 
   .ui-ordered-list {
     @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply ml-32 my-16;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-8;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -552,11 +559,11 @@
   }
 
   .ui-unordered-list ul {
-    @apply ml-24 mt-16 list-circle;
+    @apply ml-24 my-8 list-circle;
   }
 
   .ui-ordered-list ol {
-    @apply ml-24 mt-16 list-decimal;
+    @apply ml-24 my-16 list-decimal;
   }
 
   .ui-unordered-list ul ul {
@@ -567,34 +574,6 @@
     @apply my-8;
   }
 
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-sans tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
-  }
-
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 mt-32 -mb-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div {
-    @apply relative -top-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div > strong {
-    @apply block;
-  }
-
-  .ui-unordered-list-with-emphasis ul {
-    margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-circle;
-  }
-
-  .ui-unordered-list-with-emphasis ul ul {
-    @apply list-square;
-  }
-
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
@@ -607,6 +586,10 @@
     @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
 }
 @layer components {
   .ui-checkbox-p1 {
@@ -680,7 +663,7 @@
 }
 @layer components {
   .ui-input {
-    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
     @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
     @apply max-w-screen-sm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "11.7.1-dev.d65c98c",
+  "version": "12.0.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

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,15 +1,15 @@
-<%= link_to(@url, class: "ui-featured-link group #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
+<%= 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: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
+                                      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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
+                                                     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,20 +3,35 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = 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 group ${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")})` }}
   >
-    {reverse ? <>
-      <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon 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="ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0" />
-    </>}
+    {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>
 );
 
@@ -26,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/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.html.erb

@@ -3,10 +3,10 @@
     <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-mono font-bold uppercase tracking-widen-0.16">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="font-sans text-p3 py-16 font-bold 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>

package/src/core/Footer/component.jsx

@@ -13,10 +13,10 @@ export default function Footer({ paths, urlBase }) {
         <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 font-mono font-bold col-span-full uppercase tracking-widen-0.16">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="font-sans text-p3 py-16 font-bold 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>

package/src/core/Meganav/component.css

@@ -105,7 +105,7 @@
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-bold font-mono tracking-widen-0.16 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-bold text-cool-black mb-24 leading-normal" 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-bold text-cool-black mb-24 leading-normal" 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,7 +1,7 @@
 <%# 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-medium w-full pr-8 text-p3 self-center" do %>
+    <%= 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>
@@ -9,7 +9,7 @@
 
     <% 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-medium 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";
@@ -45,7 +45,7 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
 
         {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 {

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>
     );