ably-ui 11.7.1.dev.d409fff → 11.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 567f511aac0ed6dad1e59498e0ebc6fd6a28108471d636a9b634041bfa51bf42
-  data.tar.gz: 78f2e6b22592d2a9c9180d1f6ae88ba68366d36ccfe07de125a85de732019154
+  metadata.gz: 2afa7302e5340d5635d86b73c4902271191e9da6bd9fd22db0ed876cab957636
+  data.tar.gz: dd26ea7b43f4b72375f9ba2ce831094bd66286a13d4d0747d48182e9a75afd62
 SHA512:
-  metadata.gz: 7ad42cc1362ba1e6074134e1226bf3db462a3fa5b97219cf1c24681ddb44a5a398343a5cc9789a40792aa5f55fe337a7ac412e717f48146b60ca6f8fef4c7a00
-  data.tar.gz: 810bef9cce6465b2e518ce150b5aec35b80ac422a74504845447f249ce3ddebdb3249acf789612cd9d4bc5941a0604060fd75ce0334245a480d44e0bb237b000
+  metadata.gz: b36a930eafd6c384b55e60fa99328ffdbbe60200a83d5b7fc5589401040e5790d43b3cfc06557bd9a6b056fbfc4b256c955c39e258be746175b6e022bca35209
+  data.tar.gz: 2f03873dfab2ad7de45d5783b1e426563a55f52ae4fe7aa97f0c66fe5565d7a8191a816b345b3156e562a75c58b04272dd1ecc6789ce4a5b448045cd5b794f78

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (11.7.1.dev.d65c98c)
+    ably-ui (8.7.0.dev.827e917)
       view_component (>= 2.33, < 2.50)
 
 GEM

data/README.md

@@ -75,12 +75,12 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
 1. Add AblyUI to your project
 2. Add TailwindCSS to your project
    1. By project type:
-      1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
-      2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
-         1. Add postCSS import with `npm install postcss-import`
-   1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
-   1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
-   1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
+       1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
+       2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
+          1. Add postCSS import with `npm install postcss-import`
+    1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
+    2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
+    3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
 3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
 4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 
@@ -233,7 +233,7 @@ For `npm`:
 ```bash
 # in the root directory
 yarn link
-# in the "preview" directory
+# in the the "preview" directory
 yarn link @ably/ui
 ```
 

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

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

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

@@ -1 +1,16 @@
+@layer components {
+  .ui-featured-link {
+    @apply font-sans font-medium block;
+    @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
+  }
+
+  .ui-featured-link:hover svg {
+    @apply left-0;
+  }
+
+  .ui-featured-link-icon {
+    transition: left 100ms ease-in-out;
+    @apply align-middle ml-8 relative -top-1 -left-4;
+  }
+}
 

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

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));

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

@@ -1,15 +1,6 @@
-<%= 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 #{@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 %>
-
+<%= 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")) %>
 <% end %>

data/lib/ably_ui/core/featured_link/featured_link.rb

