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

package/src/core/styles/text.css

@@ -1,46 +1,52 @@
 @layer components {
   .ui-text-title {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-title-xs xs:text-title xl:text-title-xl;
-    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.02 xl:tracking-tighten-0.02;
   }
 
   .ui-text-h1 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
-    @apply tracking-tighten-0.01;
+    @apply tracking-tighten-0.0125 xs:tracking-tighten-0.015;
   }
 
   .ui-text-h2 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
-    @apply tracking-tighten-0.005;
+    @apply tracking-tighten-0.015 xs:tracking-tighten-0.01;
   }
 
   .ui-text-h3 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h3;
-    @apply tracking-tighten-0.0025;
+    @apply tracking-tighten-0.005;
   }
 
   .ui-text-h4 {
-    @apply font-sans font-medium text-cool-black;
+    @apply font-sans font-extrabold text-cool-black;
     @apply text-h4;
-    @apply tracking-widen-0.1;
+    @apply tracking-tighten-0.0015;
+  }
+
+  .ui-text-h5 {
+    @apply font-sans font-extrabold text-cool-black;
+    @apply text-h5;
+    @apply tracking-tighten-0.0025;
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-charcoal-grey;
+    @apply font-sans font-medium text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -51,60 +57,70 @@
   }
 
   .ui-text-quote {
-    @apply font-sans font-light text-cool-black;
-    @apply text-quote;
-    @apply tracking-tighten-0.025;
+    @apply font-sans font-normal text-cool-black;
+    @apply text-quote leading-normal;
+    @apply tracking-tighten-0.0015;
   }
 
   .ui-text-sub-header {
-    @apply font-sans font-light text-dark-grey;
-    @apply text-sub-header-xs xs:text-sub-header;
-    @apply tracking-tighten-0.025;
+    @apply font-sans font-semibold text-neutral-800;
+    @apply text-sub-header-xs xs:text-sub-header leading-normal;
   }
 
   .ui-text-overline1 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline1;
-    @apply tracking-widen-0.15;
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline1 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-overline2 {
-    @apply font-sans font-medium text-dark-grey uppercase;
-    @apply text-overline2;
-    @apply tracking-widen-0.1;
+    @apply font-mono font-medium text-active-orange uppercase;
+    @apply text-overline2 leading-normal;
+    @apply tracking-widen-0.16;
   }
 
   .ui-text-menu1 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu1;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu1 leading-snug;
   }
 
   .ui-text-menu2 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu2;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu2 leading-snug;
   }
 
   .ui-text-menu3 {
-    @apply font-sans font-light text-cool-black;
-    @apply text-menu3;
+    @apply font-sans font-medium text-cool-black;
+    @apply text-menu3 leading-snug;
   }
 
   .ui-text-code {
-    @apply font-mono font-semibold text-code;
+    @apply font-mono font-normal text-code;
+  }
+
+  .ui-text-code2 {
+    @apply font-mono font-normal text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-semibold 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-light text-cool-black;
-    @apply list-disc ml-32 mb-24;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
   }
 
   .ui-ordered-list {
-    @apply text-p1 font-light text-cool-black;
-    @apply ml-32 mb-24 list-decimal;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @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),
@@ -113,37 +129,19 @@
   }
 
   .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 {
-    @apply list-square;
-  }
-
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-light 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;
+    @apply list-square my-8;
   }
 
