ably-ui 8.7.0.dev.681c3bf → 8.7.0.dev.734c219

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d19470e367925355335cb422fb67f614fd6e3dc6d50ad7a884d6fe225c410bc8
-  data.tar.gz: 2948e82b9cba761c77fb2335ea53a3db78171c465c494e26337ab6f9be9ac836
+  metadata.gz: 36806061b50991c766671144fc54e7a4ccfcff4beac769153f696f2a38e43da8
+  data.tar.gz: e20a19439b7ab8e037be595fd85ea1681556b415763d22bc10b56e97b84e0033
 SHA512:
-  metadata.gz: b153d1ffe774071639a6a05656cee2afe58eb3e9cd444f271f3aafe518b4942adc2e7e4c3aab4172a9b7cb8928e55972683bdf9bbbddffc9da8ee9ab11fc4b66
-  data.tar.gz: 416d39a9089d92450f0fd2772f108bdfabb22b9e5b0f0cdcfa20183a379077c1573dd3f839272b363e53e5b3eccf19cb8dfe0daf42e14079f4fcf524806741f8
+  metadata.gz: c7628360e305be71a88986700a807acfcf3d3de2a156d60167391159db3a3716b4d8d707fbe3cd42e43192287790b881a2a73471bec01c21eb56916902c8b4ce
+  data.tar.gz: 145e3281c62a1a5cb1f4791e530a11aa42c4a3ead2f50097e88b7a92286ccb4ab3e23cb6fa54c670260b33d0e227a0d78c65bc1ddbe90119d598029c5491a573

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.bf010f7)
+    ably-ui (8.7.0.dev.2b71529)
       view_component (>= 2.33, < 2.50)
 
 GEM

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

@@ -1,6 +1,6 @@
 @layer components {
   .ui-featured-link {
-    @apply font-sans font-medium block;
+    @apply font-manrope font-bold block;
     @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
   }
 

data/lib/ably_ui/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-jetbrains_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-manrope 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-manrope font-medium;
   }
 
   .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" data-id="footer">
+<footer class="bg-light-grey font-manrope 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="text-overline2 col-span-full font-jetbrains_mono font-bold 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="font-manrope text-p3 py-16 font-bold p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
@@ -180,7 +180,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-manrope 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
@@ -200,7 +200,7 @@
               >
             <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
           </a>
-          <div class="text-menu3 font-light">
+          <div class="text-menu3 font-manrope 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
@@ -231,29 +231,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>

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

@@ -7,7 +7,7 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply antialiased font-manrope transition-colors;
   }
 
   .ui-meganav {
@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-manrope;
     @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-jetbrains_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-jetbrains_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-manrope 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-manrope 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-bold font-jetbrains_mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

data/lib/ably_ui/core/meganav_content_platform/meganav_content_platform.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="text-p2 font-bold text-cool-black mb-24 leading-normal" 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/component.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-announcement {
-    @apply font-sans;
+    @apply font-manrope;
     max-height: 37.5rem;
     transition: max-height 300ms;
   }

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-light w-full pr-8 text-p3 self-center" do %>
-      <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
+    <%= 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>
       <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,37 +1,132 @@
 @layer base {
   :root {
-    --color-cool-black: #03020d;
-    --color-active-orange: #ff5416;
-    --color-red-orange: #e40000;
-    --color-white: #ffffff;
-    --color-electric-cyan: #4ad4ff;
-    --color-zingy-green: #08ff13;
-    --color-bright-red: #fe372b;
-    --color-jazzy-pink: #ff17d2;
-    --color-extra-light-grey: #f8fafc;
-    --color-light-grey: #f4f8fb;
-    --color-mid-grey: #c6ced9;
-    --color-dark-grey: #667085;
-    --color-charcoal-grey: #2b303b;
-    --color-gui-default: #006edc;
-    --color-gui-hover: #0862b9;
-    --color-gui-active: #074095;
-    --color-gui-default-dark: #4da6ff;
-    --color-gui-hover-dark: #2894ff;
-    --color-gui-active-dark: #0080ff;
+    /* 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-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;
@@ -39,10 +134,6 @@
     --syntax-red: #d54e53;
     --syntax-lilac: #bb87d3;
 
-    /* New Neutral colors */
-    --color-neutral-900: #39414e;
-    --color-neutral-500: #c6ced9;
-
     /* uptime status colors */
     --uptime-color-up: #39b54a;
     --uptime-color-trouble: #e87623;
@@ -77,7 +168,7 @@
 
     --gradient-hot-pink: linear-gradient(
       80.2deg,
-      var(--color-bright-red) 0%,
+      var(--color-orange-700) 0%,
       var(--color-jazzy-pink) 100%
     );
 
@@ -118,8 +209,10 @@
     --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;
@@ -395,40 +488,40 @@
 
   .ui-text-quote {
     @apply font-manrope font-normal text-cool-black;
-    @apply text-quote;
+    @apply text-quote leading-normal;
     @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-manrope font-semibold text-neutral-900;
-    @apply text-sub-header-xs xs:text-sub-header;
+    @apply font-manrope font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
     @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline1;
+    @apply text-overline1 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
     @apply font-jetbrains_mono font-medium text-active-orange uppercase;
-    @apply text-overline2;
+    @apply text-overline2 leading-normal;
     @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
     @apply font-manrope font-medium text-cool-black;
-    @apply text-menu1;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
     @apply font-manrope font-medium text-cool-black;
-    @apply text-menu2;
+    @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
     @apply font-manrope font-medium text-cool-black;
-    @apply text-menu3;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
@@ -476,7 +569,8 @@
 
   .ui-ordered-list li,
   .ui-unordered-list li {
-    @apply font-medium font-manrope tracking-widen-0 leading-relaxed;
+    @apply font-medium font-manrope tracking-widen-0;
+    line-height: var(--lh-extra-relaxed);
   }
 
   .ui-unordered-list-with-emphasis {
@@ -539,7 +633,7 @@
 
   .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 {

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.681c3bf'
+  VERSION = '8.7.0.dev.734c219'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 8.7.0.dev.681c3bf
+  version: 8.7.0.dev.734c219
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-15 00:00:00.000000000 Z
+date: 2023-08-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component