@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

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/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.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.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>
@@ -41,7 +41,7 @@ const MeganavContentProducts = ({ paths, absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/livesync")} className="group ui-meganav-media">
-              <p className="ui-meganav-media-heading">LiveSync (Pre release)</p>
+              <p className="ui-meganav-media-heading">LiveSync (Early access)</p>
               <p className="ui-meganav-media-copy">Keep clients in sync with any relational database.</p>
             </a>
           </li>

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/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/react-renderer.js

@@ -1,9 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
-const renderComponent = (Component, props, node) =>
+const renderComponent = (Component, props, node) => {
+  const root = createRoot(node);
   // eslint-disable-next-line react/no-render-return-value
-  ReactDOM.render(<Component {...props} />, node);
+  root.render(<Component {...props} />);
+};
 
 export { renderComponent };
 
@@ -19,7 +21,8 @@ export default function reactRenderer(components) {
     const propsJson = node.getAttribute("data-react-props");
     const props = propsJson && JSON.parse(propsJson || {});
 
-    ReactDOM.render(<Constructor {...props} />, node);
+    const root = createRoot(node);
+    root.render(<Constructor {...props} />);
 
     node.removeAttribute("data-react");
     node.removeAttribute("data-react-props");

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;

package/src/core/styles/properties.css

@@ -1,34 +1,132 @@
 @layer base {
   :root {
-    --color-cool-black: #03020d;
-    --color-active-orange: #ff5416;
-    --color-red-orange: #e40000;
-    --color-white: #ffffff;
-    --color-electric-cyan: #4af7ff;
-    --color-zingy-green: #08ff13;
-    --color-bright-red: #ff2739;
-    --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #fafafb;
-    --color-light-grey: #f5f5f6;
-    --color-mid-grey: #d9d9da;
-    --color-dark-grey: #76767c;
-    --color-charcoal-grey: #292831;
-    --color-gui-default: #0073e6;
-    --color-gui-hover: #0867c4;
-    --color-gui-focus: #0073e6;
+    /* Neutral colors */
+    --color-neutral-000: #ffffff;
+    --color-neutral-100: #f8fafc;
+    --color-neutral-200: #f4f8fb;
+    --color-neutral-300: #edf1f7;
+    --color-neutral-400: #e2e7ef;
+    --color-neutral-500: #c6ced9;
+    --color-neutral-600: #adb6c2;
+    --color-neutral-700: #89929f;
+    --color-neutral-800: #667085;
+    --color-neutral-900: #39414e;
+    --color-neutral-1000: #2b303b;
+    --color-neutral-1100: #202531;
+    --color-neutral-1200: #141924;
+    --color-neutral-1300: #03020d;
+
+    /* Ably orange */
+    --color-orange-100: #fff5f1;
+    --color-orange-200: #ffe3d8;
+    --color-orange-300: #ffc4ae;
+    --color-orange-400: #ff9c79;
+    --color-orange-500: #ff723f;
+    --color-orange-600: #ff5416;
+    --color-orange-700: #ff2739;
+    --color-orange-800: #e40000;
+    --color-orange-900: #b82202;
+    --color-orange-1000: #751500;
+    --color-orange-1100: #2a0b00;
+
+    /* Secondary colours */
+    --color-yellow-100: #fffbef;
+    --color-yellow-200: #fff0ba;
+    --color-yellow-300: #ffe27c;
+    --color-yellow-400: #ffd43d;
+    --color-yellow-500: #f8c100;
+    --color-yellow-600: #e8a700;
+    --color-yellow-700: #ac8600;
+    --color-yellow-800: #654f00;
+    --color-yellow-900: #291c01;
+    --color-green-100: #f1fff1;
+    --color-green-200: #b8ffbb;
+    --color-green-300: #80ff85;
+    --color-green-400: #08ff13;
+    --color-green-500: #00e80b;
+    --color-green-600: #00c008;
+    --color-green-700: #008e06;
+    --color-green-800: #005303;
+    --color-green-900: #002a02;
+    --color-blue-100: #f1fbff;
+    --color-blue-200: #b8eaff;
+    --color-blue-300: #80d9ff;
+    --color-blue-400: #4ad4ff;
+    --color-blue-500: #2cc0ff;
+    --color-blue-600: #00a5ec;
+    --color-blue-700: #0284cd;
+    --color-blue-800: #004b75;
+    --color-blue-900: #001b2a;
+    --color-violet-100: #f7f2fe;
+    --color-violet-200: #d8bcfb;
+    --color-violet-300: #b986f8;
+    --color-violet-400: #9951f5;
+    --color-violet-500: #7a1bf2;
+    --color-violet-600: #5f0bc9;
+    --color-violet-700: #460894;
+    --color-violet-800: #2d055e;
+    --color-violet-900: #130228;
+    --color-pink-100: #fff1fc;
+    --color-pink-200: #ffb8f1;
+    --color-pink-300: #ff80e6;
+    --color-pink-400: #ff47db;
+    --color-pink-500: #ff17d2;
+    --color-pink-600: #d400ab;
+    --color-pink-700: #9c007e;
+    --color-pink-800: #630050;
+    --color-pink-900: #2a0022;
+
+    /* GUI colours */
+    /* Note: The ‘Light and ‘Dark’ refers to the colour of the background on which the colour is used. */
+    --color-gui-blue-default-light: #006edc;
+    --color-gui-blue-hover-light: #0862b9;
+    --color-gui-blue-active-light: #074095;
+    --color-gui-blue-default-dark: #4da6ff;
+    --color-gui-blue-hover-dark: #2894ff;
+    --color-gui-blue-active-dark: #0080ff;
+    --color-gui-blue-focus: #80b9f2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-success-green: #11cb24;
+    --color-gui-error-red: #fb0c0c;
+    --color-gui-focus: #80b9f2;
     --color-gui-focus-outline: #80b9f2;
-    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
-    --color-gui-unavailable: #a8a8a8;
-    --color-gui-error: #fb0c0c;
-    --color-gui-success: #11cb24;
+
+    /* Colours replaced by neutral colours */
+    --color-white: var(--color-neutral-000);
+    --color-extra-light-grey: var(--color-neutral-100);
+    --color-light-grey: var(--color-neutral-200);
+    --color-mid-grey: var(--color-neutral-500);
+    --color-dark-grey: var(--color-neutral-800);
+    --color-charcoal-grey: var(--color-neutral-1000);
+    --color-cool-black: var(--color-neutral-1300);
+
+    /* Colours replaced by orange colours */
+    --color-active-orange: var(--color-orange-600);
+    --color-bright-red: var(--color-orange-700);
+    --color-red-orange: var(--color-orange-800);
+
+    /* Colours replaced by secondary colours */
+    --color-electric-cyan: var(--color-blue-400);
+    --color-zingy-green: var(--color-green-400);
+    --color-jazzy-pink: var(--color-pink-500);
+
+    /* Colours replaced by GUI colours */
+    --color-gui-default: var(--color-gui-blue-default-light);
+    --color-gui-hover: var(--color-gui-blue-hover-light);
+    --color-gui-active: var(--color-gui-blue-active-light);
+    --color-gui-error: var(--color-gui-error-red);
+    --color-gui-success: var(--color-gui-success-green);
+    --color-gui-default-dark: var(--color-gui-blue-default-dark);
+    --color-gui-hover-dark: var(--color-gui-blue-hover-dark);
+    --color-gui-active-dark: var(--color-gui-blue-active-dark);
 
     /* code syntax: theme */
-    --syntax-black: var(--color-cool-black);
-    --syntax-dark-grey: var(--color-dark-grey);
-    --syntax-mid-grey: var(--color-mid-grey);
-    --syntax-light-grey: var(--color-light-grey);
-    --syntax-extra-light-grey: var(--color-extra-light-grey);
+    --syntax-black: var(--color-neutral-1300);
+    --syntax-dark-grey: var(--color-neutral-800);
+    --syntax-mid-grey: var(--color-neutral-500);
+    --syntax-light-grey: var(--color-neutral-200);
+    --syntax-extra-light-grey: var(--color-neutral-100);
     --syntax-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -36,11 +134,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* uptime status colors */
-    --uptime-color-up: #39b54a;
-    --uptime-color-trouble: #e87623;
-    --uptime-color-down: #e6242c;
-
     /* flat colors for social icons */
     --icon-color-linkedin: #1269bf;
     --icon-color-twitter: #2caae1;
@@ -70,44 +163,51 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-bright-red) 0%,
+      var(--color-orange-700) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --fs-title-xl: 4rem;
-    --fs-title: 3.5rem;
-    --fs-title-xs: 3rem;
-    --fs-h1-xl: 3.5rem;
-    --fs-h1: 3rem;
-    --fs-h1-xs: 2.625rem;
-    --fs-h2-xl: 2.5rem;
+    --fs-title-xl: 3rem;
+    --fs-title: 2.75rem;
+    --fs-title-xs: 2.5rem;
+    --fs-h1-xl: 2.5rem;
+    --fs-h1: 2.25rem;
+    --fs-h1-xs: 2rem;
+
+    --fs-h2-xl: 2.125rem;
     --fs-h2: 2rem;
-    --fs-h2-xs: 1.875rem;
+    --fs-h2-xs: 1.75rem;
+
     --fs-h3: 1.5rem;
-    --fs-h4: 1.125rem;
-    --fs-p1: 1.125rem;
-    --fs-p2: 1rem;
+    --fs-h4: 1.25rem;
+    --fs-h5: 1rem;
+
+    --fs-p1: 1rem;
+    --fs-p2: 0.938rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.5rem;
-    --fs-sub-header-xs: 1.125rem;
+    --fs-sub-header: 1.125rem;
+    --fs-sub-header-xs: 1.063rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1.125rem;
-    --fs-btn2: 1rem;
+    --fs-btn1: 1rem;
+    --fs-btn2: 0.938rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1.125rem;
-    --fs-menu2: 1rem;
+    --fs-menu1: 1rem;
+    --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.5rem;
-    --fs-code: 0.875rem;
+    --fs-quote: 1.25rem;
+    --fs-code: 0.938rem;
+    --fs-code2: 0.813rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;
     --lh-snug: 1.15;
+    --lh-min-normal: 1.2;
     --lh-normal: 1.25;
     --lh-relaxed: 1.45;
+    --lh-extra-relaxed: 1.6;
 
     --ls-tighten-0_025: -0.025em;
     --ls-tighten-0_02: -0.02em;
@@ -115,7 +215,9 @@
     --ls-tighten-0_01: -0.01em;
     --ls-tighten-0_005: -0.005em;
     --ls-tighten-0_0025: -0.0025em;
+    --ls-tighten-0_0015: -0.0015em;
     --ls-widen-0_1: 0.1em;
+    --ls-widen-0_16: 0.16em;
     --ls-widen-0_15: 0.15em;
 
     --spacing-0: 0px;
@@ -130,6 +232,7 @@
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
@@ -171,7 +274,5 @@
 
     /* Expose component values for cross-component usage */
     --ui-meganav-height: 4rem;
-    --ui-showcase-client-logo-min-width: 8.75rem; /* 140px at 16px base*/
-    --ui-showcase-client-logo-max-width: 15rem; /* 240px at 16px base*/
   }
 }