@ably/ui 11.7.1-dev.d65c98c → 12.0.0-dev.77b7db9

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;
@@ -174,7 +153,16 @@
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey;
     @apply underline;
   }
+
+  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+  .ui-link-neutral:focus {
+    outline: 2px solid var(--color-neutral-000);
+  }
+
+  .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

@@ -1,19 +1,16 @@
 module.exports = {
-  purge: {
-    content: [
+  content: [
       "./src/**/*.html.erb",
       "./src/**/*.jsx",
       "./src/**/*.js",
       "./src/**/*.json",
-    ],
-    options: {
-      safelist: {
-        standard: ["w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"],
-        greedy: [/^hljs.*/, /^ui-.*/],
-      },
-    },
-  },
-  darkMode: false,
+    "./src/**/*.css",
+  ],
+  safelist: [
+    "w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6",
+    { pattern: /^hljs.*/ },
+    { pattern: /^ui-.*/ }
+  ],
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries
@@ -136,6 +133,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 +296,6 @@ module.exports = {
       full: "9999px",
       DEFAULT: "0.375rem",
     },
-    filter: {
-      none: "none",
-      grayscale: "grayscale(1)",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
@@ -313,7 +307,6 @@ module.exports = {
       },
       outline: {
         "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-neutral-000)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -353,12 +346,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/tailwind.extend.js

@@ -15,10 +15,7 @@ const ablyUItailwindConfig = (extend) => {
 
   const configWithPlugin = {
     ...ablyUIConfig,
-    purge: {
-      content: addPurgeContentPaths(),
-      options: ablyUIConfig.purge.options,
-    },
+    content: addPurgeContentPaths(),
   };
 
   return extend(configWithPlugin);

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