-  .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-unordered-list ul ul {
+    @apply my-8;
   }
 
   .ui-link {
@@ -155,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/src/core/utils/syntax-highlighter.css

@@ -1,5 +1,7 @@
 @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 {

package/tailwind.config.js

@@ -1,19 +1,19 @@
 module.exports = {
-  purge: {
-    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,
+  content: [
+    "./src/**/*.jsx",
+    "./src/**/*.js",
+    "./src/**/*.json",
+    "./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
@@ -24,60 +24,148 @@ module.exports = {
       xl: "1440px",
     },
     fontSize: {
-      title: ["var(--fs-title)", "var(--lh-tight)"],
-      "title-xl": ["var(--fs-title-xl)", "var(--lh-tight)"],
-      "title-xs": ["var(--fs-title-xs)", "var(--lh-tight)"],
+      title: ["var(--fs-title)", "var(--lh-min-normal)"],
+      "title-xl": ["var(--fs-title-xl)", "var(--lh-min-normal)"],
+      "title-xs": ["var(--fs-title-xs)", "var(--lh-min-normal)"],
       h1: ["var(--fs-h1)", "var(--lh-tight)"],
-      "h1-xl": ["var(--fs-h1-xl)", "var(--lh-tight)"],
-      "h1-xs": ["var(--fs-h1-xs)", "var(--lh-tight)"],
-      h2: ["var(--fs-h2)", "var(--lh-tight)"],
-      "h2-xl": ["var(--fs-h2-xl)", "var(--lh-tight)"],
-      "h2-xs": ["var(--fs-h2-xs)", "var(--lh-tight)"],
-      h3: ["var(--fs-h3)", "var(--lh-tight)"],
-      h4: ["var(--fs-h4)", "var(--lh-tight)"],
-      p1: ["var(--fs-p1)", "var(--lh-relaxed)"],
-      p2: ["var(--fs-p2)", "var(--lh-relaxed)"],
-      p3: ["var(--fs-p3)", "var(--lh-relaxed)"],
-      standfirst: ["var(--fs-standfirst)", "var(--lh-snug)"],
-      "standfirst-xl": ["var(--fs-standfirst-xl)", "var(--lh-snug)"],
-      "sub-header": ["var(--fs-sub-header)", "var(--lh-normal)"],
-      "sub-header-xs": ["var(--fs-sub-header-xs)", "var(--lh-normal)"],
-      overline1: ["var(--fs-overline1)", "var(--lh-normal)"],
-      overline2: ["var(--fs-overline2)", "var(--lh-normal)"],
+      "h1-xl": ["var(--fs-h1-xl)", "var(--lh-min-normal)"],
+      "h1-xs": ["var(--fs-h1-xs)", "var(--lh-min-normal)"],
+      h2: ["var(--fs-h2)", "var(--lh-min-normal)"],
+      "h2-xl": ["var(--fs-h2-xl)", "var(--lh-min-normal)"],
+      "h2-xs": ["var(--fs-h2-xs)", "var(--lh-min-normal)"],
+      h3: ["var(--fs-h3)", "var(--lh-min-normal)"],
+      h4: ["var(--fs-h4)", "var(--lh-min-normal)"],
+      h5: ["var(--fs-h5)", "var(--lh-min-normal)"],
+      p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
+      p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
+      p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
+      standfirst: ["var(--fs-standfirst)"],
+      "standfirst-xl": ["var(--fs-standfirst-xl)"],
+      "sub-header": ["var(--fs-sub-header)"],
+      "sub-header-xs": ["var(--fs-sub-header-xs)"],
+      overline1: ["var(--fs-overline1)"],
+      overline2: ["var(--fs-overline2)"],
       btn1: ["var(--fs-btn1)", "var(--lh-normal)"],
       btn2: ["var(--fs-btn2)", "var(--lh-tight)"],
       btn3: ["var(--fs-btn2)", "var(--lh-tight)"],
       btn4: ["var(--fs-btn3)", "var(--lh-dense)"],
-      menu1: ["var(--fs-menu1)", "var(--lh-tight)"],
-      menu2: ["var(--fs-menu2)", "var(--lh-tight)"],
-      menu3: ["var(--fs-menu3)", "var(--lh-snug)"],
-      quote: ["var(--fs-quote)", "var(--lh-relaxed)"],
+      menu1: ["var(--fs-menu1)"],
+      menu2: ["var(--fs-menu2)"],
+      menu3: ["var(--fs-menu3)"],
+      quote: ["var(--fs-quote)"],
       code: ["var(--fs-code)", "var(--lh-dense)"],
+      code2: ["var(--fs-code2)", "var(--lh-dense)"],
     },
     colors: {
-      transparent: "transparent",
-      "cool-black": "var(--color-cool-black)",
-      "active-orange": "var(--color-active-orange)",
-      "red-orange": "var(--color-red-orange)",
-      white: "var(--color-white)",
-      "electric-cyan": "var(--color-electric-cyan)",
-      "zingy-green": "var(--color-zingy-green)",
-      "bright-red": "var(--color-bright-red)",
-      "jazzy-pink": "var(--color-jazzy-pink)",
-      "extra-light-grey": "var(--color-extra-light-grey)",
-      "light-grey": "var(--color-light-grey)",
-      "mid-grey": "var(--color-mid-grey)",
-      "dark-grey": "var(--color-dark-grey)",
-      "charcoal-grey": "var(--color-charcoal-grey)",
-      "gui-default": "var(--color-gui-default)",
-      "gui-alt": "var(--color-cool-black)",
-      "gui-hover": "var(--color-gui-hover)",
-      "gui-focus": "var(--color-gui-focus)",
-      "gui-active": "var(--color-gui-active)",
-      "gui-visited": "var(--color-gui-visited)",
+      "neutral-100": "var(--color-neutral-100)",
+      "neutral-200": "var(--color-neutral-200)",
+      "neutral-300": "var(--color-neutral-300)",
+      "neutral-400": "var(--color-neutral-400)",
+      "neutral-500": "var(--color-neutral-500)",
+      "neutral-600": "var(--color-neutral-600)",
+      "neutral-700": "var(--color-neutral-700)",
+      "neutral-800": "var(--color-neutral-800)",
+      "neutral-900": "var(--color-neutral-900)",
+      "neutral-1000": "var(--color-neutral-1000)",
+      "neutral-1100": "var(--color-neutral-1100)",
+      "neutral-1200": "var(--color-neutral-1200)",
+      "neutral-1300": "var(--color-neutral-1300)",
+
+      "orange-100": "var(--color-orange-100)",
+      "orange-200": "var(--color-orange-200)",
+      "orange-300": "var(--color-orange-300)",
+      "orange-400": "var(--color-orange-400)",
+      "orange-500": "var(--color-orange-500)",
+      "orange-600": "var(--color-orange-600)",
+      "orange-700": "var(--color-orange-700)",
+      "orange-800": "var(--color-orange-800)",
+      "orange-900": "var(--color-orange-900)",
+      "orange-1000": "var(--color-orange-1000)",
+      "orange-1100": "var(--color-orange-1100)",
+
+      "yellow-100": "var(--color-yellow-100)",
+      "yellow-200": "var(--color-yellow-200)",
+      "yellow-300": "var(--color-yellow-300)",
+      "yellow-400": "var(--color-yellow-400)",
+      "yellow-500": "var(--color-yellow-500)",
+      "yellow-600": "var(--color-yellow-600)",
+      "yellow-700": "var(--color-yellow-700)",
+      "yellow-800": "var(--color-yellow-800)",
+      "yellow-900": "var(--color-yellow-900)",
+      "green-100": "var(--color-green-100)",
+      "green-200": "var(--color-green-200)",
+      "green-300": "var(--color-green-300)",
+      "green-400": "var(--color-green-400)",
+      "green-500": "var(--color-green-500)",
+      "green-600": "var(--color-green-600)",
+      "green-700": "var(--color-green-700)",
+      "green-800": "var(--color-green-800)",
+      "green-900": "var(--color-green-900)",
+      "blue-100": "var(--color-blue-100)",
+      "blue-200": "var(--color-blue-200)",
+      "blue-300": "var(--color-blue-300)",
+      "blue-400": "var(--color-blue-400)",
+      "blue-500": "var(--color-blue-500)",
+      "blue-600": "var(--color-blue-600)",
+      "blue-700": "var(--color-blue-700)",
+      "blue-800": "var(--color-blue-800)",
+      "blue-900": "var(--color-blue-900)",
+      "violet-100": "var(--color-violet-100)",
+      "violet-200": "var(--color-violet-200)",
+      "violet-300": "var(--color-violet-300)",
+      "violet-400": "var(--color-violet-400)",
+      "violet-500": "var(--color-violet-500)",
+      "violet-600": "var(--color-violet-600)",
+      "violet-700": "var(--color-violet-700)",
+      "violet-800": "var(--color-violet-800)",
+      "violet-900": "var(--color-violet-900)",
+      "pink-100": "var(--color-pink-100)",
+      "pink-200": "var(--color-pink-200)",
+      "pink-300": "var(--color-pink-300)",
+      "pink-400": "var(--color-pink-400)",
+      "pink-500": "var(--color-pink-500)",
+      "pink-600": "var(--color-pink-600)",
+      "pink-700": "var(--color-pink-700)",
+      "pink-800": "var(--color-pink-800)",
+      "pink-900": "var(--color-pink-900)",
+
+      "gui-blue-default-light": "var(--color-gui-blue-default-light)",
+      "gui-blue-hover-light": "var(--color-gui-blue-hover-light)",
+      "gui-blue-active-light": "var(--color-gui-blue-active-light)",
+      "gui-blue-default-dark": "var(--color-gui-blue-default-dark)",
+      "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-error": "var(--color-gui-error)",
-      "gui-success": "var(--color-gui-success)",
+      "gui-success-green": "var(--color-gui-success-green)",
+      "gui-error-red": "var(--color-gui-error-red)",
+      "gui-focus": "var(--color-gui-focus)",
+      "gui-focus-outline": "var(--color-gui-focus-outline)",
+
+      transparent: "transparent",
+      "cool-black": "var(--color-neutral-1300)",
+      "active-orange": "var(--color-orange-600)",
+      "red-orange": "var(--color-orange-800)",
+      white: "var(--color-neutral-000)",
+      "electric-cyan": "var(--color-blue-400)",
+      "zingy-green": "var(--color-green-400)",
+      "bright-red": "var(--color-orange-700)",
+      "jazzy-pink": "var(--color-pink-500)",
+      "extra-light-grey": "var(--color-neutral-100)",
+      "light-grey": "var(--color-neutral-200)",
+      "mid-grey": "var(--color-neutral-500)",
+      "dark-grey": "var(--color-neutral-800)",
+      "charcoal-grey": "var(--color-neutral-1000)",
+      "gui-default": "var(--color-gui-blue-default-light)",
+      "gui-hover": "var(--color-gui-blue-hover-light)",
+      "gui-active": "var(--color-gui-blue-active-light)",
+      "gui-default-dark": "var(--color-gui-blue-default-dark)",
+      "gui-hover-dark": "var(--color-gui-blue-hover-dark)",
+      "gui-active-dark": "var(--color-gui-blue-active-dark)",
+      "gui-alt": "var(--color-neutral-1300)",
+      "gui-error": "var(--color-gui-error-red)",
+      "gui-success": "var(--color-gui-success-green)",
       "icon-linkedin": "var(--icon-color-linkedin)",
       "icon-twitter": "var(--icon-color-twitter)",
       "icon-glassdoor": "var(--icon-color-glassdoor)",
@@ -85,8 +173,44 @@ module.exports = {
       "icon-discord": "var(--icon-color-discord)",
     },
     fontFamily: {
-      sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
-      mono: ["Source Code Pro", "Courier", "monospace"],
+      sans_next: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],
+      serif: [
+        "ui-serif",
+        "Georgia",
+        "Cambria",
+        "Times New Roman",
+        "Times",
+        "serif",
+      ],
+      mono_source_code: ["Source Code Pro", "Courier", "monospace"],
+      sans: [
+        "Manrope",
+        "ui-sans-serif",
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Arial",
+        "Noto Sans",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji",
+      ],
+      mono: [
+        "JetBrains Mono",
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace",
+      ],
     },
     margin: (theme, { negative }) => ({
       auto: "auto",
@@ -124,6 +248,7 @@ module.exports = {
       20: "var(--spacing-20)",
       24: "var(--spacing-24)",
       32: "var(--spacing-32)",
+      36: "var(--spacing-36)",
       40: "var(--spacing-40)",
       48: "var(--spacing-48)",
       64: "var(--spacing-64)",
@@ -143,7 +268,7 @@ module.exports = {
       ...breakpoints(theme("screens")),
     }),
     boxShadow: {
-      subtle: "0px 1px 0px var(--color-mid-grey)",
+      subtle: "0px 1px 0px var(--color-neutral-500)",
       tooltip: "0px 5px 10px 0px #00000022",
       container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
       "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
@@ -155,11 +280,15 @@ module.exports = {
       "tighten-0.025": "var(--ls-tighten-0_025)",
       "tighten-0.02": "var(--ls-tighten-0_02)",
       "tighten-0.015": "var(--ls-tighten-0_015)",
+      "tighten-0.0125": "var(--ls-tighten-0_0125)",
       "tighten-0.01": "var(--ls-tighten-0_01)",
       "tighten-0.005": "var(--ls-tighten-0_005)",
       "tighten-0.0025": "var(--ls-tighten-0_0025)",
+      "tighten-0.0015": "var(--ls-tighten-0_0015)",
+      "widen-0": 0,
       "widen-0.1": "var(--ls-widen-0_1)",
       "widen-0.15": "var(--ls-widen-0_15)",
+      "widen-0.16": "var(--ls-widen-0_16)",
     },
     borderRadius: {
       none: "0",
@@ -170,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)",
@@ -185,7 +310,6 @@ module.exports = {
       },
       outline: {
         "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-white)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -225,10 +349,11 @@ module.exports = {
       backgroundImage: ["hover", "active", "focus"],
       filter: ["hover"],
       cursor: ["disabled"],
+      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/Code/component.html.erb

@@ -1,3 +0,0 @@
-<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
-  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
-<% end %>

package/src/core/Code/component.rb

@@ -1,12 +0,0 @@
-module AblyUi
-  module Core
-    class Code < ViewComponent::Base
-      include AblyUi::Core::Util
-      def initialize(language:, snippet:, text_size: 'ui-text-code')
-        @language = language
-        @snippet = snippet.try(:strip)
-        @text_size = text_size
-      end
-    end
-  end
-end

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

@@ -1,32 +0,0 @@
-<div class="ui-contact-footer font-sans antialiased" data-id="contact-footer">
-  <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="text-h3 mb-24">Live Chat</div>
-        <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
-      </div>
-      <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
-        Live chat unavailable
-      <% end %>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
-      <div class="flex-grow">
-        <div class="text-h3 mb-24">Call us</div>
-        <p class="text-p1 font-light">
-          <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
-          <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
-        </p>
-      </div>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="text-h3 mb-24">Technical and account support</div>
-        <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
-      </div>
-      <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
-    </div>
-  </div>
-</div>

package/src/core/ContactFooter/component.rb

@@ -1,13 +0,0 @@
-module AblyUi
-  module Core
-    class ContactFooter < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base
-
-      def initialize(url_base: AblyUi::Core::Util::DEFAULT_URL_BASE)
-        @url_base = url_base
-      end
-    end
-  end
-end