@ably/ui 11.7.1-dev.d65c98c → 12.0.0-dev.f7338b0

package/src/core/Showcase/component.html.erb

@@ -13,7 +13,7 @@
                          type: 'button',
                          data: { id: 'showcase-control' },
                          aria: { controls: @random_id } do %>
-            <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
+            <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
           <% end %>
         </li>
       <% end %>
@@ -36,15 +36,15 @@
           <% if company[:layout] == "quotes" %>
             <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
 
-            <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
+            <p class="ui-text-quote mb-24"><%= company[:quote] %></p>
 
             <div class="flex items-center">
               <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
-                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
+                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
               </div>
               <div>
-                <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
-                <p class="text-p3 font-light"><%= company[:author][:title] %></p>
+                <p class="ui-text-p2"><%= company[:author][:name] %></p>
+                <p class="ui-text-p3"><%= company[:author][:title] %></p>
               </div>
             </div>
           <% end %>
@@ -54,16 +54,16 @@
               <% company[:columns].each_with_index do |col, n| %>
                 <% if company[:columns].last == col %>
                   <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-h4 pb-24"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light"><%= col[:text] %></p>
+                    <p class="ui-text-h4 pb-24"><%= col[:heading] %></p>
+                    <p class="ui-text-p1"><%= col[:text] %></p>
                     <%- if col[:button] %>
                       <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
                     <% end %>
                   </div>
                 <% else %>
                   <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
+                    <p class="ui-text-title-xl"><%= col[:heading] %></p>
+                    <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
                   </div>
                 <% end %>
               <% end %>

package/src/core/Showcase/component.js

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

package/src/core/Uptime/component.css

@@ -30,8 +30,7 @@
   }
 
   .ui-uptime-day:hover {
-    filter: brightness(1.2);
-    @apply z-10;
+    @apply z-10 brightness-125;
   }
 
   .ui-uptime-day:hover span {
@@ -86,7 +85,7 @@
   .ui-uptime-key {
     @apply block mt-16 mr-20 bg-transparent;
     @apply sm:inline-block sm:mt-0;
-    @apply font-light text-p2 text-white block sm:inline-flex items-center;
+    @apply font-medium text-p2 text-white block sm:inline-flex items-center;
   }
 
   .ui-uptime-key:first-child {

package/src/core/Uptime/component.jsx

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

package/src/core/styles/text.css

@@ -95,25 +95,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),
@@ -122,11 +129,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 {
@@ -137,34 +144,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;
@@ -177,4 +156,8 @@
     @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
+
+  .ui-figcaption {
+    @apply font-mono text-p3 text-neutral-800;
+  }
 }

package/src/core/styles.components.css

@@ -5,7 +5,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/tailwind.config.js

@@ -136,6 +136,7 @@ module.exports = {
       "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
       "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
       "gui-blue-focus": "var(--color-gui-blue-focus)",
+      "gui-blue-visited": "var(--color-gui-blue-focus)",
       "gui-unavailable": "var(--color-gui-unavailable)",
       "gui-success-green": "var(--color-gui-success-green)",
       "gui-error-red": "var(--color-gui-error-red)",
@@ -298,10 +299,6 @@ module.exports = {
       full: "9999px",
       DEFAULT: "0.375rem",
     },
-    filter: {
-      none: "none",
-      grayscale: "grayscale(1)",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
@@ -353,12 +350,11 @@ module.exports = {
       backgroundImage: ["hover", "active", "focus"],
       filter: ["hover"],
       cursor: ["disabled"],
-      inset: ['group-hover']
-
+      inset: ["group-hover"],
     },
   },
   corePlugins: {
     preflight: false,
   },
-  plugins: [require("tailwindcss-filters")],
+  plugins: [],
 };

package/src/core/FeaturedLink/component.css

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