@@ -3,17 +3,15 @@ module AblyUi
     class FeaturedLink < ViewComponent::Base
       def initialize(
         url:,
-        text_size: 'text-p2',
+        text_size: 'text-menu3',
         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

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

@@ -1,14 +1,14 @@
 @layer components {
   .ui-footer-col-title {
-    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
   }
 
   .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
   }
 
   .ui-footer-compliance-text {

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

@@ -1,12 +1,12 @@
-<footer class="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
+<footer class="bg-light-grey font-sans antialiased" data-id="footer">
   <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
     <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
         <%= 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="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">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="text-p3 py-16 font-medium 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-sans font-medium">
+            <div class="pl-16 text-menu3 font-light">
               <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-sans font-medium">
+          <div class="text-menu3 font-light">
             <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-bold whitespace-nowrap">SOC 2 Type 2</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+          <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>
         </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-bold whitespace-nowrap">HIPAA</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
+          <p class="ui-footer-compliance-text font-light 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-bold whitespace-nowrap">EU GDPR</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
+          <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>
         </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-bold whitespace-nowrap">256-bit AES</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
+          <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>
         </div>
       </div>
     </div>

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

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

data/lib/ably_ui/core/meganav_content_products/meganav_content_products.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="text-p2 font-medium text-cool-black 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>

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

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

data/lib/ably_ui/core/styles.css

@@ -1,132 +1,34 @@
 @layer base {
   :root {
-    /* 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-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;
     --color-gui-focus-outline: #80b9f2;
+    --color-gui-active: #074095;
     --color-gui-visited: #4887c2;
-
-    /* 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);
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-error: #fb0c0c;
+    --color-gui-success: #11cb24;
 
     /* code syntax: theme */
-    --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-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-orange: #e78c45;
     --syntax-yellow: #e7c547;
     --syntax-blue: #3490ec;
@@ -168,51 +70,44 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-orange-700) 0%,
+      var(--color-bright-red) 0%,
       var(--color-jazzy-pink) 100%
     );
 
-    --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-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-h2: 2rem;
-    --fs-h2-xs: 1.75rem;
-
+    --fs-h2-xs: 1.875rem;
     --fs-h3: 1.5rem;
-    --fs-h4: 1.25rem;
-    --fs-h5: 1rem;
-
-    --fs-p1: 1rem;
-    --fs-p2: 0.938rem;
+    --fs-h4: 1.125rem;
+    --fs-p1: 1.125rem;
+    --fs-p2: 1rem;
     --fs-p3: 0.875rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
-    --fs-sub-header: 1.125rem;
-    --fs-sub-header-xs: 1.063rem;
+    --fs-sub-header: 1.5rem;
+    --fs-sub-header-xs: 1.125rem;
     --fs-overline1: 1rem;
     --fs-overline2: 0.875rem;
-    --fs-btn1: 1rem;
-    --fs-btn2: 0.938rem;
+    --fs-btn1: 1.125rem;
+    --fs-btn2: 1rem;
     --fs-btn3: 0.875rem;
-    --fs-menu1: 1rem;
-    --fs-menu2: 0.938rem;
+    --fs-menu1: 1.125rem;
+    --fs-menu2: 1rem;
     --fs-menu3: 0.875rem;
-    --fs-quote: 1.25rem;
-    --fs-code: 0.938rem;
-    --fs-code2: 0.813rem;
+    --fs-quote: 1.5rem;
+    --fs-code: 0.875rem;
 
     --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;
@@ -220,9 +115,7 @@
     --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;
@@ -237,7 +130,6 @@
     --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;
@@ -285,7 +177,7 @@
 }
 @layer components {
   .ui-btn {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium 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;
@@ -309,7 +201,7 @@
     background-size: 200% 100%;
     background-position: 0% 0%;
 
-    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
     @apply focus:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
@@ -325,7 +217,7 @@
   }
 
   .ui-btn-invert {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium 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;
@@ -335,7 +227,7 @@
   }
 
   .ui-btn-secondary {
-    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium 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;
@@ -345,7 +237,7 @@
   }
 
   .ui-btn-secondary-invert {
-    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium 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;
@@ -430,53 +322,47 @@
 }
 @layer components {
   .ui-text-title {
-    @apply font-sans font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-sans font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
+    @apply tracking-tighten-0.01;
   }
 
   .ui-text-h2 {
-    @apply font-sans font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-h4 {
-    @apply font-sans font-extrabold text-cool-black;
+    @apply font-sans font-medium text-cool-black;
     @apply text-h4;
-    @apply tracking-tighten-0.0015;
-  }
-
-  .ui-text-h5 {
-    @apply font-sans font-extrabold text-cool-black;
-    @apply text-h5;
-    @apply tracking-tighten-0.0025;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-p1 {
-    @apply font-sans font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-medium text-charcoal-grey;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -487,63 +373,60 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-normal text-cool-black;
-    @apply text-quote leading-normal;
-    @apply tracking-tighten-0.0015;
+    @apply font-sans font-light text-cool-black;
+    @apply text-quote;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-semibold text-neutral-800;
-    @apply text-sub-header-xs xs:text-sub-header leading-normal;
+    @apply font-sans font-light text-dark-grey;
+    @apply text-sub-header-xs xs:text-sub-header;
+    @apply tracking-tighten-0.025;
   }
 
   .ui-text-overline1 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline1 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline1;
+    @apply tracking-widen-0.15;
   }
 
   .ui-text-overline2 {
-    @apply font-mono font-medium text-active-orange uppercase;
-    @apply text-overline2 leading-normal;
-    @apply tracking-widen-0.16;
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline2;
+    @apply tracking-widen-0.1;
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu1 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu1;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu2 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu2;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-medium text-cool-black;
-    @apply text-menu3 leading-snug;
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu3;
   }
 
   .ui-text-code {
-    @apply font-mono font-medium text-code;
-  }
-
-  .ui-text-code2 {
-    @apply font-mono font-medium text-code2;
+    @apply font-mono font-semibold text-code;
   }
 
   .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-semibold 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-light text-cool-black;
+    @apply list-disc ml-32 mb-24;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -560,21 +443,11 @@
   }
 
   .ui-unordered-list ul ul {
-    @apply list-square my-8;
-  }
-
-  .ui-unordered-list ul ul {
-    @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);
+    @apply list-square;
   }
 
   .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
     @apply list-disc ml-32 mt-32 -mb-12;
   }
 
@@ -607,18 +480,14 @@
     @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 {
-    @apply flex items-start mb-16 font-sans font-medium;
+    @apply flex items-start mb-16 font-sans;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
+    @apply flex items-start mb-12 font-sans;
   }
 
   .ui-checkbox-input {
@@ -637,12 +506,12 @@
 
   .ui-checkbox-label-p1 {
     @apply select-none;
-    @apply text-p1 font-medium text-cool-black;
+    @apply text-p1 font-light text-cool-black;
   }
 
   .ui-checkbox-label-p2 {
     @apply select-none;
-    @apply text-p2 font-medium text-cool-black;
+    @apply text-p2 font-light text-cool-black;
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
@@ -663,7 +532,7 @@
   }
 
   .ui-textarea {
-    @apply font-sans font-medium text-cool-black text-p1;
+    @apply font-sans font-light 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;

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '11.7.1.dev.d409fff'
+  VERSION = '11.7.1'
 end

metadata

@@ -1,16 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 11.7.1.dev.d409fff
+  version: 11.7.1
 platform: ruby
 authors:
 - Dominik Piatek
 - Arti Mathanda
 - Bruce Thomas
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-11-24 00:00:00.000000000 Z
+date: 2023-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -32,7 +32,7 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '2.50'
-description:
+description: 
 email:
 - dominik.piatek@ably.com
 - arti.mathanda@ably.com
@@ -91,8 +91,6 @@ files:
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
 - lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
-- lib/ably_ui/core/fonts/jetBrains-mono.css
-- lib/ably_ui/core/fonts/manrope.css
 - lib/ably_ui/core/fonts/next.css
 - lib/ably_ui/core/fonts/source-code-pro.css
 - lib/ably_ui/core/footer/component.css
@@ -231,7 +229,7 @@ licenses:
 - Apache-2.0
 metadata:
   source_code_uri: https://github.com/ably/ably-ui
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -242,12 +240,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubygems_version: 3.3.7
-signing_key:
+rubygems_version: 3.2.3
+signing_key: 
 specification_version: 4
 summary: Shared component library and design system for Ably Real-time Ltd (ably.com)
 test_files: []

data/lib/ably_ui/core/fonts/jetBrains-mono.css

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

data/lib/ably_ui/core/fonts/manrope.css

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